Template
When you work with GWT, the first thing to create is the UI... In this case, I used a very simple layout:
<html> 24 <head> 25 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 26 27 <link type="text/css" rel="stylesheet" href="WorldMap.css"> 28 29 <title>WorldMap</title> 30 31 32 <!-- Let's include google analytics--> 33 <script type="text/javascript"> 34 35 var _gaq = _gaq || []; 36 _gaq.push(['_setAccount', 'XXXX']); 37 _gaq.push(['_trackPageview']); 38 39 (function () { 40 var ga = document.createElement('script'); 41 ga.type = 'text/javascript'; 42 ga.async = true; 43 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 44 var s = document.getElementsByTagName('script')[0]; 45 s.parentNode.insertBefore(ga, s); 46 })(); 47 48 </script> 49 <script type="text/javascript" language="javascript" src="worldmap/worldmap.nocache.js"></script> 50 </head> 51 52 <body> 53 54 55 <h1>World Map</h1> 56 57 58 <div align="right">For more information: <a href="http://yocto-meteo.blogspot.com">yocto-meteo.blogspot.com</a></div> 59 60 61 <div id="worldMap"></div> 62 63 <!-- The loading image has been taken from: www.preloaders.net--> 64 <div id="loading" align="center"><img src="images/loading.gif" alt="Please wait..."></div> 65 66 <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' 67 style="position:absolute;width:0;height:0;border:0"></iframe> 68 69 </body> 70 </html>
Let me describe the interesting points in this code:
- At line 33, we add google analytics to keep track of the people coming on the page
- At line 49, we add the javascript code that will be compiled by GWT
- At line 61: we add the content that GWT will modify: it is at this location that the map will be displayed
- At line 64, we add a loading picture, that will be removed as soon as the whole content will be loaded. The picture comes from: http://www.preloaders.net
Worldmap
Now, let's see the JAVA code to display the world map:55 public class WorldMap implements EntryPoint { 56 ... 68 69 public void onModuleLoad() { 70 71 hubs = new HashMap<String, Hub>(); 72 73 //Loading page is taken from: 74 75 76 //Let's initialize the currentHub and template. 77 //The values taken are the default values 78 GWTYoctoTemplate template = new GWTYoctoTemplate("http://localhost:4444"); 79 currentHub = new Hub(new YoctoHub(template)); 80 81 //Load the Map 82 Maps.loadMapsApi("", "2", false, new Runnable() { 83 public void run() { 84 buildUi(); 85 } 86 }); 87 88 89 } 90 91 private void buildUi() { 92 93 logger.info("Build UI"); 94 95 //Note: that in order to get locations and markers: the MAP api must be loaded first. 96 createCallbacks(); 97 98 99 LatLng cartigny = LatLng.newInstance(46.1833, 6.0167); 100 101 map = new MapWidget(cartigny, 2); 102 map.setSize("100%", "100%"); 103 // Add some controls for the zoom level 104 map.addControl(new LargeMapControl()); 105 106 final DockLayoutPanel dock = new DockLayoutPanel(Style.Unit.PX); 107 108 dock.addNorth(map, 500); 109 110 RootPanel.get("worldMap").add(dock); 111 // Add the map to the HTML host page 112 113 }
The purpose of this code is to create the world map and display it on the page:
- At line 55, the class implements EntryPoint: it means that GWT knows it is the main class and that it contains a method called onModuleLoad
- At line 78, we create the YoctoTemplate and the YoctoHub to be able to contact them
- At line 82, we load the map and when the map is ready, the function buildUI is called (Here is the first contact with a callback function)
- At line 96, we create various callbacks to get: the current location, the hub values, the database content, etc.
- At line 110, we replace the content of the div world map with the map that has just been created
Aucun commentaire:
Enregistrer un commentaire