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.

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.

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.

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.