Stanley’s Tech Chat

It feels kinda weird to see they describe the achievement of each other.   It’s historical to see these two big guys sitting together on the stage.

Tech bill gates, steve jobs

The offline web applications like Zimbra narrow the gap between the web and desktop applications in many aspects like connectivity, performance, reliability, etc.  The newly released Google Gear is an even bigger hit in that it sets a platform to help bring any web application "offline".  This will change the way people perceive "web application".  You do NOT need to be always connected to a network in order to use a web application any more.

Followed offline app demo above, I tried the offline Google Reader.  It is very cool.  Also tried simulating an unexpected network connection drop.  When browsing the feeds in Google Reader in "online" mode, the network was suddenly disconnected.  It tried to read the content but timed out.  Then it popped up a window reporting the connection drop and asked if I would like to switch to "offline" mode.  Answer "yes" and I was able to continue reading the feeds offline!  After I get back online, the local data (items marked as read) is synchronized back to the server.  I was never a big fan of Google Reader due to its lack of useful features.  But this offline mode really draws my attention and interest to try using it more.

What’s next?  If this offline technology is used in developing mobile applications and it supports automatic smart downloading and synchronizing, it could greatly improve the performance of the sophisticated applications running on mobile devices with limited bandwidth.

An interesting comparison is with the Microsoft Smart Clients offline mode emerged in 2004 with the similar idea.

Web google, offline, Web

Map API could help build very cool mashup websites.  Often times a back end database is the source of the objects to be drawn on the map and querying for those objects from the database based on the parameters the users choose on the website (e.g., state, city, search criteria) gets complex.  Also to improve the user experience, asynchronous map loading is desired so that while the next batch of objects is being retrieved from the server, the current ones on the map could continue functioning.  To address all these challenges and build a smooth database driven asynchronous loading map application, web service can serve as the bridge between the server side complex data model and the client side map drawing logic.  The following describes the steps of implementing such architecture and a sample code project created in Visual Studio (free version could be downloaded here).  This time, I played with Google Maps API.

Firstly, set up a basic ASP.NET AJAX-enabled web site through the Visual Studio wizard.  You may need to download the AJAX extension from http://ajax.asp.net/.  Inside Default.aspx, add a div in the body like the following to host the map

Reference the google api javascript source and your own javascript file (e.g., gmap.js where the client side mapping code is located) in the head section.

Next is to prepare the data on the server side.  It is actually much easier to set up a relational database in Visual Studio by a just few clicks and there are tons of such examples on the web.  So here let’s try a slightly trickier scenario where we only have a static plain text CSV data file (e.g., exported from an legacy system or Excel spreadsheet) that contains various cities and the fun places in them to be drawn on the map.  Add that data file (e.g., mapdata.csv) under the App_Data/ folder in the solution explore.  Assume the data file has 3 columns State, City, and FunPlace.  Now create a web service (e.g., MapDataWebService) to extract the data from the CSV file and serve to the client side mapping code.  To add this web service, right click the project in the solution explore, select "Add New Item…", select "Web Service", and then rename the file name into "MapDataWebService.asmx".  The web service skeleton is automatically added under App_Code/.  Open it and add 2 web methods getAllStates() and getFunPlacesByState(string state).  The former is used to populate the dropdown on the web page to select a state and the latter is to get the fun places of the selected state.  Both methods connect to the data file through OLE DB and query the data using convenient SQL syntax.  To quickly unit test the web method, you could open MapDataWebService.asmx and press F5 to run the web service alone.

The return value of getFunPlacesByState(string state) would be an array of objects (type of class Place), each of which contains the latitude and longitude of the city and the name of the fun place in that city.  The class Place is the object oriented representation of this information.  The web service will return the objects to the JavaScript caller.  In order for the caller to get the consistent objects and dereference them the same way as in C#, the following directive should be added to the top of the web service code and a reference to the assembly System.Web.Extensions.dll needs to be added to the solution too.  If you don’t have this assembly already installed on your machine, you could download and install "ASP.NET Ajax" from http://ajax.asp.net/.

After the data service is created, the getAllStates() web method could be used to build a data source to populate the dropdown list.  Drag and drop a dropdown list onto the Default.aspx, select to create a new data source from its context menu, choose object as the type, MapDataWebService as the business object, and getAllStates() as the SELECT method.  The data binding is automatically done.  Add an onchange event handler to this control to trigger the mapping function (e.g., drawMarkers) and we are almost done.

The last step is to implement the mapping method drawMarkers() in gmap.js.  It retrieves the state that the user chose in the dropdown and use it as the parameter to call the web service method getFunPlacesByState(state) asynchronously.  The callback function will receive the resulting list of Place objects and then use the Google maps API to draw them on the map.  To successfully make the web service call from JavaScript, it has to be registered in the Default.aspx like the following.

To make it more fun and improve the user experience, during the async web service call, a spinning progress icon could be display indicating that the data is being loaded.  Overall, no whole page loading is done and web page looks better.  If you are interested the sample solution and code can be downloaded GMapExample.zip.  Before you can compile and run this web site, go to http://www.google.com/apis/maps/ to register your API key and replace the place holder "YOUR_API_KEY" in file Default.aspx and App_Code/MapDataWebService.cs.

By the way, a comment about Google Maps API.  The markers manager is a convenient way of aggregating all the markers, but removing objects from the manager seems buggy.  Whenever the map zoom level is changed, all the removed markers come back on the map.  The markers in the manager are not controlled by the map.removeOverlay() either.  Other than that, the API works pretty well.

Sample code download: GMapExample.zip

Web .NET, ajax, api, asynchronous, database, google, map, microsoft, ole, visual studio, web service

In Javascript, using an element’s innerHTML property to dynamically edit its content provides much flexibility and convenience.  But special care needs to be taken when using it, because it could bite you silently.  Take one of my experiences as an example, it could break the event handlers of the child elements.  Sample code as the following:

This code works well and when you click on div, "hello" will pop up.  However if you uncomment the last line of the JavaScript code.  The message won’t pop up any more.  innerHTML manipulates the content of the element as a string instead of DOM, so it might just break the underlying "wires" that hooks up the elements and their event handlers.  So watch out, when any of the events stops working as expected, look for the evil "innerHTML" first.

Web dom, javascript, Web

I just created and published a new gadget on live.com called "Zillow Home Value Estimate".  Please give it a try!  The above link points to the gadget hosted on gallery.live.com.  If you are brave enough, you can also try the one I hosted on my own site by clicking the following link "Add the gadget to your live.com" or "Add the gadget to your live space".  I would normally upgrade the 2nd one quicker

Screenshot:

If you are a home owner put this gadget on your own personalized live.com homepage, so you could closely monitor the value trend of your property.  Type in the street address and city/state (or zip code) of the real estate property that you are interested in, the zillow estimate (zestimate) and the 1 year value trend chart will appear on your live.com personalized home page.  To change the address, click on the underlined address itself and the editing functionality will show up.  The gadget uses zillow web services API to query the home value estimate.

A tip for developing live.com gadgets is beside publishing your new gadgets to the live.com gallery, you could also post a quick link on your own website/blog too so that the visitors can add your gadgets to their home page by a simple click on your site.  All you need to do is put a hyper link http://www.live.com/?add=URL_TO_YOUR_GADGET_XML_FILE for adding to live.com and http://spaces.live.com/spacesapi.aspx?wx_action=create&wx_url=URL_TO_YOUR_GADGET_XML_FILE for adding to live spaces. For example: <a href="http://www.live.com/?add=http://stanley.jojoyao.com/live_gadgets/Zillow/ZillowGadget.xml">Add to Live.com</a> and <a href="http://spaces.live.com/spacesapi.aspx?wx_action=create&wx_url=http://stanley.jojoyao.com/live_gadgets/Zillow/gadget.xml">Add to Live Spaces</a>

Web gadget, live.com, web service, zillow