![Page 1: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/1.jpg)
The Road Ahead: Web 3D and Native Mobile
Moxie Zhang, Esri R&D Center Beijing
Esri Developer Summit 2015
with Web AppBuilder for ArcGIS
![Page 2: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/2.jpg)
What is Esri Web 3D
Web 3D App with Web AppBuilder
Web 3D App with JavaScript
3D Visualization with Web AppBuilder
Native Mobile App with Web AppBuilde
![Page 3: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/3.jpg)
for developersWhat is Web 3D
![Page 4: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/4.jpg)
Web 3D Products for ArcGIS
ArcGIS Platform DevelopersArcGIS
Professional
ArcGISOnline/Portal
3rd Partytools
3D Scene Service Web Scene
Layers
ArcGIS Server, Online, Portal
ArcGIS API for JavaScript
ArcGIS Runtime SDKsWeb Scene
![Page 5: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/5.jpg)
Web 3D Development Architecture (Web AppBuilder)
ArcGISProfessional
ArcGISOnline/PortalCli
ent
Data Processing Services
3D Scene Service
Web Scene
ArcGIS Server
ArcGIS Online/Portal
Service
ArcGIS API for JavaScript
SDKs
ArcGIS Runtime SDKs
Web App Builder
Apps
Widgetsw w
w w w
![Page 6: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/6.jpg)
Web Scene
Web Scene
Desktop Web Device
Server Online Content and Services
• New in ArcGIS Online and Portal
• Mash-up of 3D / 2D layers
• Consumed by all clients
![Page 7: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/7.jpg)
Web Scene – designed for 3D
- 3D Layers- 3D Symbology- 3D Labels- Table of Contents- 3D Popups- Tours- …
![Page 8: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/8.jpg)
General 3D Web Application Architecture
![Page 9: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/9.jpg)
Web 3D Client Architecture
− New internal architecture but same* public JS API classes
Map Layer
ArcGIS API for JavaScript with 3D capabilities
• * 99% backwards compatible code + new classes for 3D
![Page 10: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/10.jpg)
Web 3D Client Architecture
− New internal architecture but same* public JS API classes ArcGIS API for JavaScript with 3D capabilities
Viewport(s) LayerView(s)
Map Layer
• * 99% backwards compatible code + new classes for 3D
![Page 11: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/11.jpg)
Web 3D Client Architecture
− New internal architecture but same* public JS API classes
Abstracted public API methods Map Layer
ArcGIS API for JavaScript with 3D capabilities
Viewport(s) LayerView(s)Loosely coupled implementation(s)
• * 99% backwards compatible code + new classes for 3D
![Page 12: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/12.jpg)
Web 3D Client Architecture
− New internal architecture but same* public JS API classes
Abstracted public API methods Map Layer
ArcGIS API for JavaScript with 3D capabilities
2DViewportLoosely coupled implementation(s)
3DViewport
2DViewport
3DViewport
• * 99% backwards compatible code + new classes for 3D
![Page 13: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/13.jpg)
App Development in 3D
3D Runtime SDK- Full 3D Runtime functions- High performance- Large data set- Machine Native code- Mobile and desktop
JavaScript (WebGL Render)- Pure browser app without plugin- WebGL is maturing- Under heavy development- Performance and large data set support are
improving- Cross browser support
Application Development (1) Full app on API (2) Widget/Theme for Web AppBuilder for ArcGIS
![Page 14: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/14.jpg)
with JavaScript APIBuild 3D Web App
![Page 15: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/15.jpg)
Map and Viewport
![Page 16: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/16.jpg)
Create a Map
![Page 17: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/17.jpg)
Add a Basemap
![Page 18: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/18.jpg)
![Page 19: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/19.jpg)
with Web AppBuilderBuild Web 3D App
![Page 20: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/20.jpg)
A menu of tools
Shortcut items
Map, of cause
Interactive content
The “player”
![Page 21: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/21.jpg)
Web App Builder for ArcGIS Components
v
widgets
Themes
Stem App
A Web App
w w w
w w w w
w w w
config
GUIBuilder
w w w
w w
![Page 22: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/22.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 23: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/23.jpg)
Demo: Configure a Web 3D App
![Page 24: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/24.jpg)
Code: Create a widget for 3D
![Page 25: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/25.jpg)
with Web AppBuilder3D Expression
![Page 26: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/26.jpg)
What’s 3D Expression
A set of dynamic effects that visualize data in 3D space
Integrate with Web Scene
Integrate with Web 3D symbolization
A way to better visualize and understand data.
![Page 27: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/27.jpg)
Demo: 3D Visualizationwith 3D Expression
![Page 28: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/28.jpg)
Why 3D Visualization
3D adds one additional dimension to data visualization.
People tend to learn and understand from visual representations much easily than from textual representations.
3D visualization is more in-depth and more intuitional than 2D visualization.
3D visualization can better handle time-relevant data by supporting animated effects.
![Page 29: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/29.jpg)
3D Expression Architecture
3D Expression EffectsWebGL Engine
MeshRender
PointSpriteRender
ExtrusionRender
TemperatureRender
TrafficRender
Layer DrawViewPortRender
![Page 30: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/30.jpg)
Data sources
GraphicsLayer
FeatureLayer
SceneLayer
3D Data Visualization
3D Map (Web Scene)
Data sources
3D Symbols
3D Renderers
3D Renderers
Browser with WebGL EngineRuntime 3D
![Page 31: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/31.jpg)
![Page 32: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/32.jpg)
Demo: 3D Visualization with Web AppBuilder
![Page 33: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/33.jpg)
with Web AppBuilderCreate Native Mobile App
![Page 34: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/34.jpg)
Mobile app development starts with many options
![Page 35: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/35.jpg)
…and there are different approaches to build an app
![Page 36: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/36.jpg)
Beyond Native AppsCreate native iOS, Android, Mac and Windows apps in C#.Anything you can do in Objective-C, Swift or Java, you can do in C#.
Develop in Lua, use the same code-base and go cross-platform.
Deploying HTML5, native, or hybrid mobile apps using open and standards-based `tools.
• Build native apps for iOS and Android using JavaScript• Native UI, push, analytics, login modules "out-of-the
box"• Cloud build service, no need to setup Eclipse / Xcode• Update your app without re-submitting to the App Store• Open platform, extend with hooks, write native modules
![Page 37: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/37.jpg)
Why Native AppHas better performance and user experience
Works connected and disconnected from internet
Has access of all device capabilities
Works with sensors connected to the device
![Page 38: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/38.jpg)
… however, native app development is not easyA well rounded native app needs on iOS and Android, at least
Need good mobile developers
Need two at least
Esri customers usually do not have the above
![Page 39: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/39.jpg)
Jaegerwith Web AppBuilder
![Page 40: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/40.jpg)
aegerRapid mobile application development
Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK
A Jaeger app is built via configuration using Web AppBuilder for ArcGIS
A Jaeger app runs in pure native Runtime SDK includes all interactive and UI
![Page 41: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/41.jpg)
WidgetsFunctional modules that contain only programming logics without dealing with user interactive and visualization
Panels with UI elementsAs part of the Jaeger theme, panels and a fix number of UI elements are provided
Map and eventsAll map, events handling and visual aspect of Jaeger are handled in native core. No performance loss
A Jaeger App
![Page 42: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/42.jpg)
How a Jaeger App is Built
Build a Jaeger App with Web AppBuilder A Jaeger AppApp
Configurator
WidgetDevelopers
ThemeDevelopers
Compilingand
Signing
`w w w
w w ManualConfigurationWAB GUI
Configurationw w w
JaegerCore
JaegerCore
![Page 43: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/43.jpg)
Jaeger for iOS
![Page 44: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/44.jpg)
Jaeger for Android
![Page 45: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/45.jpg)
for iOS and Android devicesCreate a Mobile App
![Page 46: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/46.jpg)
under the hood
![Page 47: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/47.jpg)
Inside Jaeger App
MapManager
WidgetManager
PanelManager
LayoutManager
ConfigManager
Messaging and Events
w w w
w w
![Page 48: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/48.jpg)
aeger fordevelopers
Develop Widgets with ArcGIS Runtime SDK
![Page 49: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/49.jpg)
Android/iOS Platform SDK
ArcGIS Runtime SDKEvent Bus
Base Theme
Map Manager
Callout
Base Widget
Configuration file
App 1Widget1
Widget2
Widget…
Config1
Config2
Config…
Theme1
App 2Widget1
Widget3
Widget…
Config11
Config3
Config…
Theme1
App…Widget4
Widget5
Widget…
Config4
Config5
Config…
Theme2
Jaeger Development Architecture
![Page 50: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/50.jpg)
App Start
App Exit
TwoLayouts
Screen
Pool
Widget.onCreate()
Widget.onSelected()
Customized Action
Widget.onDestroy()
Widget Lifecycle
![Page 51: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/51.jpg)
ZoomIn.h
ZoomIn.m
Demo: Widget Development
![Page 52: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/52.jpg)
//ZoomIn.h@interface ZoomIn : BaseWidget@end
//ZoomIn.m@implementation ZoomIn-(void)selected{
[super selected];[self.mapView zoomIn:YES];
}
Widget Development
![Page 53: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/53.jpg)
Hello World
![Page 54: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/54.jpg)
//HelloWorld.h@interface HelloWorld : BaseWidget@end
//HelloWorld.m@implementation HelloWorld-(void)create{
[super create];UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];[button setFrame:CGRectMake(40, 20, 200, 44)];[button setTitle:@"HelloWorld" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor grayColor]];[button addTarget:self action:@selector(helloWorld:) forControlEvents:(UIControlEventTouchDown)];[self.dataPanelView addSubview:button];
}-(void)selected{
[super selected];[self showDataPanel];
}-(void)helloWorld:(id)sender{
[self.mapView zoomIn:YES];}
Hello World
![Page 55: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/55.jpg)
Hello World
![Page 56: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/56.jpg)
Share the Widgets and Themes for Mobile
![Page 57: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/57.jpg)
Themes
Widgets
config
![Page 58: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/58.jpg)
Share Widget & Theme (iOS)
• Each Widget/Theme is a standalone library• All the modules have their own resources & configuration files• To share Widget/Theme, just share the library and resources
![Page 59: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/59.jpg)
Themes
Widgets
config
![Page 60: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/60.jpg)
Share Widget & Theme (Android)
• Each Widget/Theme is a standalone module• All the modules have their own resources & configuration files• To share Widget/Theme, just export the module using IDE
![Page 61: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/61.jpg)
on GeoNet
Web AppBuilder Community
![Page 62: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/62.jpg)
GeoNet – Esri Community
![Page 63: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/63.jpg)
Esri GeoNet Group Web AppBuilderhttps://geonet.esri.com/groups/web-appbuilder
![Page 64: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/64.jpg)
GeoNet Group Web AppBuilder Custom Widgets https://geonet.esri.com/groups/web-app-builder-custom-widgets
![Page 65: The Road Ahead: Web 3D and Native Mobile Apps€¦ · Rapid mobile application development. Developers extend Jaeger by creating widgets using ArcGIS Runtime SDK. A Jaeger app is](https://reader031.vdocuments.mx/reader031/viewer/2022011911/5f900281f2d2db4e1e59eeed/html5/thumbnails/65.jpg)
Rate This Sessionwww.esri.com/RateMyDevSummitSession