Pages

Friday, March 22, 2013

SmartGWT.Mobile

Mobile world and web approach solutions – SmartGWT.Mobile


As the demands increase for applications to mobile phones, tablets and smart phones I would like to, go through at existing web solutions for mobiles, among native applications, and analyzing a little bit, and emphasizing one of them, the SmartGWT.Mobile product.


The first thing that comes in my mind, of course is html, javascript, css3, html5. The mobile web is growing up quickly, and tons of great HTML5 features are already supported on modern mobile browsers. Web developers can use the same set of technologies they know and love to build rich web applications that work across different device types. HTML5 allows us to use efficiently local storage, multimedia introducing new audio-video types like: MP4, WebM, Ogg and offers a canvas for graphics. Supports mouse and touch together.


If you are not satisfied with simple web pages or applications, you might think forward using technologies, that offers us, server side communications too. HTML5 can be paired with server side solutions like PHP or JSP. And then, you can enter into Java world, because there are plenty of possibilities which says that you can write all the code, the server side and even the client side program, all in java. When you are ready with programming, you just translate or compile your program to javascript and html5. And more, because your output will be a more efficient html5 and ajax code, than one written manually. You don't have to worry about browser's compatibility and of course the server side code will run on a java web server. Thanks for GWT-GoogleWebToolkit, such solutions are the following, let's see a few of them:


MGWT; GWT-Phonegap
mgwt is a library for developing mobile apps and mobile websites with GWT from one code base. mgwt provides native looking widgets for many platforms, animations and many other things that are needed for writing mobile apps. gwt-phonegap enables GWT apps to use Phonegap. With Phonegap HTML5 apps can access the same device features that native apps can use from Javascript, such as the file system or contacts.
With mgwt and gwt-phonegap you can deploy your GWT apps into any app store or let your users use them as a website.
Both projects are available under apache 2.0 license from maven central.
mgwt provides mobile widgets that are compatible with UIBinder and the Editor Framework. mgwt integrates touch events and animation events with its own DOM implementation and provides gesture recognizers on top of that.
There are themes for iPhone, iPad, android phones, android tablets and blackberry. For going offline there is an automatically generated HTML5 offline manifest.
In dev mode gwt-phonegap can emulate the Phonegap API so that developing of Phonegap apps can happen inside GWT dev mode.
gwt-phonegap also provides utilities to make GWT RPC work in a Phonegap environment. Personally, I think that the one disadvantage of this solution, is that for GWT PRC server side communications, you must use the GWT-Phonegap library too, among the mgwt package.


Emitrom products:
emitrom – comes with a set of product for different kind of applications like: Flash4J, Lienzo, Titanium4JMobile, Touch4J. They are very modern and interesting, is worthy to see and try. Develop slick mobile web apps that will look and feel like native iOS, Android and BlackBerry using the Secha Touch API but do it in the language you know with the tools you already know in Java. So sounds good, but one thing brothers me a little bit, for the functionality, you have to add additional packages to your emitrom project, like Sencha Touch Javascript library, or Phonegap.


SmartGWT.Mobile:
The smartclient  platform makes is simple to build powerful, high-productivity web applications on pure web standards. SmartGWT is coding in java, and getting the power of the SmartClient framework.
Smart GWT combines the industry's richest set of GWT UI components with a Java server framework to provide an end-to-end solution for building business web applications. Provides all the power of true Ajax, deep server integration, rich enterprise ui components, and mobile support without a rewrite. Even if you know nothing about mobile development, your Smart GWT application supports mobile. Finger taps and gestures arrive as normal mouse events, so your event handlers just work — users can even trigger context menus and hovers via touch-and-hold, and drag and drop via finger slides. Device-aware components automatically switch appearance and behavior to mimic typical mobile UIs.
Want more control? Gesture & orientation change events, as well as native functions like phone dialing are all there to let you fully tune the mobile experience.
In plus, SmartGWT offers us a new product family named SmartGWT.Mobile.
When should I use SmartGWT.mobile vs Smart GWT?

In a nutshell, if your application:
1. primarily targets phones and tablets: use SmartGWT.mobile only
2. primarily targets desktops and tablets: use Smart GWT only
3. targets desktops, tablets and phones: consider using both; however, depending on devices and requirements you may use just one or the other.


I would like to present a short application written in java with SmartGWT.Mobile which has a server side RPC communication, getting data from a server, and showing into a TableView mobile component. There is no need of additional packages like, phonegap or sencha to run this program. I put this running code on a free java server to demonstrate the functionality. If you test this in a desktop pc, you should us the google chrome explorer, because this explorer handles dialog boxes for mobiles. Google Application Engine offers us a web server for java applications, and it has also a free but limited storage.
You can find the link of my mobile applications on my site


My personal conclusion is that, you may use any of these technologies, if you want a web solution on your mobile, and as you see, these technologies are making effort also, to achieve a native appearance or sometimes even native functionalities too. It is ok! but for example, I don't consider a server side communication, being just a native functionality, it is also a web programming pretension
Web pages, I think, never will transform to real, true native applications. And don't have to. At the end you will always deal with javascript and html as a result of your work. Is not a problem, it is in order.  And again, my personal opinion, is that, for a real native application use the right tool or programming language, because there are also many solutions, even in java, like Codename One. For web pages, sites and web applications the above mentioned technologies are the best :) 



18 comments:

  1. Hello there,
    Nice write up. Something about Touch4j though.
    It s true that you have to have Sencha Touch in your project. Because well Touch4j provides a Java API for Sencha Touch.

    If you want to go native you have to download PhoneGap regardless of the library you are using. So the same arguments applies to the other libraries too.

    Also Touch4j include a Java API for PhoneGap which actually does support more PhoneGap APIs than mGWT.

    Disclaimer: I m on of the person behind Touch4j

    ReplyDelete
  2. Thanks for your comment. I work for none of these tech. :), but I like these technologies, because, for example, thinking on a 3(or more) tier web architecture, you can have the business and the database tier the same, for both desktop and mobile, and just the ui, the view model will differ.

    ReplyDelete
  3. Touch4j or any other of our tools gives you the same :)

    ReplyDelete
  4. Hello , Im using a textItem and want to move the placeholder to left can i do that please help im really struck

    ReplyDelete
    Replies
    1. Hello Ekata. Did you try to use textitem with vertical layout? I am a newbie also, but if i will have time, i give you more help...
      One thing now, look the examples from the showcases: http://smartgwt-mobile.smartclient.com/#Widgets
      Did this help you? thx

      Delete
    2. use on your desktop pc, the google chrome explorer, to test this: http://smartgwt-mobile.smartclient.com/#Widgets/Layouts/Horizontal%20Layouts

      Delete
  5. Nice and very helpful information i have got from your post. Even your whole blog is full of interesting information which is the great sign of a great blogger.

    Lenovo - IdeaPad 15.6" Laptop - 8GB Memory - 1TB Hard Drive - Dusk Black

    Lenovo - 15.6" ThinkPad Notebook - 4 GB Memory - 320 GB Hard Drive - Black

    ReplyDelete