Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Materializing Ext JS Steffen Hiller, Sencha

Slide 3

Slide 3 text

This talk 3 Understanding
 Material Design Building
 Material Design

Slide 4

Slide 4 text

4 I’m Steffen Hiller Working as
 Senior Solutions Engineer at Sencha. Working with
 Ext JS since 2007 and Sencha Touch since 2010. Working from
 Barcelona, Spain and Aruba. When not working:
 Kitesurfing.

Slide 5

Slide 5 text

What is Material Design? A design language for visual, motion, and interaction design across platforms and devices developed by Google and released in June 2014.

Slide 6

Slide 6 text

What is Material Design? Inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Slide 7

Slide 7 text

https://www.youtube.com/watch?v=Q8TXgCzxEnw

Slide 8

Slide 8 text

The material environment is a 3D space, which means all objects have x, y, and z dimensions. Material Design Properties

Slide 9

Slide 9 text

All shadows in the material environment are cast by a key light and an ambient light. = Material Design Properties

Slide 10

Slide 10 text

Material Design Properties Material has varying x and y dimensions and a uniform thickness (1dp).
 Material never has a thickness of 0.

Slide 11

Slide 11 text

Material is solid.
 Input events cannot pass through material. Material Design Properties

Slide 12

Slide 12 text

Multiple material elements cannot occupy the same point in space simultaneously. Material Design Properties

Slide 13

Slide 13 text

Material Design Properties Material never bends
 or folds.

Slide 14

Slide 14 text

Material Design Guideline http://www.google.com/design/spec

Slide 15

Slide 15 text

Let’s build

Slide 16

Slide 16 text

Requirements Application for managing the data of the SenchaCon mobile application.
 
 Manage: • Sessions • Speakers • Tracks • Locations 16

Slide 17

Slide 17 text

17 Layout https://docs.google.com/ http://www.google.com/design/

Slide 18

Slide 18 text

18 Layout

Slide 19

Slide 19 text

Building the UI

Slide 20

Slide 20 text

Theme Package $ sencha generate package -t theme theme-material

Slide 21

Slide 21 text

Theme Package /packages/material-theme/package.json /app.json "name": "theme-material",
 "type": "theme",
 "extend": "ext-theme-neptune" "theme": "theme-material"

Slide 22

Slide 22 text

Toolbar

Slide 23

Slide 23 text

Toolbar Toolbars have a standard height,
 56 dp on mobile and 64 dp on desktop,
 but they can be taller.

Slide 24

Slide 24 text

Toolbar

Slide 25

Slide 25 text

Layout All components align to an 8px square baseline grid.
 
 Type aligns to a 4px baseline grid.
 
 Iconography in toolbars align to a 4px square baseline grid.

Slide 26

Slide 26 text

Shadow

Slide 27

Slide 27 text

Shadow Styles .z-depth-1 {
 @include box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12));
 }
 
 .z-depth-1-half {
 @include box-shadow(0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15));
 }
 
 .z-depth-2 {
 @include box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19));
 }
 
 .z-depth-3 { … } …

Slide 28

Slide 28 text

Font Roboto

Slide 29

Slide 29 text

Font @include google-webfont(Roboto, '400,500'); $material-color-black: rgba(0, 0, 0, 0.87); // text
 $material-color-black-secondary: rgba(0, 0, 0, 0.54); // secondary text and icons
 $material-color-black-hint: rgba(0, 0, 0, 0.26); // disabled and hint text
 $material-color-black-dividers: rgba(0, 0, 0, 0.12); // dividers
 
 $material-color-white: rgba(255, 255, 255, 1); // text and icons
 $material-color-white-secondary: rgba(255, 255, 255, 0.7); // secondary text
 $material-color-white-hint: rgba(255, 255, 255, 0.3); // disabled and hint text
 $material-color-white-dividers: rgba(255, 255, 255, 0.12); // dividers

Slide 30

Slide 30 text

Icons http://github.com/google/material-design-icons http://github.com/zavoloklom/material-design-iconic-font $md-font-path: 'fonts';
 $md-version: '1.1.1';
 
 @font-face {
 font-family: 'Material Design Iconic Font';
 src: url('#{$md-font-path}/Material-Design-Iconic-Font.eot?v=#{$md-version}');
 src: url(‘#{$md-font-path}/Material-Design-Iconic-Font.eot?#iefix&v=#{$md-ve…
 url('#{$md-font-path}/Material-Design-Iconic-Font.woff?v=#{$md-version}') for…
 url('#{$md-font-path}/Material-Design-Iconic-Font.ttf?v=#{$md-version}') form…
 url(‘#{$md-font-path}/Material-Design-Iconic-Font.svg?v=#{$md-version}#Mat…
 font-weight: normal;
 font-style: normal;
 }

Slide 31

Slide 31 text

Toolbar Code header: {
 title: 'Sessions',
 titlePosition: 1,
 height: 64,
 defaults: {
 xtype: 'button',
 scale: 'medium'
 },
 items: [
 { glyph: 62113, margin: '0 31 0 8’ }, // sandwich icon
 { glyph: 61536, margin: '0 9’ } // gear icon
 ]
 } Ext.setGlyphFontFamily('Material Design Iconic Font');

Slide 32

Slide 32 text

Toolbar Styles $panel-header-font-size: 18px !default;
 $panel-header-line-height: 18px !default; .x-panel-header {
 @extend .z-depth-1;
 }

Slide 33

Slide 33 text

Toolbar padding: '16 72 72 72'

Slide 34

Slide 34 text

Grid

Slide 35

Slide 35 text

Grid Styles $grid-header-background-color: rgba(0, 0, 0, 0);
 $grid-header-border-width: 0;
 
 $grid-column-header-border-width: 0;
 $grid-column-header-color: rgb(136, 136, 136);
 $grid-column-header-font-weight: 500;
 $grid-column-header-line-height: 39px;
 
 $grid-row-border-color: rgb(227, 227, 227);
 $grid-row-cell-alt-background-color: white;
 $grid-row-cell-color: $material-color-black-secondary;
 $grid-row-cell-line-height: $grid-column-header-line-height;

Slide 36

Slide 36 text

Grid Styles .x-grid {
 background-color: rgb(238, 238, 238);
 
 .x-grid-body {
 border: none;
 }
 
 .x-grid-view {
 border: 1px solid #d3d3d3;
 border-bottom: 1px solid #c4c4c4;
 
 @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.07));
 }
 }

Slide 37

Slide 37 text

Grid .x-grid {
 .bold .x-grid-cell-inner {
 font-weight: 500;
 color: #444;
 }
 } {
 name: 'Title',
 tdCls: 'bold'
 }

Slide 38

Slide 38 text

Floating Action Button Used for a special type of promoted action Only one per screen Use for positive actions
 like Create, Favorite, Share, Navigate, and Explore.

Slide 39

Slide 39 text

Floating Action Button Positive actions like Create, Favorite, Share, Navigate, and Explore. Avoid for destructive actions like Archive or Trash

Slide 40

Slide 40 text

Floating Action Button

Slide 41

Slide 41 text

41 Floating Action Button Code Ext.define('Material.button.FloatingAction', {
 extend: 'Ext.Button',
 xtype: 'floatingactionbutton',
 
 floating: true,
 shadow: false,
 ui: 'floating-action',
 width: 55,
 height: 55,
 
 glyph: 61691 // plus icon
 });

Slide 42

Slide 42 text

Floating Action Button Styles $floating-action-button-color: #fff !default;
 $floating-action-button-background-color: $base-color !default; .x-btn-floating-action {
 color: $floating-action-button-color;
 background-color: $floating-action-button-background-color;
 font-size: 24px;
 @include border-radius(50%);
 
 @include transition(all .3s ease-out);
 @extend .z-depth-1;
 &:hover:not(.x-btn-disabled) {
 @extend .z-depth-1-half;
 }
 }

Slide 43

Slide 43 text

Floating Action Button Usage afterComponentLayout: function () {
 var addButtonOffsets = [this.el.getPadding('r') * -1, (this.el.getPadding('b') + 56) * -1];
 
 this.callParent(arguments);
 
 this.addButton = this.addButton || Ext.create('Material.button.FloatingAction', {
 ownerCt: this,
 handler: 'onAddClick'
 });
 
 this.addButton.showBy(this, 'c-br', addButtonOffsets);
 }

Slide 44

Slide 44 text

Floating Action Button

Slide 45

Slide 45 text

Dialog

Slide 46

Slide 46 text

Raised Buttons Emphasize functions that would otherwise get lost on a busy or wide space.

Slide 47

Slide 47 text

Flat Buttons For contexts such as toolbars and dialogs to avoid gratuitous layering.

Slide 48

Slide 48 text

Flat Button States

Slide 49

Slide 49 text

Flat Button States $include-button-default-toolbar-medium-ui: false; @include extjs-button-toolbar-medium-ui(
 $ui: 'default',
 $color: $base-color,
 $border-radius: 2px,
 $border-width: 0px,
 $border-color: transparent,
 $border-color-over: transparent,
 $background-color: transparent,
 $background-color-over: rgba(153, 153, 153, 0.2),
 $background-color-pressed: rgba(153, 153, 153, 0.4),
 $inner-border-width-focus: 0px,
 $inner-border-width-focus-over: 0px,
 $inner-border-width-focus-pressed: 0px,
 $opacity-disabled: 0.26
 ); .x-btn-inner-default-toolbar-medium {
 text-transform: uppercase;
 }

Slide 50

Slide 50 text

Dialog Styles $window-header-color: $color;
 $window-header-background-color: white !default;
 
 // $window-border-radius: 2px !default;
 $window-border-radius: 0px !default;
 $window-border-width: 8px !default;
 $window-border-color: #fff !default;
 
 $window-padding: 0px;
 $window-header-text-padding: 24px;
 
 $window-force-header-border: false;

Slide 51

Slide 51 text

Dialog Styles .x-window {
 &, .x-window-header, .x-docked-bottom {
 @include border-radius(2px);
 }
 
 .x-toolbar-docked-bottom {
 height: 48px;
 border-top: 1px solid $material-color-black-dividers !important;
 padding-right: 8px;
 padding-bottom: 8px;
 }
 
 .x-btn {
 height: 36px;
 min-width: 88px;
 }
 } .x-window {
 @extend .z-depth-2;
 } .x-css-shadow {
 @include box-shadow(none !important);
 }

Slide 52

Slide 52 text

Dialog

Slide 53

Slide 53 text

Form

Slide 54

Slide 54 text

Form

Slide 55

Slide 55 text

Form Styles .x-form-item-label {
 position: absolute;
 top: 12px;
 
 height: 22px;
 
 color: #9E9E9E;
 font-size: 15px;
 line-height: 1.5;
 
 @include transition(all 0s ease-out 0s); .x-field-focus &,
 .not-empty & {
 font-size: 12px;
 @include transform(translateY(-26px));
 }
 
 .x-field-focus & {
 color: $base-color;
 }
 
 .x-field-focus &,
 .had-focus & {
 @include transition-duration(0.2s);
 }
 }

Slide 56

Slide 56 text

Form

Slide 57

Slide 57 text

Animation Form Field Animation Floating Button Animation Dialog Open Animation Drawer Open Animation

Slide 58

Slide 58 text

onAddClick: function (button) {
 var grid = this.getView(),
 store = grid.getStore(),
 record = Ext.create(store.getModel());
 
 this.showEditView(grid, record, 'New', button);
 },
 
 onRowClick: function (grid, record, tr) {
 this.showEditView(grid, record, 'Edit', Ext.fly(tr));
 } Dialog Open Animation showEditView: function (grid, record, action, animateTarget) {
 var store = grid.getStore(),
 editView = Ext.create('CM.view.Edit', {
 model: store.getModel(),
 animateTarget: animateTarget
 });
 
 editView.show();
 }

Slide 59

Slide 59 text

Drawer Open Animation var menu = Ext.create('CM.view.Drawer', {
 height: Ext.getBody().getHeight()
 });
 
 menu.showAt(-200, 0);
 
 menu.showAt(0, 0, {
 duration: 300
 });

Slide 60

Slide 60 text

One more thing http://www.senchacon.com

Slide 61

Slide 61 text

One more thing $base-color: #006c8f;
 
 $floating-action-button-color: #fff;
 $floating-action-button-background-color: #8ac440;

Slide 62

Slide 62 text

One more thing

Slide 63

Slide 63 text

Demo

Slide 64

Slide 64 text

Summary Very detailed style guide Helps you to design custom components Great for your app Fun for you as developer It’s not difficult

Slide 65

Slide 65 text

Plans Release alpha version for Ext JS 5.1 after conference Migrate to Ext JS 6 modern toolkit Continue development based on Ext JS 6 modern toolkit

Slide 66

Slide 66 text

Questions? Follow me on Twitter @steffenhiller