ArcGIS API for JavaScript: Customizing Widgets...ArcGIS API for JavaScript: Customizing Widgets Author Esri Subject 2017 Esri User Conference--Presentation Keywords ArcGIS API for

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

Demo: Theming

16

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

The source code!esriurl.com/customwidgetsuc2017

40

41

Questions?

42

43

44