How to Bootstrap a Tabris Application with Maven and Eclipse

From my point of view bootstrapping a new application is always tricky. Especially when you want to bootstrap an app that uses technology you are not yet familiar with. With this post I want to give you a step by step tutorial on how to bootstrap a Tabris application using Eclipse and Maven. So, let’s get our hands dirty!

IDE Setup

The first thing you need to do is to download the latest “Eclipse IDE for Java EE Developers“. This package contains everything you need to create web applications and deploy them to the application servers of your choice. As we want to bootstrap the application with Maven, we also need to install additional tools called “m2e” which provide a Maven integration for Eclipse. So, after starting your new IDE, go to

“Help” -> “Install New Software” and paste the p2 repository url (http://download.eclipse.org/technology/m2e/releases) of m2e into the text box. This should look like the screenshot below.

m2e installation How to Bootstrap a Tabris Application with Maven and Eclipse

After the installation was successful, you need to restart the IDE.

Create a Project

The next step is to create a new project. Tabris applications run on the server side. So, we want to create a Web-application project. For this go to “File” -> “New” -> “Dynamic Web Project”, which basically creates a JavaEE project.

new project How to Bootstrap a Tabris Application with Maven and Eclipse

In my example I have named the project “com.eclipsesource.hello.world” but you can choose whatever name you like.

Maven

To make things as easy as possible we want Maven to manage our dependencies. This involves two steps. Firstly, we want to have the dependencies during development time and secondly, we want Eclipse to put those dependencies in our “lib” folder during deployment time. The first step can be completed easily. Just right click on the newly created project and press “Configure” -> “Convert to Maven Project”.

convert project How to Bootstrap a Tabris Application with Maven and Eclipse

This adds a pom.xml to our project to which we can later add dependencies. The second step is a little bit more complicated. To have the depencies copied into the “lib” folder we need to create a “Deployment Assembly”. To create this, right click on the project and select “Properties”. In the left hand navigation tree, select “Deployment Assembly”. Within this page we need to add a new assembly. So, click on Add and choose “Java Build Path Entries”.

new assembly How to Bootstrap a Tabris Application with Maven and Eclipse

After pressing “Next” we need to tell Eclipse which build path entry we want to have copied. As we want the Maven dependencies to be copied, we will choose these.

maven assembly How to Bootstrap a Tabris Application with Maven and Eclipse

On your machine the dependency tree may be empty, but this is not a problem. Just select “Maven Dependencies” and press “Finish”. After this you should see the newly created assembly pointing to the “lib” folder.

assembly result How to Bootstrap a Tabris Application with Maven and Eclipse

Add Tabris

After having completed the Maven setup, we can add a dependency to Tabris because we want to build a Tabris app, right :)? So, open the “pom.xml” of your project and go to the dependency section. Select “Add” and search for “tabris”. At this point in time Tabris 1.0 is the current version. Before you select it please make sure that the dependency scope is set to “runtime”.

tabris dependency How to Bootstrap a Tabris Application with Maven and Eclipse

After pressing OK and saving the pom.xml Eclipse (m2e) will download Tabris and its dependencies for you.

Creating the App

To create the hello world application we need just two classes. The first one is a configuration that tells the framework what to do. In our case it should tell the framework that we want a Tabris UI with only one page. This should look like this:

public class Configuration implements ApplicationConfiguration {
 
  @Override
  public void configure(Application application) {
    TabrisClientInstaller.install(application);
    application.addEntryPoint("/hello", new TabrisUIEntrypointFactory(createConfiguration()), null);
  }
 
  private UIConfiguration createConfiguration() {
    UIConfiguration uiConfiguration = new UIConfiguration();
    PageConfiguration startPageConfig = new PageConfiguration("root", StartPage.class);
    startPageConfig.setTopLevel(true);
    startPageConfig.setTitle("Hello World" );
    uiConfiguration.addPageConfiguration(startPageConfig);
    return uiConfiguration;
  }
 
}

After the configuration is complete, we will need a page. I decided to go with an easy one ;). It’s just a pink colored page that does nothing.

public class StartPage extends AbstractPage {
 
  @Override
  public void createContent(Composite parent, PageData data) {
    parent.setBackground(new Color(parent.getDisplay(), 255, 150, 255));
  }
 
}

Basically this is the whole application we want to create.

Configure the Web-Application

One last step is to configure the Web-Application. We need to tell the Application that it should use the ApplicationConfiguration created in the previous step. We can do this by modifying the web.xml. You can find this file within your project by expanding the “WebContent/WEB-INF” folder. The content of the web.xml should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<context-param>
<param-name>org.eclipse.rap.applicationConfiguration</param-name>
<param-value>com.eclipsesource.hello.world.Configuration</param-value>
</context-param>
<listener>
<listener-class>org.eclipse.rap.rwt.engine.RWTServletContextListener</listener-class>
</listener>
<servlet>
<servlet-name>rwtServlet</servlet-name>
<servlet-class>org.eclipse.rap.rwt.engine.RWTServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>rwtServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>

Export

That’s it! Our application is ready to be exported. You can do this by right clicking on your project and selecting “Export” -> “WAR-file”.

export How to Bootstrap a Tabris Application with Maven and Eclipse

After you have the .war file ready you can deploy it to whatever servlet container you want.

Access the Application

To access the application you need a Tabris mobile client. You can download them from the Tabris download page. I have used the iOS client and the application looks like the one in the screenshot below. You need to point your client to your server, e.g. http://localhost:8080/com.eclipsesource.hello.world/hello (Please Note: Maybe you have to replace localhost with the address of your servlet container. On Android devices localhost points to the device.).

hello How to Bootstrap a Tabris Application with Maven and Eclipse

If you have any open questions please don’t hesitate to leave a comment.

[ Interested in mobile app development in Java? See Tabris technology overview. | Looking for more build tools? Go to our Eclipse Tools page. ]

You may also like...

Share this Post

Twitter4
Google+1
LinkedIn
Facebook

Tags

3 Responses to “How to Bootstrap a Tabris Application with Maven and Eclipse”

  1. Vincenzo Caselli says:

    Hi Holger,
    great tutorial indeed!
    One question: is it possible to debug the application before exporting to a war?
    In this case how this can be done with Android?
    Thank you
    Cheers
    Vincenzo

  2. Hi Vincenzo,
    sure this is possible.
    You can click on the project and select -> Debug as -> Debug on Server when using Eclipse Webtools. Another option is to start you Tabris application as an OSGi Application. Than it starts a Jetty server together with the application. Please take a look at out demos to see how this works: https://github.com/eclipsesource/tabris-demos

  3. Vincenzo Caselli says:

    Thank you Holger,
    I tried Debug as … on my local tomcat (I used to do it a lot in web development :)), but don’t know which URL to input from a USB connected (Debug mode enabled) Android device with Tabris client installed.
    So the question is: if I’m developing using a local tomcat (without a public ip) which URL should I use?
    Thank you
    Vincenzo

3 responses so far

Written by . Published in Categories: EclipseSource News, Editors choice, Planet Eclipse