Upload
vunga
View
251
Download
4
Embed Size (px)
Citation preview
Moxie Zhang
@theMoxie
Sajit Thomas
@SpatialAgent
WEB APPBUILDER FOR ARCGIS
BUILDING 3DAPPS
Web App Builder: Tool to build apps
20000APPS
0
Web App Builder: Building apps through configuration
Web App Builder: Modular approach through widgets
Web App Builder: Focused business logic within widget
Web App Builder: 3D Apps
Web App Builder: Developer Edition
• Download Web AppBuilder Developer Edition and host on-premises
• Create Web Apps from your own computer
• Build custom widgets and themes
Architecture
Web App Builder:
When you have a good app idea…
App
This has been changed….
• Design / Develop by convention
• Defaults for everything
• Object messaging
• No third party app framework besides dojo
Simplicity
3
2
1
v
Widgets
Themes
Stem App 3D
A Web App
w w w
w ww w
w w w
config
GUI
Builder
w w w
w w
Map
Manager
Widget
Manager
Panel
Manager
Layout
Manager
Config
Manager
Messaging (publish/subscribe)
w w w
w w
Web App Builder: Stem App 3D
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
3D Scene 3D Vis
• Model of real world
• Model of real objects
• Simulation of physics
• Asset management
• Urban planning
• Abstract data
• Real time data
• Operational data
• Analysis with dimensions
• Time and animations
Web App Builder:
Building a 3D Widget
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 3D:
[web-appbuilder-root]\client\stemapp3d\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 3d widgets folder
Web App Builder: Getting Started
Web App Builder: Widget Conventions
Stem App 3D
Widgets
MyWidget
MyWidget
css
images
nls
setting
config.json
manifest.json
Widget.html
Widget.js
Web App Builder Widget: Extending Base Widget
BaseWidget Your widget
• App properties
(name, icon, localization)
• App config data
• Widget config data
• Scene View 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 / workflow
Web App Builder Widget: Inheriting from Base Widget
Dijit lifecycle Widget events
• postCreate
• Startup
• …
• onOpen, onSignin
• publishData
Working with Web Scenes: Layers
Working with Web Scenes: Animation
3D Fx
Web App Builder:
Web App Builder: 3DFx – Data Visualization Widget
Operational Layers Configurable Widget
3DFx Library
3DFx JavaScript Library ArcGIS JavaScript API 4.0
FxLayer
Properties:
url
visible
vizType
vizFields
displayField
renderingInfo
popupTemplate
…
Methods:
startAnimation
pauseAnimation
showLabel
hideLabel
switchVizField
……
Map
Rendering System
SceneView
Web App Builder: 3DFx – Architecture
Working with 3DFx: Rendering Information
Working with 3DFx: Fx Layer
Road Ahead
Web App Builder:
Web App Builder: Road Ahead
Web App Builder: Road Ahead
Portal:EAP2
Online:3.5beta
Developer: beta
Portal:10.3
Online:3.6
Developer:1.0
Portal:10.3.1
Online:3.7
Developer:1.1
Portal:10.4
Online:3.8,3.9,3.10, 4.1
Developer:1.2,1.3, Beta2.0
2013 Sep
2014
Dec
2014
Mar
2015Now
milestones
• Online help documentation
http://doc.arcgis.com/en/web-appbuilder/
• Developer Edition help documentation
https://developers.arcgis.com/web-appbuilder/guide/xt-welcome.htm
• Esri GeoNet Group Web AppBuilder
https://geonet.esri.com/groups/web-appbuilder
• 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
http://training.esri.com/gateway/index.cfm?fa=catalog.webCourseDetail&courseid=2893
Web App Builder: Resources
Download the Esri Events app and go to DevSummit
Select the session you attended Scroll down to the “Feedback” section
Complete Answers,add a Comment,
and Select “Submit”
Web App Builder: Survey
Moxie Zhang
@theMoxie
Sajit Thomas
@SpatialAgent