One of the snappy new features in MyEclipse for Spring 8.6 is the ability to scaffold a web application that’s skinned to look like an iPhone app. The generated app runs on a web server and uses a Spring back-end. But, what about the oodles of people who don’t use iPhones or the brilliant developers who know that smartphone names don’t always start with the letter i?
Well, that’s where this article comes in. I will show the MyEclipse for Spring user how to convert their fancy iPhone app to an ultra-fancy mobile app that will look smashing on any smartphone that has a reasonable screensize. When you’re finished with this article you will have a running application customized not only for your immobile desktop, but also your Android phone, your sister’s Palm Pre and your cube-mate’s iPhone.
The Goal
There are three steps necessary to achieve our goals today. First, we’ll scaffold an iPhone app. Then we’ll duplicate our iPhone pages and update their CSS to be less iPhone-ish. Finally, we’ll apply a little dab of Spring glue necessary to make those new cooler pages show up on some other smartphones. As a final but optional step, you can brag to your co workers about how smart you are now that you’ve done this. Enough with the formalities, let’s get started.
Step 1 – Scaffold the iPhone application
In this example we’ll scaffold a Spring MVC front-end along with the iPhone front-end but in real life you could choose to scaffold any of the cool technologies supported by MyEclipse for Spring like MVC, GWT, Flex or Web Flow. There is also no requirement that you scaffold anything but the iPhone. Since we want an application that shows everyone how smart and flexible we are, we’re going to do Spring MVC and iPhone.
For this example, we’re going to scaffold a very simple task management system from a basic Java class.
package com.tasks.domain;
public class Task {
private String description;
private String taskType;
private Boolean isDone;
}
- Create a MyEclipse Web Project named TaskManager.
- Create a com.tasks.domain package.
- Save the Task Java Bean into the new package.
- Right-click on the project and select MyEclipse > Scaffold Spring CRUD Application…
- On the scaffolding wizard, select Java Beans and press Next.
- Pick our Task bean and press Add. Then press Next.
- On the Select Primary Keys panel, select the Task bean and pick the name field as the primary key.
- Fast forward until you get to the Select Web Client Type panel.
- On the Select Web Client Type panel, pick Spring MVC and iPhone and press Next.
On the Customize User Interface panel you can specify better labels for fields that appear on the generated JSP pages. You can also configure which fields will appear in the lists. We want a simple list on our iPhone version so un-check the “Propagate changes to all web client types” checkbox and un-check the all but the “Name” field under the iPhone section. You can also customize the labels if you like.
Press Finish when you’re done customizing your labels, then sit back and take a sip of coffee while MyEclipse for Spring generates your DAO Service, Controller, JSP’s and spring configuration files for your mobile and desktop task management system.
At this point, you could deploy the project to your local Tomcat server and access it using your favorite desktop browser. If you do that, you’ll notice that the application is the standard Spring MVC application generated by MyEclipse for Spring. The dashboard page contains the launch pad to your Spring MVC page and also a note about your iPhone app.
If your Tomcat server is on the web or accessible via Wi-Fi, you can grab your buddy’s iPhone and hit the main page to see the iPhone version. If you don’t have an iPhone handy or your buddy is too busy playing Chat Roulette on his, take a look at the MobiOne product from Genuitec. A third option is to download Safari and spoof the user agent string.
Safari Tip: Enable the Develop menu on the Advanced tab of the Preferences panel. Then on the menu button for the current page, select Develop > User Agent > Mobile Safari – 3.1.3 – iPhone
Regardless of the tool used, once you’ve accessed the iPhone application with a browser that supplies an iPhone user agent string, you’ll see the iPhone version of the application.
iPhone Dashboard - in MobiOne
On the following pages we’ll use this iPhone app as a starting point for our non-iPhone mobile web application.
