Developing iPhone Applications using Vaadin touchkit and .Net WCF Services

iPhone market is emerging day to day and the no. of clients are increasing time to time. Therefore, i got a task to do some research on the development of iPhone applications. One way is to use Mac OS and develop applications using Objective C or Mono Touch SDK for iPhone development. As i dont have a licensed MAC OS i tried out the other way and used Vaadin Touch toolkit for developing front end interface in Java using Eclipse IDE and calling .Net WCF service or Webservices for backend logic.

What is Vaadin?

Vaadin is a web application framework for Rich Internet Applications (RIA). In contrast to Javascript libraries and browser-plugin based solutions, it features a robust server-side architecture. This means that the largest part of the application logic runs securely on the server. Google Web Toolkit (GWT) is used on the browser side to ensure a rich and fluent user experience.

Vaadin is a large collection of UI components. You compose the application user interface from components such as Buttons, Tables, Trees and Layouts. The components use events, listeners and data binding to communicate with each other and with your business logic.

Vaadin is a robust architecture for rapid application development. The component-based architecture together with statically typed Java language and data binding features help you build applications that are easily modularized and refactored as needed. The IDE and tooling support including visual designing tool help you to build web user interface extremely fast.

Basic Architecture Diagram

Installations to be done:

1. Download and install the latest Eclipse IDE for Java EE developers from Eclipse IDE Download

2. Downlaod Vaadin Eclipse Plugin from Vaadin Plugin Download

3. Download Vaadin Touckit extension from Vaadin Touckit Download
Once downloaded and installed you have to download and configure the Vaadin toolkit in Eclipse IDE.

4. Tomcat server from Tomcat Server download

Configuring Tomcat Server in Eclipse IDE

1. Extract Tomcat files in some folder for e.g. C:\Tomcat

2. Open your eclipse IDE and click on File > New > Other and select Server.

3. Press Next and select the Tomcat Version you have downloaded and press Next.

4. Click on Add and specify Path of the Tomcat directory and press Finish.

5. Start the server to ensure that the Tomcat server is running and configured successfully.

Creating a WCF Service Project in .Net C# using Visual Studio 2010 IDE

1. Now we need to create a simple WCF service which exposes HelloWorld method and that method returns some text that we will display in the mobile application.

2. Open Visual Studio 2010.

3. Create a new WCF Service Application project

4. Declare a method named HelloWorld which returns some string.


namespace TestService
{
[ServiceContract]
public interface ITestService
{
[OperationContract]
string HelloWorld();
}
}

5. Implement it in a Service class that implements the ITestService interface.


namespace TestService
{

public class WCFTestService : ITestService
{
public string HelloWorld()
{
return "Hello world!";
}
}
}

6. Build the solution and open WCFTESTCLIENT from Visual Studio Command Prompt

7. Add service address from File > Add Service…

8. Invoke HelloWorld method it will display the text named Hello World!, Hence the service is tested.

Creating a new Vaadin Project in Eclipse

1. Now create a new Vaadin project from Eclipse IDE

2. Drag and drop the Vaadin touckit jar file from the downloaded path to the WEB-INF > lib folder.

3. Following is the code snippet of main class which inherits the Application class.


package com.example.samplevaadin;

import com.vaadin.Application;
import com.vaadin.touchkit.TouchPanel;
import com.vaadin.ui.*;

public class SamplevaadinApplication extends Application {
/**
*
*/
private static final long serialVersionUID = 1L;

@Override
public void init() {

final Window mainWindow = new Window("Samplevaadin Application");
final TouchPanel panel=new TouchPanel();

panel.navigateTo(new TouchScreen());
mainWindow.setContent(panel);

setMainWindow(mainWindow);
setTheme("touch");
}

}

4. Add another class which extends to TouchLayout provided in the Touchkit API. Following code snippet shows the TouchScreen class whose object we have passed in the NavigateTo method of TouchPanel object.

following is the complete code snippet of TouchScreen class


package com.example.samplevaadin;

import com.vaadin.touchkit.TouchLayout;
import com.vaadin.touchkit.TouchMenu;
import com.vaadin.touchkit.TouchMenu.TouchCommand;
import com.vaadin.touchkit.TouchMenu.TouchMenuItem;

public class TouchScreen extends TouchLayout{
/**
*
*/
private static final long serialVersionUID = 1L;

public TouchScreen(){

setCaption("Main Screen");
TouchMenu menu = new TouchMenu("Samples");
menu.addItem("Call Service", new TouchCommand() {
public void itemTouched(TouchMenuItem selectedItem) {
getParent().navigateTo(new CallService());
}
});

addComponent(menu);

}
}

In the above class we have created a Touch Menu which will be displayed in the TouchScreen user interface. It contains a menu named “Call Service” and on clicking on this menu it navigates to another screen names CallService which contains code to call WCF service.

5. Update the web.xml and set ServletClass to com.vaadin.touchkit.mobileapplication.MobileApplicationServlet

Adding WCF Service reference in Eclipse Vaadin project.

1. Right click the the Vaadin project and click New

2. Click WebServices > Web Service Client

3. Specify the WCF Service wsdl address in my case it was http://localhost:5425/WCFTestService.svc?wsdl

4. Click finish, eclipse will create proxy class to the service reference which you can used in your code as i have shown above.

Now Create a new class named CallService and following is the code snippet of CallService class.


package com.example.samplevaadin;

import java.rmi.RemoteException;
import com.vaadin.touchkit.TouchLayout;
import com.vaadin.ui.*;
public class CallService extends TouchLayout {

/**
*
*/
private static final long serialVersionUID = 1L;

public CallService(){
setCaption("Call Service");

org.tempuri.ITestServiceProxy proxy=new org.tempuri.ITestServiceProxy();
String str=null;
try {
str = proxy.helloWorld();
} catch (RemoteException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

addComponent(new Label(str));
}
}

Executing the project

1. Run the project from eclipse

In the above screen it calls the service and display the result i.e. Hello World!

Advertisements

5 thoughts on “Developing iPhone Applications using Vaadin touchkit and .Net WCF Services

  1. We would like to thank you yet again for the wonderful ideas you offered Janet when preparing her own post-graduate research in addition to, most importantly, regarding providing many of the ideas in a single blog post. Provided that we had been aware of your website a year ago, we would have been rescued from the unwanted measures we were having to take. Thanks to you.

  2. Aw, this was a very nice post. In concept I wish to put in writing like this moreover – taking time and actual effort to make an excellent article… but what can I say… I procrastinate alot and not at all seem to get one thing done.

  3. That is the proper blog for anybody who needs to seek out out about this topic. You realize so much its virtually exhausting to argue with you (not that I truly would need…HaHa). You positively put a brand new spin on a topic thats been written about for years. Great stuff, simply great!

  4. Hey there! Someone in my Myspace group shared this website with us so I came
    to take a look. I’m definitely loving the information. I’m book-marking
    and will be tweeting this to my followers! Terrific blog and fantastic design.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s