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

var agenda = {
   "first-section":[
      {
         "content":"Introduction to GXP (what, why, when)",
         "duration":45
      },
      {
         "content":"Learning resources",
         "duration":15
      },
      {
         "content":"My first GXP application",
         "duration":60
      }
   ],
   "break":{
      "content":"coffee",
      "duration":30
   },
   "second-section":{
      "content":"Customizing the application",
      "duration":90
   },
   "break":{
      "content":"lunch",
      "duration":60
   },
   "third-section":[
      {
         "content":"Editing tools",
         "duration":60
      },
      {
         "content":"Q & A",
         "duration":30
      },
      {
         "content":"Custom plugins",
         "duration":60
      }
   ]
}


What is GXP?

(OpenGeo Suite Client SDK, Webapp SDK, Boundless SDK...)

"a Javascript SDK for developing high level GeoExt based Applications"

WHAT IS GXP?


1

GXP is a Software Development Kit


WHAT IS GXP?


2

It covers the complete LIFE-CYCLEof the application development
  • Create
  • Test
  • Customize
  • Package
  • Deploy

WHAT IS GXP?


3

It's a FRAMEWORK

  • API
  • Plugins
  • Widgets
  • Dependency management


the concept

THE CONCEPT

1

GeoExt + OpenLayers + GXP API + SDK
UI + MAP + Custom components + Lifecycle

THE CONCEPT

2

Take CONFIGURATION PATTERN  to a higher level
(Configuration over programming)

THE CONCEPT

3

Bundled into the OpenGeo Suite (also standalone)


Why GXP?

WHY GXP?

1

Need of a COMPLETE SDK for web mapping applications 

WHY  GXP?

2

MINIMAL CONFIGURATION  for complex apps

WHY  GXP?

3

Need of UI components

WHY  GXP?

4

FREE  - GPLv3 License

Where in the stack?

WHEN (who) TO USE?

WHEN  (WHO) TO USE?

1

web GIS applications (geoportals)

WHEN  (WHO) TO USE?

2

HIGHER LEVEL GIS components  (editing, styling, browsing...)

WHEN  (WHO) TO USE?

3

(Even more) BEGINNERS  confused by HTML/CSS 

WHEN  (WHO) TO USE?

4

EXPERT  web developers 


Choosing the best option for your webapp

  • Think in your USE CASE
  • Think in your USERS
  • Think in your SKILLS
  • Know your TOOLS

Some real world examples

Learning resources


1

Learn by EXAMPLE


2

Browse the DOCUMENTATION


3

API reference


GXP lab

Creating a complete web GIS application

APPLICATION LIFE-CYCLE

Creation 
suite-sdk create /home/user/bin/myapp gxp
Testing / Debug 
suite-sdk debug -g http://localhost:8082/geoserver /home/user/bin/myapp
#open in your browser http://localhost:9080
Package / Deployment 
suite-sdk package /home/user/bin/myapp
GXP docu mentation

Dissecting the application


  1. Directory structure
  2. Dependency management
  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, ...

DEVELOPMENT LIFE-CYCLE


  1. Create (just once per webapp)
  2. Start debug
  3. Open a browser (http://localhost:port)
  4. Open "dev tools" of your browser
  5. Code -> Refresh browser
  6. Add dependency -> Stop debug (Ctrl + C)
  7. Start debug
  8. Refresh browser
  9. GO to 5
  10. If your_app_is_broken then GO to 4

EXERCICES


  1. Add an east and south panels
  2. Add a north panel with a background image
  3. Change the width of the LayerTree panel
  4. Add the slide property to the LayerTree panel
  5. Add a bottom toolbar to the LayerTree
  6. Move the RemoveLayer plugin to the bottom toolbar
  7. Add groups to the layer tree
  8. Move layers to different groups
  9. Center the map in Girona

CUSTOMIZING THE APPLICATION


  1. Adding an "Add a new server..." dialog
  • Add another source to the Viewer
  • Adding a "Zoom to layer extent" tool
  • Adding a "WMS GetFeatureInfo" tool
  • Adding a "Legend" tool
  • Adding a "Google geocode search"  tool
  • Adding a "Google base layer"
  • Changing the projection
  • Changing the locale

    • Exercices


    1. Add a layer from MapBox
    2. Add a Measure tool
    3. Add a YouTube layer
    4. Add a Picasa layer
    5. Remove the PanPanel and the Zoom
    6. Add a SelectFeature control
    7. Add a GeoRSS Layer

    You can still write standard OpenLayers code to add more functionality but try to use GXP as much as possible

    Editing tools


    1. Setting up a FeatureManager
    2. Setting up a FeatureEditor
    3. Adding a FeatureGrid


    USE CASES


    Create a web GIS application for you to edit a layer of points (you can use any existing layer on Geoserver or publish your own)


    Create another web GIS application for your users to just view that layer of points, showing them just the map, navigation tools and a tool to get information by clicking any point.

    Check that whenever you add a new point in your webapp, your users can see the changes


    CREATING APPLICATION PLUGINS



    Q&A


    Developing with the OpenGeo Suite Client SDK

    By Alberto Romeu

    Made with Slides.com

    Developing with the OpenGeo Suite Client SDK

    Slides for Open Source Opportunities in GIS Summer School, Open Web Services and Web Map Applications.

    • 3,618

    More from Alberto Romeu