This document provides an overview and introduction to working with the OpenGeo Suite Client SDK (GXP) to design and build rich web mapping applications. It discusses what GXP is, how it fits into the technology stack, examples of its use, and steps for the application development life cycle including creation, testing, customization, and deployment. Real-world use cases are presented and exercises provided for hands-on learning of customizing and extending applications using GXP.

1. Working with the OpenGeo Suite Client SDK to design
and create rich web mapping applications
Alberto Romeu - @alrocar
Jorge Sanz -@xurxosanz

2. varagenda={
"first-section":[
{
"content":"IntroductiontoGXP(what,why,when)",
"duration":45
},
{
"content":"Learningresources",
"duration":15
},
{
"content":"MyfirstGXPapplication",
"duration":60
}
],
"break":{
"content":"coffee",
"duration":30
},
"second-section":{
"content":"Customizingtheapplication",
"duration":90
},
"break":{
"content":"lunch",
"duration":60
},
"third-section":[
{
"content":"Editingtools",
"duration":60
},

3. WHAT IS GXP?
(OpenGeo Suite ClientSDK, Webapp SDK, Boundless SDK...)
"aJavascriptSDK for developing high level
GeoExtbased Applications"

4. WHATISGXP?
1
GXP is aSoftware DevelopmentKit

5. WHATISGXP?
2
Itcovers the complete LIFE-C YCLE of the application
development
Create
Test
Customize
Package
Deploy

6. WHATISGXP?
3
It's aFRAMEWORK
API
Plugins
Widgets
Dependencymanagement

7. THE CONCEPT

8. THECONCEPT
1
GeoExt+ OpenLayers + GXP API + SDK
UI + MAP + Customcomponents + Lifecycle

9. THE CONCEPT
2
Take CONFIGURATION PATTERN to ahigher level
(Configuration over programming)

10. THE CONCEPT
3
BundledintotheOpenGeo Suite(alsostandalone)

11. WHY GXP?

12. WHYGXP?
1
NeedofaCOMPLETE SDKforwebmappingapplications

13. WHY GXP?
2
MINIMAL CONFIGURATION for complex apps

14. WHY GXP?
3
Needof UI components

15. WHY GXP?
4
FREE -GPLv3 License

16. WHERE IN THE STACK?

17. WHEN (WHO) TO USE?

18. WHEN (WHO)TOUSE?
1
web GIS applications(geoportals)

19. WHEN (WHO)TOUSE?
2
HIGHER LEVEL GIScomponents (editing,styling,browsing...)

20. WHEN (WHO)TOUSE?
3
(Even more) BEGINNERS confused byHTML/CSS

21. WHEN (WHO)TOUSE?
4
EXPERT web developers

22. CHOOSING THE BEST OPTION FOR YOUR
WEBAPP
Think in your USE CASE
Think in your USERS
Think in your SKILLS
Know your TOOLS

23. SOME REAL WORLD EXAMPLES
A in Valencia
Somethinga
A usingOL3
An
This is
SFPark.org
localgeoportal
bitdifferent
simple webapp
OL3 geoportal
notGXP

24. LEARNING RESOURCES

25. 1
Learn byEXAMPLE
OpenGeorecipesbook
GXP examples
GeoExt examples
ExtJS examples
OpenLayersexamples

26. 2
Browse the DOCUMENTATION
GXP documentation
GeoExt documentation

27. 3
API reference
GXP APIreference
GeoExt APIreference
ExtJS 3.4 APIreference
OpenLayersAPIreference

28. GXP LAB
Creatingacompleteweb GIS application

29. APPLICATION LIFE-CYCLE
Creation
suite-sdkcreate/home/user/bin/myappgxp
Testing/Debug
suite-sdkdebug<span>-ghttp://localhost:8082/geoserver</span><spanstyle="font-family:
#openinyourbrowserhttp://localhost:9080
Package /Deployment
suite-sdkpackage/home/user/bin/myapp
GXPdocu mentation

30. DISSECTING THE APPLICATION
1. Directorystructure
2. Dependencymanagement
3. The Viewer
1. portalItems: UI -ExtJS
2. tools: GXP plugins and widgets
3. sources: Map servers
4. map: OpenLayers
4. The app Object
1. The OpenLayers Map
2. Tools, sources, ...

31. DEVELOPMENT LIFE-CYCLE
1. Create (justonce per webapp)
2. Startdebug
3. Open abrowser (http://localhost:port)
4. Open "devtools"of your browser
5. Code-> Refreshbrowser
6. Add dependency-> Stopdebug (Ctrl + C)
7. Start debug
8. Refreshbrowser
9. GO to5
10. If your_app_is_broken then GO to 4

32. EXERCICES
1. Add an eastand south panels
2. Add anorth panelwith abackground image
3. Change the width of the LayerTree panel
4. Add the slide propertyto the LayerTree panel
5. Add abottom toolbar to the LayerTree
6. Move the RemoveLayer plugin to the bottom toolbar
7. Add groups to the layer tree
8. Move layers to differentgroups
9. Center the map in Girona

33. CUSTOMIZING THE APPLICATION
1. Addingan " "dialog
Add another source to the Viewer
Addinga" "tool
Addinga" "tool
Changingthe in Geoserver
Addinga" "tool
Addinga" " tool
Addinga" "
Changingthe
Changingthe
Add anew server...
Zoom to layer extent
WMS GetFeatureInfo
template
Legend
Google geocode search
Google base layer
projection
locale

34. EXERCICES
1. Add alayer from MapBox
2. Add aMeasure tool
3. Add aYouTube layer
4. Add aPicasalayer
5. Remove the PanPaneland the Zoom
6. Add aSelectFeature control
7. Add a
You can still write standard OpenLayers code to add more
functionality buttry to use GXPas much as possible
GeoRSS Layer

35. EDITING TOOLS
1. Settingup a
2. Settingup a
3. Addinga
FeatureManager
FeatureEditor
FeatureGrid

36. USE CASES
Create aweb GIS application for you to editalayer of points ( you
can use any existing layer on Geoserver or publish your own )
Create another web GIS application for your users to justview
thatlayer of points, showingthem justthe map, navigation tools
and atoolto getinformation byclickinganypoint.
Checkthatwhenever you add anew pointin your webapp, your users
can see the changes

37. CREATING APPLICATION PLUGINS
1.
2.
3.
Plugin with action only
Plugin with outputonly
Plugin with action and output

38. Q&A