IDE Widget Sample Google Map
From MemberWiki
Below are three blocks of code that describe a Google Map widget. The first is the widget.json file for jMaki's Google Map widget. The second is a straight-up conversion of the widget.json file into the proposed Widget Metadata format. It essentially follows the model established by Jon Ferraiolo's original conversion of jMaki's Dojo Clock widget. That model did not indicate what the constructor pattern for the widget was, if any (i.e., it was unclear to me where exactly the "args" would go), nor did it provide default HTML for establishing the widget on the page. Adobe Dreamweaver will need both of these pieces of information in order to insert a widget. I also had a few problems with this specific widget in that jMaki's .json file and Google's Map API [1] didn't seem to jive. In the absence of a clear idea from the .json file of where the args would go, I had a hard time mapping them to anything in Google's documentation. Thus, the third block of code represents a bare-bones Google Map widget based on the Google AJAX API framework [2], described in the proposed Widget Metadata format (with the extra fields that Dreamweaver must have).
The following example is adapted from the jMaki widget.json file for the Google Maps widget and re-expressed in the proposed XML markup language for widgets.
jMaki's widget.json for Google Maps widget
{'name': 'Map',
'type': 'Google',
'version': '1.0',
'jmakiVersion' : '1.0',
'image' : 'images/google-map.jpg',
'description': 'A configurable map.',
'args': [
{'zoom':{'type':'NUMBER', 'defaultValue': '13', 'description': 'The map zoom.'}},
{'centerLat':{'type':'NUMBER', 'defaultValue': 37.4041960114344, 'description': 'The center latititude.'}},
{'centerLon':{'type':'NUMBER',
'defaultValue': -122.008194923401,
'description': 'The center longitude.'}},
{'mapType' : {
'type':'STRING',
'description' : 'The map type.',
'defaultValue' : 'SATALITE',
'values': [
{'name' : 'Hybrid', 'value' : 'HYBRID', 'description' : 'Hybrid satalite map with road overlays.'},
{'name' : 'Regular', 'value' : 'REGULAR', 'description' : 'Default map.'},
{'name' : 'Satalite', 'value' : 'SATALITE', 'description' : 'Satalite map.'}
]
}
},
{'height':{'type':'NUMBER', 'defaultValue': 320, 'description': 'A static height.'}},
{'width':{'type':'NUMBER', 'defaultValue': 500, 'description': 'A static width.'}}
],
'config' : {
'type' : {
'id': 'google.map',
'dynamicallyLoadable' : false,
'libs': ['http://maps.google.com/maps?file=api&v=2&key='],
'apikey' : 'google'
},
'apikeys' : [
{'id': 'google', 'keys': [
{'url': 'http://localhost:3000/',
'key': 'ABQIAAAAyEQwWkLnhtibmBGdNd7jrBTJQa0g3IQ9GZqIMmInSLzwtGDKaBTBJNVRUL7-ClkkvrYjRgYCxRzgfg'
},
{'url': 'http://localhost/',
'key': 'ABQIAAAAyEQwWkLnhtibmBGdNd7jrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRvP3_IZHyjXX94-rCTiuxmYeGQ9g'
},
{'url': 'http://localhost:8080/',
'key': 'ABQIAAAAyEQwWkLnhtibmBGdNd7jrBTwM0brOpm-All5BF6PoaKBxRWWERSE9HbFrfC3qz1xdiSml249wpOibA'
},
{"url" : "http://localhost:8888/",
"key" : "ABQIAAAAyEQwWkLnhtibmBGdNd7jrBTb-vLQlFZmc2N8bgWI8YDPp5FEVBRvQXpq7gkjNd3TJLZPPh3tV7BD7A"
},
{"url" : "http://localhost:8084/",
"key" : "ABQIAAAAyEQwWkLnhtibmBGdNd7jrBTFRfqDGOwfXAlOK-54sJyR4NNS5RTlVk2wm8p_8xaiZbGfRrggljudNw"
}
]
}
]
}
}
JON (20080102): I updated the following example to use the syntax from the 20080102 draft spec.
<widget
xmlns="http://ns.openajax.org/widgets"
name="Map"
widgetVersion='1.0'
specVersion='1.0'
>
<description>This widget is a configurable map.</description>
<icons>
<icon src=images/google-map.jpg"/>
</icons>
<properties>
<property name="zoom" type="Number" required="false" default="13">
<description>The map zoom.</description>
</property>
<property name="centerLat" type="Number" required="false" default="37.4041960114344">
<description>The center latititude.</description>
</property>
<property name="centerLon" type="Number" required="false" default="-122.008194923401">
<description>The center longitude.</description>
</property>
<!-- The default value for mapType must be jMaki-specific, because it isn't even spelled correctly. -->
<property name="mapType" type="String" required="false" default="SATALITE">
<description>The map type.</description>
<enumValues>
<enumValue value="Hybrid" displayValue="HYBRID">
<description>Hybrid satalite map with road overlays.</description>
</enumValue>
<enumValue value="Regular" displayValue="REGULAR">
<!-- If this is the "default" map, why is the default value SATALITE? -->
<description>Default map.</description>
</enumValue>
<enumValue value="Satalite" displayValue="SATALITE">
<description>Satalite map.</description>
</enumValue>
</enumValues>
</property>
<property name="height" type="Number" required="false" default="320">
<description>A static height.</description>
</property>
<property name="width" type="Number" required="false" default="500">
<description>A static width.</description>
</property>
</properties>
<config>
<!-- I honestly have no idea what to do here. I know that the one entry in the
'libs' array is what Adobe would call an 'assetfile', and I know that Google
requires a unique key at the end of that URL. My instinct would be to add a
substitution field (something like @@apiKey@@) to the URL, but I'm not sure
where to define apiKey. It's not an argument, a property, or an option. Ideas?
I'm also not sure to what "dynamicallyLoadable" refers.
</config>
</widget>
JON (20080102): I did *not* update the following example to use the syntax from the 20080102 draft spec.
Generic Google Maps widget expressed in a mix of the proposed XML markup language and Adobe's proposed XML
<widget
xmlns="http://ns.openajax.org/widgets"
name="Map"
libraryName="Google"
libraryVersion="1.0"
widgetVersion='1.0'
specVersion='1.0'
>
<description>A configurable Google Map.</description>
<icons>
<icon src=images/google-map.jpg"/>
</icons>
<defaultHTML>
<![CDATA[<div id="@@id@@"></div>]]>
</defaultHTML>
<constructor location="afterDefaultHTML">
<![CDATA[google.maps.Map2(document.getElementById(@@id@@), @@options@@);]]>
<!-- I don't see how everything can just be a "property", regardless of
whether it's a constructor argument, a options object (a special kind of
constructor argument that both Spry and Google use), or an actual JavaScript
property. How would a tool know where to put the information in the absence
of any further documentation? Or is that what the API metadata is for....?
In any case, I've stuffed an arguments tag inside the constructor tag to make
it clear that these are constructor arguments we're talking about. -->
<arguments>
<argument name="id" type="String" subtype="id" required="true" default="map_canvas" />
<argument name="options" type="Object" subtype="options" required="false" />
</arguments>
</constructor>
<!-- The subtype of "options" in the options argument above is meant to map to this tag. -->
<options>
<option name="size" type="google.map.Size" default="new google.map.Size(500,320)" />
<!-- mapTypes is a bit tricky; the default is itself an array, and thus would not need to be
enclosed in square brackets, whereas any other values *would* need to be. I'm not sure
how we'd communicate that to an IDE. For now I've not included G_DEFAULT_MAP_TYPES in
with the values. Not perfect, I know. -->
<option name="mapTypes" type="Array" subtype="google.map.MapType" values="G_NORMAL_MAP,
G_SATELLITE_MAP,G_HYBRID_MAP" default="G_DEFAULT_MAP_TYPES" />
<!-- The documentation does not indicate what the possible values for these options are,
nor what the default is. -->
<option name="draggableCursor" type="String" default="" />
<option name="draggingCursor" type="String" default="" />
</options>
<config>
<preload>
google.load("maps", "2");
</preload>
<resources>
<!-- reference="remote" indicates that the file should be referenced as-is, not downloaded to the
user's hard drive and referenced locally. -->
<resource type="javascript" src="http://www.google.com/jsapi?key=@@apiKey@@" reference="remote" />
<!-- I'm still at a loss as to how to describe the API key that's needed for this URL in the
metadata. -->
</resources>
</config>
</widget>
