How to build a UI component for WSO2 Carbon platform?(Part 1)

Introduction

This is the first one in a series of tutorials on explaining how to extend WSO2 Carbon UI framework & add functionality to WSO2's family of products based on WSO2 Carbon framework.

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 checkout from 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 org.wso2.carbon.sample.myui folder

• Step 3: Type (This step is required only on your very first time only, if not go to next step)

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 our steps.

• Step 4: Extract WSAS v3.0 zip file. Hereafter this location will be referred to as $WSAS_HOME.

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

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

• Step 7: Now add a jsp called 'sample1.jsp' inside this '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 the text as your wish.
  

• Step 8: Go to previous command line window(Step 3) & check if maven build has completed successfully. If not please wait until it is done.

• 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 will folder will not be there)

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

• Step 13: Once WSAS is 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 to WSO2 Carbon. Let's improve this component to be something useful.