How to Build a UI Component for the WSO2 Carbon Platform? (Part 1)

This tutorial by Sumedha Rubasinghe is the first of a series, illustrating steps to extend the WSO2 Carbon UI framework to add functionality in the WSO2 family of products based on the Carbon framework. Date: Tue, 10th Feb, 2009 Level: Intermediate Reads: 3750 Comments: 1 | Login or register to post comments Printer-friendly version Send to friend PDF version Post to twitter

Sumedha Rubasinghe Architect/Senior Manager WSO2

Table of Contents

Prerequisites

• You need to have Apache Maven v2.0.7 (or higher)
• Download WSAS v3.0 from http://wso2.org/downloads/wsas

WSAS v3.0 is a complete re-write of WSAS 2.3(<lesser) on top of WSO2's revolutionary Carbon OSGi platform.

Steps

• Step 1: Get a checkout from the following SVN location

  svn co https://svn.wso2.org/repos/wso2/branches/carbon/1.5/trunk/carbon/samples/ui/org.wso2.carbon.sample.myui

• Step 2: Go inside the org.wso2.carbon.sample.myui folder

• Step 3: Type (this step is required only the first time only, if repeating skip and go to the next)

      mvn clean install

If this is your first time building a component for WSO2's Carbon, it will take sometime for the dependencies to be downloaded. Be patient. You will be rewarded!
In the meantime, lets continue with the rest of the steps.

• Step 4: Extract WSAS v3.0 zip file. From here on, we will refer to this location as $WSAS_HOME.

• Step 5: Go to org.wso2.carbon.sample.myui/src/main/resources/web/

• Step 6: Add a folder called 'myui' inside the web folder

• Step 7: Now add a jsp called 'sample1.jsp' inside the 'myui' folder. Content of 'sample1.jsp' should be as follows:

  <div id="middle">
  <h2>Products</h2>
  <div id="workArea">
  <table class="styledLeft" id="userTable">
          <thead>
                  <tr>
                      <th>Name</th>
                      <th>Price</th>
                  </tr>
          </thead>
          <tbody>
                  <tr>
                      <td>Product123</td>
                      <td>1234.0</td>
                  </tr>
          </tbody>
  </table>
  </div>
  </div>

  As you can see, this jsp will display some hard coded text inside a table. Feel free to modify this text.

• Step 8: Go to the previous command line window (in step 3) and check if the Maven build has completed successfully. If not, please wait for it to be complete.

• Step 9: Now, type following command again. (Note: Since we have downloaded everything needed, it's an offline (-o) build this time)

  mvn clean install -o

• Step 10: Copy org.wso2.carbon.sample.myui/target/org.wso2.carbon.sample.myui-SNAPSHOT.jar into $WSAS_HOME/webapps/ROOT/WEB-INF/plugins folder

• Step 11: Delete lib/tomcat/work folder (if this is your first time, this folder will not be there)

• Step 12: Start WSAS by executing $WSAS_HOME/bin/(wso2server.sh | wso2server.bat)

• Step 13: Once you've got WSAS started, access the admin console using https://localhost:9443/carbon

• Step 14: Login using username: admin, password: admin

• Step 15: Now, access https://localhost:9443/carbon/myui/sample1.jsp and you should be able to see you UI component in action

• Step 16: Congratulations !!!! .. You have successfully deployed your first UI component for WSO2 Carbon.

  Coming up: Let's improve this component to be something useful.

Author

Sumedhe Rubasinghe is Product Manager for WSO2 Data Services at WSO2 Inc. sumedha at wso2 dot com