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.

iPhone to Palm

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 name;
private String description;
private String taskType;
private Boolean isDone;

}

  1. Create a MyEclipse Web Project named TaskManager.
  2. Create a com.tasks.domain package.
  3. Save the Task Java Bean into the new package.
  4. Right-click on the project and select MyEclipse > Scaffold Spring CRUD Application…
  5. On the scaffolding wizard, select Java Beans and press Next.
  6. Pick our Task bean and press Add.  Then press Next.
  7. On the Select Primary Keys panel, select the Task bean and pick the name field as the primary key.
  8. Fast forward until you get to the Select Web Client Type panel.
  9. On the Select Web Client Type panel, pick Spring MVC and iPhone and press Next.

Select Client Types

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.

Customize User Interface Panel

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.

Dashboard

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

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.

Related Posts

Maven Dependency Management – without Going ... You may have already discovered the joys of managing your projects with Maven, thanks to a virtually endless range of features it has to offer. Whether you are a newbie or a pro, using it in MyEclipse will take it to a whole new level if you are looking for a better experience inside an IDE. Dependencies Only ModeYou might be used to the fact that ...
Creating Twitter Clone Using HTML, CSS, jQuery In this project, we are going to create a Twitter clone using HTML, CSS and jQuery only. We will create the Registration screen and Twitter wall, where you can post tweets up to 250 characters in length. You can also retweet and like the tweets. However, since we are not using any server and database, nothing will persist. As soon as you reload the...
MyEclipse 2017 Stable 2.0 is Ready for Your Holida... The long wait between the first stable release of the year and this one has definitely paid off: 2017 Stable 2.0 sums up the work done in the last six CI releases! Thus, you can fully enjoy this holiday season, knowing that when you jump back into your work, you can rely on Angular 5 and TypeScript 2.5 support, enjoy an improved Eclipse experience ...
2017 CI 10 – Our Holiday Gift is Here We are getting more and more in the holiday mood! Need proof? Our 2017 CI 10 is out the door, bringing you the best present right before the holidays - a release focused on critical fixes across our products. And if you happened to experience a critical crash on macOS High Sierra, it won’t happen again as you step into the new year!So what have we ...

Posted on Aug 9th 2010