Introduction

There are zillions (literally) of Java enterprise applications that are candidates for being repurposed to provide benefit to mobile users. This is first of a multi-part series where we walk through the process of creating a mobile app for one of the most popular Java enterprise (JEE) applications, the Petstore application. We have dubbed the mobile application Mobile-Petstore, and it will provide browsing of the petstore’s catalog of exotic and classic animals. We will build Mobile-Petstore as an HTML5 application for iOS and Android devices. Following is the Petstore web user-interface (top) and a mobile user-interface mockup running on an iPhone5 and a Nexus S Android phone (bottom).

About the Petstore JEE Application

The Petstore application was developed by Sun (now Oracle) and first appeared in 2000 as a  demonstration of key Java enterprise technologies and design patterns. (Many of us old enough to remember it will recall those painful days of suffering with EJB1.) It was updated around 2007 to use the latest JavaEE 5 technologies of that time. If you Google for the app, you will find it is no longer supported by Oracle. For this article we are using a new implementation of Petstore named Yet Another Petstore (YAP) from Antonio Gonclaves.

HTML5 Applications - What’s the big deal?

Our plan is to build Mobile-Petstore as an HTML5 application for iOS and Android devices. If you are unfamiliar with HTML5 applications (a.k.a., hybrid apps), they are HTML5 webapps packaged as native apps. When the app is launched on a device such as an iPhone, the app starts up an integrated browser that loads the app’s HTML5 web user interface as if it were native. This simple approach has the benefit of being cross-platform capable (write-once, deploy anywhere) and very affordable to develop because it requires only basic web programming skills.


We will use open-source Apache Cordova SDK (PhoneGap), as it has become the  HTML5 app runtime de facto standard and has been ported to run on iOS, Android, Windows 7 Mobile & 8, Blackberry, and less popular platforms. Cordova also provides a cross-platform JavaScript API through with the app can access key sensors and services of the mobile platform.

About Tools and Services

We will be using the latest version of MyEclipse IDE (MyEclipse ver. 2013) for development. MyEclipse 2013 includes cross-platform mobile and HTML5 development tools, which work great with JEE 6 apps like the Petstore. Specifically, we will make heavy use of MyEclipse App Center Builder, a cloud-based service for building native iOS and Android apps.

The user interface will be implemented using the JQuery Mobile HTML5 user interface library and the Knockout.js model-view library (more about this later). Mobile-PetStore will interact with the REST web service implemented by JEE6 PetStore application. The PetStore JEE 6 application is deployed to the Glassfish 3 server using the Apache Derby database for storage. We will say more about the PetStore implementation in a future article.

Next Steps

In Part-2 we will talk about the user experience and outline the REST web service APIs we plan to use.

Related Posts

Angular 4 — the Butterfly, Not the Cocoon. Metamorphosis doesn’t have to be ugly: forget about Kafka or what a butterfly has to go through before it shows its amazing apparel. Angular 4 has evolved for you and is showing its best colors. “Just how different is it from Angular 2?”, you might wonder. There are some overall and package-specific changes, as well as new features.First of all, it...
The Time Has Come to Learn TypeScript. TypeScript or JavaScript?  Now, that is the question!  If TypeScript, a typed superset of JavaScript, compiles down to JavaScript, the obvious query is why have it in the first place.  Another logical inquiry is whether it’s ideal for everyone, how and where it can be used.There are two good reasons why developers should bother learning TypeScript ...
Upgrade to Angular 4 – Lost in Angular Migra... Upgrade to Angular 4 - Lost in Angular Migration?You are probably familiar with how difficult it is to get a visa to certain countries -- it represents a long, tiring journey of document gathering and application process.  Upgrading Angular might actually feel like trying to move to another country!  Don’t you wish there were an all-inclusive visa,...
Angular Who? Staying true to the Angular dynasty.When you are in a serious relationship, you want your partner to have it all… So when someone more attractive comes along, it’s hard to resist the temptation, isn’t it? That’s true for those who started their love story with Angular (or should we say “AngularJS” or “Angular 1”?), have dumped him for Angular 2 (or...

Posted on Apr 23rd 2013