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!

Consuming WCF Service in WP7

In this post i will show you the very basic way of calling WCF service in WP7 application and persisting the service url in the isolated storage of mobile. In WCF there are two modes to configure endpoints i.e. Imperative and Declarative. Imperative means developer can configure the endpoints through code whereas in the declarative mode, it is configure in the configuration file.

Whats the problem?
We came to the question that suppose we have provided a WP7 application to one of our client. And that application consumes some WCF service. Suppose the service endpoint address is changed, now how can the client configure the endpoint address on his mobile/device.

Every mobile has their persistence storage media. And each application gets the quota where you can store some configuration settings or data to utilize where applicable. In WP7 there is a class called IsolatedStorage through which developer can get an access to the Application store.

Below i have shown a way to use the Isolated Storage and consume WCF service from WP7 mobile application.

Requirements: WP7 SDK, Visual Studio 2010.

Steps:
1. Open Visual Studio and create a new project of “Windows Phone Application”

2. Add another WCF Service Application Project.

3. Open the WP7 project and in the MainPage.xaml form add two textboxes for defining Server Name and Port, add a button to get the data from WCF service and the textbox to display the Service result.

4. Open the Service Application project and define operation contract named GetData as shown below.

namespace TestService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface ITestService
{

[OperationContract]
string GetData();
}
}

namespace TestService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
public class WCFTestService : ITestService
{
public string GetData()
{
return "Hello world!";
}

}
}

5. Add reference to this service in WP7 project

6. Now in the Button click event we need to call the service, following snippet shows the way to store the Server name and port in the isolated storage of mobile device and consume the service.

private void btn_Click(object sender, RoutedEventArgs e)
{
String strUrl = "http://" + txtServerName.Text + ":" + txtPort.Text + "/WCFTestService.svc";

IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication();
if (file.FileExists("Sources.res"))
{
file.DeleteFile("Sources.res");

}
IsolatedStorageFileStream fs = file.CreateFile("Sources.res");
System.IO.StreamWriter writer = new System.IO.StreamWriter(fs);
writer.Write(strUrl);
writer.Close();
fs.Close();
fs.Dispose();

System.ServiceModel.EndpointAddress epa = new System.ServiceModel.EndpointAddress(strUrl);
Services.TestService.TestServiceClient client = new Services.TestService.TestServiceClient("BasicHttpBinding_ITestService", epa);
client.GetDataCompleted += new EventHandler(client_GetDataCompleted);
client.GetDataAsync();
}


void client_GetDataCompleted(object sender, Services.TestService.GetDataCompletedEventArgs e)
{
textBox3.Text = e.Result;
}

7. In the MainPage constructor add following snippet to read the Server Name and Port from the isolated saved earlier.

// Constructor
public MainPage()
{
InitializeComponent();
IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication();
string[] strArr=file.GetFileNames();
if (file.FileExists("Sources.res"))
{
IsolatedStorageFileStream fs = file.OpenFile("Sources.res", System.IO.FileMode.Open);
System.IO.StreamReader reader = new System.IO.StreamReader(fs);
String str = reader.ReadLine();
textBox1.Text = str.Substring(str.IndexOf("/") + 2, str.LastIndexOf(":") - 1 - str.IndexOf("/") - 1);
textBox2.Text = str.Substring(str.LastIndexOf(":") + 1, 4);
reader.Close();
fs.Close();
fs.Dispose();
}
}

Now run the application, specify the Server Name and Port and then click on the Retrieve Service Data button.