Sunteți pe pagina 1din 57

Eclipse is free. Easy to use. It is used in all the companies to do dev.

For
UI5 apps.

1. Install jdk in our system.


2. Download and extract eclipse
3. When we open eclipse first time, It will ask for workspace. Its folder in
our computer which will store all the files (Webcontent).
HTML = HyperText Markup Language
Its based on html tags. W3C = www consortium. = All browser
Browsers can directly understand the html.

Every html file is also known as html document.


1. Version of html used to create that doc. It will also inform the browser
that the content which is written is an HTML content.
2. Every doc will also have 2 components . 1. head 2. body
1. Head = which contains the meta information about the html
document.
2. Body = the content what we wish to display to the user.
Version When
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Meta tags are used to store metadata about the document.
Types of chars.
Keywords.
Author.
Description.

Other SAP UI tech. v/s SAP UI5


1. Look and Feel
2. Mobile Apps
3. Custom Styling
4. Custom control
5. Integration
Header

Navigation

Section Articles

Footer
<h1>Welcome</h1>
<font> <color>
<h1><font=Calibri><color>Welcome</color></font></h1>

CSS Cascading Style Sheets (CSS3)


Style = size, color, background, position
3 ways:
1. Inline we use style attribute at the HTML element level
2. Internal using <style> tag at the page level
3. External Using a external CSS file

Selector { prop : val ; prop2 : val2 }


Selector = id of the element -> #id
class name -> .classname
tagname -> tagname

To make all the h1 from html document in red color


h1{ color: red }
I want to make my inp field color as blue for which id is
inp1
#inp1{color:blue}
1. Blocks are not proper
2. Applying the style at tag level is affecting non desired elements also.

Element Element

Padding
Border

Margin
Size of HTML element on a page = element size + padding +
border + margin
Responsive Web design : A responsible web design is a design of a web
page, which is capable of adapting the content according to screen size.

D
M T
Java script is a programming language which browsers understands.
Fast response time.
Types:
1. Client-side = JS which gets executed in browser.
2. Server-side = Runs on the server, usually used to prepare results from
DB or DB lookups.

JS and Java are completely different languages, both in concept and design.
JS was invented by Brenden Eich in 1995.

3 Ways
3. Inline = at element level = oneventName = js code
4. Internal = use <script></script>
5. External

JS has two standard objects (js is case sensitive)


document This is the object of HTML document traverse to html doc or
trace element(s)
window this is the object of browser window
Js can change HTML element(s) content and attributes
JS can change CSS
Validate the input
Using JS code we call server requests also
We can dynamically add more html elements to the page

Output:
1. window.alert() OR alert()
2. Document.write()
3. Console.log
4. innerHTML

External CSS
DoM = Document Object Model -> structure of HTML document

F12 = Internet Developer Toolbar/Console


Event = activity performed by user on browser page.
Function in JS
function name(){

function(){}

var variable_name = values;

Syntax to create an object


{propName: val, propName2: value}

Array in JS
Var name = [val1,val2,val3]

If we combine the concept of Array and Object, It becomes JSON.


JSON Stands for JavaScript Object Notation. (Internal table of objects)
[{},{},{},{},{}]
jQuery = is not a DB query language (SELECT). Is a Java script library.
WRITE LESS and DO MORE

1. How to load the JS file which contains jQuery functions

a. Reference the JS file


b. Download and reference

1. How to consume jQuery.

We use $ symbol.
$(selector)

Selector = #id, .classname, tagname

document.getElementById(id)
$(#id)
Agenda
1. SAP UI5 framework
2. How to setup eclipse
3. SDK

It is a java script library which is responsible for rendering HTML5 pages.

Sap.ui.commons, sap.m,
Sap.ui.table, sap.ui.ux3 SAP UI5 Framework
Design time
Dev. Runtime

Using UI5 Libs

HTML5 + CSS
Install SAPUI5 Application Toolkit
https://tools.hana.ondemand.com/
kepler
Syntax
var oName = new
lib_name.API(sId,Prop.);
sId = id of the HTML element
Prop = into curly braces
{ propname: val , propname2:
val2 }
Design a button which is part of
sap.ui.commons library
ps://sapui5.netweaver.ondemand.com/sd

ry control property, there will be setters


ters method.
ton which has a prop. Called enable, visib

Enabled()
Enabled()
Visible()
Visible()
Exercise : Design a screen for user to enter user name. Also place a
button with click label as Show my name. On click of this button, Display
the user name in popup.

User Name

Show my
Name
Sap.ui.core.Control
All common method and
attributes which can be applied
on any control

Button TextField
1. There is no alignment of controls on the screen.
2. Controls are intervening each other.
3. Every time we create a control, we need to create the body element in
html and call placeAt method to place it in BODY.

Layout = Matrix, grid, vertical, horizontal


Sap.ui.commons.layout sap.ui.layout
50% 50%
User Name User Name Field
Password Password field
Button

Design an application header with a user name field. When user clicks on
Logoff button in application header, Change the entire DOM to logged off
successfully, <username>.
Doc.write()
MVC = Model View Controller
A design pattern to create end to end UI applications. Using MVC we make
our application ready for future changes.

request
Controller

response action

notify View
Model
Binding

View = screens what user will see. (JS, XML, JSON, HTML)
Model = Data of the application. (JSON, XML, Resourse, Odata)
Controller = Contain the business logic (JS)
A view will always consist of 2 methods
1. createContent() = Is responsible for creating the UI elements of the
entire view.
2. getControllerName() = About the controller of this view. Many views
can share one controller.
View
Index.html Creates the object of the MAIN.view.js
view
Code to create Create UI
view object and element
place it in body objects
of HTML SAPUI5
Framewor
k
Package (PKG_ANUBHAV) Sap.ui.core
Class Mvc
CL_ANUBHAV ViewType
JS XML HTM JSO
Car_Type
L N
HB SADA XUV
N

Package -> Class -> Attribute Sap.ui.core.mvc.ViewType.JS


-> Value

Pkg_anubhav-> cl_anubhav ->


car_type-> XUV
View1

View2 Controller

View3
XML eXtensible Markup Language
The main purpose of xml was to exchange the data between
multiple technologies. Unlike HTML, in XML we will have our
own tag names.

ABAP
XML(String) JAVA
(APIs)
(APIs)
If_ixml_*

<Employees>
<Employee>
<Id>10</Id>
<Name>Anubhav</Name>
</Employee>
<Employee>
<Id>20</Id>
<Name>Jack</Name>
</Employee>
<Employee>
<Id>30</Id>
<Name>Spiderman</Name>
</Employee>
</Employees>
Anubhav, Can you please show an example where we can navigate between
views.
In webdynpro, we have concept of plugs to navigate between views, how do
we achieve here?
Main

Panel

Next

Back
Shell control is mainly used to combine multiple views in a single screen.
The shell control is similar to object Instance Floorplan in webdynpro.
Sap.ui.ux3
Main
1 2 3

Shell Content Area

1 2 3
Association : Relationship between two objects.
Aggregation lose binding, both objects can work independently.
Composition Tight binding, Objects cannot function independently.
Cardinality : 1:1, 1:n

Base Associatio
Ref_asso. n

Child
Models : Object of DATA in application.

JSON
XML Client Side Models small amount of fixed data
Resource

OData Server side model actual data model for


CURD
Model
View Data binding

OneWay
TwoWay
OneTime
1. Create object of model class
Sap.ui.model.<model class>.<model type>
2. Set or load data into model
setData or loadData
3. Set the model to
Application, View, Control
JSON = Array of objects
{
"prodStr": {
"prodName": "Laptop",
"price": "500"
},
"prodTab": [{
"prodName": "Laptop",
"price": "500"
}, {
"prodName": "iPhone",
"price": "300"
}, {
"prodName": "Printer",
"price": "100"
}, {
"prodName": "Mouse",
"price": "50"
}]
}
Column
1. Title for the column
2. Template = control what type of UI element we want the column to be.
3. Along with the template property we need to also do the binding (From
which property of JSON, it will pick up values)

XML = eXtensible Markup Language unlike HTML, XML can have custom
tags.
Xmls can be processed by programming languages using DOM model.
<employee>
<row>
<empId></empId>
<eName></eName>
<gender></gender>
</row>
<row>
<empId></empId>
<eName></eName>
<gender></gender>
</row>
</employee>
Internationalization
Supporting the application developed in UI5 with multi-lingual support.

LOGIN Screen
Sap.ui.getCore().getModel()
All global variables for the controller are defined in onInit method.
With prefix, this.

1. Formatters
2. Solve the problem of data type
3. How to process XML

Formatters: many times when we develop the application, We would


need to format our data at runtime.

UIProp: {
path: model path,
formatter: formatter_function, function(value){}
}

Value: {
path: model>eName,
formatter: function(input){ convertandreturn}
}
Faceless Components: Custom controller- its a JS file with reusable
functions.

jQuery.sap.declare(path of the file);

Consume it, we need to declare below before

jQuery.sap.require(path of the file);

New sap.uitable.table({
Id = myTable UI Table COntrol
});
FIORI: User experience of a UI5 application.
Device Compatibility
Responsive
Platform independent
Coherent
Role based

It is a application built using MVC model with sap.m as control library.


Sap.ui.layout.
Index.html

App

sap.m.App

Pages
App

Goto

Page1 Page2

Back
List Control: A list control is a single column table.

Types of templates
Display List Item (l,v) Header
title
Standard List Item
(icon,l,d) Item1
Column List Item Item2
(multiple) Item3 Content collection
Custom List Item of items []
(customize li)
Object List Item(BO)
Action List
Item(clickable)
Input List Item Path of the Template :
binding type of list
//Find the index of the item to be deleted
//Getting the path and extracting the index . List object and call
getSelectedItem()

//Get all the items bound to the list control

//Delete the item from the items collection

//Reset the latest item collection back to the list control


Coming Wednesday will be holiday.
FIORI is all about user experience.

Index.html
Sap.m.App => sap.m.SplitApp

Types of Fiori Apps

Transactional Apps
Factsheets
Analytical Apps

Master Details
view view Empty
view
idMain idPage2
Search field with a list control.
When we apply filter, By default the filters were working with AND operator.
e.g. get the results in the list where Name OR description of product
matches.
Fragments: light weight UI parts. A fragment would not have any
controller, The functionality of the fragment will be defined by the
controller who invokes the fragment.
As a UI template.
fragment
View 1 Controller 1

View 2 Controller 2 Data Chk products

View 3 Controller 3
UI5 doesnt become bottleneck for developing web applications.
Custom Control?
A custom control is a control which developer can define in case if a
standard sap control doesnt serve the purpose.
In case a standard control provides some functionality but we need to
enhance it, we can create a custom control to enhance the standard
control also.

.
SAP UI5
.
Framework
.
.
.

Browsers
HTML5 + CSS
Sap.ui.core.Control

Sap.ui.common Sap.ui.common
TextField
s.Button s.TextView

We need to design our control by inheriting from sap.ui.core.Control


class.
Ultimate op of our control is goining to be an HTML5 + CSS code.
Steps to design a custom control:
1. Unique control name.
2. Metadata of the control which consists of properties, methods, events.
whenever we have a property= setter & getter methods for that
property
whenever we have an event = attach<EventName> also to
trigger the event we will
have fire<EventName> method.
3. Implementation of control
Init to initialize the control attributes.
renderer function(oRenderer,oControl){
oRenderer = which will tell the browser about how to show the
control.
oControl = object of control itself
}

Syntax
Sap.ui.core.Control.extend(ControlName,{
metadata: {properties:,events:,methods:},
renderer: function(oRm,oControl){},
Init: function(){}
});
Bootstrap
SAP UI5 Framework Create object of apis
and add it to the
sap.m, html body
sap.ui.commons

1. Location of gmap
api Create object of apis
Google.maps and add it to the
Google.geocode html body
Google.marker

http://maps.google.com/maps/api/js?sensor=false
Google.maps.Map => This will create a new map object
Google.maps.Marker => to mark a location on the map
Google.maps.geocoder => pass the address, returns the
lng & lat
COMPONENT.JS
UI Component which encapsulates entire functionality of our Application.
Navigation (Router)
Versioning Information
Dependencies
Global methods and variables
Configurations
Model
Instantiate the main App view
Initialization

1. We want structure our app by keeping all the entities in separate folders.
2. Integrating the app with SAP Launchpad. (Shell and Container)
sap.ui.core.UIComponent.declare(path of component);
sap.ui.core.UIComponent.extend(comp_name,{
metadata: {routers,dependencies,libs,configuration,menifest},
init: function(){},
destroy: function(){},
});

componentname.prototype.createContent = function(){

};

Whenever we use component.js concept the app will be called fiori-like app.
MasterPage Views
Index.html s

splitApp

DetailsPage
Views
s

Index.html MasterPage
Component.
js s
Shell Main App Views
Component
Container Split
App
DetailsPage
s
Odata: Open Data Protocol, this allows us to consume the data over http.
You do not need to worry about underlying data base and its queries.

RESTful APIs = Representational State Transfer

Odata.org

Any odata service we use has 3 parts


1. Service Document defines the entity sets of the services
2. Metadata document allows us to look at the meta data $metadata
3. Data - /EntitysetName
Model Definition Represents the design of data.
Entity Type template of single entity data. For every entity which is part
of service we will create entity type specifying properties of it.
Entity Set Will represent the data of the entity at runtime.
Association We need relation between different entities.
Function Import allows us to execute operations on entity.

Implementation
Runtime Artifacts
MPC Model Provider Class
MPC_EXT
DPC Data Provider Class
DPC_EXT

Registration
We have a company which is using SAP ERP today. This company wants to
improve the user experience and implement fiori screens. They still want
data from existing erp system.

Fiori

ERP
SAP Netweaver RFC
Gateway 7.4
Application

DB
Features of odata:
Select some of the fields $select = field names
Paging $top $skip
$expand to check dependent entities data together.
$format = json

BAPI_EPM_PRODUCT_GET_LIST
BAPI_EPM_PRODUCT_GET_DETAILS
BAPI_EPM_PRODUCT_Create
Bapi_EPM_PRODUCT_UPDATE
BAPI_EPM_PRODUCT_DELETE

PRODUCTS
ORDERS
SUPPLIERS

WE WILL NOT HAVE SESSION TOMORROW!!!

S-ar putea să vă placă și