CODEWITHSUNDEEP
sapui5
Daniel S
Daniel S

Reputation: 11

SAPUI5 Local Installation

I am trying to install SAPUI5 on my local machine using XAMPP. I copied the files to htdocs. Starting localhost in Chrome I get the SAPUI5 SDK - Demo Kit Overview page.

After that I copied a sample code of the "HowTo in 20 seconds" code to notepad and saved it as HTML-Document.

Running this file in the browser only brings a white page.

I looked for the developer tools in Chrome and saw something like this:

"failed to preload 'sap.ui.core.library-preload': Not Found - sap.ui.ModuleSystem"

I hope you can help me fix this problem, so I can start with SAPUI5

Upvotes: 1

Views: 9895

Answers (6)

Carsten Schlegel
Carsten Schlegel

Reputation: 1

This is a sample of a one pager SAP UI5 App with

  • XMLView with a table
  • Controller with JSONModel
  • Databinding the JSONModel in the table

The versions of the SAP resources are not up-to-date but they (still!) work.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SAPUI5 single file template</title>
        <!-- decide what version you want to use, see http://scn.sap.com/community/developer-center/front-end/blog/2015/07/30/multi-version-availability-of-sapui5:
        <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        <script src="https://sapui5.hana.ondemand.com/1.28.11/resources/sap-ui-core.js"
        <script src="https://openui5beta.hana.ondemand.com/resources/sap-ui-core.js"
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        <script src="https://openui5.hana.ondemand.com/1.30.7/resources/sap-ui-core.js"
        -->
        <script src='https://ui5.sap.com/1.110.0/resources/sap-ui-core.js'
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->
        <body class="sapUiBody">
            <div id="content"></div>
        </body>
        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:l="sap.ui.layout"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc"
                xmlns:nabisoft="nabisoft.ui">
                
               <l:HorizontalLayout xmlns:sap.ui.layout="sap.ui.layout" id="table_layt">
                   <l:content>
                       <Table noDataText="No Data Available" id="bud_table" class="table_layt">
                           <items></items>
                           <columns>
                               <Column id="c1">
                               <header><Label text="Number" id="aclab"/></header>
                               </Column>
                               <Column id="c2">
                               <header><Label text="Question" id="actlab"/></header>
                               </Column>
                               <Column id="c3">
                               <header><Label text="Answer" id="budglab"/></header>
                               </Column>
                               <Column id="c4">
                               <header>
                               <Label text="Answertype" id="Answertype"/></header>
                               </Column>
                           </columns>
                       </Table>
                   </l:content>  
               </l:HorizontalLayout>
            </mvc:View>
        </script>
 
        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";
 
                //### Controller ###
                sap.ui.controller("MyController", {
                    onInit : function () {
                        this.getView().setModel(
                          new sap.ui.model.json.JSONModel({
                            root: [
                              {
                                Number: "1",
                                Question: "Question 1",
                                Answer: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l",
                                Answertype: "text"
                              },
                              {
                                Number: "2",
                                Question: "Question 2",
                                Answer: "yes",
                                Answertype: "yesno"
                              }
                            ]
                          }));
                        var oTable = this.getView().byId("bud_table"); 
                        var oTemplate = new sap.m.ColumnListItem({
                            cells:[
                                new sap.m.Label({
                                text:"{Number}"
                                }),
                                new sap.m.Text({
                                text:"{Question}"
                                }),
                                new sap.m.Text({
                                text:"{Answer}"
                                }),
                                new sap.m.Text({
                                text:"{Answertype}"
                                })
                            ]
                        });
                        oTable.bindItems("/root", oTemplate);
                    }
                });
 
                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");
            });
        </script>
    </head>
</html>

Save the file, open in Browser and it works. You can also serve this with XAMPP or ui5 serve and other web servers.

Upvotes: 0

P&#233;ter Cata&#241;o
P&#233;ter Cata&#241;o

Reputation: 467

Daniel
I recommend you SAPUI Walkthrough as a starting point. This is a step by step guide / tutorial on how to build SAPUI5 applications, contains explanation about the cornerstones and best practices.
For the basics you will only need an editor and a browser (no webserver).
This git repo contains all the Walkthrough steps as separate branches.

Upvotes: 0

Tina Chen
Tina Chen

Reputation: 2030

The "failed to preload" messges should not be fatal errors; the library preload files are an optional bundled optimization in order to reduce the number of HTTP requests.

https://github.com/SAP/openui5/issues/119

I think you can just ignore this warning. And I encounter Cross origin requests problem when loading Component.js, solved this problem using python -m SimpleHTTPServer. What you need is just a server , choose whatever you like.

Upvotes: 0

Stephen S
Stephen S

Reputation: 3994

You can configure Eclipse to work with SAPUI5 and use Apache Tomcat to run your application when working in a local environment.

  1. Install Eclipse - http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr2
  2. Install the Java Runtime Enviromnet - http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html
  3. Install Apache Tomcat - http://tomcat.apache.org/download-80.cgi

Install SAPUI5 tools in Eclipse

  • Eclipse > Help > Install New Software
  • Add a new site in the "Available Software Sites" with the url:https://tools.hana.ondemand.com/luna
  • Select the new site in the Work with selection.
  • Expand the UI Development Toolkit for HTML5 & Select UI Development Toolkit for HTML5 (Developer Edition)
  • Next & Install (An Eclipse restart may be required)
  • Now that you have the SAPUI5 Tools installed. If you create a new Project, you now get a SAPUI5 Application Development option available.

Configure Apache Tomcat in the Servers

  • Add a Server, Window > Preferences > Server > Runtime Environment > Add
  • Select Apache Tomcat 8.0( or whichever version you are using) & select Next.
  • Select Tomcat installation directory & Finish.

Now you are all set to go. Create a new SAPUI5 Project(say myProject), add some code. To run it on tomcat, right-click on the Project, Run As > Run On Server. Select your Tomcat server, Next & Finish. You project will be up & running on your server at http://localhost:8080/myProject/

Upvotes: 1

M_Follower
M_Follower

Reputation: 111

Open a new notepad file. Save below code with html extension, eg: helloworld.html 

<!DOCTYPE html>
<html>
<head>

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

  <title>SAPUI5 in 20 Seconds</title>

  <!- 1.) Load SAPUI5, select theme and control library ->
  <script id="sap-ui-bootstrap"
          type="text/javascript"
          src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
          data-sap-ui-theme="sap_goldreflection"
          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
    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:
    /*
    $(document).ready(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>

Now open the file with any modern browser. FYI, We don't need any server to test this

Upvotes: 2

eigschpee
eigschpee

Reputation: 440

Useful links regarding this topic, which I could recommend:

They both use the UI5 SplitApp Boilerplate from Github, which is an example app, with a base application structure: https://github.com/6of5/UI5SplitApp-Boilerplate

Perhaps this helps you to start local developement

Upvotes: 2

Related Questions