Scribd Logo
Upload

Welcome to Scribd!

  • 14 views

    2nd Sep - 8.30pm - Jsview

    Uploaded by

    Let us ABAP
    The document discusses creating UI elements in JavaScript for an SAP UI5 application. It is recommended to create UI elements in a view file rather than directly in the index.html file. An example is provided of creating several UI elements like an ApplicationHeader, Image, TextView, TextField, PasswordField, and TextArea in the createContent method of a view file.

    Copyright:

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

    You might also like

    2nd Sep - 8.30pm - Jsview

    Uploaded by

    Let us ABAP
    14 views3 pages
    The document discusses creating UI elements in JavaScript for an SAP UI5 application. It is recommended to create UI elements in a view file rather than directly in the index.html file. An example is provided of creating several UI elements like an ApplicationHeader, Image, TextView, TextField, PasswordField, and TextArea in the createContent method of a view file.

    Original Description:

    Original Title

    2nd Sep_8.30pm_jsview

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses creating UI elements in JavaScript for an SAP UI5 application. It is recommended to create UI elements in a view file rather than directly in the index.html file. An example is provided of creating several UI elements like an ApplicationHeader, Image, TextView, TextField, PasswordField, and TextArea in the createContent method of a view file.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    14 views3 pages

    2nd Sep - 8.30pm - Jsview

    Uploaded by

    Let us ABAP
    The document discusses creating UI elements in JavaScript for an SAP UI5 application. It is recommended to create UI elements in a view file rather than directly in the index.html file. An example is provided of creating several UI elements like an ApplicationHeader, Image, TextView, TextField, PasswordField, and TextArea in the createContent method of a view file.

    Copyright:

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

    We also can create UI elements in java script in index.html like below.

    But it is not recomended to create UI elements in index.html.


    It is always recomended to create ui elements in view

    index.html
    //create object for screen element Text view
    var txvo = new sap.ui.commons.TextView();
    //call the required methods
    txvo.setText("Welcome to UI5");
    //place the object in the content
    txvo.placeAt("content");

    The below is the complete code in index.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'/>

    <script src="resources/sap-ui-core.js"
    id="sap-ui-bootstrap"
    data-sap-ui-libs="sap.ui.commons"
    data-sap-ui-theme="sap_bluecrystal">
    </script>
    <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-
    ui-libs' if required -->

    <script>
    sap.ui.localResources("ztest4");
    var view = sap.ui.view({id:"idVIEW11",
    viewName:"ztest4.VIEW1", type:sap.ui.core.mvc.ViewType.JS});
    view.placeAt("content");

    //create object for screen element Text view


    var txvo = new sap.ui.commons.TextView();
    //call the required methods
    txvo.setText("Welcome to UI5");
    //place the object in the content
    txvo.placeAt("content");

    </script>

    </head>
    <body class="sapUiBody" role="application">
    <div id="content"></div>
    </body>
    </html>

    Now the below is the code written in view :

    *********Note:The below code is written in view

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

    <script src="resources/sap-ui-core.js"
    id="sap-ui-bootstrap"
    data-sap-ui-libs="sap.ui.commons"
    data-sap-ui-theme="sap_bluecrystal">
    </script>
    <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-
    ui-libs' if required -->

    <script>
    sap.ui.localResources("ztest4");
    var view = sap.ui.view({id:"idVIEW11",
    viewName:"ztest4.VIEW1", type:sap.ui.core.mvc.ViewType.JS});
    view.placeAt("content");

    //create object for screen element Text view


    var txvo = new sap.ui.commons.TextView();
    //call the required methods
    txvo.setText("Welcome to UI5");
    //place the object in the content
    txvo.placeAt("content");

    </script>

    </head>
    <body class="sapUiBody" role="application">
    <div id="content"></div>
    </body>
    </html>

    Note:The below is the complete code of view


    sap.ui.jsview("ztest4.VIEW1", {

    /** Specifies the Controller belonging to this View.


    * In the case that it is not implemented, or that "null" is returned, this
    View does not have a Controller.
    * @memberOf ztest4.VIEW1
    */
    getControllerName : function() {
    return "ztest4.VIEW1";
    },

    /** Is initially called once after the Controller has been instantiated. It
    is the place where the UI is constructed.
    * Since the Controller is given to this method, its event handlers can be
    attached right away.
    * @memberOf ztest4.VIEW1
    */
    createContent : function(oController) {
    //Application Header
    //create an object for Application header screen element

    var aho = new sap.ui.commons.ApplicationHeader();


    //place the required methods
    aho.setDisplayLogoff(true);
    aho.setLogoSrc("sap.png");
    aho.setLogoText("SAP Logo");

    aho.setDisplayWelcome(true);
    aho.setUserName("Venkat");
    //image
    var imageo = new sap.ui.commons.Image({src:"sap.png"});
    //imageo.setSrc("sap.png");
    //Text view
    var txvo = new sap.ui.commons.TextView({text:"Welcome to this training"});
    //Text Filed
    var txfo = new sap.ui.commons.TextField({value:"123"});
    //Password
    var pwdo = new sap.ui.commons.PasswordField({value:"abcd"});
    //Text Area filed
    var tao = new sap.ui.commons.TextArea({value:"please enter
    hhhhhhhhhhhhhhh",rows:5});

    return [aho,imageo,txvo,txfo,pwdo,tao];
    //
    }

    });

    You might also like