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
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
12
2.9k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
110
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.4k
Reactの歴史を振り返る
tutinoko
1
170
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
330
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
800
DataformでPythonする / dataform-de-python
snhryt
0
160
Infer入門
riru
4
1.2k
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
240
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
KATA
mclloyd
32
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Faster Mobile Websites
deanohume
308
31k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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