Advanced Theming with Sencha Cmd

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Advanced theming techniques for Ext JS Lee Boonstra, Sencha Inc. @ladysign

Slide 3

Slide 3 text

Sales Engineer, Sencha Inc.

Slide 4

Slide 4 text

A little about me… “I’m a writer, a developer and a technical trainer. I create ﬁxes and I ﬁx headaches” http://www.ladysign-apps.com @ladsyign

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

A little about me… Although I am from Amsterdam… I hate riding a bike but I love JavaScript and videogames!

Slide 8

Slide 8 text

A little about me…

Slide 9

Slide 9 text

A little about me… Although I am from Amsterdam… I hate riding a bike but I love JavaScript and videogames!

Slide 10

Slide 10 text

A talk about design! •  Theming inheritance •  Sass Basics •  Unique Components •  Theme Organization

Slide 11

Slide 11 text

Design…

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

In an ideal world… …the designer knows the complete framework.

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Bootstrap App

Slide 18

Slide 18 text

Prototype with Sencha Architect

Slide 19

Slide 19 text

We want custom designs!

Slide 20

Slide 20 text

Theming Inheritance

Slide 21

Slide 21 text

Ext JS 6 - Toolkits •  CLASSIC Toolkit Components with the (Ext JS) desktop themes. •  MODERN Toolkit Components with the (Sencha Touch) mobile device themes.

Slide 22

Slide 22 text

Out of the box themes

Slide 23

Slide 23 text

Neptune theme-neptune theme-neptune-touch

Slide 24

Slide 24 text

Crisp theme-crisp theme-crisp-touch

Slide 25

Slide 25 text

New theme •  Internal name: “Coditas” •  Universal theme •  No images •  Just CSS & icon fonts

Slide 26

Slide 26 text

CLASSIC Toolkit > Inheritance base neutral classic NEW ARIA neptune crisp neptune touch crisp touch gray

Slide 27

Slide 27 text

MODERN Toolkit > Inheritance base cupertino cupertino -classic mountain view windows BB neptune

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Example of an extend from Neptune

Slide 30

Slide 30 text

How to pick a theme?

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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" } }

Slide 34

Slide 34 text

Sass Basics

Slide 35

Slide 35 text

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 ﬁles with the modern Sass syntax!) Sencha Cmd does the trick!

Slide 36

Slide 36 text

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 ﬁles under source control •  Possible to extend via JavaScript i.s.o Ruby

Slide 37

Slide 37 text

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;"}# #

Slide 38

Slide 38 text

Code transformations 1 $main&bg&color:#red;# 2 .panel0{# 3 ###background:#lighten($main&bg&color,#30%);# 4 # 5 000color:##fff;# 6 000padding:#20px;# 7 }# #

Slide 39

Slide 39 text

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;"}" "

Slide 40

Slide 40 text

Sencha Variables •  Global CSS Variables •  Apply to the overall Style Sheet •  Component CSS Variables •  Apply to an Ext component

Slide 41

Slide 41 text

Global Vars Global variables which change the Overall look of the application: $base-‐color $font-‐family $font-‐size …

Slide 42

Slide 42 text

Component Vars Variables for components speciﬁc: Button: $button-‐default-‐base-‐color $button-‐default-‐base-‐color-‐over $button-‐default-‐color $button-‐toolbar-‐base-‐color …

Slide 43

Slide 43 text

How to compile?

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Unique Components

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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 }$ $

Slide 50

Slide 50 text

Mixins Compiled to: 1 .x"btn.custom+{$ 2 $$$background"color:$red;$ 3 }$ 4 .x"btn.custom:hover{$ 5 $$$background"color:$#ff6666;$ 6 }$ $

Slide 51

Slide 51 text

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 );# #

Slide 52

Slide 52 text

Sencha UI’s There are various components that have UIs: •  Global CSS •  Panels •  Windows •  Toolbars •  Buttons

Slide 53

Slide 53 text

Style overrides Every component in Ext JS will have it’s own preﬁx. .x-preﬁx

Slide 54

Slide 54 text

Style overrides tips & tricks •  Never style on tag names, or internal IDs DOM is different across browsers or framework versions •  Never make selectors too speciﬁc When you change your views, the styling would break •  Create your own CSS classes on components Your code is future proof

Slide 55

Slide 55 text

When Sencha UIs? Advantages •  Creates a new skin •  Set every CSS rule for this speciﬁc component •  By default cross browser compatible Disadvantages •  Can increase the ﬁle size of your Style Sheet •  Not every component has its own UI skin

Slide 56

Slide 56 text

When Style overrides? Advantages •  Simple solution •  Won’t increase the ﬁle 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

Slide 57

Slide 57 text

Theme Organization

Slide 58

Slide 58 text

Customizing the app theme •  Variables into: sass/var/Application.scss •  Mixins and CSS rules into: sass/src/Application.scss

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Generating your own theme Advantages: •  This theme can be reused through all your projects •  You can create your own inheritance > sencha generate theme MyNewTheme

Slide 61

Slide 61 text

Why your own theme package? Workspace ext packages global theme packages/MyNewTheme/sass AUDIO APP VIDEO APP app speciﬁc styles AudioApp/sass/ app speciﬁc styles VideoApp/sass/

Slide 62

Slide 62 text

Why your own theme package? Workspace ext packages global theme packages/MyNewTheme/sass AUDIO APP VIDEO APP app speciﬁc styles AudioApp/sass/ app speciﬁc styles VideoApp/sass/

Slide 63

Slide 63 text

Example

Slide 64

Slide 64 text

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 }# # #

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Compile order variables (var) mixins / CSS rules (src) app speciﬁc global theme code packages global theme code packages app speciﬁc

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

app.json 1 /**" 2 *#Sass#configuration#properties." 3 #*/" 4 "sass":"{" 5 ####"namespace":""MyApp"" 6 }," " "

Slide 70

Slide 70 text

Conclusion

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

You can make beautiful themes!

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Questions?

Slide 77

Slide 77 text

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 oﬃcially. 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.

Slide 78

Slide 78 text

Thank you! Lee Boonstra @ladysign [email protected]