Implement a WSO2 Carbon Component using eclipse IDE

Introduction

This tutorial mainly focus on how to implement a WSO2 carbon component from scratch and help you to understand the structure of the project that needs to be followed  when implementing a WSO2 carbon component. I assume that you have an overall understanding about WSO2 carbon platform and how it works.

First of all I give you a brief introduction about the award-winning WSO2 carbon platform. It is a component-based, service oriented platform for the enterprise-grade WSO2 middleware products stack. It is 100% open source and delivered under Apache License 2.0. The WSO2 Carbon platform is lean, high-performant and consists of a collection of OSGi bundles.  

The WSO2 Carbon core platform hosts a rich set of middleware components encompassing capabilities such as security, clustering, logging, statistics, management and more. These are basic features required by all WSO2 products that are developed on top of the base platform.

All WSO2 products are a collection of Carbon components. They have been developed simply by plugging various Carbon components that provide different features. The WSO2 Carbon component manager provides the ability to extend the Carbon base platform, by selecting the components that address your unique requirements and installing them with point-and-click simplicity. As a result, by provisioning this innovative base platform, you can develop your own, lean middleware product that has remarkable flexibility to change as business requirements change.

Once you have the basic knowledge on how the architecture works in carbon, you can start implementing a Carbon component. Before move on to any coding stuff first look at the prerequisites that we need to implement the carbon component using eclipse IDE.

 Prerequisites

• Java
• Maven
• Any WSO2 carbon product (Here I use WSO2 Application Server)
• Eclipse (or you can use IdeaJ as well)

Scenario

Suppose we have a simple object called OrderBean for storing order details in the back-end component and let’s try to display those information at the front-end UI.

Creating the Project Structure

Now I will explain about the project structure to implement the carbon component. Here I'm going to create an Order Process carbon component using ecpilse. This will consists of two parts called back-end runtime and front-end console UI. First look at how to implement back-end runtime.

As a first step I will create a maven project. (Before that, you should have install maven plugin to the eclipse)

File -> New -> Other -> Maven Project (Inside of the Maven folder)

Then click Next and you will see the fallowing UI.

Click Next and then select the appropriate archetype to create the project structure. Here I will use default project structure. And again click Next.

Now I will have to specify Archetype parameters for my maven project. See the fallowing figure to setup those parameters (Please change the version to 1.0.0-SNAPSHOT). And then click Finish.

Makesure that packaging type is bundle in the pom.xml file. (Because both backend and frontend must package as OSGi bundle in carbon). I'm using maven-bundle-plugin to do that.

<groupId>org.wso2.carbon</groupId>

<artifactId>org.wso2.carbon.example.OrderProcess</artifactId>

<version>1.0.0-SNAPSHOT</version>

<packaging>bundle</packaging>

 
This will be an OSGI bundle. So, I have to configure the Apache Felix plugin to set up the configurations.

       <build>
  <plugins>
   <plugin>
    <groupId>org.apache.felix</groupId>
    <artifactId>maven-bundle-plugin</artifactId>
    <version>1.4.0</version>
    <extensions>true</extensions>
    <configuration>
     <instructions>
      <Bundle-SymbolicName>${pom.artifactId}</Bundle-SymbolicName>
      <Bundle-Name>${pom.artifactId}</Bundle-Name>
      <Export-Package>
       org.wso2.carbon.example.OrderProcess.*
      </Export-Package>
     </instructions>
    </configuration>
   </plugin>
  </plugins>
 </build>

Since I'm using Carbon registry to store the items of the OrderBean, following dependencies should be added to the back-end project. (Remember to use byte arrays when you are storing the values in the Carbon registry)

<dependencies>  
     <dependency>  
       <groupId>org.wso2.carbon</groupId>  
       <artifactId>org.wso2.carbon.registry.core</artifactId>  
       <version>4.2.0</version>  
     </dependency>  
     <dependency>  
       <groupId>org.wso2.carbon</groupId>  
       <artifactId>org.wso2.carbon.registry.api</artifactId>  
       <version>4.2.0</version>  
     </dependency>  
 </dependencies>  

After adding the dependencies and the plugins, pom.xml file of the back-end will be similar to following pom. (If your project have an error then you should have to update the project such that right click the project then select Maven -> Update Project)

(You should have to change the value of the Export-Package element in your pom.xml file according to the package structure)

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>

 <groupId>org.wso2.carbon</groupId>
 <artifactId>org.wso2.carbon.example.OrderProcess</artifactId>
 <version>1.0.0-SNAPSHOT</version>
 <packaging>bundle</packaging>

 <name>WSO2 Carbon - Order Process</name>
 <url>http://maven.apache.org</url>

 <properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 </properties>

 <!-- <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> 
  <version>3.8.1</version> <scope>test</scope> </dependency> </dependencies> -->

 <build>
  <plugins>
   <plugin>
    <groupId>org.apache.felix</groupId>
    <artifactId>maven-bundle-plugin</artifactId>
    <version>1.4.0</version>
    <extensions>true</extensions>
    <configuration>
     <instructions>
      <Bundle-SymbolicName>${pom.artifactId}</Bundle-SymbolicName>
      <Bundle-Name>${pom.artifactId}</Bundle-Name>
      <Export-Package>
       org.wso2.carbon.example.OrderProcess.*
      </Export-Package>
     </instructions>
    </configuration>
   </plugin>
  </plugins>
 </build>

 <dependencies>
  <dependency>
   <groupId>org.wso2.carbon</groupId>
   <artifactId>org.wso2.carbon.registry.core</artifactId>
   <version>4.2.0</version>
  </dependency>
  <dependency>
   <groupId>org.wso2.carbon</groupId>
   <artifactId>org.wso2.carbon.registry.api</artifactId>
   <version>4.2.0</version>
  </dependency>
 </dependencies>

 <repositories>
  <repository>
   <id>wso2-nexus</id>
   <name>WSO2 internal Repository</name>
   <url>http://maven.wso2.org/nexus/content/groups/wso2-public/</url>
   <releases>
    <enabled>true</enabled>
    <updatePolicy>daily</updatePolicy>
    <checksumPolicy>ignore</checksumPolicy>
   </releases>
  </repository>
 </repositories>

 <pluginRepositories>
  <pluginRepository>
   <id>wso2-maven2-repository</id>
   <url>http://dist.wso2.org/maven2</url>
  </pluginRepository>
  <pluginRepository>
   <id>wso2-maven2-snapshot-repository</id>
   <url>http://dist.wso2.org/snapshots/maven2</url>
  </pluginRepository>
 </pluginRepositories>

</project>

Create the back-end service

I already created a service class called ProcessOrderService inside the package org.wso2.carbon.example.OrderProcess. This service consists of two methods. One for processing the order and the other is for canceling the order.

Before creating the service class I already created a package called org.wso2.carbon.example.OrderProcess.data to hold my data objects called OrderBean, Item, Address, Customer.

Now I will show my OrderBean class implementation below and you will see that it implements the Serializable interface, since because I'm going to use Carbon registry to store the OrderBean objects in the carbon registry.

package org.wso2.carbon.example.OrderProcess.data;

import java.io.Serializable;

public class OrderBean implements Serializable{
 private Customer customer;
 private Address shippingAddress;
 private Item[] orderItems;
 private String orderID;
 private double totalPrice;

 /**
  * @return customer
  */
 public Customer getCustomer() {
  return customer;
 }

 public void setCustomer(Customer customer) {
  this.customer = customer;
 }

 public Address getShippingAddress() {
  return shippingAddress;
 }

 public void setShippingAddress(Address shippingAddress) {
  this.shippingAddress = shippingAddress;
 }

 public Item[] getOrderItems() {
  return orderItems;
 }

 public void setOrderItems(Item[] orderItems) {
  this.orderItems = orderItems;
 }

 public String getOrderID() {
  return orderID;
 }

 public void setOrderID(String orderID) {
  this.orderID = orderID;
 }

 public double getPrice() {
  return totalPrice;
 }

 public void setPrice(double price) {
  this.totalPrice = price;
 }

}

package org.wso2.carbon.example.OrderProcess.data;

import java.io.Serializable;

public class Customer implements Serializable{
 private String custID;
 private String firstName;
 private String lastName;

 public String getCustID() {
  return custID;
 }

 public void setCustID(String custID) {
  this.custID = custID;
 }

 public String getFirstName() {
  return firstName;
 }

 public void setFirstName(String firstName) {
  this.firstName = firstName;
 }

 public String getLastName() {
  return lastName;
 }

 public void setLastName(String lastName) {
  this.lastName = lastName;
 }

}

package org.wso2.carbon.example.OrderProcess.data;

import java.io.Serializable;

public class Address implements Serializable{
 private String streetName;
 private String cityName;
 private String stateCode;
 private String country;
 private String zipCode;

 public String getStreetName() {
  return streetName;
 }

 public void setStreetName(String streetName) {
  this.streetName = streetName;
 }

 public String getCityName() {
  return cityName;
 }

 public void setCityName(String cityName) {
  this.cityName = cityName;
 }

 public String getStateCode() {
  return stateCode;
 }

 public void setStateCode(String stateCode) {
  this.stateCode = stateCode;
 }

 public String getCountry() {
  return country;
 }

 public void setCountry(String country) {
  this.country = country;
 }

 public String getZipCode() {
  return zipCode;
 }

 public void setZipCode(String zipCode) {
  this.zipCode = zipCode;
 }

}

package org.wso2.carbon.example.OrderProcess.data;

import java.io.Serializable;

public class Item implements Serializable{
 private String itemName;
 private String itemID;
 private double unitPrice;
 private int quantity;

 public String getItemName() {
  return itemName;
 }

 public void setItemName(String itemName) {
  this.itemName = itemName;
 }

 public String getItemID() {
  return itemID;
 }

 public void setItemID(String itemID) {
  this.itemID = itemID;
 }

 public int getQuantity() {
  return quantity;
 }

 public void setQuantity(int quantity) {
  this.quantity = quantity;
 }

 public double getUnitPrice() {
     return unitPrice;
    }

 public void setUnitPrice(double unitPrice) {
     this.unitPrice = unitPrice;
    }

}

Now you can see my service class implementation below.

package org.wso2.carbon.example.OrderProcess;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.ObjectInputStream;
import java.io.ObjectOutputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.logging.Logger;

import org.wso2.carbon.context.CarbonContext;
import org.wso2.carbon.context.RegistryType;
import org.wso2.carbon.example.OrderProcess.data.Item;
import org.wso2.carbon.example.OrderProcess.data.OrderBean;
import org.wso2.carbon.registry.api.Registry;
import org.wso2.carbon.registry.api.RegistryException;
import org.wso2.carbon.registry.api.Resource;


public class ProcessOrderService {
 private final static Logger LOGGER = Logger.getLogger(ProcessOrderService.class.getName());

 private List<OrderBean> orderList = new ArrayList<OrderBean>();
 private int orderCounter = 0;
 private double totalAmount = 0;
 private Registry registry = null;
 private static final String ORDER_PATH = "order_location";
 
 public ProcessOrderService(){
  registry = CarbonContext.getThreadLocalCarbonContext().getRegistry(RegistryType.valueOf(RegistryType.LOCAL_REPOSITORY.toString()));
 }

 /**
  * Acquire the order
  * 
  * @param orderBean
  * @return OrderBean object
  */
 public OrderBean processOrder(OrderBean orderBean) {

  // Number of items ordered
  if (orderBean.getOrderItems() != null) {
   // Set the order ID.
   orderBean.setOrderID("ABC-" + (orderCounter++));
   try {
             Resource orderRes = registry.newResource();
             orderRes.setContent(serialize(orderBean.getOrderItems()));  
             registry.put(ORDER_PATH, orderRes);
             
             Resource getItemsRes = registry.get(ORDER_PATH);
             Item[] items = (Item[]) deserialize((byte[]) getItemsRes.getContent());
             
             for (Item item : items) {
     double totalItemCost = item.getUnitPrice() * item.getQuantity();
     totalAmount += totalItemCost;
    }
             
             // set the total price
    orderBean.setPrice(totalAmount);
    orderList.add(orderBean);
    
             return orderBean;
            } catch (RegistryException e) {
             e.printStackTrace();
            } catch (IOException e) {
             e.printStackTrace(); 
            } catch (ClassNotFoundException e) {
             e.printStackTrace();
            }
 
  }

  return new OrderBean();
 }

 /**
  * Delete the given order
  * 
  * @param orderID
  * @return boolean to check weather order is deleted or not
  */
 public boolean cancelOrder(String orderID) {
  LOGGER.info("cancelOrder method starting");

  for (OrderBean orderBean : orderList) {

   if (orderBean.getOrderID().equals(orderID)) {
    LOGGER.info("canceling OrderBean Processing");
    orderList.remove(orderBean);
    return true;
   }
  }

  LOGGER.info("cancelProcssing over");
  return false;
 }
 
 private static byte[] serialize(Object obj) throws IOException {
        ByteArrayOutputStream b = new ByteArrayOutputStream();
        ObjectOutputStream o = new ObjectOutputStream(b);
        o.writeObject(obj);
        return b.toByteArray();
    }

    private static Object deserialize(byte[] bytes) throws IOException, ClassNotFoundException {
        ByteArrayInputStream b = new ByteArrayInputStream(bytes);
        ObjectInputStream o = new ObjectInputStream(b);
        return o.readObject();
    }
}

(If you have App.java class inside your service package please remove it. )

Now I should have to write the service configuration (services.xml) for my service implementation. For that first create a folder called resources inside the src/main/. Then create a folder called META-INF inside the resources folder. Inside the META-INF folder create services.xml file with following content. Change the service and service class names according to your project.

<serviceGroup>
    <service name="ProcessOrderService" scope="transportsession">
        <transports>
            <transport>https</transport>
        </transports>
        <parameter name="ServiceClass">org.wso2.carbon.example.OrderProcess.ProcessOrderService</parameter>
    </service>
    
    <parameter name="adminService" locked="true">true</parameter>
    <parameter name="hiddenService" locked="true">true</parameter>
    <parameter name="AuthorizationAction" locked="true">/permission/admin/protected</parameter>
</serviceGroup>

Now go to the pom.xml file location of the back-end project using command line interface and type mvn clean install to build the project. If the build get success you will get a jar file like org.wso2.carbon.example.OrderProcess-1.0.0-SNAPSHOT.jar inside the target directory. Then copy the created jar file to repository/components/dropins directory in the WSO2 Application server. 

We can't see the WSDL file of the created service directly accessing the url (http://192.168.1.2:9765/services/ProcessOrderService?wsdl) after running the application server. That is because I have added this as a admin service and by default admin services WSDLs are hidden. In order to view the WSDL file open the carbon.xml file in the repository/conf and set the value of HideAdminServiceWSDLs as false.

<HideAdminServiceWSDLs>false</HideAdminServiceWSDLs>  

Now start the WSO2 Application Server and put the above URL in the browser (last part should be the Service name that you provide in the services.xml). Save the WSDL file in your computer to use it for front-end project.

 Create the front-end console UI

 Now I will create the front-end project like above (maven project) and edit the pom.xml file as below. Inside of this pom file you can see that I've used the previously saved WSDL file. Do the necessary modifications to the pom file according to the your project.

• org.wso2.carbon.example.OrderProcess.ui
  • artifactId - org.wso2.carbon.example.OrderProcess.ui
  • packaging - bundle
  • name - WSO2 Carbon - Order Process
  • plugin - maven-bundle-plugin

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>

 <groupId>org.wso2.carbon</groupId>
 <artifactId>org.wso2.carbon.example.OrderProcess.ui</artifactId>
 <version>1.0.0-SNAPSHOT</version>
 <packaging>bundle</packaging>

 <name>WSO2 Carbon - Order Process</name>
 <url>http://maven.apache.org</url>

 <properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 </properties>

 <!-- <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> 
  <version>3.8.1</version> <scope>test</scope> </dependency> </dependencies> -->

 <dependencies>
  <dependency>
   <groupId>org.apache.axis2.wso2</groupId>
   <artifactId>axis2</artifactId>
   <version>1.6.1.wso2v4</version>
  </dependency>
  <dependency>
   <groupId>org.apache.stratos</groupId>
   <artifactId>org.wso2.carbon.ui</artifactId>
   <version>4.2.0-stratos</version>
  </dependency>
 </dependencies>

 <build>

  <plugins>
   <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-compiler-plugin</artifactId>
    <configuration>
     <source>1.5</source>
     <target>1.5</target>
    </configuration>
   </plugin>
   <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-antrun-plugin</artifactId>
    <version>1.1</version>
    <executions>
     <execution>
      <id>source-code-generation</id>
      <phase>process-resources</phase>
      <goals>
       <goal>run</goal>
      </goals>
      <configuration>
       <tasks>
        <java classname="org.apache.axis2.wsdl.WSDL2Java" fork="true">
         <arg
          line="-uri src/main/resources/OrderProcess.wsdl -u -uw -o target/generated-code
                                    -p org.wso2.carbon.example.OrderProcess.ui
                                    -ns2p http://org.apache.axis2/xsd=org.wso2.carbon.example.OrderProcess.ui.types.axis2,http://OrderProcess.example.carbon.wso2.org=org.wso2.carbon.example.OrderProcess.ui,http://data.OrderProcess.example.carbon.wso2.org/xsd=org.wso2.carbon.example.OrderProcess.ui.types.data" />
         <classpath refid="maven.dependency.classpath" />
         <classpath refid="maven.compile.classpath" />
         <classpath refid="maven.runtime.classpath" />
        </java>
       </tasks>
      </configuration>
     </execution>
    </executions>
   </plugin>
   <plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>build-helper-maven-plugin</artifactId>
    <executions>
     <execution>
      <id>add-source</id>
      <phase>generate-sources</phase>
      <goals>
       <goal>add-source</goal>
      </goals>
      <configuration>
       <sources>
        <source>target/generated-code/src</source>
       </sources>
      </configuration>
     </execution>
    </executions>
   </plugin>
   <plugin>
    <groupId>org.apache.felix</groupId>
    <artifactId>maven-bundle-plugin</artifactId>
    <version>1.4.0</version>
    <extensions>true</extensions>
    <configuration>
     <instructions>
      <Bundle-SymbolicName>${pom.artifactId}</Bundle-SymbolicName>
      <Export-Package>
       org.wso2.carbon.example.OrderProcess.ui.*
      </Export-Package>
      <Import-Package>
       !javax.xml.namespace,
       javax.xml.namespace;version="0.0.0",
       *;resolution:=optional,
      </Import-Package>
      <Carbon-Component>UIBundle</Carbon-Component>
     </instructions>
    </configuration>
   </plugin>
  </plugins>

 </build>

 <repositories>
  <repository>
   <id>wso2-nexus</id>
   <name>WSO2 internal Repository</name>
   <url>http://maven.wso2.org/nexus/content/groups/wso2-public/</url>
   <releases>
    <enabled>true</enabled>
    <updatePolicy>daily</updatePolicy>
    <checksumPolicy>ignore</checksumPolicy>
   </releases>
  </repository>
 </repositories>
 
 <pluginRepositories>
  <pluginRepository>
   <id>wso2-maven2-repository</id>
   <url>http://dist.wso2.org/maven2</url>
  </pluginRepository>
  <pluginRepository>
   <id>wso2-maven2-snapshot-repository</id>
   <url>http://dist.wso2.org/snapshots/maven2</url>
  </pluginRepository>
 </pluginRepositories>
 
</project>

Now go to the pom.xml file location of the front-end project using command line interface and type mvn compile to compile the project. (It will download the necessary dependencies and then compile the classes as well)

As the next step I will create the Client called OrderProcessClient inside the org.wso2.carbon.example.OrderProcess.ui package, which will use the generated stub to access the back-end service which I created above.

package org.wso2.carbon.example.OrderProcess.ui;

import java.rmi.RemoteException;

import org.apache.axis2.client.Options;
import org.apache.axis2.client.ServiceClient;
import org.apache.axis2.context.ConfigurationContext;
import org.wso2.carbon.example.OrderProcess.ui.ProcessOrderServiceStub;
import org.wso2.carbon.example.OrderProcess.ui.types.data.OrderBean;

public class OrderProcessClient {

 private ProcessOrderServiceStub stub;

 public OrderProcessClient(ConfigurationContext configCtx, String backendServerURL,
                             String cookie) throws Exception {
  String serviceURL = backendServerURL + "ProcessOrderService";
  stub = new ProcessOrderServiceStub(configCtx, serviceURL);
  ServiceClient client = stub._getServiceClient();
  Options options = client.getOptions();
  options.setManageSession(true);
  options.setProperty(org.apache.axis2.transport.http.HTTPConstants.COOKIE_STRING, cookie);
 }

 public OrderBean processOrder(OrderBean orderBean) throws Exception {
  try {
   return stub.processOrder(orderBean);
  } catch (RemoteException e) {
   String msg = "Cannot process the order" + " . Backend service may be unvailable";
   throw new Exception(msg, e);
  }
 }

 public boolean cancelOrder(String orderID) throws Exception {
  try {
   return stub.cancelOrder(orderID);
  } catch (RemoteException e) {
   String msg = "Cannot cancel the order" + " . Backend service may be unvailable";
   throw new Exception(msg, e);
  }
 }
}

Like I mentioned above in back-end project you will need to create resouces folder inside of the <folder-name>/src/main/ folder of your front-end  project. After that create a folder called web inside of the resource folder. Inside this web folder, create another directory and named it as orderprocess-mgt.

Create a .jsp file called orderprocessmanager.jsp inside of the orderprocess-mgt directory. This is the jsp page that consist of the UI part. I will have a table of existing orders.

<%@ page import="org.apache.axis2.context.ConfigurationContext" %>
<%@ page import="org.wso2.carbon.CarbonConstants" %>
<%@ page import="org.wso2.carbon.ui.CarbonUIUtil" %>
<%@ page import="org.wso2.carbon.utils.ServerConstants" %>
<%@ page import="org.wso2.carbon.ui.CarbonUIMessage" %>
<%@ page import="org.wso2.carbon.example.OrderProcess.ui.OrderProcessClient" %>
<%@ page import="org.wso2.carbon.example.OrderProcess.ui.types.data.OrderBean" %>
<%@ page import="org.wso2.carbon.example.OrderProcess.ui.types.data.Customer" %>
<%@ page import="org.wso2.carbon.example.OrderProcess.ui.types.data.Address" %>
<%@ page import="org.wso2.carbon.example.OrderProcess.ui.types.data.Item" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://wso2.org/projects/carbon/taglibs/carbontags.jar" prefix="carbon" %>
<%
        String serverURL = CarbonUIUtil.getServerURL(config.getServletContext(), session);
        ConfigurationContext configContext =
                (ConfigurationContext) config.getServletContext().getAttribute(CarbonConstants.CONFIGURATION_CONTEXT);
        String cookie = (String) session.getAttribute(ServerConstants.ADMIN_SERVICE_COOKIE);

        OrderProcessClient client;
        OrderBean order;
        OrderBean orderBean = new OrderBean();

  Customer customer = new Customer();
  customer.setCustID("A123");
  customer.setFirstName("Isuru");
  customer.setLastName("Wijesinghe");
  orderBean.setCustomer(customer);

  Address address = new Address();
  address.setCityName("Colombo");
  address.setCountry("Sri Lanka");
  address.setStateCode("04");
  address.setStreetName("Armer Street");
  address.setZipCode("02");
  orderBean.setShippingAddress(address);

  Item item1 = new Item();
  item1.setItemID("11");
  item1.setItemName("MACBook");
  item1.setQuantity(12);
  item1.setUnitPrice(100);

  Item item2 = new Item();
  item2.setItemID("10");
  item2.setItemName("UltrasBook");
  item2.setQuantity(10);
  item2.setUnitPrice(30);

  Item[] orderItems = { item1, item2 };

  orderBean.setOrderItems(orderItems);

        try {
            client = new OrderProcessClient(configContext, serverURL, cookie);
            order = client.processOrder(orderBean);
        } catch (Exception e) {
            CarbonUIMessage.sendCarbonUIMessage(e.getMessage(), CarbonUIMessage.ERROR, request, e);
%>
            <script type="text/javascript">
                   location.href = "../admin/error.jsp";
            </script>
<%
            return;
    }
%>

<div id="middle">
 <h2>Order Process Management</h2>

    <div id="workArea">
  <table class="styledLeft" id="moduleTable">
                <thead>
                <tr>
                    <th width="20%">Customer ID</th>
                    <th width="20%">First Name</th>
                    <th width="20%">Last Name</th>
                    <th width="20%">Order Price</th>
                    <th width="20%">Number Of Items</th>
                </tr>
                </thead>
                <tbody>
           <%
             
           %>
             <tr>
                 <td><%=order.getCustomer().getCustID()%></td>
                 <td><%=order.getCustomer().getFirstName()%></td>
                 <td><%=order.getCustomer().getLastName()%></td> 
                 <td><%=order.getPrice()%></td> 
                 <td><%=order.getOrderItems().length%></td>              
                </tr>
           <%
             
           %>
                </tbody>
         </table>
    </div>
</div

Here you can see that I've used some style classes and IDs. Those are predefined classes and IDs in the Carbon. Don't forget to import the carbon tag library as well.

Now I will have to add the UI component to the menu bar as a menu item of the application server. For that you must create the component.xml file. Befeore creating it first you should have to create META-INF inside the resources folder in front-end project and then create the component.xml file inside of it as below.

<component xmlns="http://products.wso2.org/carbon">
    <menus>
        <menu>
            <id>orderprocess_menu</id>
            <i18n-key>orderprocess.menu</i18n-key>
            <i18n-bundle>org.wso2.carbon.example.OrderProcess.ui.i18n.Resources</i18n-bundle>
            <parent-menu>manage_menu</parent-menu>
            <link>../orderprocess-mgt/orderprocessmanager.jsp</link>
            <region>region1</region>
            <order>50</order>
            <style-class>manage</style-class>
            <!--  --><icon>../log-admin/images/log.gif</icon>-->
            <require-permission>/permission/protected/manage</require-permission>
        </menu>
    </menus>
</component>

Here i18n-bundle value depend on the package that the created Client resides. Create folder structure according to the package name inside the web folder. As an example I created the package called org.wso2.carbon.example.OrderProcess.ui to hold the client code. Therefore I must have to create a directory structure similar to the package name of the client code and inside of it create another directory called i18n. Then inside of it create a resource bundle called Resources.properties (create a empty file and named it as Resources.properties) inside the above created folder. Then update the file contend as below.

orderprocess.menu=Order Process

(This is similar to the i18n-key value inside of the component.xml and assign it a name and it is the menu item name in the menu bar of the application server that you can see after deploying it. Here I mentioned it as Order Process)

Now go to the pom.xml file location of the front-end project and type maven clean install in the command line interface.

Deploying the component


Now you copy the generated jar files inside the target folder in both back-end  front-end projects in to the dropins folder that I mentioned previously and restart the WSO2 Application Server. Then under the Services (in the main menu tab) you can see your menu item name called Order Process. Once you click it you can see the fallowing output.

Calabash an automation test framework for mobile development

Calabash uses to write and execute automated acceptance tests for mobile applications. It helps for both android and IOS applications. Calabash contains set of libraries that enable set of test code to programmatically interact with applications. Each action can be one of the fallows. 

• Gestures (Touches or gestures. As an example tap, swipe and rotate)
• Assertions (As an example there should be a "Login" button or the web view should contain an "<h1>" element with the any text)
• Screenshots (screen dump the current view on the current device model)

Calabash provides set of APIs that support for apps running on touch screen devices. Calabash consists of two libraries called calabash-android and calabash-ios. Calabash-android is the automation and testing library for Android, and similarly calabash-ios is for ios. These two libraries are the low level libraries that allow the Cucumber tool to run automated functional tests on mobile devices as well as simulators. Using these two libraries test can be written in natural language. For an example below showing you a part of tests that written with calabash.

Feature: Rating a stand
  Scenario: Find and rate a stand from the list
    Given I am on the List
    Then I should see a "rating" button
    And I should not see “Sandwich & Soup”
    And take picture
    Then I touch the "rating" button
    And I should see “Sandwich & Soup”
    And take picture
    When I touch "Sandwich & Soup"
    Then I should see details for “Sandwich & Soup”
    When I touch the "click" button
    Then I should see the rating panel
    Then I touch "star4
    And I touch "button"
    And take picture

This example is called a feature file in Calabash. It describes the intended behavior of the application. In this example as you can see each line after Scenario corresponds to a step. In calabash a step does one of three things: makes a user action, makes an assertion or takes a screenshot.

Evaluating HCI Aspects of a website

Introduction

Usability is a fundamental concept for Interaction Design research and practice, since the dawn of Human-Computer Interaction as an inter-disciplinary endeavor. It satisfies users’ needs in an efficient and effective way.

The prominence of HCI in the current and future of website development is not to be taken lightly. It has been shown that a large percentage of the design and programming strength of projects go into the actual website design. The interface is a fundamental part of making the site more successful, safe, useful, and functional and in the long run, more agreeable for the user.

The tools and techniques that have been developed have contributed vastly towards reducing costs of design and development and increasing productivity. Savings have been created through decreased task time, fewer user errors, greatly reduced user disruption, reduced load on support teams or staffs, the elimination of training, and avoidance of changes in maintenance and redesign costs. However the iterative design has been proven now to be more efficient and cost effective, and this is why software usability comes into the picture form the early phases of design; it is also checked throughout the different production processes. This comes in accordance with the user-centered design, and as pointed by, software products including websites only meet the goals of their producers once they have met those of the users; hence businesses should align the two and ensure that their software products suites the key scenarios of use.

Our report is structured as follows. Next section we will begin with a brief on website usability guidelines and then we will describe the different evaluation methods. At there we will give brief description about two evaluation methods namely heuristic evaluation and task based evaluation. After that we will then have a case study for an existing website. At there we will break down it into two parts. In part one we will describe a brief introduction on the website that we selected for our evaluation. And the next part we will present our results for the website we selected for evaluation using the two evaluation methods (Heuristic and Task based evaluation). Finally to overcome issues and problems (to reduce issues in some certain level) that we identified from evaluation we will present our alternative design in the next section.

Website usability guidelines

The research who was done by Neilson and Hackos clearly emphasized that for software to be usable, it has to comply with the following five attributes namely memorability, efficiency, learnability, user’s satisfaction and few errors. Our key objective here is to study usability of web content; we better focus on how those attributes were further explained by Nielsen, after adapting them for web navigation and other main functionalities in the selected website (Venosc). According to Neilson and Hackos research they summarized above attributes as fallows. Users should be able to learn the basic navigation options of a web page and to find their desired content easily. They also should be able to reach such content in an efficient and quick way, and be able to remember the navigation options if they happen to return to the website after a while. Users should also be guided to follow the right links until they reach their preferred content, and if they happen to make mistakes during this process, they should be able to recover by going back to their previous page or content effortlessly.

But when we see beyond there are divergent factors that make website navigation problematic. The content and the structure of the websites are typically built after the inner structure of the content providers, rather than the users' needs. Moreover the content itself often needs to be upgraded in the web, specially when it is originally intended to be provided in a printed form. Finally, web pages are sometimes not subject to the same quality measures for printed materials, due to the lower cost of creating the former. To motivate users for efficient access to the contents large websites also we can provide shortcut keys in parallel to the navigation procedure for experienced users.

Evaluation Guidelines

Usability evaluation can broadly be categorized into inspection and testing methods. In the former, experts study and report usability issues, while in the latter, issues are discovered by observing the users during their interaction with the interface. Four narrower evaluation categories were listed by Nielsen in 1994: formal, informal, empirical and automatic. We will focus on the informal and empirical evaluations here, as the first one has been abandoned in favour of the formal methods and/or grouped into other methods such as cognitive walk, which is beyond the scope of our evaluation.

Heuristic Evaluation (Informal)

Heuristic evaluation is a good method of identifying both major and minor problems with an interface. In heuristic evaluation method a small group of experts are asked to evaluate the interface in accordance with a set of usability criterions or heuristics. They added that each of evaluator should conduct the evaluation independently of the others, and they should only be allowed to communicate after completing their evaluation. Under our heuristic evaluation we followed by Nielsen’s ten heuristic guidelines presented as follows.

• Visibility of System Status
• Match between the system and the real world
• User control and freedom
• Consistency and Standards
• Error Prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• User can recognize and recover from error
• Documentation and help

Normally we experts or evaluators begin heuristic evaluation by visiting the system to get a general feel of its flow and then they should revisit it at least one more time to evaluate the specific components of its interface and their functionalities. As an example you can see that as below.

  

Problem Found	Severity	Heuristic Number	Violated Heuristic
Translation for languages doesn't work properly	3	#5	Error Prevention

Here rating usability problems according to their severity facilitate the allocation of resources to fix the most serious problems. Severity ratings are a combination of frequency, impact, and persistence. Using heuristic evaluation it is easy and cheap and can help in finding many usability issues quickly. But however some issues can be missed, especially the business-specific or domain-specific ones.

Task based evaluation (Empirical)

Task based evaluation is part of a formative evaluation to redesign the interface, or the whole application, based on users' responses, experiences and problems. Users carry out some specific tasks which are given by experts or evaluators and it involves the major system functionalities. While the users are doing their tasks, evaluators / observers should document the results such as the number of tasks accomplished, time taken and/or number of pages navigated by each user. And also observers can give help to users to accomplish the given tasks, but however they should take notice with the incidents where help was needed. They also suggested that discussions taking place between the participants afterwards are helpful in collecting their reactions and suggestions for improvements. Also, the observers may ask the participants to be more verbose and explain what they are thinking about at the moment, the actions they are trying to take, and why such kind of actions takes.

Usually involve five participants for this kind of evaluation. The number of participants is not the only decisive factor here but also the design of the tasks, their goals, the diversity of the participants and their skills play a role in the number of their usability findings. Below we listed the five requirements for a good task based usability test.

• Setting the test goals
• Setting the characteristics of the participating sample
• Setting the scenarios and tasks to be done
• Setting the measurement criteria
• Setting the testing environment and needed materials

Develop a simple Application with Meteor JS

Introducton to Meteor JS

Before move on to the sample Application implementation I will give a brief introduction about Meteor JS. Meteor JS is an open source platform built on top of Node JS for building web applications very rapidly (Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices). It uses Node JS to deploy and seamlessly combines packages like Mongo DB (a NoSQL database system), jQuery (a fastest javascript library), etc. Meteor has some set of principles as fallows. 

• Don't send HTML over the network. Send data and let the client decide how to render it.
• Write both the client and the server parts of your interface in JavaScript.
• Use the same transparent API to access your database from the client or the server.
• On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.
• Make real-time the default. All layers, from database to template, should make an event-driven interface available.
• Meteor is open source and integrates, rather than replaces, existing open source tools and frameworks.
• The best way to make something seem simple is to have it actually be simple. Accomplish this through clean, classically beautiful APIs.

A Meteor JS application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML templates, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how we choose to structure those components in our file tree.

The only server assets are JavaScript and files in the private subdirectory. Meteor gathers all JavaScript files, excluding anything under the client, public, and private subdirectories, and loads them into a Node.js server instance inside a fiber. In Meteor, server code runs in a single thread per request, not in the asynchronous callback style typical of Node.

Meteor JS provides the variables called isClient and isServer so that code can alter its behavior depending on whether it's running on the client or the server. Therefore rather using two separate functions to control the client and server side events, we can share only one reusable function for both client and server side.

HTML files in a Meteor application are different from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load. 

 Sample Application   

In this simple application I dynamically created tabs to store items within three categories namely breakfast, lunch and dinner. Each tab consists of menu options. For that purpose I designed a navigation menu to handle it.

To define templates for the application I created a file in the project with the .html extension. In the file, make a <template> tag and give it a name attribute called “loadingTemplate”. Put the template contents inside the tag. Meteor will precompile the template, ship it down to the client, and make it available as on the global Template object. 

• Fallowing html code will show how to load the template to the html body using meteor syntax.

<body>

     <div id="outer">

          {{> loadingTemplate}}

    </div>

</body>

• Template object for displaying merchant information is shown in the fallowing html code.

<template name="loadingTemplate">

<div class="span6" id="header">

<table>

<tr><td><label id="mName"><i class="icon-user icon-black"></i> Merchant Name</label>

</td>

<td><label id="mAddress"><i class="icon-user icon-black"></i> Address</label>

</td>

<td><label id="mHrs"><i class="icon-user icon-black"></i> Online Ordering Hours (PST)</label>

</td>

</tr>

<tr>

<td><label id="mDelivery"><i class="icon-user icon-black"></i> Delivery</label>

</td>

<td><label id="mFee"><i class="icon-user icon-black"></i> Delivery Fee</label>

</td>

<td><label id="pickup"><i class="icon-user icon-black"></i> Pickup</label>

</td>

</tr>

<tr>

<td><label id="mOrder"><i class="icon-user icon-black"></i> Order Minimum</label>

</td>

<td><label id="mMin"><i class="icon-user icon-black"></i> Delivery Minimum</label>

</td>

</tr>

</table>

<div class="container">

{{>breakfirstList}}

</template>

<template name="breakfirstList">

<div style="margin-bottom:10px">

</div>

<div id="tt" class="easyui-tabs" style="width:600px;height:450px;">

</div>

</template>

The user interface for our example application is shown below. As you can see the tree tabs created dynamically using javascript.

 

The below javascript code describes how to create the tabs dynamically. The function “addTab” getting a parameter called “title” and it checks that is there having any tab in the given title. If yes the tab is not added to the main menu. Otherwise the tab added dynamically to the main menu and set some attributes to it.

function addTab(title){

   if ($('#tt').tabs('exists', title)){

       $('#tt').tabs('select', title);

    } else {

        var content = '<div id="'+title+'" style="width:100%;height:100%;">

                             <div class="accordion" id="accordionid"></div></div>';

       $('#tt').tabs('add',{

                                title:title,

                               content:content,

                               id:title+"M",

                              closable:false

      });

   }

}

The below javascript code describes how to add option type menu list dynamically. The function “bfOptionTypes” takes a parameter called “bfItem” and each item should have item name, description and price and option types. For loop is used to add data dynamically to the html template according to the length of the array.

function bfOptionTypes(bfItem){

    if (bfItem.optionTypes != null) {

        var bfItemLength = bfItem.optionTypes.length;

        var returnBfItm = "";

        for(var bfi=0;bfi<bfItemLength;bfi++){

             var getOptions = bfOptions(bfItem.optionTypes[bfi]);

             returnBfItm += '<h5>'+bfItem.optionTypes[bfi].name+'</h5>'+getOptions;

       }

       returnBfItm += '<br>';

   }

   return returnBfItm;

} 

The below javascript code describes how to add option type list dynamically. The function “bfOptions” takes a parameter called “optionType” and each option type should have option name and price. For loop is used to add option types dynamically to the item list according to the length of the array.

function bfOptions(optionType){

   if(optionType.options != null){

      var bfItemOptionLength = optionType.options.length;

      alert("bfItemOptionLength:"+bfItemOptionLength);

      var returnBFItemOption = "";

     for(var g = 0;g<bfItemOptionLength;g++){

         var optionValues = optionType.options[g].name+" "+optionType.options[g].price;

         var groupName = "BFOptions"+optionType.name;

         returnBFItemOption += '<input type="radio" name="'+groupName+'"       value="'+optionValues+'">'+optionValues+'&nbsp';

     } 

     returnBFItemOption += '<br>';

}

   return returnBFItemOption;

}