WSO2 Carbon UI Component - Hello World!

WSO2 Carbon UI Component - Hello World!

8:55:00 AM
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:


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.javahelps
Artifact 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.


Step 8:
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.


Find the projects @ Git Hub.
Next
« Prev Post
Previous
Next Post »
Subscribe to: Post Comments (Atom)

Contact Form

Name

Email *

Message *