Former Member

February 16, 2014 4 minute read

Getting started with OpenUI5 using WampServer

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).

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”.

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.

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.

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

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:

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.

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:

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

I hope this post is helpful.

Thanks for reading.

1 Comment

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

Benjamin Kreuscher

December 29, 2021 at 10:30 am

I tried this today using a MAMP server on macOS.

It works flawless, I had to change charaters in the .html file to get it running.

Instead of copying the resources folder into the App-folder you can also specify the location of the unzipped openUI5 framework:

src="http://localhost:8888/openui5-runtime-1.96.3/resources/sap-ui-core.js"

This is the working file from the above example:

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

Getting started with OpenUI5 using WampServer

Assigned Tags