In this article, I will show you how to create a WSO2 Carbon UI front end for an existing web service. Since this is the part II of the last article “WSO2 Carbon Server Component - Hello World!”, the UI will be created for the web service developed in part I. However, the same steps can be followed to create a Carbon UI for any SOAP web services.
Prerequisite:
- Apache Maven
- Eclipse for Java EE Developers
- WSDL file of an existing web service
- WSO2 Carbon Server
Step 1:
Create a new folder hierarchy as shown below.
-- com.javahelps.samplecarbon.stub│ \-- src
│ +-- main
│ │ +-- java
│ │ \-- resources
│ \-- test
│ +-- java
│ \-- resources
The shell script(For Linux users) and Batch file (For Windows users) to create this folder hierarchy are given at this link.
Step 2:
Copy and paste the WSDL file in the com.javahelps.samplecarbon.stub/src/main/resources folder. In this article, I use the SampleService.wsdl which is created in Step 14 (Last step) of WSO2 Carbon Server Component - Hello World!.
Step 3:
Create a new file ‘pom.xml’ inside the com.javahelps.samplecarbon.stub folder with the following content.
<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>com.javahelps</groupId>
<artifactId>com.javahelps.samplecarbon.stub</artifactId>
<version>1.0.0</version>
<packaging>bundle</packaging>
<repositories>
<!-- Below configuration is used to download the relevant jars and
plugins from the remote maven 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>
<repository>
<id>wso2.releases</id>
<name>WSO2 internal Repository</name>
<url>http://maven.wso2.org/nexus/content/repositories/releases/</url>
<releases>
<enabled>true</enabled>
<updatePolicy>daily</updatePolicy>
<checksumPolicy>ignore</checksumPolicy>
</releases>
</repository>
<repository>
<id>wso2.snapshots</id>
<name>WSO2 Snapshot Repository</name>
<url>http://maven.wso2.org/nexus/content/repositories/snapshots/</url>
<snapshots>
<enabled>true</enabled>
<updatePolicy>daily</updatePolicy>
</snapshots>
<releases>
<enabled>false</enabled>
</releases>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>wso2.releases</id>
<name>WSO2 internal Repository</name>
<url>http://maven.wso2.org/nexus/content/repositories/releases/</url>
<releases>
<enabled>true</enabled>
<updatePolicy>daily</updatePolicy>
<checksumPolicy>ignore</checksumPolicy>
</releases>
</pluginRepository>
<pluginRepository>
<id>wso2.snapshots</id>
<name>WSO2 Snapshot Repository</name>
<url>http://maven.wso2.org/nexus/content/repositories/snapshots/</url>
<snapshots>
<enabled>true</enabled>
<updatePolicy>daily</updatePolicy>
</snapshots>
<releases>
<enabled>false</enabled>
</releases>
</pluginRepository>
<pluginRepository>
<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>
</pluginRepository>
</pluginRepositories>
<dependencies>
<dependency>
<groupId>org.apache.axis2.wso2</groupId>
<artifactId>axis2</artifactId>
<version>1.6.1.wso2v10</version>
</dependency>
<dependency>
<groupId>org.apache.axis2.wso2</groupId>
<artifactId>axis2-client</artifactId>
<version>1.6.1.wso2v10</version>
</dependency>
<dependency>
<groupId>org.apache.ws.commons.axiom.wso2</groupId>
<artifactId>axiom</artifactId>
<version>1.2.11.wso2v4</version>
</dependency>
<dependency>
<groupId>wsdl4j.wso2</groupId>
<artifactId>wsdl4j</artifactId>
<version>1.6.2.wso2v4</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.5.1</version>
<configuration>
<source>1.8</source>
<target>1.8</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>
<path id="wsdl2java.classpath">
<pathelement location="${settings.localRepository}/org/apache/ws/commons/axiom/wso2/axiom/1.2.11.wso2v4/axiom-1.2.11.wso2v4.jar"/>
<pathelement location="${settings.localRepository}/org/apache/axis2/wso2/axis2-client/1.6.1.wso2v10/axis2-client-1.6.1.wso2v10.jar"/>
<pathelement location="${settings.localRepository}/org/apache/axis2/wso2/axis2/1.6.1.wso2v10/axis2-1.6.1.wso2v10.jar"/>
</path>
<java classname="org.apache.axis2.wsdl.WSDL2Java" fork="true">
<classpath refid="wsdl2java.classpath"/>
<arg line="-uri src/main/resources/SampleService.wsdl -u -uw -o target/generated-code -p com.javahelps.samplecarbon.stub -ns2p http://org.apache.axis2/xsd=com.javahelps.samplecarbon.types.axis2,http://service.samplecarbon.javahelps.com=com.javahelps.samplecarbon.types"/>
</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>
<extensions>true</extensions>
<configuration>
<instructions>
<Bundle-SymbolicName>${project.artifactId}</Bundle-SymbolicName>
<Bundle-Name>${project.artifactId}</Bundle-Name>
<Private-Package/>
<Export-Package>com.javahelps.samplecarbon.*
</Export-Package>
<Import-Package>!com.javahelps.samplecarbon.*
</Import-Package>
<DynamicImport-Package>*</DynamicImport-Package>
</instructions>
</configuration>
</plugin>
</plugins>
<pluginManagement>
<plugins>
<!--This plugin's configuration is used to store Eclipse m2e settings
only. It has no influence on the Maven build itself. -->
<plugin>
<groupId>org.eclipse.m2e</groupId>
<artifactId>lifecycle-mapping</artifactId>
<version>1.0.0</version>
<configuration>
<lifecycleMappingMetadata>
<pluginExecutions>
<pluginExecution>
<pluginExecutionFilter>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-antrun-plugin</artifactId>
<versionRange>[1.1,)</versionRange>
<goals>
<goal>run</goal>
</goals>
</pluginExecutionFilter>
<action>
<ignore/>
</action>
</pluginExecution>
<pluginExecution>
<pluginExecutionFilter>
<groupId>org.codehaus.mojo</groupId>
<artifactId>build-helper-maven-plugin</artifactId>
<versionRange>[1.9.1,)</versionRange>
<goals>
<goal>add-source</goal>
</goals>
</pluginExecutionFilter>
<action>
<ignore/>
</action>
</pluginExecution>
</pluginExecutions>
</lifecycleMappingMetadata>
</configuration>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
In this pom file, we have defined Ant task to generate stub using the wsdl file and store the Java source files in target/generated-code/src.
Step 4:
Use the following command to generate the stub bundle and to install it in local Maven repository. This command will also create com.javahelps.samplecarbon.stub-1.0.0.jar in targets directory. This JAR file is required in Step 18.
mvn install
Step 5: (Optional)
If you want to import this project into Eclipse, use the following command to convert this Maven project to Eclipse project and import it to the Eclipse IDE.
mvn eclipse:eclipse
Step 6:
Create a new Maven project in Eclipse using the following properties.
Group Id: com.javahelpsArtifact Id: com.javahelps.samplecarbon.ui
Version: 1.0.0
Step 7:
Edit the pom.xml as shown below and update the project (Right click on the project → Maven → Update Project... or Alt + F5).
<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>com.javahelps</groupId>
<artifactId>com.javahelps.samplecarbon.ui</artifactId>
<version>1.0.0</version>
<packaging>bundle</packaging>
<dependencies>
<dependency>
<groupId>com.javahelps</groupId>
<artifactId>com.javahelps.samplecarbon.stub</artifactId>
<version>1.0.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.felix</groupId>
<artifactId>maven-bundle-plugin</artifactId>
<extensions>true</extensions>
<configuration>
<instructions>
<Bundle-SymbolicName>${project.artifactId}</Bundle-SymbolicName>
<Bundle-Name>${project.artifactId}</Bundle-Name>
<Export-Package>
com.javahelps.samplecarbon.*
</Export-Package>
<Import-Package>
*;resolution:=optional
</Import-Package>
<Carbon-Component>UIBundle</Carbon-Component>
</instructions>
</configuration>
</plugin>
</plugins>
</build>
</project>
Here we have defined the stub project as a dependency for this ui project. Also note the <packaging>bundle</packaging> property.
Create a new package com.javahelps.samplecarbon.ui in the src/main/java directory.
Step 9:
Create a new class SampleServiceClient.java with the following code inside that package.
package com.javahelps.samplecarbon.ui;
import java.rmi.RemoteException;
import org.apache.axis2.AxisFault;
import org.apache.axis2.client.Options;
import org.apache.axis2.client.ServiceClient;
import org.apache.axis2.context.ConfigurationContext;
import com.javahelps.samplecarbon.stub.SampleServiceStub;
public class SampleServiceClient {
private final SampleServiceStub stub;
public SampleServiceClient(ConfigurationContext configCtx, String backendServerURL, String cookie)
throws AxisFault {
String serviceURL = backendServerURL + "SampleService";
stub = new SampleServiceStub(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 String[] getLanguages() throws RemoteException {
return stub.getLanguages();
}
}
Step 10:
Create a new folder hierarchy com/javahelps/samplecarbon/ui/i18n inside the src/main/resources folder.
Step 11:
Create a new file Resources.properties inside the folder com/javahelps/samplecarbon/ui/i18n with the following content.
order.menu= Sample Service
Step 12:
Create a new folder hierarchy web/samplecarbon/images inside the src/main/resources folder.
Step 13:
Create a new folder META-INF inside the src/main/resources folder.
Step 14:
Create a new file index.jsp inside the src/main/resources/web folder with the given code. This JSP retrieves the list of languages from our service and displays them.
<%@page import="com.javahelps.samplecarbon.ui.SampleServiceClient"%>
<%@ 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"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://wso2.org/projects/carbon/taglibs/carbontags.jar"
prefix="carbon"%>
<%
String[] languages;
SampleServiceClient client;
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);
try {
client = new SampleServiceClient(configContext, serverURL, cookie);
languages = client.getLanguages();
} 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>Sample Carbon</h2>
<div id="workArea">
<table class="styledLeft" id="moduleTable">
<thead>
<tr>
<th width="100%">Languages</th>
</tr>
</thead>
<tbody>
<%
for (String language : languages) {
%>
<tr>
<td><%=language%></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</div>
Step 15:
Download and paste a 16x16 image and paste it inside src/main/resources/web/samplecarbon/images folder with a name ‘icon.png’. The image used in this project is available here: 

Step 16:
Create a new file component.xml inside the src/main/resources/META-INF folder with the given content.
<component xmlns="http://products.wso2.org/carbon">
<menus>
<menu>
<id>order_menu</id>
<i18n-key>order.menu</i18n-key>
<i18n-bundle>com.javahelps.samplecarbon.ui.i18n.Resources</i18n-bundle>
<parent-menu>manage_menu</parent-menu>
<link>../samplecarbon/index.jsp</link>
<region>region1</region>
<order>50</order>
<style-class>manage</style-class>
<icon>../samplecarbon/images/icon.png</icon>
<require-permission>/permission/protected/manage</require-permission>
</menu>
</menus>
</component>
This xml file defines the properties of the menu for our user interface in WSO2 Carbon Dashboard.
After all these changes, the UI project structure must be like this:
Step 17:
Copy the com.javahelps.samplecarbon.service-1.0.0.jar (which we have created in this article) com.javahelps.samplecarbon.stub-1.0.0.jar and com.javahelps.samplecarbon.ui-1.0.0.jar to the <CARBON_HOME>/repository/components/dropins folder.
Step 18:
Run the WSO2 Carbon server and login to the dashboard. You will see the Sample Service listed under Manage category.
EmoticonEmoticon