Isn’t it fun when you can view your UI5 application online instead of localhost? Just follow these very simple steps to put your UI5 Application online.

Step 1: Login to your Google Drive account or sign up a new account

https://drive.google.com/

Step 2: Create a new folder and make it Public

– Right click the folder >> Share >> Change access to “Public on the web”

/wp-content/uploads/2014/05/share_folder_452963.png


Step 3: Upload your resources (HTML, CSS, JS files) to Google Drive

– Copy the source code from tutorial: Create your First SAPUI5 Application in 20 seconds into a text editor and save it as index.html

https://openui5.hana.ondemand.com/#docs/guide/5b9a170d9f6a4d5784e8ab2ded3d8517.html


<!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>SAPUI5 in 20 Seconds</title>
    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
    <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/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>





– Upload the file to the specified Google Drive folder: Choose Upload >> Files

/wp-content/uploads/2014/05/upload_452968.png

Step 4: Preview the web page

– Right click the file and choose “Open with Google Drive Viewer”

/wp-content/uploads/2014/05/folder_overview_452969.png


– In the new tab, choose “Preview”

/wp-content/uploads/2014/05/preview_452970.png

– And…Tada! The application is now published online

/wp-content/uploads/2014/05/website_452971.png

https://googledrive.com/host/0B_C-6M0RD7wqdkZUUWVoOGgwWFU/index.html

Note that the URL format is: https://googledrive.com/host/<string>/<yourpage.html>.

Here is another example with SAPUI5 MVC TODO application hosted on Google Drive

If you have SVN you can check out the SAPUI5 MVC TODO from below GitHub repo



svn co https://github.com/tastejs/todomvc/trunk/labs/architecture-examples/sapui5





– Upload the 3 folder /css, /img, /js and file index.html to your shared folder

/wp-content/uploads/2014/05/todo_overview_452975.png


– And here’s the result: goo.gl/VRMPVE

/wp-content/uploads/2014/05/todo_452976.png

NOTE:

– You can have your own domain and configure it to forward to your application hosted on Google Drive

– You can install Google Chrome extension Drive Notepad to edit your HTML file.


Now you can use OpenUI5 to create your own web application, be it a personal website, a gallery, a creative work or anything and publish it online!


Hope it helps. Cheers!

To report this post you need to login first.

2 Comments

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

    1. Gareth Ryan

      For a quick demo (which makes sense if you are using Google Drive) you could just use a single file app – have a quick search as there are examples of this here on SCN.

      My opinion, if you want a fully structured application with multiple source files then using Google Drive probably isn’t the best way forward.

      Cheers,

      G.

      (0) 

Leave a Reply