Sunday, July 22, 2012

using gwt-phonegap

This post is part of a series of blogposts that show the usage of  some mgwt / gwt-phonegap components.


For quite a while I wanted to write a blog post on how to use mgwt and phonegap together to write great mobile apps.
While mgwt provides all the mobile widgets, animations and touch support you need, gwt phonegap provides access to the phonegap api.
Combining them means being able to write mobile apps with GWT that look beautiful and behave exactly like native apps.

Some background
GWT compiles Java to Javascript. With Phonegap you can write Apps in Javascript. Basically we just need to take the output of the GWT Compiler and put it on the phone.

Which files to include
In general you will have a html host page, like you have with any GWT app. With a phonegap app this will include at least the javascript for the phonegap api (cordova-x.x.x.js) and your gwt no cache file.
An example html host file would look like this:


<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>name of your app
    <!-- phonegap api -->
    <script type="text/javascript" language="javascript" src="cordova-1.x.x.js"></script>
    <!-- gwt module include -->
    <script type="text/javascript" language="javascript" src="yourgwtmodule/yourgwtmodule.nocache.js">
  </head>

  <body>
   <!-- gwt history frame -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0">
  </body>
</html>


You can see the include for the phonegap api. Note: It is important that phonegap is included first!

I would recommend keeping the html host file seperate from the one you are using for a web app, since with a web app you will not have a phonegap include.
Your deployment script however needs to copy the complete module folder (gwt output) as well as other needed resources to the phonegap www folder.

In Phonegap all HTML + CSS + Javascript files need to be inside the www folder of your phonegap project. If you are using phonegap plugins you might also be adding code. (Java for Android, Objective-C for iOS and so on)
If you have never used phonegap you might also be interested in a good guide on how to setup phonegap.


The gwt phonegap part gives instructions on how to setup a GWT with gwt phonegap.
The main idea behind gwt phonegap is to provide two implementations of the phonegap api: one that is using the phonegap javascript API on a device and the other is a pure emulation api that enables developers to build phonegap apps while running gwt dev mode.
To ensure that there are no runtime penalties gwt phonegap uses deferred binding and compiles different implementations for emulation and phonegap environment. This is done by the phonegap.env variable.

This means that you can use any phonegap module inside the browser and still call all phonegap api. (For specific limitations see every modules documentation )


A simple Hello World Phonegap demo would look like this:

final PhoneGap phoneGap = GWT.create(PhoneGap.class);

phoneGap.addHandler(new PhoneGapAvailableHandler() {

 @Override
    public void onPhoneGapAvailable(PhoneGapAvailableEvent event) {
     // build your ui and caLet ll phonegap
        String phoneGapVersion = phoneGap.getDevice().getPhoneGapVersion();
        RootPanel.get().add(new HTML("Using phonegap version: " + phoneGapVersion));

    }
});

phoneGap.addHandler(new PhoneGapTimeoutHandler() {

    @Override
    public void onPhoneGapTimeout(PhoneGapTimeoutEvent event) {
        Window.alert("can not load phonegap");
    }
});

phoneGap.initializePhoneGap();



Summary - Setup Projects
Let me walk you through the necessary steps to get a GWT app on a phone with phonegap.
I am assuming that you set up a phonegap project as described in the phonegap documentation for your plattform.
This is the shell for your web app to run on a phone. It has a www folder where we will store our web app.

The next step is to setup a standard GWT project.
In this project you need to at the gwtphonegap-1.x.x.x.jar to your classpath. You can do this manually or use maven to do this.
After adding the jar to your classpath you need to add the following line to your gwt xml file:

     <inherits name='com.googlecode.gwtphonegap.PhoneGap' />


This tells the GWT compiler that you want to use the gwt phonegap project. After that you can start using the phonegap object in your code (see example).

At one point you want to get your application on an actual phone. Now you have to compile the app using the GWT compiler and copy the output of the GWT project (your module folder) to your www folder of your phonegap project.

For a a release of an app you only want to copy the relevant files for the actual permutation. mgwt has a special permutation map linker for that. It outputs xml that lets you easily find the necessary files for the right devices. This will be covered in another blog post.

35 comments:

  1. I am getting white screen after I added all war file from GWT to www folder in phonegap. How can I fix it?

    ReplyDelete
    Replies
    1. Great Article android based projects

      Java Training in Chennai Project Center in Chennai Java Training in Chennai projects for cse The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

      Delete
  2. there is a user group where you will find help on using gwt-phonegap and mgwt: https://groups.google.com/group/mgwt

    ReplyDelete
  3. Hi Daniel.

    Thanks for your links, really useful.

    I have a question:

    Is it possible to provide the application via Browser instead of Apps for each Platform using Gwt - PhotoGap? If so, do you know how permutations would work?

    Thank you very much

    ReplyDelete
  4. If you want to run you app inside the browser you can just skip gwt-phonegap and just use mgwt.

    ReplyDelete
  5. Hi Daniel,
    I have started working on mgwt and phone recently and i am facing this problem.
    I have compiled my code and added the output in the www folder, however i am not able to see the changes that i made to the code. The code compiled properly and did not show any error. The app still runs as per the old code.
    Please help !!
    Thank you :)

    ReplyDelete
  6. For building cross platform mobile applications Phonegap is widely used. PhoneGap is an open source framework. The developers build use of Html rule, CSS, and JavaScript to make impressive and rich applications. This kind of blogs helps to build mobile applications in useful manners.
    http://www.mobilepundits.com/PhoneGap_Development.html

    ReplyDelete
  7. Hi Daniel,
    I use the latest version of GWT i.e 2.8 rc1 and use gwt maven plugin to compile and copy the contents to www folder of phonegap application. I observed that when i use gwt maven plugin, i only get a blank screen and no errors in the xcode console. However this works when i compile use eclipse plugin in super dev mode. Do you know what could be the reason for this behaviour?

    Regards,
    Kiran

    ReplyDelete
  8. Hi Daniel,
    This works only when I use super dev mode and it recompile the .nocache.js script to point to the super dev server. In the production mode with just gwt maven plugin, it shows only white screen. Do you know why this happens? I generated phonegap build for browser and I am able to launch the index.html file without any errors.

    Please throw some light on this issue.

    ReplyDelete
  9. Mobile phones or cell phones are wireless portable, short range electronic devices used for mobile voice data communication. nokia 3 5 6 bd price

    ReplyDelete
  10. Great! It sounds good. Thanks for sharing.. 24 hour truck tire repair

    ReplyDelete
  11. Let create a new world for yourselft by way take part in the games– sims 4 cheats in my site. Click link to visit site. Thank you so much. sims 4 cheats

    ReplyDelete


  12. This is file encryption software that uses the AES-256 standard.
    Encrypted files are available on all Windows, Android, and iOS devices, as well as Mac OS X and Linux.
    All files are individually encrypted and saved in a folder of your choice.
    Download it free from here:
    https://softserialskey.com/boxcryptor-download-crack/

    ReplyDelete
  13. An assurance for you that you'll have feelings for escort in Udaipur later viewing my amazing escorts at Udaipur, striking big breasts and a great slender figure. I provide busty escorts at Udaipur city, very attentive meetings for trendy, higher profile call girls in Udaipur.
    Udaipur escort service
    Nainital escort service
    Haldwani escort service
    Ramnagar escort service
    Rudrapur escort service

    ReplyDelete
  14. Movie-watching websites that are more than movie-watching websites Because we are the number 1 free movie site in Thailand for a long time, including new movies, Thai movies, Western movies, Asian movies, we have all kinds of ways for you Including new series Full of all stories without interstitial ads to keep annoying anymore. One place sa-movie.com.

    Android and IOS operating systems. Watch online movies, Thai movies, Western movies, Asian movies, Cartoon movies, Netflix Movie, Action Movies, Comedy Movies, Crime Movies, Drama Movies, Horror Movies, Adventure Movies, Crash Movies and still have many new movies to watch. You can watch for free anytime, anywhere 24 hours a day at see4k.com.


    GangManga read manga, read manga, read manga online for free, fast loading, clear images in HD quality, all titles, anywhere, anytime, on mobile, tablet, computer. Android and IOS operating systems. Read top comics, action dramas, comedy, adventure, horror and manga. New coming every day to watch many more. Can be read for free anytime anywhere 24 hours a day at gangmanga.com..

    It is no secret that football is among the most popular and widely watched sports. Everybody who likes football tries to find the best platform for free soccer streaming. So, what are the best free sports streaming sites? We are going to answer this question. On this page, you can find a detailed overview of the most widespread soccer streaming websites. Keep on reading and make the best choice for you live24th.me.

    ReplyDelete

  15. Do you want to get a full exotic service? Mumbai Escorts Hub here at your service. You can meet with our call girls to make your time memorable full of enjoyment. We offer all types of sex with great satisfaction. Our Independent call Girl gives real massage along with full service of deep throat, cim, cum, anal and much more basically you think our ladies and would love to serve you without rushing. It's our passion and choice to be an escort that's why our call girls love to satisfy our clients for recommendation and referral.

    Mumbai Escorts Services:
    Mumbai Escorts | Mumbai Escorts Service |

    Mumbai Sex Aunty Number | Phone Sex Mumbai | Mumbai Call Girl Whatsapp Number | Mumbai Call Girls Near Me |

    ReplyDelete

  16. Mumbai escorts agency for making their outstanding sexual experiences. We offer high-status Mumbai Escorts Service to our user because our Independent girls are experts in providing the best adult service. So, whenever you feel lonely so that time you just want our Mumbai Call Girls which erase your loneliness and give you some amazing escorts services on the bed. Our Escorts in Mumbai girl know what the exact requirements of the user are and she gives outstanding service with their beauty.

    Mumbai Escorts
    Mumbai Call Girl
    Whatsapp Sex Chat in Mumbai
    Bollywood Escorts in Mumbai
    Mumbai Sexy Aunty Contact Number
    Muslim call girl in Mumbai
    Mumbai Call Girl Video
    Indian Call Girl
    Independent Call Girls in Mumbai

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. Eventually the missmedison is the heartbeat of Goa nostalgic youths and Gentlemen on account of her enticing figure and hot Style of Service. missmedison is the enthusiastic kind of Goa Call Girl who can improve your euphoria life. She has all the unbelievable thought of an ideal associate. She can satisfy all that you may expect and wild emotions. Contributing some energy with her is should be on your need of once-finished. Coming up next are several pieces of information regarding her.

    Goa Escorts
    Call Girls in Goa
    Russian Escorts in Goa
    Russian Escorts Service in Goa
    Panjim Escorts
    Anjuna Escorts
    candolim Escorts
    Calangute Escorts
    Baga Escorts
    Arpora Escorts
    Escorts in South Goa
    Escorts in Goa

    ReplyDelete
  19. All the Russian Goa accompanies are knowledgeable and know various dialects and all call young ladies can undoubtedly make a great discussion that you'll clearly appreciate.

    Escorts in Goa
    Goa Escorts
    Call Girls in Goa
    Goa Call Girls
    Female Escorts in Goa
    Russian Escorts in goa
    Escorts in South Goa
    Goa Russian Escorts

    ReplyDelete
  20. Jazzleen Bangalore Escorts are here with our quality-arranged Bangalore models office to stun you through very fruitful, fulfilling and emotional essential private minutes that will keep you regarded. We are playful to see you here and couldn't imagine anything better than to serve you with astoundingly best and extra traditional lovemaking administrations. We are one of the specific office having elite females who have a high profile foundation.

    Bangalore Escorts
    Escorts in Bangalore
    Female Escorts in Bangalore
    Bangalore Female Escorts
    Russian Escorts in Bangalore
    Bangalore Russian Escorts
    Bangalore Independent Escorts
    Call Girls in Bangalore
    Bangalore Call Girls

    ReplyDelete
  21. Welcome Jaipur Escorts Service. We offer Escort Service in All Locations of Jaipur Like, Bani Park, Bais Godam, Bhankrota, Sanganer, Vaishali Nagar, Near Airport, Malviya Nagar, Kukas, Raja Park and More. So Your Can Book Call Girls in Jaipur at Your Local Place.

    Call Girls in Kukas
    Call Girls in Raja Park
    Call Girls in Vidhyadhar Nagar
    Call Girls in Bajaj Nagar

    ReplyDelete