Sencha = Ext JS + jQTouch + Raphaël

Sencha here is not refering to the name of a popular Japanese green tea. It is a combine forces between Ext JS with the jQTouch and Raphaël projects, changing the company name to Sencha. I guess coffee (“java”)  is out of trend already and now we moving to tea. 🙂  If you are not familiar with Ext JS, it is one of the popular framework for building rich web application. Recently the team announced the release HTML 5 framework for Mobile name Sencha Touch. is it the end of native mobile application? up to you to decide after you try out 🙂

Sencha Touch, the first HTML5 framework for mobile devices. We think it’s the first cross-platform framework that builds web apps that make sense for mobile devices. It comes with a comprehensive UI widget library, complete touch event management with CSS transitions and an extensive data package.

Some of the features highlight are:

  • Touch Event – Bind non-standard touch events to your elements like tap, doubletap, swipe, pinch, and rotate to create amazing interactions.
  • W3C Standards – Sencha Touch is built with web standard HTML5, CSS3, and Javascript, making it a very flexible mobile app framework. (ready for Android and Apple iOS devices)
  • Animation – Animate between views using one of our many predefined animations, with loads of configuration options.
  • Geolocation & Maps – Discover a user’s location and display nearby points of interest in our Google Maps component.
  • Sencha Touch UI – Rich UI library (AJAX, Icons, Audio, Nested Lists, Video, Sortable Lists, Carousel, Overlay, Picker, Toolbars, Drag & Drop, Geolocation)

HTML 5 is on the rise and the development has been on hyper speed, recently Apple developed the HTML 5 gallery to counter Flash and then follow by Google with its own gallery. With the development of this framework it opens up a bigger possibilities for developers. Some of the advatanges i can think of are:

  • Developer does not have to learn a specific language such as Objective-C. It is web standard, HTML 5, CSS3, JavaScript.
  • Develop once and run on any mobile. As compared to the native, it is accessible from any mobile devices (currently Android & iPhone) and it can be deployed with your other server application.
  • Code reuse. Increase reusability as it can share the same component as your other web application.

So what is the down side?

  • Slower learning curve. It is new framework and contain a large number of API. It will take sometime to understand. I try to browse around but not much of example except the one from Sencha Touch Example. But if you are good with JavaScript, I am sure picking up new framework is an easy job 🙂
  • Limited or no access to OS features (e.g. contacts, camera, etc) and peripheral devices.

I am currently using the framework to enhance my “Near By Tweets” and give the application a makeover. I notice one bug when I was trying to read XML data. No sure whether or not it is bug or just me. 🙂 Anyway, it is still in beta stage.  If you are wondering what is the licensing like, read this

The initial beta is under a GPLv3 + FLOSS license. We’d like to give open source folks the benefit before we introduce a commercial trial license. And we’d like to take the opportunity to emphasize something that many people miss: that we have Free and Open Source exceptions as part of our GPLv3 license. So if you want to, you can include Sencha Touch in your Apache and OSI approved licensed projects without triggering the GPL’ing of your project.

Hope this trigger your curiousity to try out. The first public beta released is available for download at

Nearby Tweet (updated)

Last December I created a simple “Nearby Tweet” using Google Maps API. It was based on version 2. Since Google Maps API v3 is official, I decided to migrate the code. In the latest version, one of the noticable change for developer is the removal of the Google Maps Key. Version 3 is designed to be faster and target both desktop and mobile devices.  btw, version 2 is deprecated and if you still using it, remember to migrate. Finally found time to look into the old codes. I did some clean up, migrate to v3 and make sure it support iPhone Safari.

Let’s start with the changes:

Change 1: JavaScript URL. Note: applications that determine the user’s location via sensor must pass sensor=trye when loading the Maps API JavaScript.

Change 2: Additional <meta> tag for iPhone device. The setting specifies that this map should be displayed full-screen and should not be resizable by the user.

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <script language=JavaScript src="js/jquery-1.3.2.min.js" type=text/javascript></script>
 <script type="text/javascript" src=<a href=""></a>></script>

Change 3: Add new function to detect browser (for Mobile)

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { = '100%'; = '100%';
  } else { = '600px'; = '800px';

Change 4: Updated the “Nearby Tweet” code to call version 3 API.

 function initialize() {     
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(1.2915, 103.8492);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

 function showAddress(address,fText) {
  if (map == null) return false;
  if (address == null) return false;
  if (fText == null) fText = "Default Text";
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
      var infowindow = new google.maps.InfoWindow(
          { content: fText });
     google.maps.event.addListener(marker, 'click', function() {,marker);
        } else {
          //alert("Geocode was not successful for the following reason: " + status);
 } // end showAddress()

If you are planning to migrate, happy migrating 🙂