• Home
  • Events
  • About
  • Mobile apps with GWT

    May 16th, 2012

    For the development of business web applications GWT is a tool of choice.
    Since most business applications are based on a Java Stack, GWT empowers Java-Developers to write business ready, robust cross-browser applications in their favorite language.
    Certainly there are powerful JavaScript frameworks around to achieve such, but you need a lot of experience to tackle all the quirks and oddities the ambient browser language comes with.

    Now these days more and more businesses are seeking for mobile channels of their applications.
    Flexibilizing their businesses, supporting new business cases and increasing efficiency are the main reasons driving that process.
    When it comes down to the technical realization of these channels most companies are facing significant difficulties.

    Developing and maintaining native applications is normally not a choice. Costs are simply too high to acquire and maintain expertise on all different mobile plattforms.
    Cross-plattform technologies are seeking to solve this problem for most business cases. But what framework to choose?
    Web technology based applications are a common sense, best supported among all devices and most future-proof. Sencha Touch, JQuery Mobile and others are leading this area and good results can be achieved deploying them.

    But how great would it be if you could – with moderate effort – turn your existing web GWT app into a mobile app?

    A mobile app written mostly in Java, simply testable, with all the power of the GWT framework and last but not least supreme performance on the mobile device.

    Well, look no further: m-gwt.com is coming to rescue!

    mgwt is a ligthweight extension to GWT basically providing mobile widgets and mobile plattform integration.
    mgwt has been developed over the last 3 years and went open source in 2011. According to creator Daniel Kurka many commercial products have been developed using the framework.

    Canoo was lucky to have Daniel Kurka himself in for a workshop recently.

    Whats mgwt all about?

    There have been a few attempts to mobilize GWT in the past. They were all focusing on different aspects, like HTML5 storage. Non of them really succeeded.

    Now, mgwt has a few very important design goals which makes it a promising candidate to become THE standard mobile GWT extension:

    • integrates well with GWT MVP
    • keeps the DOM lean
    • leverages the powerful optimizing JavaScript cross-compiler
    • does as much as it can in CSS3 (hardware supported)
    • native support for touchevent the GWT Way
    • animations built in with GWT MVP
    • integrates well with PhoneGap

    Compared with JS based cross-plattform frameworks mgwt advances in:

    • generation of isolated mobile plattform permutations makes client-side if/else statements obsolete
    • different plattform interaction patterns can be supported (i.e. Android back button)
    • integrates naturely with PhoneGap
    • integrates smartphone, tablet and web app development!

    Check out the kitchen sink app and give it a try.

    Btw. Daniel Kurka can be contacted for consulting, workshops and advice @dankurka

    Android Testing in IntelliJ IDEA

    January 12th, 2012

    Google’s Android site has some fairly detailed instructions for testing Android applications… from Eclipse. They were nice enough to supply a “Testing from Other IDEs” page, but that is nothing more than instructions on using Ant and the command line. Well, if you are using IntelliJ IDEA then you already believe the IDE is going to be a better tool than Ant for this. It’s easy to set up a test project in IDEA and get your tests running. Here are some simple instructions.


    This tutorial assumes you have installed IntelliJ IDEA and an Android SDK, and also created an Android project. If you haven’t yet, then you should read Testing Fundamentals accessible from Google’s Testing Home page.

    Creating a Test Project

    Your Android tests are going to be placed in a separate module from your main Android application. Remember: an IDEA project is composed of several modules. We’re going to have the main application module and the test module. Each module has it’s own set of dependencies and classpath. (Eclipse users confused about the terminology should read this). Here are the steps to follow to set up a test project:

    1. Have your main project open in IDEA
    2. Create a new module using the menu File->New Module
    3. Select “Create module from scratch” and click Next
    4. Select “Android Module”, give the module a new name, and click Next. You should put the module in a directory called “tests” that is in your project root. That way your project will follow the same naming conventions that Ant expects, making the project easier to set up in a CI server later. Here is what your wizard screen might look like:

    Adding an Android Testing Module

    Adding an Android Testing Module

    5. On the next wizard step just click Next to create a source directory for your files.
    6. Finally, on the last wizard step select “Test” under Project properties. Make sure it is going to test your module. Then Finish.

    Select Test as Project Type

    At this point your two modules exist: the production module and your test module. If you look in the Project View (Alt+1) you will see both modules. Mine are named “android-testing-in-idea” and “tests”. You’ll even be given a template test for your main activity. It’s pretty slim so you will certainly want to write some of your own tests. IDEA isn’t smart enough to automatically create the test content for you… at least yet.

    Running Tests

    Running tests is simple. A run configuration to run all tests was created for you when you added the project. Click the ‘run triangle’ to run the tests or the ‘bug triangle’ to debug the tests. You’ll be prompted to select an emulator if you don’t have one set by default.

    run all tests

    Click to Run All Tests

    There are other ways to run tests at a more granular level, too. To run all the tests in a package, right click the package and select Run (Ctrl+Shift+F10). To run all the tests in a class, right click the class and select Run (Ctrl+Shift+F10). You can also run individual test methods one at a time. Just right click inside the test method within the IDE editor and select Run (once again, (Ctrl+Shift+F10)).

    You may want to switch the emulator version from time to time in order to test across multiple devices. You can bring up the Run Configuration from the drop down menu highlighted in the screenshot above. It opens a screen like this where you configure the run target:

    Configure the Test Run Target

    Configure the Test Run Target

    You can switch the emulator here to a different version. Be sure to check out the other tabs as well. The Emulator tab allows you to configure the network speed and latency, and the Logcat tabs lets you configure one or two things about Logcat. Handy.

    Viewing Results

    So you want to view the test results? Well results window probably popped up on screen after you ran the test. Anyway, if you’re still confused you can click the Run (Alt+4) or Debug (Alt+5) drawer and see the JUnit results. There is also a Logcat drawer to click (sorry no shortcut) to view the logs.

    Viewing Test Results

    Viewing Test Results

    Other Tools

    The last thing you need to know is a little about the other tools. You can manage your emulator ROMs using the AVD Manager. The menu option for that is Tools -> Android -> AVD Manager. Also, you can change the project compatibility to be a different version of Android OS. It’s under File->Project Structure (Ctrl+Alt+Shift+S) then click Module SDK. Finally, if you want to set the project up for continuous integration then head on back to the Ant command line guide from Google. It’s best not to have the IDEA project file drive your builds.

    You made it to the end. Thanks for reading! And remember, Canoo is here to help with your Android and Mobile needs. Email me directly (hamlet.darcy@canoo.com) or give us a phone call. Thanks.

    Android Fragmentation

    November 24th, 2011

    The latest issue of the german Android360 magazine is featuring an article by our Android experts about fragmentation on the platform.

    Fragmentation on the Android platform comes in several flavors.
    Mobile devices in the wild can differ on their installed Android version, their screen size/resolution and their supported hardware features.
    With the advent of Android tablets the platform added a new class of supported hardware to its portfolio.
    The article summarizes the main does and don’t to tackle fragmentation successfully.

    If you are experiencing fragmentation problems in your Android project or want to avoid them upfront, talk to us. Our share-a-canooie service might be just the right thing for you.

    Remember: think Android, think Canoo

    HTML5 for iOS

    November 1st, 2011

    My grandfather used to say: “Makkelijker gezegd dan gedaan” (easier said then done). So when I talked about how HTML5 could be the new platform in-depended development paradigm, in this previous post, I better come with some real world examples instead of only saying it.

    So that is exactly what I’ve been doing. My wife is a bit of an apple fan woman. And she has a book that she would like to publish. She couldn’t find a publisher, so the next best thing would be to put her book on an iPad, but you still need an publisher to put something on the iBook store and publishers are still stuck in the dark ages. So we’ve decided to make an application out of her book. Now I’ve written some objective-c code before and I must say it wasn’t the best experience I’ve had. Xcode at that time was awful, it was like writing software 10 years ago. So I started to look for alternatives. It could be a simple html page, but how to create a native iPad application out of that?

    I’ve found something that I’m really exited about. Playn is a cross-platform game abstraction library for writing games that compile to multiple platforms one of these is html using gwt. Now if I use this in combination with phonegap then I can create a iPad app that can also run on android based pads. Not only that I could make it interactive add a game to the book and best of all do it in Java.

    If you think about it, for companies this makes a lot of sense. Unless your companies key platform is iOS, having developers in-house that have objective-c knowledge is expensive. Also hiring external company to build an iPhone app is expensive and they have to work together with you to integrate your existing architecture. So having something like this where one can use existing knowhow to create a android and iPhone solution that works on both platforms is a huge cost saver.

    Android and IDEA for the Eclipse Refugee

    October 18th, 2011

    Earlier this month I switched from writing my Android projects in Eclipse to writing them in IntelliJ IDEA. Overall the experience has been great, and I much prefer using IDEA to Eclipse for Android development. And now that IntelliJ IDEA 11 EAP (Early Access) has a visual layout window, there is almost no reason for me to write my Android apps in anything else. I wrote this post to help other users along their way when converting between the IDEs.

    Why IntelliJ IDEA for Android?

    There’s no need to ask why if IDEA is already your favorite IDE or if your company is forcing you to use it. But just in case you’re not already a raving fanboy, here are some of the features specific to Android that made me want to switch.

    Find usages (Alt+F7) is aware of Android XML resources (and the semantic meaning of their content), so searching across project assets is easier. Plus, I just find IDEA’s search capabilities a little saner than Eclipse’s. Below you can see what happens when I search from within my layout XML file for a certain widget ID:

    01. Find Usages

    Find Usages in IDEA

    Because IDEA knows about the Android XML resources, refactorings like Rename (Shift+F6) work across Java code and XML. You can rename a widget’s ID from the XML file and have the Java code updated, or rename from the Java code and have the XML updated. Here I am renaming a widget ID in XML. Nice. In general, I do not search within comments and Strings because it is a little too aggressive.

    02. Rename Refactor

    02. Rename Refactor

    There are several Android specific intentions that make life easier in IDEA. Intentions are the quick-fixes that are activated in Eclipse with Ctrl+1. In IDEA you use Alt+Enter. For example, if there is a static String referenced from your code then you should make that String a resource by moving it to strings.xml. Put your cursor into the String, press Alt+Enter, accept the name suggestion, and you’re ready to go. Ctrl+Z for undo on refactorings work great, too. One of the big differences between IDEA and Eclipse is refactoring support. In IDEA, the source files do not need to compile in order for refactorings to work. It is quite common to have a broken file and fix it through a couple automated renames or refactors.

    03. Move Refactor

    03. Move Refactor

    Finally, before IDEA 11, the killer feature for Eclipse Android was the visual editor for XML based layout files. Personally, I don’t often use drag and drop layout editors but I do value seeing my code changes immediately without recompiling and redeploying. Eclipse had the better feature set. But IDEA 11 now has a layout “Preview” mode. Make a change in the XML and see it immediately updated in the preview. You can also quickly change the theme, preview in landscape and portrait, switch to night mode, and select different screen sizes. If you absolutely need a visual editor, then Eclipse is the way to go. Otherwise, the Preview in IDEA 11 is good enough. More info available on the IDEA blog.

    04. Visual Preview

    04. Visual Preview

    Let’s get started with a tour of IDEA.

    Getting Oriented in IDEA

    The basic layout of IDEA is not all that different from Eclipse. You have a main code window (right, in image below), you have a Project View (upper left), and you have a Structure View (lower left). If there is a window for it in Eclipse, then there is probably a window for it in IDEA. A good way to get started and get familiar with IDEA is to read the DZone IDEA RefCard I wrote a few years ago. It is still relevant today. I highlighted the image to show the relevant details.

    05. Project View

    05. Project View

    At any time you can jump to the code window by pressing Escape, and you can close any open tool window with Shift+Escape. On thing that IDEA does not have is perspectives. Maybe you love Eclipse perspectives. Maybe you love when your code view shrinks up into a postage sized porthole whenever you launch a debugger. Who knows, perhaps this is useful to you somehow. I am trying very hard to be positive here, and the nicest thing I have to say about perspectives is that I hate them. Another thing IDEA does not have is a “Team Plugin”. There is no single “Team” abstraction that somehow fits on top of every version control system. Instead, when you enable Subversion then you use Subversion features. Git uses Git Features. Version control systems are enabled using the Tools->Enable Version Control menu item. Then the Alt+9 shortcut brings up the Version Control View.

    Running, Debugging, and the Android Tools

    Running and Debugging an application is slightly different in IDEA than in Eclipse. You manage your “Run Configurations” using your Run/Debug dropdown menu at the top of the screen:

    06. Run/Debug Configurations

    06. Run/Debug Configurations

    You can create temporary and permanent run configurations. Right clicking a test and choosing Run creates a temporary run config. If you want to run the target repeatedly then just save it so it is permanent. And you Maven users: you can right click a goal in the Maven view and create a run target, such as a run:jetty goal. The Maven support is amazing in IDEA, so you are actually lucky to be a Maven user in this case.

    The features of the debuggers are fairly close between the two products. Set a break point by clicking in the gutter (Ctrl+F8), select and right click a reference to add to the watch window. I’ve noticed that Eclipse users love to enable and disable breakpoints rather than just set and remove them. Well, you can press Ctrl+Shift+F8 to manage all your breakpoints if that’s the sort of thing you like to do. Also, notice the Logcat tab on the debugger, which shows you the Android log. If you are Running (and not debugging), then the Logcat output is in the “Android Logcat” view that you see on the bottom toolbar:

    07. Debug Window

    07. Debug Window

    The main Android Tools from the SDK are available under the Tools->Android menu. You can export a signed package this way and also launch the AVD to manage your emulators and environments. If you need the other SDK tools like “hierarchyviewer” or “monkeyrunner” then you’ll have to launch them from the command line. There is built-in Android testing support in IDEA, and when you run a unit test then the IDE will ask you whether to run it as a JUnit test or an Android test. It remembers your answer, so if you make a mistake then just delete the run configuration and start over. It will ask you again.

    Managing Your IDEA Project

    The two hardest parts of switching IDEs is Project configuration and Web Server configuration. Luckily we avoid the latter in an Android tutorial. But you still need to set up the project. First, some terminology. An “Eclipse Workspace” is an “IDEA Project”. An “Eclipse Project” is an “IDEA Module”. An Eclipse Workspace is composed of several projects. An IDEA Project is composed of several modules. If you have Eclipse project files then IDEA should be able to import them with no problems, and this is the fastest way to get started.

    The Project is configured using the File->Project Structure menu item. You can also open the window using the Ctrl+Alt+Shift+S shortcut, which I call the Paw Mash because holding your left hand like a bear paw and mashing the keyboard usually suffices to open the window. This is where you specify your source folders, your SDK version, and your dependencies. If there is no Project SDK selected in the dropdown list, or if the list shows an error, then click on the SDKs item in the left side pane to create a new one.

    08. Project Configuration

    08. Project Configuration

    Configure the modules by clicking the module entry on the left side. Here you can mark certain folders as source or as tests. By default, a fresh IDEA Android project has no “tests” folder, so you should add the folder and then come in here as mark it as Test Sources. You can also change some of the Android compiler settings by clicking the Android facet shown in the middle.

    09. Module Configuration

    09. Module Configuration

    One last thing to configure before leaving the window. If you are writing JUnit tests then you’ll need to add JUnit to your project dependencies. If you just annotate a method as @Test then IDEA prompts you to add the junit.jar to your classpath. The problem is that they add it as the last dependency, which causes the test to fail with the error “java.lang.RuntimeException: Stub!”. Come into this window and move JUnit up in the dependency list. Or configure Ivy/Maven/Whatever to do this automatically for you.

    10. Module Dependencies

    10. Module Dependencies

    That’s the quick tour of Project Structure… lets move on to Settings. Settings are the options not directly related to compiling the project. Things like code style, version control, plugins, and much more. Open Settings using File->Settings or use your Claw Attack to hit Ctrl+Alt+S. I call this shortcut the claw attack because if you pinch your left hand into an eagle claw and swoop it down on your keyboard then the Settings window usually opens right up. It helps to let out a mighty, “Ka-KAW” when you do it.

    There are thousands of settings in here. I heard the advice recently that new users of either IDE should spent a few hours just clicking around the settings page, and I honestly think that is pretty good advice. If you know what you’re looking for but can’t find it, then enter your search term in the upper left side search box and the settings list dynamically displays only those pages with matching entries. For instance, if you know you want to show line numbers, then type in Line or Line Numbers and click through the resulting pages. In this case, the highlighting you see in the image was created by IDEA and is used to point you to the correct setting.

    11. Settings Configuration

    11. Settings Configuration

    You most definitely want to change some of the default settings. Showing Line Numbers is under Editor->Appearance. Changing your tabs and space settings are done on a per-file type basis, and is accessed from Editor -> Code Style. By default IDEA allows you to place the cursor past the end of the line in a text file, and you turn this off under the Editor page. And Version Control is something you really must configure as well, which is under Version Control. GitHub integration in IDEA is tip-top and goes beyond just Git support, but lately I’ve been using and recommending BitBucket for free, private git hosting. In general I find myself using the IDE to make local commits and manage changelists, and the command line to perform pushes.


    That’s it! There are tons of ways to learn more, and here are my favorite links:

    As always, feel free to keep in touch by leaving a comment. You can read more from me on my blog at http://hamletdarcy.blogspot.com/, see my YouTube channel for more screencasts, and follow me on Twitter: @HamletDRC