Materializing Ext JS

Building a Material Design interface with Ext JS

Transcript

2. Materializing Ext JS Steffen Hiller, Sencha
3. This talk 3 Understanding
 Material Design Building
 Material Design
4. 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.
5. 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.
6. What is Material Design? Inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
7. https://www.youtube.com/watch?v=Q8TXgCzxEnw
8. The material environment is a 3D space, which means all objects have x, y, and z dimensions. Material Design Properties
9. All shadows in the material environment are cast by a key light and an ambient light. = Material Design Properties
10. Material Design Properties Material has varying x and y dimensions and a uniform thickness (1dp).
 Material never has a thickness of 0.
11. Material is solid.
 Input events cannot pass through material. Material Design Properties
12. Multiple material elements cannot occupy the same point in space simultaneously. Material Design Properties
13. Material Design Properties Material never bends
 or folds.
14. Material Design Guideline http://www.google.com/design/spec
15. Let’s build
16. Requirements Application for managing the data of the SenchaCon mobile application.
 
 Manage: • Sessions • Speakers • Tracks • Locations 16
17. 17 Layout https://docs.google.com/ http://www.google.com/design/
18. 18 Layout
19. Building the UI
20. Theme Package $ sencha generate package -t theme theme-material
21. Theme Package /packages/material-theme/package.json /app.json "name": "theme-material",
 "type": "theme",
 "extend": "ext-theme-neptune" "theme": "theme-material"
22. Toolbar
23. Toolbar Toolbars have a standard height,
 56 dp on mobile and 64 dp on desktop,
 but they can be taller.
24. Toolbar
25. 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.
26. Shadow
27. 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 { … } …
28. Font Roboto
29. 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
30. 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;
 }
31. 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');
32. Toolbar Styles $panel-header-font-size: 18px !default;
 $panel-header-line-height: 18px !default; .x-panel-header {
 @extend .z-depth-1;
 }
33. Toolbar padding: '16 72 72 72'
34. Grid
35. 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;
36. 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));
 }
 }
37. Grid .x-grid {
 .bold .x-grid-cell-inner {
 font-weight: 500;
 color: #444;
 }
 } {
 name: 'Title',
 tdCls: 'bold'
 }
38. 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.
39. Floating Action Button Positive actions like Create, Favorite, Share, Navigate, and Explore. Avoid for destructive actions like Archive or Trash
40. Floating Action Button
41. 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
 });
42. 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;
 }
 }
43. 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);
 }
44. Floating Action Button
45. Dialog
46. Raised Buttons Emphasize functions that would otherwise get lost on a busy or wide space.
47. Flat Buttons For contexts such as toolbars and dialogs to avoid gratuitous layering.
48. Flat Button States
49. 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;
 }
50. 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;
51. 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);
 }
52. Dialog
53. Form
54. Form
55. 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);
 }
 }
56. Form
57. Animation Form Field Animation Floating Button Animation Dialog Open Animation Drawer Open Animation
58. 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();
 }
59. Drawer Open Animation var menu = Ext.create('CM.view.Drawer', {
 height: Ext.getBody().getHeight()
 });
 
 menu.showAt(-200, 0);
 
 menu.showAt(0, 0, {
 duration: 300
 });
60. One more thing http://www.senchacon.com
61. One more thing $base-color: #006c8f;
 
 $floating-action-button-color: #fff;
 $floating-action-button-background-color: #8ac440;
62. One more thing
63. Demo
64. Summary Very detailed style guide Helps you to design custom components Great for your app Fun for you as developer It’s not difficult
65. 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
66. Questions? Follow me on Twitter @steffenhiller