Embed Size (px)
Citation preview
ArcGIS API for JavaScript: Customizing Widgets
Alan Sangma – @alansangma
Matt Driscoll – @driskull JC
Franco – @arfncode
1
AgendaWhat can be customized Customization approaches with demos Q & A
2
Customizing WidgetsTheming
Changing styles: colors, sizing, font, etc.Implementing widget in a different framework Altering presentation of a widget
3
Customization ApproachesAuthoring a theme Recreating a view Extending a view
4
Ready?
5
L e v e l I
T h e m i n g
6
Level I: ThemingWhy Theme?
Match branding. Match the map.Contrast with the map. Based on the environment.User-specific (e.g. bigger buttons)
7
A powerful scripting language for producing CSS.
8
Why Sass?
It's modular. It's DRY.It makes theming easy.
9
Compiling
10
Let's Create a Theme!1. Create your theme directory.
esri/themes/[your-theme-name]/
2. Create a Sass file in your theme directory.main.scss
@import "../base/core";
3. Compile.4. Include the compiled CSS in your app.
<!-- in your app -->
<link rel="stylesheet" href="esri/themes/[your-theme-name]/main.css">
11
Theme StructureAvoid writing a bunch of CSS selectors.
Include the theme "core" and override the default values.
12
Theme StructureThe theme core brings in three main variable files:
base/_colorVariables.scss
base/_sizes.scss
base/_type.scss
These set the default values.
13
Theme StructureDefault
Any value assignment overrides the !default value.
But wait...there's more!
// Inside base/_colorVariables.scss
$background_color : #fff !default ;
// Inside esri/themes/[your-theme-name]/main.scss
$background_color : #cc4b09;
14
Theme StructureOverride the four main color variables...
...then magic!
$text_color : #fff; // white
$background_color : #cc4b09; // mario
$anchor_color : #ffbaaa; // luigi
$button_text_color : #ffbaaa; // luigi
Theming Guide
15
Level I: Theming RecapUse Sass for easy theming. Theme structure
Color SizeTypography
Use the core and override values.
17
L E V E L U P !
18
L E V E L I I
V i e w s
19
Level II: Widget Composition
Widgets are composed of Views & ViewModels
ReusableUI replacement Framework integration
20
Level II: ViewsPresentation of the WidgetUses ViewModel APIs to render the UI View-specific logic resides here
21
Level II: Working with ViewsAPI Exploration
LayerList DocLayerList.tsx (View) LayerList.scss (Theme) LayerList Sample
22
Views: Let's customize!Lets create a custom widget view.
Using...
jQueryPlugin creation
Bootstrap
23
DemoCreate a custom LayerList view for a Bootstrap app
Demo StepsDemo
24
Level II: Views RecapWhat have we learned about Widget Views?
ViewsFace of the widgetRenders the viewModel brainsView separation allows framework integration Views can be downloaded on API docsCan create views in other frameworks using ViewModels
25
L E V E L U P !
26
L E V E L I I I
E x t e n d i n g a V i e w
27
Level III: Extending a ViewWhy?
ReusableSame ecosystem
How?JS API v4.4esri/widgets/Widget TypeScript
28
esri/widgets/Widget
Provides lifecycle API consistency
29
Lifecycleconstructor postInitialize render destroy
30
renderDefines UI Reacts to state Uses JSX
31
TypeScriptTyped JavaScriptJS of the future, now IDE support
Visual Studio WebStorm Sublimeand more!
32
Demo: Extending a ViewDemo Steps
33
Level III: Extending a View Recap
Reusable View/ViewModel
Same ecosystem No extra libraries
Extended existing widget LifecycleTypeScript
34
L E V E L U P !
35
L E V E L I V
P u t i t a l l t o g e t h e r .
36
ConclusionAuthored a theme Recreated a view Extended a view
37
Suggested SessionDeveloping Your Own Widget with the ArcGIS API for JavaScript
38
Additional ResourcesImplementing AccessorSetting up TypeScript Widget Development JS API SDK
39
41
Questions?
42
43
44
