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.
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.
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.
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.
- Create a folder named “mobile” directly under the WEB-INF folder.
- Copy/paste the content of the iphone folder to the new mobile folder.
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.
- Open WEB-INF\mobile\task\listTasks.jsp and change the “pageitem” css class on the ul tag to “list”
- Open WEB-INF\mobile\task\menu.jsp and change the “pageitem” css class on the ul tag to “list”
- 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