The Example
Now, let’s review an LZX application that employs the Google Maps API. This application shows how to use the classes in the Google Maps API and how to control JavaScript control from inside an OpenLaszlo application.
The application shows a list of prominent cities in Japan with their longitudes and latitudes. When you click a city, the map of the city is displayed.
There are several parts of this application:
The ken.xml file that lists all locations.
The LZX application.
The HTML wrapper application
The ken.xml file is given in Listing 15.2. Note that ken means location in Japanese. The longitude is given by the lon element and the latitude by the lat element.
Listing 15.2. The ken.xml file
<?xml version="1.0" encoding="utf-8" ?>
<lists>
<items>
<ken>Hokkaido</ken>
<lon>141.35046</lon>
<lat>43.06197</lat>
</items>
<items>
<ken>Aomori</ken>
<lon>140.74365</lon>
<lat>40.82178</lat>
</items>
<items>
<ken>Akita</ken>
<lon>140.10626</lon>
<lat>39.71539</lat>
</items>
<items>
<ken>Iwate</ken>
<lon>141.15547</lon>
<lat>39.70096</lat>
</items>
<items>
<ken>Yamagata</ken>
<lon>140.36702</lon>
<lat>38.23746</lat>
</items>
<items>
<ken>Miyagi</ken>
<lon>140.87549</lon>
<lat>38.26594</lat>
</items>
<items>
<ken>Hukushima</ken>
<lon>140.47157</lon>
<lat>37.74733</lat>
</items>
<items>
<ken>Nigata</ken>
<lon>139.02640</lon>
<lat>37.89942</lat>
</items>
<items>
<ken>Tokyo</ken>
<lon>139.69487</lon>
<lat>35.68627</lat>
</items>
<items>
<ken>Gunma</ken>
<lon>139.0638</lon>
<lat>36.38779</lat>
</items>
<items>
<ken>Totigi</ken>
<lon>139.88673</lon>
<lat>36.56242</lat>
</items>
<items>
<ken>Ibaragi</ken>
<lon>140.45047</lon>
<lat>36.33791</lat>
</items>
<items>
<ken>Saitama</ken>
<lon>139.65221</lon>
<lat>35.85421</lat>
</items>
<items>
<ken>Tiba</ken>
<lon>140.12637</lon>
<lat>35.60131</lat>
</items>
<items>
<ken>Kanagawa</ken>
<lon>139.64578</lon>
<lat>35.44445</lat>
</items>
<items>
<ken>Yamanashi</ken>
<lon>138.57152</lon>
<lat>35.66302</lat>
</items>
<items>
<ken>Sizuoka</ken>
<lon>138.38623</lon>
<lat>34.97353</lat>
</items>
<items>
<ken>Nagano</ken>
<lon>138.18398</lon>
<lat>36.64779</lat>
</items>
<items>
<ken>Toyama</ken>
<lon>137.21463</lon>
<lat>36.69237</lat>
</items>
<items>
<ken>Isikawa</ken>
<lon>136.62853</lon>
<lat>36.59171</lat>
</items>
<items>
<ken>Gihu</ken>
<lon>136.72688</lon>
<lat>35.38808</lat>
</items>
<items>
<ken>Aichi</ken>
<lon>136.90973</lon>
<lat>35.17691</lat>
</items>
<items>
<ken>Mie</ken>
<lon>136.51149</lon>
<lat>34.72701</lat>
</items>
<items>
<ken>Hukui</ken>
<lon>136.22368</lon>
<lat>36.06207</lat>
</items>
<items>
<ken>Siga</ken>
<lon>135.87238</lon>
<lat>35.00097</lat>
</items>
<items>
<ken>Kyoto</ken>
<lon>135.75781</lon>
<lat>35.01786</lat>
</items>
<items>
<ken>Osaka</ken>
<lon>135.52233</lon>
<lat>34.68347</lat>
</items>
<items>
<ken>Nara</ken>
<lon>135.83568</lon>
<lat>34.68179</lat>
</items>
<items>
<ken>Wakayama</ken>
<lon>135.17028</lon>
<lat>34.22273</lat>
</items>
<items>
<ken>Hyogo</ken>
<lon>135.18575</lon>
<lat>34.6878</lat>
</items>
<items>
<ken>Tottori</ken>
<lon>134.2408</lon>
<lat>35.50033</lat>
</items>
<items>
<ken>Okayama</ken>
<lon>133.93787</lon>
<lat>34.65815</lat>
</items>
<items>
<ken>Simane</ken>
<lon>133.05305</lon>
<lat>35.46919</lat>
</items>
<items>
<ken>Hiroshima</ken>
<lon>132.46188</lon>
<lat>34.39309</lat>
</items>
<items>
<ken>Yamaguti</ken>
<lon>131.47297</lon>
<lat>34.18288</lat>
</items>
<items>
<ken>Kagawa</ken>
<lon>134.04599</lon>
<lat>34.33718</lat>
</items>
<items>
<ken>Tokushima</ken>
<lon>134.56094</lon>
<lat>34.06277</lat>
</items>
<items>
<ken>Ehime</ken>
<lon>132.76865</lon>
<lat>33.83861</lat>
</items>
<items>
<ken>Kouchi</ken>
<lon>133.53367</lon>
<lat>33.55634</lat>
</items>
<items>
<ken>Fukuoka</ken>
<lon>130.41806</lon>
<lat>33.60078</lat>
</items>
<items>
<ken>Saga</ken>
<lon>130.30139</lon>
<lat>33.24616</lat>
</items>
<items>
<ken>Nagasaki</ken>
<lon>129.87575</lon>
<lat>32.74123</lat>
</items>
<items>
<ken>Ooita</ken>
<lon>131.61493</lon>
<lat>33.23479</lat>
</items>
<items>
<ken>Kumamoto</ken>
<lon>130.7438</lon>
<lat>32.78617</lat>
</items>
<items>
<ken>MIyazaki</ken>
<lon>131.42601</lon>
<lat>31.90745</lat>
</items>
<items>
<ken>Kagoshima</ken>
<lon>130.5600</lon>
<lat>31.55750</lat>
</items>
<items>
<ken>Okinawa</ken>
<lon>127.68269</lon>
<lat>26.20836</lat>
</items>
</lists> |
The LZX application consists of two LZX files, gmaps.lzx and googlemaps_sample1.lzx, given in Listings 15.3 and 15.4, respectively.
Listing 15.3. The gmaps.lxz file
<library>
<class name="gmaps">
<attribute name="mapname" type="string" value="map" />
<method name="centerAndZoom" args="lat, lon, zoom">
evalscript(mapname + ".centerAndZoom(new GPoint(" + lat
+ "," + lon +
")," + zoom + ")");
</method>
<method name="centerAndZoomJp" args="lat, lon, zoom">
var nlat = lon - lon * 0.00010695 + lat * 0.000017464 +
0.0046017;
var nlon = lat - lon * 0.000046038 - lat * 0.000083043 +
0.010040;
evalscript(mapname + ".centerAndZoom(new GPoint(" + nlat
+ "," + nlon +
")," + zoom + ")");
</method>
<method name="openInfoWindowHtmlAtMapCenter" args="msg">
evalscript(mapname + ".openInfoWindowHtml(" + mapname +
".getCenterLatLng(),'" + msg + "')");
</method>
<method name="openInfoWindowHtmlJp" args="lat, lon, msg">
var nlat = lon - lon * 0.00010695 + lat * 0.000017464 +
0.0046017;
var nlon = lat - lon * 0.000046038 - lat * 0.000083043 +
0.010040;
evalscript(mapname + ".openInfoWindowHtml(new GPoint(" +
nlat + "," +
nlon + "),'" + msg + "')");
</method>
<method name="evalscript" args="script">
var str = "evalscript("" + script + "")";
LzBrowser.loadJS(str);
</method>
</class>
</library> |
Listing 15.4. The googlemaps_sample1.lzx file
<canvas>
<include href="gmaps.lzx/" />
<gmaps name="map"/>
<class name="kenitem" extends="view" focusable="true"
bgcolor="#9999CC">
<attribute name="ken" value="$path{'ken/text()'}" />
<attribute name="lat" value="$path{'lat/text()'}" />
<attribute name="lon" value="$path{'lon/text()'}" />
<simplelayout axis="y"/>
<text text="${classroot.ken}" />
<view name="hint" height="0" clip="true" x="5">
<simplelayout axis="y"/>
<text text="${'lat:' + classroot.lat}" />
<text text=" ${'lon:' + classroot.lon}" />
<animator name="open" attribute="height" to="30"
duration="100" start="false"/>
<animator name="close" attribute="height" to="0"
duration="50" start="false"/>
</view>
<method event="onclick">
map.openInfoWindowHtmlJp(lat, lon, getHtmlMsg());
</method>
<method name="getHtmlMsg">
<![CDATA[
var msg ='<nobr>'+ this.ken +' is selected.<br />'
+ '<b>lat: </b>'+ this.lon +'<br />'
+ '<b>lon: </b>'+ this.lat +'<br /></nobr>'
return msg;
]]>
</method>
<method event="onblur">
this.hint.close.doStart();
this.setBGColor(0x9999CC);
</method>
<method event="onfocus">
this.setBGColor(0xFFFFFF);
this.hint.open.doStart();
</method>
</class>
<dataset name="ken" src="ken.xml" />
<view width="200" height="400" datapath="ken:/lists"
clip="true">
<view name="contents">
<simplelayout axis="y" spacing="2" />
<kenitem datapath="items" />
</view>
<scrollbar/>
</view>
</canvas> |
To test this application, you need a wrapper, which for this application is the index.html file in Listing 15.5
Listing 15.5. The index.html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>LaszloJapan - Google Maps + OpenLaszlo Demo</title>
<script language="JavaScript1.1"
src="/lps-4.0.x/lps/includes/vbembed.js" type="text/javascript">
</script>
<script src="/lps-4.0.x/lps/includes/embed.js"
type="text/javascript">
</script>
<script
src="http://maps.google.co.jp/maps?file=api&v=1&key=ABQIAAAAI
gThCNv3JZ4GZTXeVZlXLxTwM0brOpm-
All5BF6PoaKBxRWWERT1zOfmjyhFP8UxLMMX1EFUICYGmg"
type="text/javascript"></script>
<body>
<div id="map" style="width: 500px; height: 400px; float:
left"></div>
<div id="laszloapp" style = "margin:0px">
<script type="text/javascript">
lzLPSRoot = '/lps-4.0.x;
lzCanvasRuntimeVersion = 7 * 1;
if (lzCanvasRuntimeVersion == 6) {
lzCanvasRuntimeVersion = 6.65;
}
if (isIE && isWin || detectFlash() >=
lzCanvasRuntimeVersion) {
lzEmbed({url:
'googlemaps_sample1.lzx.swf'+window.location.search.substring
(1), bgcolor: '#ffffff', width: '200', height: '400', id:
'lzapp'}, lzCanvasRuntimeVersion);
lzHistEmbed(lzLPSRoot);
} else {
document.write('This application requires Flash player '
+ lzCanvasRuntimeVersion + '. <a
href="http://www.macromedia.com/go/getflashplayer"
target="fpupgrade">Click here</a> to upgrade.'),
}
</script>
</div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new
GPoint(139.69512732988332,35.685483113982414), 0);
function evalscript(str){
eval(str);
}
</script>
<noscript>Please enable JavaScript in order to use this application.
</noscript>
</body>
</html> |
Note that you need to edit the value of the lzLPSRoot variable (in the bold line) if you’re not using OpenLaszlo 4.0.x when testing this application.
To compile and run this application, use this URL:
http://localhost:8080/lps-4.0.x/gmaps/index.html
Figure 15.2 shows the application.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.