51
Display suite of your display Drupalaton 2013

Presentation drupalaton, August 2013

  • Upload
    nascom

  • View
    351

  • Download
    0

Embed Size (px)

DESCRIPTION

Bram recently spoke at Drupalaton in Hungary and wants to share his learnings with the rest of us. Drupalaton Hungary welcomed some 120 visitors. 70 of which attended Bram's talk on Display Suite and how it works in Drupal 8. He elaborated on why and how to use the module, explaining its possibilities and advantages.

Citation preview

Page 1: Presentation drupalaton, August 2013

Display  suite  

of  your  display  

Drupalaton  2013  

Page 2: Presentation drupalaton, August 2013

Bram  Goffings  Drupal  developer  @  nascom  Twi?er:  @aspilicious  D.o:  @aspilicious  Co-­‐maintainer  Display  Suite  Play  a  mean  game  of  table  tennis  

About  me  

Page 3: Presentation drupalaton, August 2013

Quick  demo  

Page 4: Presentation drupalaton, August 2013

What  has  changed?  

Page 5: Presentation drupalaton, August 2013

ConfiguraNon  management  (cmi)    

SeQngs  are  stored  in  configuraNon  files    

 #  ds.config.yml    field_template:  '0'    .-­‐default:  theme_field    .-­‐kill-­‐colon:  '0’  

 

Page 6: Presentation drupalaton, August 2013

ConfiguraNon  management  (cmi)    Custom  fields  made  in  the  UI  are  saved  in  yml  files.    

 #  ds.field.test.yml    proper:es:        code:            value:  test            format:  ds_code          use_token:  0    field:  test    label:  test    ui_limit:  ''    en::es:        node:  node    field_type:  code_field  

 

Page 7: Presentation drupalaton, August 2013

ConfiguraNon  management  (cmi)    Custom  field  and  region  classes  are  saved  in  yml  files    

 #  ds.classes.yml    regions:  'test_region_class'    fields:  'test_fields_class'  

Page 8: Presentation drupalaton, August 2013

ConfiguraNon  management  (cmi)    ConfiguraNon  schema’s  are  NOT  YET  wri?en  

Page 9: Presentation drupalaton, August 2013

Twig  

     

Display  suite  uses  twig  templates  now      

Page 10: Presentation drupalaton, August 2013

Twig    Display  Suite  one-­‐col  layout  

{#  /**    *  @file    *  Display  Suite  1  column  template.    *    *  Available  variables:    *  -­‐  ds_content_wrapper:  @todo    *  -­‐  a?ributes:  @todo    *  -­‐  Ntle_suffix:  @todo    *  -­‐  ds_content:  @todo    */  #}  <{{  ds_content_wrapper  }}  class="ds-­‐1col  {{  a?ributes.class  }}  clearfix"  {{  a?ributes  }}  >            {%  if  Ntle_suffix.contextual_links  is  not  null  %}          {{  Ntle_suffix.contextual_links  }}      {%  endif  %}        {{  ds_content  }}  </{{  ds_content_wrapper  }}>    {%  if  drupal_render_children  is  not  null  %}      {{  drupal_render_children  }}  {%  endif  %}  

Page 11: Presentation drupalaton, August 2013

Twig    Display  Suite  one-­‐col  layout  

{#  /**    *  @file    *  Display  Suite  1  column  template.    *    *  Available  variables:    *  -­‐  ds_content_wrapper:  @todo    *  -­‐  a?ributes:  @todo    *  -­‐  Ntle_suffix:  @todo    *  -­‐  ds_content:  @todo    */  #}  <{{  ds_content_wrapper  }}  class="ds-­‐1col  {{  a?ributes.class  }}  clearfix"  {{  a?ributes  }}  >            {%  if  Ntle_suffix.contextual_links  is  not  null  %}          {{  Ntle_suffix.contextual_links  }}      {%  endif  %}        {{  ds_content  }}  </{{  ds_content_wrapper  }}>    {%  if  drupal_render_children  is  not  null  %}      {{  drupal_render_children  }}  {%  endif  %}  

ç  comments  

Page 12: Presentation drupalaton, August 2013

Twig    Display  Suite  one-­‐col  layout  

{#  /**    *  @file    *  Display  Suite  1  column  template.    *    *  Available  variables:    *  -­‐  ds_content_wrapper:  @todo    *  -­‐  a?ributes:  @todo    *  -­‐  Ntle_suffix:  @todo    *  -­‐  ds_content:  @todo    */  #}  <{{  ds_content_wrapper  }}  class="ds-­‐1col  {{  a?ributes.class  }}  clearfix"  {{  a?ributes  }}  >            {%  if  Ntle_suffix.contextual_links  is  not  null  %}          {{  Ntle_suffix.contextual_links  }}      {%  endif  %}        {{  ds_content  }}  </{{  ds_content_wrapper  }}>    {%  if  drupal_render_children  is  not  null  %}      {{  drupal_render_children  }}  {%  endif  %}  

ç  Contextual  links  support  

Page 13: Presentation drupalaton, August 2013

Twig    Display  Suite  one-­‐col  layout  

{#  /**    *  @file    *  Display  Suite  1  column  template.    *    *  Available  variables:    *  -­‐  ds_content_wrapper:  @todo    *  -­‐  a?ributes:  @todo    *  -­‐  Ntle_suffix:  @todo    *  -­‐  ds_content:  @todo    */  #}  <{{  ds_content_wrapper  }}  class="ds-­‐1col  {{  a?ributes.class  }}  clearfix"  {{  a?ributes  }}  >            {%  if  Ntle_suffix.contextual_links  is  not  null  %}          {{  Ntle_suffix.contextual_links  }}      {%  endif  %}        {{  ds_content  }}  </{{  ds_content_wrapper  }}>    {%  if  drupal_render_children  is  not  null  %}      {{  drupal_render_children  }}  {%  endif  %}  

ç  DS  form  support  

Page 14: Presentation drupalaton, August 2013

Twig    Display  Suite  one-­‐col  layout  

{#  /**    *  @file    *  Display  Suite  1  column  template.    *    *  Available  variables:    *  -­‐  ds_content_wrapper:  @todo    *  -­‐  a?ributes:  @todo    *  -­‐  Ntle_suffix:  @todo    *  -­‐  ds_content:  @todo    */  #}  <{{  ds_content_wrapper  }}  class="ds-­‐1col  {{  a?ributes.class  }}  clearfix"  {{  a?ributes  }}  >            {%  if  Ntle_suffix.contextual_links  is  not  null  %}          {{  Ntle_suffix.contextual_links  }}      {%  endif  %}        {{  ds_content  }}  </{{  ds_content_wrapper  }}>    {%  if  drupal_render_children  is  not  null  %}      {{  drupal_render_children  }}  {%  endif  %}  

Actual  template!  

Page 15: Presentation drupalaton, August 2013

Twig  

     

Drush  layout  script  is  not  yet  (completely)  working      

Page 16: Presentation drupalaton, August 2013

RouNng,  controllers  and  Symfony    •  Converted  hook_menu  to  the  new  rouNng  system  •  Converted  procedural  callbacks  to  controller  classes  •  Converted  form  callbacks  to  form  classes  •  Made  use  of  the  symfony  request  objects.  •  …  

Page 17: Presentation drupalaton, August 2013

RouNng,  controllers  and  Symfony    

   

I  need  a  few  hours  to  go  through  all  these  changes.  

Page 18: Presentation drupalaton, August 2013

RouNng,  controllers  and  Symfony    

 I  need  a  few  hours  to  go  through  all  the  changes.  

 Browse  through  the  Display  Suite  UI  module  source  code  if  you’re  curious  how  the  rouNng  system  is  working  in  D8  now.  

Page 19: Presentation drupalaton, August 2013

RouNng,  controllers  and  Symfony    

 I  need  a  few  hours  to  go  through  all  the  changes.  

 Browse  through  the  Display  Suite  UI  module  source  code  if  you’re  curious  how  the  rouNng  system  is  working  in  D8  now.  

 The  router  stuff  will  sNll  change  a  lot  before  Drupal  8  is  released.  

Page 20: Presentation drupalaton, August 2013

Plugins  

Page 21: Presentation drupalaton, August 2013

Plugins      

Display  suite  uses  plugins  for  custom  fields  wri?en  in  code    

Page 22: Presentation drupalaton, August 2013

Plugins      

Display  suite  uses  plugins  for  custom  fields  wri?en  in  code    

Plugins  replace  hook_ds_fields_info    

Page 23: Presentation drupalaton, August 2013

Plugins      

Display  suite  uses  plugins  for  custom  fields  wri?en  in  code    

Plugins  replace  hook_ds_fields_info    

Hook_ds_fields_info_alter  sNll  exists    

Page 24: Presentation drupalaton, August 2013

What  is  a  DS  field  plugin?  

Page 25: Presentation drupalaton, August 2013

What  is  a  DS  field  plugin?      

A  class  that  implements  the  DsFieldInterface  interface  

Page 26: Presentation drupalaton, August 2013

What  is  a  DS  field  plugin?      

A  class  that  implements  the  DsFieldInterface  interface  

 Placed  in  the  DsField  namespace  

 

namespace  Drupal\<module>\Plugin\DsField;  

Page 27: Presentation drupalaton, August 2013

What  is  a  DS  field  plugin?      

A  class  that  implements  the  DsFieldInterface  interface  

 Placed  in  the  DsField  namespace  

 

namespace  Drupal\<module>\Plugin\DsField;      

What  does  that  mean???  

Page 28: Presentation drupalaton, August 2013

Let’s  build  an  example  module  to  find  out!!  

Page 29: Presentation drupalaton, August 2013

ds_example.info.yml  name:  'Display  Suite  example'  descripNon:  'My  first  awesome  field  plugin'  type:  module  core:  8.x  package:  'Display  Suite'  

 

Page 30: Presentation drupalaton, August 2013

ds_example.info.yml  name:  'Display  Suite  example'  descripNon:  'My  first  awesome  field  plugin'  type:  module  core:  8.x  package:  'Display  Suite'  

 

Page 31: Presentation drupalaton, August 2013

ds_example.module  <?php  

 

Page 32: Presentation drupalaton, August 2013

ds_example.module  <?php  

 

Seriously?  

Page 33: Presentation drupalaton, August 2013

ds_example.module  <?php  

 

Seriously?      

Yeah…  ;-­‐(    But  hopefully  we  can  make  this  file  opNonal  soon.  

Page 34: Presentation drupalaton, August 2013

Hello  plugin  

Page 35: Presentation drupalaton, August 2013

Hello  plugin  •  A  field  that  prints  hello  

Page 36: Presentation drupalaton, August 2013

Hello  plugin  •  A  field  that  prints  hello  •  Place  inside  the  Drupal\<module>\Plugin\DsField  namespace  

Page 37: Presentation drupalaton, August 2013

Hello  plugin  •  A  field  that  prints  hello  •  Place  inside  the  Drupal\ds_example\Plugin\DsField  namespace  

Page 38: Presentation drupalaton, August 2013

Hello  plugin  •  A  field  that  prints  hello  •  Place  inside  the  Drupal\ds_example\Plugin\DsField  namespace  

Page 39: Presentation drupalaton, August 2013

Hello  plugin  •  A  field  that  prints  hello  •  Place  inside  the  Drupal\ds_example\Plugin\DsField  namespace  

That  are  a  lot  of  directories!!  

Page 40: Presentation drupalaton, August 2013

Hello  plugin  •  A  field  that  prints  hello  •  Place  inside  the  Drupal\ds_example\Plugin\DsField  namespace  

That  are  a  lot  of  directories!!    

Get  used  to  it  J  

Page 41: Presentation drupalaton, August 2013

Hello  plugin  <?php    namespace  Drupal\ds_example\Plugin\DsField;    use  Drupal\Core\AnnotaNon\TranslaNon;  use  Drupal\ds\AnnotaNon\DsField;  use  Drupal\ds\Plugin\DsField\DsFieldBase;    /**    *  @DsField(    *      id  =  "hello",    *      Ntle  =  @TranslaNon("Hello"),    *      enNty_type  =  "node",    *      module  =  "ds_example"    *  )    */  class  Hello  extends  DsFieldBase  {        public  funcNon  render($field)  {          return  "hello";      }    }    

Page 42: Presentation drupalaton, August 2013

Hello  plugin  <?php    namespace  Drupal\ds_example\Plugin\DsField;    use  Drupal\Core\AnnotaNon\TranslaNon;  use  Drupal\ds\AnnotaNon\DsField;  use  Drupal\ds\Plugin\DsField\DsFieldBase;    /**    *  @DsField(    *      id  =  "hello",    *      Ntle  =  @TranslaNon("Hello"),    *      enNty_type  =  "node",    *      module  =  "ds_example"    *  )    */  class  Hello  extends  DsFieldBase  {        public  funcNon  render($field)  {          return  "hello";      }    }    

Page 43: Presentation drupalaton, August 2013

Hello  plugin  <?php    namespace  Drupal\ds_example\Plugin\DsField;    use  Drupal\Core\AnnotaNon\TranslaNon;  use  Drupal\ds\AnnotaNon\DsField;  use  Drupal\ds\Plugin\DsField\DsFieldBase;    /**    *  @DsField(    *      id  =  "hello",    *      Ntle  =  @TranslaNon("Hello"),    *      enNty_type  =  "node",    *      module  =  "ds_example"    *  )    */  class  Hello  extends  DsFieldBase  {        public  funcNon  render($field)  {          return  "hello";      }    }    

Page 44: Presentation drupalaton, August 2013

Hello  plugin  <?php    namespace  Drupal\ds_example\Plugin\DsField;    use  Drupal\Core\AnnotaNon\TranslaNon;  use  Drupal\ds\AnnotaNon\DsField;  use  Drupal\ds\Plugin\DsField\DsFieldBase;    /**    *  @DsField(    *      id  =  "hello",    *      Ntle  =  @TranslaNon("Hello"),    *      enNty_type  =  "node",    *      module  =  "ds_example"    *  )    */  class  Hello  extends  DsFieldBase  {        public  funcNon  render($field)  {          return  "hello";      }    }    

Page 45: Presentation drupalaton, August 2013

Hello  plugin  <?php    namespace  Drupal\ds_example\Plugin\DsField;    use  Drupal\Core\AnnotaNon\TranslaNon;  use  Drupal\ds\AnnotaNon\DsField;  use  Drupal\ds\Plugin\DsField\DsFieldBase;    /**    *  @DsField(    *      id  =  "hello",    *      Ntle  =  @TranslaNon("Hello"),    *      enNty_type  =  "node",    *      module  =  "ds_example"    *  )    */  class  Hello  extends  DsFieldBase  {        public  funcNon  render($field)  {          return  "hello";      }    }    

Page 46: Presentation drupalaton, August 2013

Hello  plugin  <?php    namespace  Drupal\ds_example\Plugin\DsField;    use  Drupal\Core\AnnotaNon\TranslaNon;  use  Drupal\ds\AnnotaNon\DsField;  use  Drupal\ds\Plugin\DsField\DsFieldBase;    /**    *  @DsField(    *      id  =  "hello",    *      Ntle  =  @TranslaNon("Hello"),    *      enNty_type  =  "node",    *      module  =  "ds_example"    *  )    */  class  Hello  extends  DsFieldBase  {        public  funcNon  render($field)  {          return  "hello";      }    }    

Page 47: Presentation drupalaton, August 2013

Hello  plugin  <?php    namespace  Drupal\ds_example\Plugin\DsField;    use  Drupal\Core\AnnotaNon\TranslaNon;  use  Drupal\ds\AnnotaNon\DsField;  use  Drupal\ds\Plugin\DsField\DsFieldBase;    /**    *  @DsField(    *      id  =  "hello",    *      Ntle  =  @TranslaNon("Hello"),    *      enNty_type  =  "node",    *      module  =  "ds_example"    *  )    */  class  Hello  extends  DsFieldBase  {        public  funcNon  render($field)  {          return  "hello";      }    }    

Page 48: Presentation drupalaton, August 2013

Quick  demo  (part  2)  

Page 49: Presentation drupalaton, August 2013

Other  funcNonal  changes  

•  Field  templates  are  moved  from  ds  extras  to  ds  core  

•  CTools  integraNon  is  gone.  So  no  fancy  dynamic  field  integraNon  at  the  moment.  

Page 50: Presentation drupalaton, August 2013

Your  quesNons?!  

Page 51: Presentation drupalaton, August 2013

Please  test  it!    

and  file  a  bug  report  when  it  fails*  

*  When  filing  a  bug  report,  be  sure  it  isn’t  filed  yet.  Try  to  be  as  specific  as  possible.  Don’t  run  Display  Suite  on  a  “real”  drupal  8  site  yet  (if  they  exist).  Stuff  could  break.  We  are  not  responsible  for  the  mental  pain  a  broken  Display  Suite  module  causes  when  there  isn’t  an  official  release  yet.  Not  everything  is  converted  yet,  you  can  ask  us  in  irc  if  you’re  in  doubt.