From Morfeo Wiki

Develop mobile web applications with MyMobileWeb is even easier in version 4.0

You have to follow these simple steps that will take no more than 15 minutes:

1. Install your web development environment
2. Install the DDR REST Service 1.2
3. Install MyMobileWeb SDK 4.0 (latest version is 4.0 RC2)
4. Install MyMobileWeb Eclipse Plugin (optional but highly recommended)
5. Develop your first application !

Contents 1 Step 1. Install your web development environment 2 Step 2. Install the DDR REST Service 1.2 2.1 How to install the DDR Rest Service 2.2 How to run the DDR Rest Service 3 Step 3. Install MyMobileWeb SDK 4.0 3.1 How to install MyMobileWeb SDK 3.2 Install some examples (not mandatory) 4 Step 4. Install MyMobileWeb Eclipse Plugin 4.1 How to install the plugin 4.2 How to configure the plugin 5 Develop your first application ! 5.1 Create the project 5.2 Edit the project 5.3 Create a new server runtime 5.4 Launch the application

Step 1. Install your web development environment

If you are a Java developer, it is possible that you already have the following software pieces installed:

• Java SE 5.0+ JDK
• Eclipse IDE 3.3+
• Apache Tomcat 5.5+

First, you need to install a Java SE 5.0+ JDK from Sun Microsystems (other implementations should also work). It is important to set the JAVA_HOME environment variable pointing to the path you have installed the JDK.

As development IDE, we suggest to use Eclipse for Java EE Developers to exploit every possibility MyMobileWeb offers to mobile web developmers.

Finally, you need a servlet container such as Apache Tomcat. In this guide we will use Apache Tomcat 6.0.20, but you can use any server conforming the servlet 2.3/JSP 1.2 specifications. We will refer the path your Apache Tomcat is installed as $TOMCAT_HOME.

Step 2. Install the DDR REST Service 1.2

The DDR REST Service is a web application that offers a standar API to access device characteristics from your mobile web application (or any other third party application).

How to install the DDR Rest Service

• Download the software, current version is 1.2.

• Uncompress the tar.gz file, you will get a folder structure as shown in the image below, where the application itself is the DDRService folder.

• Install the DDR Service application in your web server. If you use Tomcat you only have to copy the whole DDRService folder to the $TOMCAT_HOME/webapps folder.

• Configure the file $TOMCAT_HOME/webapps/DDRService/config/logs/traces.xml (the File parameter)

 
<log4j:configuration>
  <appender name="rollingFile" class="org.apache.log4j.RollingFileAppender">
    <param name="File" value="C:/tmp/ddr-service.log" /> <!-- This parameter -->
    <param name="MaxFileSize" value="512KB" />
    <param name="MaxBackupIndex" value="10" />
    <param name="Append" value="false" />
    <layout class="org.apache.log4j.PatternLayout">
      <param name="ConversionPattern" 
        value="[%d{dd-MM-yyyy HH:mm:ss,SSS}]   %-25.25t   %-25.25c{1} %-8p - %m%n"/>
    </layout>
  </appender>  
 
  <category name="DevInfo" additivity="false">
    <priority value="DEBUG" />
    <appender-ref ref="rollingFile"/>
  </category>
 
  <root>
    <priority value="DEBUG" />
    <appender-ref ref="rollingFile" />
  </root> 
</log4j:configuration>
 

How to run the DDR Rest Service

• You have to increase the maximum heap size the DDR Service can use, appending to the JVM the arguments '-Xms512m -Xmx512m'. If you use Apache Tomcat, you can easily do it from command line as:

E.g: set JAVA_OPTS=-Xms512m -Xmx512m (in Windows OS)

E.g: export JAVA_OPTS="-Xms512m -Xmx512m" (in Linux OS)

• Now we're going to run our Apache Tomcat. Go to the folder $TOMCAT_HOME/bin an launch

startup.bat (in Windows OS)

startup.sh (in Linux OS)

• The last step is to check the service so you should open your preferred browser and navigate to http://localhost:8081/DDRService. Click on List Available Properties. The Service will show a set of available properties as you can see in the next screenshot.

If you are in this step your DDR Service is running successfully!! Congratulations!

Step 3. Install MyMobileWeb SDK 4.0

MyMobileWeb SDK is the toolkit that allows to create and deploy mobile web applications developed with MyMobileWeb.

How to install MyMobileWeb SDK

• Download the SDK. The version used in this guide is 4.0 RC2.

• Uncompress the tar.gz file. That will create a folder MyMobileWeb_SDK_4_0

Install some examples (not mandatory)

• Download the examples, a set of demo applications you can use to easily test the platform.

• Uncompress the tar.gz file. That will create a folder MyMobileWeb_SDK_4_0/examples

Step 4. Install MyMobileWeb Eclipse Plugin

This plugin drastically increases your productivity when developing mobile web applications with Eclipse. It is possible to do the same tasks via command line, but it is more intuitive for the developers to use the plugin.

How to install the plugin

• Download the plugin 1.3 for Eclipse. The plugin has been successfully tested with Eclipse 3.3+.

• Uncompress the file and move the extracted folder to $ECLIPSE_HOME$/plugins (Eclipse 3.3+) or $ECLIPSE_HOME$/dropins (Eclipse 3.4+).

How to configure the plugin

When you start your Eclipse again, you have to configure the plugin to point to the SDK. Just go to Window > Preferences > MyMobileWeb and enter the absolute path to your SDK installation in the input field labeled as "SDK Installation Directory"

Develop your first application !

Create the project

• To start creating a new MyMobileWeb Project go to File > New > Other ... > MyMobileWeb > New Project

• Enter a name for your project (i.e. HelloWorld) and click "Finish".

• The project is created

Edit the project

• Open the first presentation under WebContent/OPs/InitOP/menu.xml and modify it so it looks like:

 
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="mypresentation.css" type="text/css"?>
<!DOCTYPE ideal2>
<ideal xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="mypresentation" title="My Application">
	<ui>
		<body>
			<section id="main">
				<div id="mydiv"><span>Hello World</span></div>
			</section>
		</body>
	</ui>
</ideal>
 

Syntax has been simplified to make development much easier and intuitive.

Create a new server runtime

MyMobileWeb projects are created as "Dynamic Web Projects", so they exploit the web server infraestructure offered by the Web Tools Platform (WTP) that comes built-in to Eclipse 3.3+.

• Go to New > Other > Server > Server to start creating a new Server

• Define the server location. Click "Browse" to locate the base $TOMCAT_HOME folder where you installed Apache Tomcat. Once you've entered a valid directory, click "Next" to add projects.

• Add the projects to the server. Click "Next". You can now add projects to the server. Select the MyMobileWeb Basic project you created, and click "Add".

• Click "Finish" to close the wizard. Now the Servers view contains the Tomcat v6.0 Server with your "HelloWorld" project as a child.

Launch the application

• Open any mobile emulator or browser and enter the URL: http://localhost:8080/HelloWorld

It was not so hard :)