[Commits] r2824 - sandbox/gxm/geoext/gxm/examples
commits at geoext.org
commits at geoext.org
Tue Aug 23 17:08:47 CEST 2011
Author: marcjansen
Date: 2011-08-23 17:08:47 +0200 (Tue, 23 Aug 2011)
New Revision: 2824
Added:
sandbox/gxm/geoext/gxm/examples/wiki.html
Modified:
sandbox/gxm/geoext/gxm/examples/buttons.js
sandbox/gxm/geoext/gxm/examples/examples.css
sandbox/gxm/geoext/gxm/examples/layerlist.js
Log:
[gxm] more source code buttons for the examples
Modified: sandbox/gxm/geoext/gxm/examples/buttons.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/buttons.js 2011-08-23 12:44:27 UTC (rev 2823)
+++ sandbox/gxm/geoext/gxm/examples/buttons.js 2011-08-23 15:08:47 UTC (rev 2824)
@@ -9,8 +9,76 @@
var viewport;
+
+
Ext.setup({
onReady: function(){
+ // for this example:
+ var getExampleCode = function() {
+ var strS = '<span class="string">',
+ strE = '</span>',
+ comS = '<span class="comment">',
+ comE = '</span>',
+ numS = '<span class="number">',
+ numE = '</span>',
+ keyS = '<span class="keyword">',
+ keyE = '</span>',
+ boolS = '<span class="boolean">',
+ boolE = '</span>',
+ ind = ' ',
+ varCode = keyS + 'var' + keyE,
+ newCode = keyS + 'new' + keyE;
+
+ return [
+ '<pre class="example-code">'+
+ comS + '// usually you generate a OpenLayers control and' + comE,
+ comS + '// pass it over to the GXM.Button-constructor:' + comE,
+ varCode + ' zoomin = ' + newCode + ' OpenLayers.Control.ZoomIn();',
+ varCode + ' btnZoomIn = ' + newCode + ' GXM.Button( {',
+ ind + 'control: zoomin,',
+ ind + 'map: map, ' + comS + '// adds the control to the map' + comE,
+ ind + 'title: ' + strS + '"Zoom In"' + strE,
+ '} );',
+ '',
+ comS + '// in the above code a single-click control' + comE,
+ comS + '// (OpenLayers.Control.TYPE_BUTTON), is managed, so' + comE,
+ comS + '// the controls trigger()-method will execute ' + comE,
+ comS + '// whenever a button-tap occurs.' + comE,
+ '',
+ comS + '// If you manage controls that are active/inactive' + comE,
+ comS + '// (for example a TouchNavigation-control) the buttons' + comE,
+ comS + '// "pressedCls" will reflect the buttons state.' + comE,
+ comS + '// the "pressed"-configuration is used to autoactivate the control:' + comE,
+ varCode + ' nav = ' + newCode + ' OpenLayers.Control.TouchNavigation();',
+ varCode + ' btnNav = ' + newCode + ' GXM.Button( {',
+ ind + 'control: nav,',
+ ind + 'map: map,',
+ ind + 'title: ' + strS + '"Navigation",' + strE,
+ ind + 'pressed: ' + boolS + 'true' + boolE + ', ' + comS + '// autoactivate this control' + comE,
+ ind + 'pressedCls: ' + strS + '"my-btn-pressed-cls",' + strE,
+ '',
+ comS + '// Use the "exclusiveGroup" configuration to make sure' + comE,
+ comS + '// that from a group of controls only one is active at' + comE,
+ comS + '// any time. The digitizing buuttons and the navigation' + comE,
+ comS + '// buttons on this page are an example: ' + comE,
+ varCode + ' ctrlDrawPoint = ' + newCode + ' OpenLayers.Control.DrawFeature(',
+ ind + comS + "// more OpenLayers-configuration" + comE,
+ ');',
+ varCode + ' ctrlNav = ' + newCode + ' OpenLayers.Control.TouchNavigation();',
+ varCode + ' btnNav = ' + newCode + ' GXM.Button( {',
+ ind + 'exclusiveGroup:' + strS + '"working-on-map",' + strE,
+ ind + 'control: ctrlDrawPoint',
+ ind + comS + "// more GXM.Button-configuration" + comE,
+ '} );',
+ varCode + ' btnDigi = ' + newCode + ' GXM.Button( {',
+ ind + 'exclusiveGroup:' + strS + '"working-on-map",' + strE,
+ ind + 'control: ctrlNav',
+ ind + comS + "// more GXM.Button-configuration" + comE,
+ '} );' +
+ '</pre>'
+ ].join("\n");
+ };
+
// OpenLayers specific
var map = new OpenLayers.Map({
controls: []
@@ -182,6 +250,26 @@
});
+
+ // A button to show relevant code parts
+
+ var btnSource = {
+ xtype: 'button',
+ text: 'Source',
+ handler: function(){
+ var overlay = new Ext.Panel({
+ floating: true,
+ modal: true,
+ centered: false,
+ styleHtmlContent: true,
+ scroll: 'both',
+ html: getExampleCode()
+ });
+ overlay.showBy(this);
+ }
+ };
+
+
viewport = new Ext.Panel({
fullscreen: true,
layout: 'fit',
@@ -192,6 +280,8 @@
items: [
btnZoomIn,
btnZoomOut,
+ {xtype: 'spacer'},
+ btnSource,
{xtype: 'spacer'},
btnNavigation
]
Modified: sandbox/gxm/geoext/gxm/examples/examples.css
===================================================================
--- sandbox/gxm/geoext/gxm/examples/examples.css 2011-08-23 12:44:27 UTC (rev 2823)
+++ sandbox/gxm/geoext/gxm/examples/examples.css 2011-08-23 15:08:47 UTC (rev 2824)
@@ -19,6 +19,15 @@
font-style: italic
}
+span.keyword {
+ color: blue;
+}
+
+span.boolean {
+ color: #EE82EE;
+}
+
+
div.olControlAttribution {
border-top: 2px solid rgba(50,50,50,0.65);
border-left: 2px solid rgba(50,50,50,0.65);
Modified: sandbox/gxm/geoext/gxm/examples/layerlist.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/layerlist.js 2011-08-23 12:44:27 UTC (rev 2823)
+++ sandbox/gxm/geoext/gxm/examples/layerlist.js 2011-08-23 15:08:47 UTC (rev 2824)
@@ -11,6 +11,45 @@
Ext.setup({
onReady: function(){
+ // for this example:
+ var getExampleCode = function(){
+ var strS = '<span class="string">',
+ strE = '</span>',
+ comS = '<span class="comment">',
+ comE = '</span>',
+ numS = '<span class="number">',
+ numE = '</span>',
+ keyS = '<span class="keyword">',
+ keyE = '</span>',
+ boolS = '<span class="boolean">',
+ boolE = '</span>',
+ ind = ' ',
+ varCode = keyS + 'var' + keyE,
+ newCode = keyS + 'new' + keyE;
+ return [
+ '<pre class="example-code">' +
+ comS + '// Use the "xtype"-configuration string "gxm_layerlist"' + comE,
+ comS + '// to create a LayerList with default styling: ' + comE,
+ varCode + ' myLayerList = {',
+ ind + 'xtype: ' + strS + '"gxm_layerlist"' + strE + ',',
+ ind + 'mapPanel: myMapPanel ' + comS + '// an instance of GXM.MapPanel' + comE,
+ '};',
+ '',
+ comS + '// You can still register usual evbent listeners,'+ comE,
+ comS + '// e.g. for the "itemtap"-event of the LayerList:'+ comE,
+ varCode + ' myLayerList = {',
+ ind + comS + '// standard configuration, see above' + comE,
+ ind + 'listeners: [',
+ ind + ind + 'scope: ' + keyS + 'this' + keyE+ ',',
+ ind + ind + 'itemtap: ' + keyS + 'function' + keyE + '() {',
+ ind + ind + ind + comS + '// your method...' + comE,
+ ind + ind + '}',
+ ind + ']',
+ '};',
+ '</pre>'
+ ].join("\n");
+ };
+
OpenLayers.Layer.Vector.prototype.renderers = ["SVG2", "VML", "Canvas"];
var gg = new OpenLayers.Projection("EPSG:4326");
@@ -121,6 +160,15 @@
items: [layerList]
};
+ var sourcePanel = {
+ xtype: 'panel',
+ title: 'Source',
+ fullscreen: true,
+ styleHtmlContent: true,
+ scroll: 'both',
+ html: getExampleCode()
+ };
+
var vp = new Ext.TabPanel({
tabBar: {
dock: 'top',
@@ -140,7 +188,7 @@
],
fullscreen: true,
layout: 'card',
- items: [mapPanel, layerPanel]
+ items: [mapPanel, layerPanel, sourcePanel]
});
}
Added: sandbox/gxm/geoext/gxm/examples/wiki.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/wiki.html (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/wiki.html 2011-08-23 15:08:47 UTC (rev 2824)
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+ <title>GXM: The GXM.Button- and SegmentedButton-class</title>
+
+ <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">
+
+ <link rel="stylesheet" href="../external/sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
+ <link rel="stylesheet" href="../external/OpenLayers.r11966/theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="../css/gxm.css" type="text/css">
+
+ <script type="text/javascript" src="../external/sencha-touch-1.1.0/sencha-touch.js"></script>
+ <script type="text/javascript" src="../external/OpenLayers.r11966/OpenLayers.js"></script>
+
+ <!-- This file loads all relevant files -->
+ <script type="text/javascript" src="../lib/GXM.loader.js"></script>
+
+ <!-- This references a singlefile build than can be created e.g. with
+ 'make examplelib' inside the 'build' directory
+ <script type="text/javascript" src="../lib/GXM.closurized.js"></script>
+ -->
+
+ <script type="text/javascript">
+Ext.setup({
+ onReady: function(){
+ // create a map
+var map = new OpenLayers.Map({
+ controls: [
+ new OpenLayers.Control.TouchNavigation(),
+ new OpenLayers.Control.Attribution()
+ ]
+});
+// create a layer
+var ol_wms = new OpenLayers.Layer.WMS(
+ "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {
+ layers: "basic"
+ },
+ {
+ attribution: 'Metacarta WMS hosted on <a href="http://www.osgeo.org/" target="_blank">osgeo.org<a>'
+ }
+);
+// add the layer to the map
+map.addLayers([ol_wms]);
+
+new GXM.MapPanel({
+ map: map,
+ center: [
+ 8,
+ 51
+ ],
+ zoom: 11
+});
+
+
+ }
+});
+ </script>
+ </head>
+ <body>
+ <!-- TODO: have content here that describes this example -->
+ </body>
+</html>
\ No newline at end of file
More information about the Commits
mailing list