All of this iPhone stuff is nice but now we want to make our task manager easy to use on other mobile phones.

Step 2 – Duplicate and Change Style

For starters, let’s take a look at what was generated so we understand what we're doing. We’ll break it down by spring beans, then config files, then the web layer.

Generated Spring Beans

If you’ll expand your src and generated folders you’ll see your original Java Bean. If you open it, you’ll find that it's now a JPA entity with all sorts of annotations.  Hey, this is work we didn’t have to do!

Since we accepted some defaults on the scaffolding wizard, our DAO, Service and Controller were created under the generated folder.  One thing to note is that all of this code is reused by both the mobile and MVC front-ends.  There are no changes necessary to this code but it’s good to know it’s there working hard for us.

Java Code

Original Entity and Generated Spring Beans

Generated Configuration Files
Expand the resources folder and you’ll notice all sorts of context xml files.  With the current version of MyEclipse for Spring, there is a generated and non-generated version for each layer (domain, dao, service, and web).  The only files of interest for this exercise are the web context files.  We’ll modify one of those later in this article.

Generated Spring Configuration Files

Generated Spring Configuration Files

Generated Web Layer

Now for the good stuff.  Expand the WebRoot folder and the WEB-INF folder.  You’ll notice that there is a folder for iphone and a “pages” folder for MVC.

Generated Web Layer

Generated Web Layer

Those folders contain all of the generated JSP pages that comprise the Spring MVC and iPhone front-ends.  There are also some curious looking sitemesh folders that contain sitemesh files, some of which have been customized for iPhone.  Both the Spring MVC and iPhone CRUD applications generated by MyEclipse for Spring use SiteMesh.  We’ll get back to sitemesh in a bit.  For now let’s get to work creating our non-iPhone JSP’s and CSS.

  1. Create a folder named “mobile” directly under the WEB-INF folder.
  2. Copy/paste the content of the iphone folder to the new mobile folder.
It should look like this when you’re done.

After Copy

The files you just copied are plain old JSP pages that reference certain CSS rules.   By copying the files, we can safely make changes to the look and feel of our mobile app independent of the iPhone application.

I’ve created a stylesheet that you can use for your new mobile application.  It’s nothing your creative department is going to commend you for and it doesn’t adhere to any particular mobile OS standards, but I think it’s pretty so it will work for this exercise.

Note:  To make this article simple, I continued to use the iWebKit image files that you already have in your iPhone application.

Download the style-mobile.css file from here and store it in the WebRoot/css folder alongside the style-iphone.css file.  I wanted to change the iPhone app significantly so there are two minor CSS changes and one jsp:include that we need to change in our copied pages.

  1. Open WEB-INF\mobile\task\listTasks.jsp and change the “pageitem” css class on the ul tag to “list”
  2. Open WEB-INF\mobile\task\menu.jsp and change the “pageitem” css class on the ul tag to “list”
  3. Open the WEB-INF\mobile\menu.jsp and change the jsp:include tag to reference the menu.jsp under the mobiledirectory instead of the iphone directory.

That’s it for our JSP pages and CSS.  The only other web-layer thing we need to do is configure SiteMesh to work with our new pages and some new mobile phones.

Posted on Aug 9th 2010