Introduce Web AppBuilder for ArcGIS and Customization. Moxie Zhang Esri R&D Center Beijing

Transcription

1 Introduce Web AppBuilder for ArcGIS and Customization Moxie Zhang Esri R&D Center Beijing

2 Web AppBuilder for ArcGIS Released with ArcGIS 10.3

3 Web AppBuilder Developer Edition Released

4 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 Web AppBuilder Widget - Create a simple widget - Configure the widget - Package the widget Web AppBuilder Theme - Define WebApp Builder theme - Create a theme - Package the theme Product Information - Release Schedule - Frequent Asked Questions Road Ahead and Q&A - What the team is working on - Your questions

5 What is Web AppBuilder for ArcGIS

6 ArcGIS Is a Platform Enabling Web GIS Everywhere Desktop Web Device Simple Integrated Open ArcGIS Online Portal for ArcGIS Server Online Content and Services Available in the Cloud and On-Premises

7 Web Apps in ArcGIS Technology trends and Our Direction HTML/JavaScript One app that runs on Desktops, Tablets and Phones Fully functional Manageable Developer opportunities

8 Configuring Web Apps with ArcGIS Many options for using apps to make your map come alive

9 Build for the users HTML5/no plugin Configurable apps Mobile web apps Less programming Pure HTML/JavaScript Responsive UI for Devices Supports both 2D and 3D GUI Builder Out of Box Widgets Create Custom Widget Create Custom Theme 3D Web Scenes Support OAuth2 Support Fully Supported Embedded in Online/portal Offline Developer Edition Configure and Create Native Mobile Apps and More

10 Quick Tour Web AppBuilder for ArcGIS

11 WebApp Builder Architecture

12 A menu of tools Interactive content Shortcut items Map, of cause The player

13 Web App Builder for ArcGIS Components GUI Builder w w w w w widgets Themes v w w w w w Stem App A Web App config

14 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

15 Inside Stem App Messaging (publish/subscribe) Map Manager Widget Manager Panel Manager Layout Manager Config Manager w w w w w

16 Web AppBuilder Design Goal Simplicity 1 Design / Develop by convention Defaulting everything Object messaging No third party app framework besides dojo 2 3

17 Web AppBuilder Widget

18 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.

19 A minimum Widget Widget.js All widget derived from the BaseWidget class

20 BaseWidget What do you get from BaseWidget? Your job? 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) HTML Template Widget config file Widget name (for css) The guts (i.e. business logic) Localization

21 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

22 WebApp Builder Theme

23 Web AppBuilder for ArcGIS:

24

25 Web AppBuilder for ArcGIS:

26 Branding (icon, color, title) Widgets on screen to 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 adding More widgets

27 What s in a Theme Style Theme Widget Layouts Panel (s) On screen widget place holder position

28 Theme Convention and Defaulting images/ icon.jpg layouts/ a-layout-name/ icon.jpg, config.json A Theme panels/ a-panel-name/ images/ styles/ a-style-name/ Panel.js, Panel.html widgets/ manifest.json

29 Theme Configuration inside the Builder 1 Pick a theme 2 Pick a style of the theme 3 Pick a layout of the theme Web AppBuilder for ArcGIS: Customization

30 Web AppBuilder Community

31 Developer Community on Github

32 Esri GeoNet Group Web AppBuilder

33 Esri GeoNet Group Web AppBuilder

34 GeoNet Group Web AppBuilder Custom Widgets

35 Facebook Fan Page

36 And, someone like you Yoman Generator for WAB

37

38 Web AppBuilder for ArcGIS: An

39

40

41 Web AppBuilder for ArcGIS: An

42

43 Web AppBuilder Developer Edition

44 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.

45 Web AppBuilder Road Ahead

46 While continue making Web AppBuilder a simple tool, we will add important capabilities to it Add 3D capability for building Web 3D application - Support WebScene - Out of Box widgets for 3D app - 3D data visualization widgets Improve UX for the GUI Builder Include solution widget sets Add Native Mobile app creation

47 Q&A Web AppBuilder for ArcGIS: An

48