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.

Related Posts

How Developers Can Get in on the Pokémon Go Craze Unless you’ve been living under a rock, you’ve heard of Pokémon Go. This mobile app uses GPS to combine the virtual world and the real world. Back in the day, I logged many hours playing Pokémon on an old Nintendo Game Boy. Now, Pokémon Go has gotten me outside hunting for Pokémon because I want to "catch’em all"!I must not be the only nostalgic Po...
How Working from Home Got Me out of the House I feel privileged to work for a company with a virtual workplace. I know some of you will read this and think it must be lonely to work from home, but that’s not the case. Genuitec’s annual team building trips have been a great way to stay connected with my team. These trips have also helped me realize how much I enjoy discovering new places.Let’s ...
MyEclipse 2016 Stable 1.0 – The Saga Continu... After months of very arduous work, MyEclipse 2016 Stable 1.0 is finally here! This is definitely one of the most exciting releases of the year (so far!). Why? Because we not only continued maintaining and improving core Java EE features, but we are also focusing on providing support for the Full Stack developer allowing Java EE-centric enterprises ...
Easily Create Mobile Games with Phaser and Webclip... As a gamer, I love cool graphics and stunning effects on big games and all that a Master Race PC can offer, but sometimes I just want to have some fun playing simple old school games in my phone or browser. You know what I also love? Programming! I always wanted to be able to make my own games but I thought it was too complicated until I found Phas...

Posted on Aug 9th 2010