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

Connecting your Angular 2 App to your Java EE Back... Connecting your Angular 2 App to your Java EE BackendYou’ve been developing in Java EE all this time, but you’re tired of using JSF, or perhaps even Struts, and want to move to something more modern for your front end? Angular 2 is a perfect fit, and with the recent release of Angular 2 GA, now is the ideal time to make the move! Besides being easi...
Angular Who? Staying true to the Angular dynasty.When you are in a serious relationship, you want your partner to have it all… So when someone more attractive comes along, it’s hard to resist the temptation, isn’t it? That’s true for those who started their love story with Angular (or should we say “AngularJS” or “Angular 1”?), have dumped him for Angular 2 (or...
SDC 2017 – Looks, Security & Neon. Get your installers ready (Java 1.8), because Neon is here! Our first release of the year is based on Eclipse Neon and with it, many other exciting updates.Totally new portal, we are updating the look and feel of the SDC portal, giving extra functionality that allows you to perform basic editing of packages without the need of the Admin Console. Yo...
Java 8 Features Supported by Spring 4 Spring Framework 4 supports Java 8 language and API features. In this article, we will focus on the new Java 8 features which are supported in Spring 4. The most important ones are lambda expressions, method references, JSR-310 Date and Time, and Repeatable annotations.Lambda ExpressionsSpring code base uses a lot of functional interfaces and with ...

Posted on Aug 9th 2010