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

Table of Contents

• Prerequisites
• Steps
  • Step 1: Get a checkout from the following SVN location
  • 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)
  • 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
  • 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)
  • 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)https://localhost:9443/carbon
  • 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 https://localhost:9443/carbon/myui/sample1.jsp and you should be able to see you UI component in action
  • 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.

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

This will create a file called 'org.wso2.carbon.sample.myui-SNAPSHOT.jar' inside org.wso2.carbon.sample.myui/target folder. This is the binary artifact carrying your component. Let's deploy your component into WSAS v3.0 server.

• 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