Skip to Content

In this post we’ll set up OpenUI5 version 1.16.8 for use in WampServer and create a Hello-world OpenUI5 app. OpenUI5 can also be used with LAMP, MAMP and XAMPP servers in a similar fashion. Lets get started.

Installing WampServer

1) Download: Go to WampServer site at http://www.wampserver.com/en

  => Click “Start using WampServer”

  => Choose the appropriate package for your platform (e.g. Wampserver (32 bits & PHP 5.4) 2.4)

  => Download the installation file (e.g. Wampserver2.4-x86.exe).

/wp-content/uploads/2014/02/wamp1_389023.jpg

2) Install: To install the WampServer, simply run the downloaded installation file. Choose your installation directory. I shall assume that WampServer is installed in “C:\wamp”.

/wp-content/uploads/2014/02/wamp2_389051.jpg

Starting WampServer

To start the WampServer, double click “WampServer” icon on your desktop. Or run “wampmanager.exe” from the WampServer installed directory. An icon will appear on the icon tray. “Green” icon indicates that all the services have started. “Red” indicates that all the services have stopped. Make sure that you are getting green tray icon as shown below.

  /wp-content/uploads/2014/02/wamp3_389052.jpg

Verifying server Installation

To verify WampServer installation:

=> Start a browser and issue URL http://localhost

You should be able to view server configuration as shown below.

/wp-content/uploads/2014/02/my_wamp_localhost_389072.jpg

Getting OpenUI5 SDK

Download: Visit the homepage for OpenUI5 http://sap.github.io/openui5/ on Github and download UI5 SDK Version 1.16.8-SNAPSHOT

/wp-content/uploads/2014/02/wamp5_389060.jpg

Configuring OpenUI5

1) Extract the downloaded file openui5-sdk-1.16.8-SNAPSHOT.zip to “openui5-sdk-1.16.8-SNAPSHOT” folder.

2) Place the “openui5-sdk-1.16.8-SNAPSHOT” folder with extracted content inside “www” folder of your WampServer.

3) Your file/folder structure should now look like this:

/wp-content/uploads/2014/02/wamp6_389061.jpg

4) From your browser hit the URL http://localhost/openui5-sdk-1.16.8-SNAPSHOT/ You should be able to view UI5 Overview page. You can browse through the UI5 documentation here.

/wp-content/uploads/2014/02/wamp7_389062.jpg

Writing a Hello-world program

1) Create a folder inside C:\wamp\www\ named “hello_ui5”.

Copy the ‘resources’ folder from previous ‘openui5-sdk-1.16.8-SNAPSHOT’ folder into new “hello_ui5” folder and create the following hello.html file:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

    <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″/>

    <title>OpenUI5 using WAMPServer</title>

    <!– 1.) Load OpenUI5, select theme and control library –>

    <script id=”sap-ui-bootstrap”

        src=”resources/sap-ui-core.js”

        data-sap-ui-theme=”sap_bluecrystal”

        data-sap-ui-libs=”sap.ui.commons”></script>

    <!– 2.) Create a UI5 button and place it onto the page –>

    <script>

        // create the button instance

        var myButton = new sap.ui.commons.Button(“btn”);

        // set properties, e.g. the text (there is also a shorter way of setting several properties)

        myButton.setText(“Hello World!”);

        // attach an action to the button’s “press” event (use jQuery to fade out the button)

        myButton.attachPress(function(){$(“#btn”).fadeOut()});

        // place the button into the HTML element defined below

        myButton.placeAt(“uiArea”);

        // an alternative, more jQuery-like notation for the same is:

        /*

        $(function(){

            $(“#uiArea”).sapui(“Button”, “btn”, {

                text:”Hello World!”,

                press:function(){$(“#btn”).fadeOut();}

            });

        });

        */

    </script>

</head>

<body class=”sapUiBody”>

    <!– This is where you place the UI5 button –>

    <div id=”uiArea”></div>

</body>

</html>

Your file/folder structure should now look like this:

/wp-content/uploads/2014/02/wamp8_389063.jpg

2) View the hello.html file in the browser using URL http://localhost/hello_ui5/hello.html and you see:

/wp-content/uploads/2014/02/wamp9_389064.jpg

I hope this post is helpful.

Thanks for reading.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply