Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Materializing Ext JS
Search
Steffen Hiller
April 08, 2015
Programming
5
3.2k
Materializing Ext JS
Building a Material Design interface with Ext JS
Steffen Hiller
April 08, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
110
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Front-end application development, Symfony-style(s)
dunglas
2
2k
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Snowflakeで眠ったデータを起こそう!
estie
0
110
Featured
See All Featured
A Tale of Four Properties
chriscoyier
151
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Building Your Own Lightsaber
phodgson
99
5.7k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Designing for humans not robots
tammielis
248
25k
Atom: Resistance is Futile
akmur
259
25k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Designing the Hi-DPI Web
ddemaree
276
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Statistics for Hackers
jakevdp
789
220k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Transcript
None
Materializing Ext JS Steffen Hiller, Sencha
This talk 3 Understanding Material Design Building Material Design
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.
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.
What is Material Design? Inspired by the study of paper
and ink, yet technologically advanced and open to imagination and magic.
https://www.youtube.com/watch?v=Q8TXgCzxEnw
The material environment is a 3D space, which means all
objects have x, y, and z dimensions. Material Design Properties
All shadows in the material environment are cast by a
key light and an ambient light. = Material Design Properties
Material Design Properties Material has varying x and y dimensions
and a uniform thickness (1dp). Material never has a thickness of 0.
Material is solid. Input events cannot pass through material. Material
Design Properties
Multiple material elements cannot occupy the same point in space
simultaneously. Material Design Properties
Material Design Properties Material never bends or folds.
Material Design Guideline http://www.google.com/design/spec
Let’s build
Requirements Application for managing the data of the SenchaCon mobile
application. Manage: • Sessions • Speakers • Tracks • Locations 16
17 Layout https://docs.google.com/ http://www.google.com/design/
18 Layout
Building the UI
Theme Package $ sencha generate package -t theme theme-material
Theme Package /packages/material-theme/package.json /app.json "name": "theme-material", "type": "theme", "extend": "ext-theme-neptune"
"theme": "theme-material"
Toolbar
Toolbar Toolbars have a standard height, 56 dp on mobile
and 64 dp on desktop, but they can be taller.
Toolbar
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.
Shadow
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 { … } …
Font Roboto
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
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; }
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');
Toolbar Styles $panel-header-font-size: 18px !default; $panel-header-line-height: 18px !default; .x-panel-header {
@extend .z-depth-1; }
Toolbar padding: '16 72 72 72'
Grid
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;
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)); } }
Grid .x-grid { .bold .x-grid-cell-inner { font-weight: 500; color: #444;
} } { name: 'Title', tdCls: 'bold' }
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.
Floating Action Button Positive actions like Create, Favorite, Share, Navigate,
and Explore. Avoid for destructive actions like Archive or Trash
Floating Action Button
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 });
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; } }
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); }
Floating Action Button
Dialog
Raised Buttons Emphasize functions that would otherwise get lost on
a busy or wide space.
Flat Buttons For contexts such as toolbars and dialogs to
avoid gratuitous layering.
Flat Button States
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; }
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;
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); }
Dialog
Form
Form
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); } }
Form
Animation Form Field Animation Floating Button Animation Dialog Open Animation
Drawer Open Animation
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(); }
Drawer Open Animation var menu = Ext.create('CM.view.Drawer', { height: Ext.getBody().getHeight()
}); menu.showAt(-200, 0); menu.showAt(0, 0, { duration: 300 });
One more thing http://www.senchacon.com
One more thing $base-color: #006c8f; $floating-action-button-color: #fff; $floating-action-button-background-color: #8ac440;
One more thing
Demo
Summary Very detailed style guide Helps you to design custom
components Great for your app Fun for you as developer It’s not difficult
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
Questions? Follow me on Twitter @steffenhiller