upptäck web appbuilder
Post on 06-Jul-2022
5 Views
Preview:
TRANSCRIPT
Upptäck Web AppBuilder
Anders Hillström
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
Web AppBuilder
Introduction
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
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
Configuring Web Apps with ArcGISMany options for using apps to make your map come alive
Web AppBuilder for ArcGIS:
Customization and Extending
Web AppBuilder for ArcGIS:
Customization and Extending
Web AppBuilder for ArcGIS:
Customization and Extending
Web AppBuilder for ArcGIS: An
Introduction
What if you want to
customize it?.....
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.
Web AppBuilder
Architecture
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
Inside Stem App
MapManager
WidgetManager
PanelManager
LayoutManager
ConfigManager
Messaging (publish/subscribe)
w w w
w w
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
• Design / Develop by convention
• Defaulting everything
• Object messaging
• No third party app framework besides dojo
Web AppBuilder Design Goal
Simplicity
3
2
1
Dojo?• dojotoolkit.org
Create a Web AppBuilder
Widget
Inheriting from BaseWidget
A widget derived from the BaseWidget class
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:
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
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
Dijit lifecycle Widget events
• postCreate
• Startup
• …
• onOpen, onSignin
• publishData
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
DemoCreate your first widget
Create a Web AppBuilder
Theme
A menu of tools
Shortcut items
Map, of cause
Interactive content
The “player”
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
What’s in a Theme
Style
Layouts Panel (s)
On screen widget place holder position
Theme Widget
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/
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
Demo
Theme
Web AppBuilder
Community
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
Esri GeoNet Group Web AppBuilder
https://geonet.esri.com/community/gis/web-gis/web-appbuilder
GeoNet Group Web AppBuilder Custom Widgets
https://geonet.esri.com/groups/web-app-builder-custom-widgets
Developer Community on GithubSharing and Collaborating
Esri Solutions Team – Custom Widgetshttps://github.com/Esri/solutions-webappbuilder-widgets
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
Web AppBuilder
Road Ahead
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
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
More themes and widgets
• Solution widgets set
• Imagery processing widgets set
• 3D oriented widgets
• More themes with responsive design
• Simplified theme creation
Mar 2015
Jun 2015
Releases
Online 3.7
Online 3.x
Sept 2015
Dec 2015
Online 3.x
Online 3.x
top related