Advanced Theming with Sencha Cmd

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

Transcript

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
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.
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.
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!
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