Upptäck Web AppBuilder
Transcript of Upptäck Web AppBuilder
![Page 1: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/1.jpg)
Upptäck Web AppBuilder
Anders Hillström
![Page 2: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/2.jpg)
Topics
Introduce Web AppBuilder
- Quick introduction of ArcGIS WebApp Builder
- Configure a ready to use web application
Web AppBuilder Architecture
- Design principles
- WebApp Builder components
- Key concepts
Create Your First Widget
- Create a simple widget
- Configure the widget
- Package the widget
Themes
- Define WebApp Builder theme
- Architecture
Road Ahead and Q&AWeb AppBuilder Community
- Release Schedule
- Frequent Asked Questions
- What the team is working on
- Your questions
![Page 3: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/3.jpg)
Web AppBuilder
Introduction
![Page 4: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/4.jpg)
ArcGIS Is a PlatformEnabling Web GIS Everywhere
Available in the Cloud . . . . . . and On-Premises
Simple
Integrated
Open
Server Online Content and Services
Desktop Web Device
ArcGIS Online
Portal for ArcGIS
![Page 5: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/5.jpg)
Web Apps in ArcGIS
• HTML/JavaScript
• One app that runs on Desktops, Tablets and Phones
• Fully functional
• Manageable
• Developer opportunities
Technology trends and Our Direction
![Page 6: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/6.jpg)
Configuring Web Apps with ArcGISMany options for using apps to make your map come alive
![Page 7: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/7.jpg)
Web AppBuilder for ArcGIS:
Customization and Extending
![Page 8: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/8.jpg)
Web AppBuilder for ArcGIS:
Customization and Extending
![Page 9: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/9.jpg)
Web AppBuilder for ArcGIS:
Customization and Extending
![Page 10: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/10.jpg)
Web AppBuilder for ArcGIS: An
Introduction
What if you want to
customize it?.....
![Page 11: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/11.jpg)
Web AppBuilder for ArcGIS (Developer Edition)Building Apps with Custom Widgets/Themes
• Download Web AppBuilder Developer Edition and host on-premise
- build apps with custom widgets/themes
• Create Web Apps from your own computer.
• Apps created with the developer edition are not automatically upgraded when you upgrade your portal.
![Page 12: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/12.jpg)
Web AppBuilder
Architecture
![Page 13: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/13.jpg)
Web App Builder for ArcGIS Components
v
widgets
Themes
Stem App
A Web App
w w w
w ww w
w w w
config
GUIBuilder
w w w
w w
![Page 14: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/14.jpg)
Inside Stem App
MapManager
WidgetManager
PanelManager
LayoutManager
ConfigManager
Messaging (publish/subscribe)
w w w
w w
![Page 15: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/15.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.)
• Theme widgets
![Page 16: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/16.jpg)
• Design / Develop by convention
• Defaulting everything
• Object messaging
• No third party app framework besides dojo
Web AppBuilder Design Goal
Simplicity
3
2
1
![Page 17: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/17.jpg)
Dojo?• dojotoolkit.org
![Page 18: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/18.jpg)
Create a Web AppBuilder
Widget
![Page 19: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/19.jpg)
Inheriting from BaseWidget
A widget derived from the BaseWidget class
![Page 20: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/20.jpg)
What Do You Mean "Widget"?
Samples have all code inline in one page: Styles
Scripts
Markuphttps://developers.arcgis.com/javascript/jshelp/intro_custom_dijit.html
Tutorial:
![Page 21: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/21.jpg)
Widget Convention and Defaulting
A Widget
Widget.js
css/
images/
nls/
setting/
manifest.json
styles.css
es-es/
…
icon.png
strings.js
config.json
Widget.html
![Page 22: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/22.jpg)
BaseWidget Your job?
• App properties (name, icon,
localization)
• App config data
• Widget's config data
• Map object
• Widget state (open, closed,
active…)
• Events (open/signIn)
• Widget communication
• Widget UI (HTML/template)
• Widget config file
• Widget styles (css)
• Localization
• Your unique business logic /
worklows
![Page 23: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/23.jpg)
Dijit lifecycle Widget events
• postCreate
• Startup
• …
• onOpen, onSignin
• publishData
![Page 24: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/24.jpg)
Getting Started
1. Download: https://developers.arcgis.com/web-appbuilder/
2. Connect to portal and set app id, see:
https://developers.arcgis.com/web-appbuilder/guide/getstarted.htm
3. Copy widget folder from template or other widget to stem app:
[web-appbuilder-root]\client\stemapp\widgets\
4. Create an app, load your widget
5. Build your widget in the app
6. When done, copy widget files back to stem app widgets folder
![Page 25: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/25.jpg)
DemoCreate your first widget
![Page 26: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/26.jpg)
Create a Web AppBuilder
Theme
![Page 27: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/27.jpg)
A menu of tools
Shortcut items
Map, of cause
Interactive content
The “player”
![Page 28: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/28.jpg)
Branding(icon, color, title)
Widgets on screento form the UI items
Theme Widget:HeaderController
Panel contains widget’s content.It determines how widget is shown.
Placeholder as part of App layout for addingMore widgets
![Page 29: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/29.jpg)
What’s in a Theme
Style
Layouts Panel (s)
On screen widget place holder position
Theme Widget
![Page 30: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/30.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.htmla-style-name/
widgets/
![Page 31: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/31.jpg)
Theme Configuration inside the Builder
3
2
1 Pick a theme
Pick a style of the theme
Pick a layout of the theme
Web AppBuilder for ArcGIS:
Customization and Extending
![Page 32: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/32.jpg)
Demo
Theme
![Page 33: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/33.jpg)
Web AppBuilder
Community
![Page 34: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/34.jpg)
Web AppBuilder for ArcGIS Resources
• Online help documentationhttp://doc.arcgis.com/en/web-appbuilder/
• Developer Edition help documentationhttps://developers.arcgis.com/web-appbuilder/guide/xt-welcome.htm
• Esri Live Training Seminar: Get Started with Web AppBuilder for ArcGIS (60 mins)http://training.esri.com/gateway/index.cfm?fa=catalog.webCourseDetail&courseID=2887
• Esri Live Training Seminar: Creating Web Applications Using Templates and Web AppBuilder for ArcGIShttp://training.esri.com/gateway/index.cfm?fa=catalog.webCourseDetail&courseid=2893
![Page 35: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/35.jpg)
Esri GeoNet Group Web AppBuilder
https://geonet.esri.com/community/gis/web-gis/web-appbuilder
![Page 36: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/36.jpg)
GeoNet Group Web AppBuilder Custom Widgets
https://geonet.esri.com/groups/web-app-builder-custom-widgets
![Page 37: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/37.jpg)
Developer Community on GithubSharing and Collaborating
![Page 38: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/38.jpg)
Esri Solutions Team – Custom Widgetshttps://github.com/Esri/solutions-webappbuilder-widgets
![Page 39: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/39.jpg)
And, someone like me…
https://github.com/Esri/generator-esri-appbuilder-js
http://video.esri.com/watch/4568/arcgis-web-appbuilder-development-tools-and-
techniquesYoman Generator for WAB
![Page 40: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/40.jpg)
Web AppBuilder
Road Ahead
![Page 41: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/41.jpg)
Web 3D with Web AppBuilder
• Support latest Javascript API with 3D support
• Support Web Scene
• A set of 3D Widgets
• Support smart map for 3D, “3D Expression”
• Widget development for Web 3D
![Page 42: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/42.jpg)
Native Mobile App with Web AppBuilder
• Configure and build native mobile apps
• Based on ArcGIS Runtime SDK
• A set native widgets and themes for iOS and Android
• Support coming Runtime 3D that consumes Web Scenes published to Online and Portal
• Native mobile widget and theme development on iOS and Android
![Page 43: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/43.jpg)
More themes and widgets
• Solution widgets set
• Imagery processing widgets set
• 3D oriented widgets
• More themes with responsive design
• Simplified theme creation
![Page 44: Upptäck Web AppBuilder](https://reader035.fdocuments.us/reader035/viewer/2022070723/62c515a1e122e935a211a5fe/html5/thumbnails/44.jpg)
Mar 2015
Jun 2015
Releases
Online 3.7
Online 3.x
Sept 2015
Dec 2015
Online 3.x
Online 3.x