ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the...
Transcript of ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the...
![Page 1: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/1.jpg)
Customizing and Extending
ArcGIS WebApp Builder Moxie Zhang Julie Powell
![Page 2: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/2.jpg)
Topics
Introduce WebApp Builder
- Quick introduction of ArcGIS WebApp Builder
- Configure a ready to use web application
WebApp Builder Architecture
- Design principles - WebApp Builder components - Key concepts
Create Your First Widget
- Create a simple widget - Configure the widget - Package the widget
Create a Theme
- Define WebApp Builder theme - Create a theme - Package the theme
Questions and Answers Road Ahead
- The release plan - What’s coming
- Q&A from the team - Your questions
![Page 3: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/3.jpg)
Introduction
ArcGIS WebApp Builder
![Page 4: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/4.jpg)
A Response to the requests by many customers
HTML5/no plugin Configurable apps Mobile web apps Less programming
![Page 5: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/5.jpg)
Take Advantage of modern HTML/JavaScript technologies
Pure HTML/JavaScript Responsive UI for Devices Supports both 2D and 3D
![Page 6: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/6.jpg)
For Developers GUI Builder Out of Box Widgets Create Custom Widget Create Custom Theme
![Page 7: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/7.jpg)
ArcGIS Platform Integration 3D Web Scenes Support OAuth2 Support Create Web App Templates Builder inside Portal
![Page 8: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/8.jpg)
Concepts and Components
ArcGIS WebApp Builder Architecture
![Page 9: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/9.jpg)
GUI Builder
widgets
Themes
Stem App
config
A Web App
ArcGIS WebApp Builder Components
![Page 10: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/10.jpg)
Inside Stem App
Map Manager
Widget Manager
Panel Manager
Layout Manager
Config Manager
Messaging (publish/subscribe)
![Page 11: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/11.jpg)
Widget Theme
• HTML/JavaScript/CSS
• Specific task
• Configuration in JSON
• NLS support
• Builder config UI
• HTML/JavaScript/CSS
• Layout
• Branding
• Widget panel and
behavior
• Style (Color, etc.)
• Default widgets
![Page 12: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/12.jpg)
• Design / Develop by convention • Defaulting everything • Object messaging • No third party lib besides dojo
ArcGIS WebApp Builder Design Goal Simplicity
3
2
1
![Page 13: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/13.jpg)
Create your first one
ArcGIS WebApp Builder Widget
![Page 14: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/14.jpg)
Convention and Defaults
A widget could be just one file.
A widget full set of files to provide Everything from UI, nls to WebAbb Builer setting UI.
![Page 15: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/15.jpg)
A minimum Widget – Widget.js
All widget derived from the BaseWidget class
![Page 16: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/16.jpg)
BaseWidget
What do you get from BaseWidget?
• App config properties (label, icon, location, etc)
• App config data • Widget’s config data • Map object • Widget state (open, closed, active…) • Events like open/signin • Sharing data (widget communication)
Your job?
• HTML Template • Widget config file • Widget name (for css) • The “guts” (i.e. business logic) • Localization
![Page 17: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/17.jpg)
Events
• Dijit lifecycle events such as - postCreate - startup - …
• Widget events such as - onOpen, onSignIn - publishData - …
![Page 18: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/18.jpg)
Demo Create your first widget
![Page 19: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/19.jpg)
Widgets: Preloaded or in the Panel
"inPanel": false
"inPanel": true (default)
![Page 20: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/20.jpg)
Configure your custom widget inside the builder
Building a UI for the user
• Setting.js - Config info - getConfig, setConfig
• Setting.html • Usual localization pattern • css
![Page 21: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/21.jpg)
Create your first one
ArcGIS WebApp Builder Theme
![Page 22: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/22.jpg)
Preconfigured widget
Placeholder as part of App layout for adding More widgets
Branding (icon, color)
Pre loaded widgets to form the UI items
Define ArcGIS WebApp Builder Theme
![Page 23: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/23.jpg)
Define ArcGIS WebApp Builder Panel
Panel contains widget’s content. It determines how widget is shown.
![Page 24: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/24.jpg)
Theme Convention and Defaulting
A Theme
images/
layouts/
panels/
styles/
manifest.json
icon.jpg
a-layout-name/ icon.jpg, config.json
a-panel-name/ images/
Panel.js, Panel.html a-style-name/
![Page 25: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/25.jpg)
Theme Configuration inside the Builder
3
2
1 Pick a theme
Pick a style of the theme
Pick a layout of the theme
![Page 26: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/26.jpg)
Demo Create your first theme
![Page 27: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/27.jpg)
March 28, 2014
Release with 10.3
2014 TBD
Releases
Beta
Public Release
![Page 28: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/28.jpg)
Julie Powell
Product FAQ
![Page 29: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/29.jpg)
• Supported platforms? IE 9+, Firefox, Chrome, and Safari 3+ • Is AWAB a supported product? Yes • Does AWAB work with Portal? AWAB can rely 100% on Portal for ArcGIS, independent of ArcGIS Online.
![Page 30: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/30.jpg)
• Can I use my ArcGIS Services in AWAB if I don’t have Portal for ArcGIS?
Local ArcGIS Server
ArcGIS Online WebMap WebApp Builder
![Page 31: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/31.jpg)
Product Release
•Beta Release (March 28th) - Go to http://bit.ly/WebAppBuilder
•Production Release (with 10.3)
![Page 32: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/32.jpg)
Q&A
![Page 33: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/33.jpg)
![Page 34: ArcGIS WebApp Builder€¦ · Builder Architecture-Design principles -WebApp Configure the widgetBuilder components -Key concepts Create Your First Widget -Create a simple widget](https://reader031.fdocuments.us/reader031/viewer/2022013023/5fc1dd978b779663ef204040/html5/thumbnails/34.jpg)
Make Ready to Use Apps or App Templates
Ready to use app Builder
App template ArcGIS Portal/Online