Scribd Logo
Upload

Welcome to Scribd!

  • Training UI5

    Uploaded by

    Yoppie Ariesthio
    103 views39 pages
    training sap xsjs + ui5

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    training sap xsjs + ui5

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    103 views39 pages

    Training UI5

    Uploaded by

    Yoppie Ariesthio
    training sap xsjs + ui5

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 39

    SAP UI5

    SAP XSJS TRAINING


    Introduction to SAP HANA Development

    yoppie.aries@gmail.com
    SAPUI5 - Learning Plan

    Backpack
    Basic
    MVC Structure
    JSON
    Binding Data
    SAP XSJS
    Backpack
    What is HTML?

    HTML (Hypertext Markup Language) is the set of markup


    symbols or codes inserted in a file intended for display
    on a World Wide Web browser page. The markup tells
    the Web browser how to display a Web page's words and
    images for the user.
    What is CSS?

    CSS stands for Cascading Style Sheets.


    CSS describes how HTML elements are to be displayed
    on screen, paper, or in other media
    What is Javascript?

    Javascript
    A scripting language developed by Netscape to enable Web
    authors to design interactive sites. Although it shares many of
    the features and structures of the full Java language, it was
    developed independently. Javascript can interact with HTML
    source code, enabling Web authors to spice up their sites with
    dynamic content.
    Web Application structure
    Introduction to SAPUI5

    SAPUI5 framework, a powerful Javascript framework


    which is based on jQuery behind the scenes.

    Editor :
    SAP WEB IDE
    Eclipse

    (Need Java
    Development Kit)
    Introduction to SAPUI5
    Jquery Framework

    jQuery is a fast, small, and feature-rich JavaScript


    library. It makes things like HTML document traversal
    and manipulation, event handling, animation, and Ajax
    much simpler with an easy-to-use API that works across
    a multitude of browsers. With a combination of
    versatility and extensibility, jQuery has changed the
    way that millions of people write JavaScript.
    Installing Notepad++
    HTML Syntax Convention

    Html syntax must be enclosed by two tag

    <ELEMENT>

    </ELEMENT>
    Single tag <ELEMENT />

    Each element tag can have attribute inside it


    HTML attribute
    <ELEMENT ATTRIBUTE=>

    </ELEMENT>

    Attributes provide additional information about an


    element
    Sample HTML
    File name extension should be .html

    <html>
    <head>
    <title> </title>
    </head>
    <body>
    <p> </p>
    </body>
    </html>
    HTML Practice
    Buatlah file .html Ketentuan :
    Gunakan Background Color
    Isikan dengan : Gunakan align
    Title Gunakan placeholder
    Gunakan Color
    Marque
    Text
    Input type Text
    Button
    Link
    Gambar
    CSS coding convention
    Initialize it by element name, id, or class
    You can put inside style element in html or use it
    externally.

    Select Element by :

    By ID Using Hashtag #id

    By Class Using dot .classname


    CSS Practice
    Buat file .html baru
    Buatlah 2 type input html
    Buatlah 1 tombol button
    Gunakan CSS untuk input dan button
    Gunakan Event pada input menggunakan css
    Javascript

    Purposely to assist
    Initiate inside of sript element tag at html
    Located inside/outside html page
    Case insensitive
    Javascript Syntax
    Arithmetic Operator

    Operator Description
    + Addition
    - Subtraction
    * Multiplication
    / Division
    % Modulus
    ++ Increment
    -- Decrement
    Javascript Syntax
    Logical

    Operator Example Same As


    = x=y x=y
    += x += y x=x+y
    -= x -= y x=x-y
    *= x *= y x=x*y
    /= x /= y x=x/y
    %= x %= y x=x%y
    = x=y x=y
    Javascript Syntax
    Conditional

    IF ELSE
    Conditional statements are used to perform different actions based on
    different conditions.
    if (condition) {
    //block of code to be executed if the condition is true
    } else if (condition){
    }
    SWITCH
    The switch statement is used to perform different actions based on
    different conditions.
    switch(expression) {
    case n:
    code block
    break;
    case n:
    code block
    break;
    default:
    default code block
    }
    Javascript Syntax
    Looping

    for - loops through a block of code a number of times


    for/in - loops through the properties of an object
    while - loops through a block of code while a specified
    condition is true
    do/while - also loops through a block of code while a
    specified condition is true
    Javascript Syntax
    Function

    A JavaScript function is executed when "something"


    invokes it (calls it).
    Example :
    function getDataModel(){
    var dataModel = { data : ["a","b","c"]};
    return dataModel;
    }
    function calculateNumbers(x,y){
    return x*y;
    }
    Tools
    SAP HANA Studio

    DATA
    MODELER

    HANA
    STUDIO
    APPLICATION
    DATABASE DEVELOPMENT
    PROVISIONING
    SAPUI5
    Model View Controller (MVC)
    The Model View Controller (MVC) concept is used in UI5 to separate the representation of information from the
    user interaction. This separation facilitates development and the changing of parts independently.
    Model, view, and controller are assigned the following roles:
    The view is responsible for defining and rendering the UI.
    The model manages the application data.
    The controller reacts to view events and user interaction by modifying the view and
    model.
    MVC Complete Structure
    View Conventions
    View names are capitalized
    All views are stored in the view folder
    Names of XML views always end with *.view.xml
    The default XML namespace is sap.m

    Controller Conventions
    Controller names are capitalized
    Controllers carry the same name as the related view (if there is a 1:1 relationship)
    Event handlers are prefixed with on
    Controller names always end with *.controller.js
    SAPUI5 Element

    Input List
    Page Message Dialog
    ComboBox Panel
    Date Picker Icon
    Table Layout
    Label IconTabBar
    Radio Button TextArea
    Button
    Etc..

    https://sapui5.hana.ondemand.com/sdk/docs/api/
    Index.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Practice</title>
    <script
    id="sap-ui-bootstrap"
    src="/sap/ui5/1/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="sync"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-resourceroots='{
    userTest": "./"
    }' >
    </script>
    <script>
    sap.ui.getCore().attachInit(function () {
    sap.ui.xmlview({
    viewName: "userTest.view.App"
    }).placeAt("content");
    });
    </script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
    </html>
    App.view.xml

    <mvc:View
    controllerName="userTest.controller.App
    xmlns:=sap.m
    xmlns:mvc="sap.ui.core.mvc">

    <! Content Goes Here-->

    </mvc:View>
    App.controller.js

    sap.ui.define([
    "sap/ui/core/mvc/Controller"
    ], function(Controller) {
    "use strict";
    return Controller.extend("userTest.controller.App", {
    onInit : function(){

    }
    });
    });
    SAP HANA XSJS

    What is XSJS?
    SAP HANA XS JavaScript (XSJS) is an application
    programming language in JavaScript. It can be used to
    exposes data stored in database tables or views to client
    side. Additionally we can also implement any business
    logic.
    SAP HANA XSJS Architecture
    SAP HANA XSJS API SUPPORT

    Business Logic

    Javascript API

    Connection
    to DB

    Session
    Handling API

    Request Parameter
    Processing API
    SAP HANA XSJS
    Example

    Request Parameter & Connection to DB


    var param = $.request.parameters.get(id);
    var conn = $.db.getConnection();
    var query = SELECT * FROM SC.SUPPLIERTABLE WHERE
    ID=\+PARAM+\;
    var pstmt = conn.prepareStatement(query);
    var rs = pstmt.executeQuery();
    while(rs.next()){
    . . .
    }
    SAP HANA XSJS
    Example

    Session Handling
    $.session
    .getSecurityToken()
    .getUsername()
    .assertAppPrivilege(privilegeName)
    .getTimeout()
    Request Handling
    $.request
    .setBody()
    .parameters
    .contentType()
    .entities
    SAP HANA XSJS
    Exercise

    1. Create package on new project and name it service


    2. Create .XSJS file extension to inside service package
    3. Set request content type to application/json
    4. Create JSON object variable for example
    5. Set Body to JSON Object you have created
    6. Run your .xsjs file through browser
    SAP HANA XSJS
    Exercise 2

    Create new Table


    Insert Data to Database
    Create new connection to database HANA using XSJS
    Get data from XSJS by fetching it using function
    Using logic to make structured JSON data FORMAT
    Set Content output to JSON Format
    COMBINE
    SAPUI5 & XSJS
    SAPUI5 supports for jquery API, including jquery ajax.
    Perform an asynchronous HTTP (Ajax) request.
    Practically to access database using web service
    technology provided by SAP HANA XSJS

    You might also like