Scribd Logo
Carica

Benvenuto in Scribd!

  • UI5 Training Session

    Caricato da

    barath
    45 visualizzazioni17 pagine

    Titolo originale

    UI5 Training Session ppt.pptx

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPTX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    45 visualizzazioni17 pagine

    UI5 Training Session

    Caricato da

    barath

    Copyright:

    © All Rights Reserved
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 17

    UI5 Training – Session 5 – JS

    www.onlineui5training.com
    1. Install jdk latest version in our system.
    http://www.oracle.com/technetwork/java/javase/downloads/index.html
    2. Download the relevant eclipse version.
    3. Setup the workspace – Directory in our system where all the projects gets stored.

    HTML – HyperText Markup Language


    Creating the web pages. A page is consist of UI elements like
    button,text,input,charts,table,list,images,links etc. All the browsers only understand HTML.
    Tag based markup language where UI elements are created based on tags.
    <input> <button> <label> <table>
    W3C – WWW Consortium. Browser vendors

    Version Year
    HTML 1991
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 2000
    HTML 5 2014
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META></META>

    </HEAD>
    <BODY></BODY> - USER WILL ONLY SEE WHAT WE PUT IN THE BODY OF HTML.
    </HTML>

    TITLE,KEYWORD, DESCRIPTION, AUTHOR, REFRESH, ENCODING


    Block Level Element : div tag, division.
    It automatically starts in a new line.

    Login (http)
    User+pass
    Server
    HTML 5 (Tomcat,jboss)

    Browser Response (html)


    We used to use plugins with browsers to use media content like audio and video.
    <audio>
    <video>

    <header>

    <article>

    <navigation>

    <article>

    <footer>
    thead Th Th
    Td Td
    tr Td Td Table
    body
    Td Td
    Td Td

    An Iframe control allows us to embed another html document inside our page.
    CSS – Cascading Style Sheet (3), CSS will help us to format the application.

    <p>This is a <font value=“..”><color>sample</color><font> text</p>

    We can apply the css in 3 ways:


    1. Inline Styling: Given at the element level, use style property in tag
    <tag style=“prop:value ; prop:val”></tag>
    2. Internal Styling: We apply the style at the page level.
    3. External Styling: Separate the style code in a another file and reference that file in html
    page.

    <style>
    Selector {
    propname: value;
    propname: value;
    ….
    }
    </style>
    Selector : on which element(s) we want to apply the style.
    3 ways to select html elements
    Id : affect only one element, #id
    className: affect the elements holding that class name .classname
    tagName: tagname

    Responsive Web Design


    An application which adapts automatically according to device, providing a great user
    experience is called responsive web design.
    ….
    ….. Sap.ui.commons, sap.m UI5 Framework
    …. (set of classes with
    …. which we can design
    ….. something on top of it)
    …… execute

    Html5, css3,
    js

    Browsers
    DoM = Document Object Model
    Press F12 key
    Internet Developer Toolbar, Browser Client.

    Box Model of CSS:


    Representation of an element on the screen. Overall how much space a UI element is
    occupying on the page will be controlled by Box Mode.

    Border Border
    padding padding

    UI element UI element2
    margin
    Inside a web project the path of current directory is represented by ./

    Java Script is a programming language which all browsers understand.


    Most of our code can directly be executed on client side. Client side scripting language.
     Client Side JS – the entire code runs completely into browser. Design to control Uis.
     Server Side JS – It the runs the code on server side, To perform data related operations
    like server side logic and db lookups.(hana xs engine to build native hana apps)

    JS and Java are completely different languages, both in concept and design.
    JS was invented by brenden eich in year 1995.

    3 ways to using js
    1. Inline JS – at element level we can put the code
    2. Internal JS- we can use <script> tag at the page level
    3. External JS – we can put the code in a separate file with extension .js

    JS is case sensitive.
     Whenever we create a variable or function we must start the variable name with small
    letters and all the consecutive words in that variable/function name should be camel
    caps.
    myvariable = my + variable = myVariable
    myfunction = my + function = myFunction()
    material = Material
    There are two major objects which are pre defined and we can consume.
    Window – the object of browser window.
    Document – the object html document, using this object we can access the html elements
    present on the page. (DoM Object)

    Syntax
    We have to end all our statements with semi column(;) in JS.
    Declare variable
    var variableName = new objectType();
    var variableName = value;
    Create a function
    1. Anonymous function
    function() {
    …….;
    }
    2. Named function
    function functionName(){
    ……;
    }
    Object in JS
    var myObject = new String();
    Custom object
    var objectName = { “prop” : “value” , “prop2” : “value2” };

    Internal Table – Array


    var myArray = [ “Apple”, “Orange”, “Litchi” ];

    0 1 2
    If we combine object and array concept = Array of Object = JSON
    JSON : Java Script Object Notation : Light weight data format
    Alignment of Fields
    How to format the table

    Potrebbero piacerti anche