Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Theming with Sencha Cmd

Advanced Theming with Sencha Cmd

Lee's SenchaCon 2015 presentation; learn how to make beautiful and good looking themes with Sencha Cmd.

8a235da15adae86851fa3216834198ed?s=128

Lee Boonstra

April 08, 2015
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. None
  2. Advanced theming techniques for Ext JS Lee Boonstra, Sencha Inc.

    @ladysign
  3. Sales Engineer, Sencha Inc.

  4. A little about me… “I’m a writer, a developer and

    a technical trainer. I create fixes and I fix headaches” http://www.ladysign-apps.com @ladsyign
  5. None
  6. None
  7. A little about me… Although I am from Amsterdam… I

    hate riding a bike but I love JavaScript and videogames!
  8. A little about me…

  9. A little about me… Although I am from Amsterdam… I

    hate riding a bike but I love JavaScript and videogames!
  10. A talk about design! •  Theming inheritance •  Sass Basics

    •  Unique Components •  Theme Organization
  11. Design…

  12. 2 things I learned… 1.  The art director is always

    right 2.  In case he is not right, then we will do everything to make sure he get his right
  13. The problem we developers face… What the designer promised. (Is

    there a Lego image? Image 1. Some advanced construction. Image 2. Just square blocks) The toolkit that the developer has.
  14. In an ideal world… …the designer knows the complete framework.

  15. None
  16. Sencha Demo Apps h"p://dev.sencha.com/ext/5.0.1/examples/themes/index.html  

  17. Bootstrap App

  18. Prototype with Sencha Architect

  19. We want custom designs!

  20. Theming Inheritance

  21. Ext JS 6 - Toolkits •  CLASSIC Toolkit Components with

    the (Ext JS) desktop themes. •  MODERN Toolkit Components with the (Sencha Touch) mobile device themes.
  22. Out of the box themes

  23. Neptune theme-neptune theme-neptune-touch

  24. Crisp theme-crisp theme-crisp-touch

  25. New theme •  Internal name: “Coditas” •  Universal theme • 

    No images •  Just CSS & icon fonts
  26. CLASSIC Toolkit > Inheritance base neutral classic NEW ARIA neptune

    crisp neptune touch crisp touch gray
  27. MODERN Toolkit > Inheritance base cupertino cupertino -classic mountain view

    windows BB neptune
  28. You can extend too! base neutral neptune classic custom crisp

    crisp touch NEW neptune touch base cupertino cupertino -classic mountain view windows BB neptune custom
  29. Example of an extend from Neptune

  30. How to pick a theme?

  31. How to pick a theme? app.json “theme”:    “theme-­‐neptune”  

      •  theme-­‐neptune   •  theme-­‐neptune-­‐touch   •  theme-­‐crisp   •  theme-­‐crisp-­‐touch   •  theme-­‐cupertino   •  …    
  32. How to pick a theme? app.json “theme”:    “theme-­‐neptune”  

      •  theme-­‐neptune   •  theme-­‐neptune-­‐touch   •  theme-­‐crisp   •  theme-­‐crisp-­‐touch   •  theme-­‐cupertino   •  …  
  33. How to pick a theme (in Ext 6)? app.json  

    ///"theme":  "ext-­‐theme-­‐neptune",   "builds":  {      "classic":  {      "toolkit":  "classic",      "theme":  "theme-­‐neptune"    },    "modern":  {      "toolkit":  "modern",      "theme":  "theme-­‐cupertino"    }   }  
  34. Sass Basics

  35. Write Sass, compile CSS Ext JS 4, Ext JS 5

    & Sencha Touch 2 are running on top of Sass & Ruby! Ext JS 6 runs on top of Sencha Fashion! (but you will still write .SCSS files with the modern Sass syntax!) Sencha Cmd does the trick!
  36. Sencha Fashion •  JavaScript Compilation of Sass •  Way Faster!

    •  Runs in browser •  Possible to debug •  No Ruby (and Sass/CSS) dependencies! •  You don’t need to have Ruby installed •  No sass-cache meta files under source control •  Possible to extend via JavaScript i.s.o Ruby
  37. Sass Variables 1 $main&bg&color:#red;# 2 $main&color:##fff;# 3 # 4 .mypanel3{#

    5 333background:#$main&bg&color;# 6 333color:#$main&color;# 7 }# ## //".mypanel"{"background:"red;"color:"#fff;"}# #
  38. Code transformations 1 $main&bg&color:#red;# 2 .panel0{# 3 ###background:#lighten($main&bg&color,#30%);# 4 #

    5 000color:##fff;# 6 000padding:#20px;# 7 }# #
  39. Simple Math 1" $container*width:"300px;" 2" $font*size:"12px;" 3" $height:"1in4+"10px;" 4" .mypanel4{"

    5" """width:"($container*width4/"3)"0"20px;" 6" """line*height:"$font*size4*"1.5;" 7" """min*height:"$height;" 8" """margin:"0"10px;" 9" }" " //".mypanel"{"""width:"80px;"line6height:"18px;" min6height:"1.10417in;"margin:"0"10px;"}" "
  40. Sencha Variables •  Global CSS Variables •  Apply to the

    overall Style Sheet •  Component CSS Variables •  Apply to an Ext component
  41. Global Vars Global variables which change the Overall look of

    the application: $base-­‐color   $font-­‐family   $font-­‐size   …  
  42. Component Vars Variables for components specific: Button: $button-­‐default-­‐base-­‐color   $button-­‐default-­‐base-­‐color-­‐over

      $button-­‐default-­‐color   $button-­‐toolbar-­‐base-­‐color   …  
  43. How to compile?

  44. Compiling the SCSS Variables are located in the sass/var/Application.scss.  

    Compile the Style Sheet with: >  sencha  app  build     >  sencha  app  watch  
  45. Compiling the SCSS Variables are located in the sass/var/Application.scss.  

    Compile the Style Sheet with: >  sencha  app  build     >  sencha  app  watch  
  46. Unique Components

  47. Unique Components There are two solutions on how to give

    components a unique look and feel: •  Sencha UIs •  Style overrides UIs and CSS rules are located in: the sass/src/Application.scss.
  48. None
  49. UIs are Sass mixins under the hood An example of

    a mixin in Sass: 1 @mixin&custom,button($color)${$ 2 &&&background,color:$$color;$ 3 &&&&:hover&{$ 4 $$$$$$background,color:$lighten($color,$20%);$ 5 $$$}$ 6 }$ 7 $ 8 .x,btn.custom&{$ 9 $$$@include&custom,button(red);$ 10 }$ $
  50. Mixins Compiled to: 1 .x"btn.custom+{$ 2 $$$background"color:$red;$ 3 }$ 4

    .x"btn.custom:hover{$ 5 $$$background"color:$#ff6666;$ 6 }$ $
  51. UI Skins 1 @include)extjs.button.small.ui(# 2 ###$ui:#'cancel',# 3 ###$background.color:#red,# 4 ###$background.color.over:#darken(red,#50%),#

    5 ###$background.color.disabled:#lighten(red,#50%),# 6 ###$color:##fff,# 7 ###$glyph.color:##fff# 8 );# #
  52. Sencha UI’s There are various components that have UIs: • 

    Global CSS •  Panels •  Windows •  Toolbars •  Buttons
  53. Style overrides Every component in Ext JS will have it’s

    own prefix. .x-prefix
  54. Style overrides tips & tricks •  Never style on tag

    names, or internal IDs DOM is different across browsers or framework versions •  Never make selectors too specific When you change your views, the styling would break •  Create your own CSS classes on components Your code is future proof
  55. When Sencha UIs? Advantages •  Creates a new skin • 

    Set every CSS rule for this specific component •  By default cross browser compatible Disadvantages •  Can increase the file size of your Style Sheet •  Not every component has its own UI skin
  56. When Style overrides? Advantages •  Simple solution •  Won’t increase

    the file size of your Style Sheet Disadvantages •  Overrides are visible in the compiled CSS •  Hard to maintain •  You will need to understand the Ext JS DOM
  57. Theme Organization

  58. Customizing the app theme •  Variables into: sass/var/Application.scss •  Mixins

    and CSS rules into: sass/src/Application.scss
  59. Examples Variables Mixins and CSS rules Application.js sass/var/Application.scss view/main/Main.js sass/var/view/main/Main.scss

    view/settings/Settings.js sass/var/view/settings/Settings.scss Application.js sass/src/Application.scss view/main/Main.js sass/src/view/main/Main.scss view/settings/Settings.js sass/src/view/settings/Settings.scss
  60. Generating your own theme Advantages: •  This theme can be

    reused through all your projects •  You can create your own inheritance >  sencha  generate  theme  MyNewTheme  
  61. Why your own theme package? Workspace ext packages global theme

    packages/MyNewTheme/sass AUDIO APP VIDEO APP app specific styles AudioApp/sass/ app specific styles VideoApp/sass/
  62. Why your own theme package? Workspace ext packages global theme

    packages/MyNewTheme/sass AUDIO APP VIDEO APP app specific styles AudioApp/sass/ app specific styles VideoApp/sass/
  63. Example

  64. packages/MyTheme/package.json 1 {# 2 ####"name":#"MyNewTheme",# 3 ####"type":#"theme",# 4 ####"extend":#"theme%neptune",#//ext9theme9 neptune#in#ext#5#

    5 ####"toolkit":0"classic",0 6 ####"creator":#"Lee#Boonstra",# 7 ####"summary":#"Short#summary",# 8 ####"detailedDescription":#"Long#description",# 9 ####"version":#"1.0.0",# 10 ####"compatVersion":#"1.0.0",# 11 ####"format":#"1",# 12 ####"output":#"${package.dir}/build",# 13 ####"local":#true,# 14 ####"requires":#[]# 15 }# # #
  65. Customizing the global theme packages/MyNewTheme/sass/ packages/MyNewTheme/resources/ Ext.Component packages/MyNewTheme/sass/src/Component.scss Ext.grid.Panel packages/MyNewTheme/sass/src/grid/Panel.scss

    Ext.Component packages/MyNewTheme/sass/var/Component.scss Ext.grid.Panel packages/MyNewTheme/sass/var/grid/Panel.scss packages/MyNewTheme/resources/fonts/MyFont.ttf packages/MyNewTheme/resources/images/logo.png
  66. Compile order variables (var) mixins / CSS rules (src) app

    specific global theme code packages global theme code packages app specific
  67. !default Assign a default value in the (global) theme. Override

    the value in an app theme. Global Theme: $base-­‐color:  red  !default;   App Theme: $base-­‐color:  blue;  
  68. !default Example App Theme: (myapp/sass/) $base-­‐color:  red;   Global Theme:

    (packages/MyNewTheme/sass/) $base-­‐color:  blue;     Global Theme: (packages/MyNewTheme/sass/) $base-­‐color:  blue  !default;    
  69. app.json 1 /**" 2 *#Sass#configuration#properties." 3 #*/" 4 "sass":"{" 5

    ####"namespace":""MyApp"" 6 }," " "
  70. Conclusion

  71. Final words Theming in Ext JS requires: •  Knowledge of

    the framework •  Sass / CSS knowledge •  Sencha Variables •  CSS overrides vs Sencha Uis •  Knowledge of the theme inheritance
  72. Resources •  http://www.speakerdeck.com/savelee •  https://github.com/savelee/senchacon2015 •  https://github.com/savelee/ext6playground •  http://dev.sencha.com/ext/5.0.1/examples/themes/index.html • 

    http://docs.sencha.com/extjs/5.0/core_concepts/theming.html
  73. You can make beautiful themes!

  74. None
  75. None
  76. Questions?

  77. Why  would  you  choose  the  modern  toolkit  for  desktop  apps?

       >  Performance  reasons.  The  Modern  (Sencha  Touch)  toolkit,  has  a  layout  engine  which  uses  CSS3  i.s.o.  JS.   Will  the  modern  toolkit  /  themes  have  RTL?    >  Not  at  release.  But  eventually.   I  didn’t  see  the  Tizen  theme  listed.  Did  we  drop  it?    >  Not  officially.  It’s  just  not  there  yet.  On  request  we  will  add  it.   Will  the  new  Classic  theme,  extend  from  Neptune  and  have  the  same  vars?    >  Yes.  
  78. Thank you! Lee Boonstra @ladysign lee@sencha.com