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

Archived Content
This article is provided for historical perspective only, and may not reflect current conditions. Please refer to relevant product page for more up-to-date product information and resources.
  • By Sumedha Rubasinghe
  • 10 Feb, 2009

Table of Contents

Prerequisites

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

Steps

  • 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 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

About Author

  • Sumedha Rubasinghe
  • Software Architect
  • WSO2