As demonstrated in the previous section, a map that fills the whole browser viewport is generated by bringing together a minimal html document and some application initialization code.
We’ll look at each of these parts in a bit more detail.
Since the mother of all web browser content is still HTML, every web application needs at least a basic HTML document as container. It does not contain human readable markup, so it has an empty body. But it makes sure that all required style and script resources are loaded. These usually go in the document’s head:
<link rel="stylesheet" type="text/css"
href="../sencha-touch/resources/css/sencha-touch.css">
<link rel="stylesheet" type="text/css"
href="../openlayers/theme/default/style.tidy.css">
<link rel="stylesheet" type="text/css"
href="../gxm/resources/css/gxm.css">
<!-- Prettify the attribution of the layer -->
<style type="text/css">
.olControlAttribution {
position : absolute !important;
font-size : 10px !important;
bottom : 0 !important;
right : 0 !important;
background : rgba(0,0,0,0.1) !important;
font-family : Arial !important;
padding : 2px 4px !important;
border-radius : 5px 0 0 0 !important;
}
</style>
<!-- Load Sencha Touch -->
<script type="text/javascript"
src="../sencha-touch/builds/sencha-touch-all.js"></script>
<!-- Load OpenLayers -->
<script type="text/javascript"
src="../openlayers/lib/OpenLayers.js"></script>
<!-- This file loads all relevant files -->
<script type="text/javascript"
src="../gxm/lib/GXM.loader.js"></script>
As we are using OpenLayers to show a map in GXM and Sencha Touch for the layout of the User Interface (UI), we have to load these libraries before we load GXM itself at the end.
This is done in last three lines of the code above.
Note
When using GXM, you also benefit from all the functionality that plain Sencha Touch and OpenLayers provide.
When creating web applications with Sencha Touch, it is important, that your HTML also contains the following elements:
An HTML doctype:
<!DOCTYPE html>
and (to look well on mobile devices) some meta tags:
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable"
content="yes">
Application initialization in this context means that we setup some common object we will be using when we really create the map. The code below belongs into an <script>-tag that is being executed after all OpenLayers-code has loaded and is available.
// global variable to debug:
var gxmMap; // will hold the GXM.Map instance
// create an OpenLayers WMS layer to be shown on the map
var layerOwsOsmTerrestris = new OpenLayers.Layer.WMS(
'terrestris OSM WMS',
'http://ows.terrestris.de/osm-basemap/service', {
layers : 'OSM-WMS-Deutschland'
}, {
attribution : '© terrestris GmbH & Co. KG, ' +
'Data © OpenStreetMap contributors, CC-BY-SA'
}
);
We start by creating a global variable gxmMap, which will be usefull when debugging the application later.
We then create an instance of an OpenLayers.Layer (A WMS-layer in this case). This is plain code using only OpenLayers-API.
Thats it, we do not need more preperation code than the above.
Building the UI for our first example is done in the following lines:
Ext.setup({
viewport : {
// hide the addressbar of the device
autoMaximize : true
},
// A function to be called when the application is ready.
// Our application logic will be put here
onReady :function() {
gxmMap = Ext.create('GXM.Map', {
mapCenter : [10.15, 51.34],
mapZoom: 6,
layers: [
layerOwsOsmTerrestris
]
});
Ext.Viewport.add(
gxmMap
);
}
});
Ext.setup takes an object as only parameter and sets up the behavoiour of the page. In our case we tell Sencha Touch to run some code as soon as possible (all the contents of the onReady function) and that the viewport (the browsers visible space) shall be maximized automatically. This also hides the addressbar in the mobile browser, so that our application can take more of the rare space on mobile devices.
gxmMap = Ext.create('GXM.Map', {
mapCenter : [10.15, 51.34],
mapZoom: 6,
layers: [
layerOwsOsmTerrestris
]
});
The above lines create an instance of a GXM.Map that wraps OpenLayers maps so these can be used inside of the other components of Sencha Touch.
We will be using Ext.create() quite often through out this workshop, so let’s see how we can do that. The Ext.create() takes two arguments:
After a creation of a map, we simply add this map to the global Ext.Viewport:
Ext.Viewport.add(
gxmMap
);
That is all you need for a very simple GXM web application.
We already saw that the body of our HTML document is empty. Everything that we see on the web page is added by Sencha Touch, but for this to work we need to have the DOM of the page ready, so we can append to it. To ensure that we don’t write to the DOM too early, Sencha Touch provides the onReady hook in Ext.setup.
You’ve successfully dissected your first application! Next let’s learn more about developing with GXM.
