UI5 Control
For each ui control included in the library, two js files are available: one is the definition file, which wraps in sap.ui.define function for others to create the control, another one is render file, which is used to render the control to a html element to be added in the DOM tree.
Note UI control is just a view item rended in html page, which is shown as a basic html element. There is no data or business logic associated with it.
Note all UI5 control has a placeAt method, which can be called to insert the rendered html element into the specified DOM element.
Sometimes, the ui controls are also referred as modules, and can be loaded from UI library by sap.ui.define method.
UI5 library
UI5 Librarey is used to distribute a set of UI controls or types. A UI5 library is represented as a folder structure, and the most important file for the UI5 library is library.js in the root folder, which defined what controls or types are defined in the library. For example, sap.m is a library contains the common ui controls.
library.js's initLibrary method specify the library's namespace, version, dependency, types, and the UI controls implemented by the library.
key methods in sap-ui-core.js
jQuery.sap.require : load a control or ;ibrary
requireModule: send xhr request to load a js module resource
execModule: exec the loaded js module using eval
UI5 Component (or UIComponent)
UI5 Component is used to distribute a set of mvc view and controller, so that it can be used in different index.html page. It can be used to implement an independent business logic, for example, each tile in fiori launch pad is a separate UI component.
When creating a UI5 app from template, it actually create a simple UI5 component, and then wraps it into index.html. The same component can be easily used in other html files.
A UI5 component contains one or more UI5 MVC view and controller to handle the business logic. In the component meta data, it can specify a rootview, which will load the first mvc view in the component. The component can set model on it, which will be inherited to views and controllers created by the component.
Each component has a component.js to initialize the component, and set the model for the component. Starting from ui5 1.30, the component.js can also specify a metadata file to specify the configuration, such as the rootview name and type, resource model, etc. This metadata file is also called application descriptor file. Although it actually describes the UI component.
UI5 MVC view
MVC view is a UI control object, and can be directly put into html page by placeAt method, the view can specify a MVC controller by name, and also has a getController method to get the associated controller, the view has a setModel/getModel method to set/get associated model object, multiple model object can associate to a view by giving different model name. The default model does not have a name.
When a method is referenced by name in xml view, the method name refers to the method defined in controller object used by the view.
MVC view uses createContent method to specify what UI controls are put in the view object, the method can return a single UI control or an array of UI controls.
Although view can be created by xml, js, json. It is better to create view using javascript for debug purpose.
In order to create a js view instance, use the below sample code
createContent : function(oController) {
var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS,
viewName:"sap.ui.demo.wt.view.HelloPanel"});
return myView;
}
In case the sap.m.Page content does not show while it already exists on the DOM tree, you may need to disable scroll or set page height to 100%
UI5 MVC controller
MVC controller has getView method to get the mvc view object associated with it. it also has getOwnerComponent to get the UI component that contains the controller.
UI5 Model
UI5 model are mvc's model object, MVC view has setModel and getModel method to set/get model.
UI5 sap.m.page, panel, app, and shell
sap.m includes container view as panel, page, app, and shell, they can be used to organize the ui controls, and also provide common function and UI such as page title and navigation buttons. sap.m.shell can also be used to adapt screen size and theme.
UI5 sap.ui.core.Icon
There is a good article talking about how icon is organized in UI5 view
http://scn.sap.com/community/fiori/blog/2015/06/27/fiori-icon-logic
The icon is specified by data-sap-ui-icon-content attribute, and then the actual image data is rendered by library.css style.
For each ui control included in the library, two js files are available: one is the definition file, which wraps in sap.ui.define function for others to create the control, another one is render file, which is used to render the control to a html element to be added in the DOM tree.
Note UI control is just a view item rended in html page, which is shown as a basic html element. There is no data or business logic associated with it.
Note all UI5 control has a placeAt method, which can be called to insert the rendered html element into the specified DOM element.
Sometimes, the ui controls are also referred as modules, and can be loaded from UI library by sap.ui.define method.
UI5 library
UI5 Librarey is used to distribute a set of UI controls or types. A UI5 library is represented as a folder structure, and the most important file for the UI5 library is library.js in the root folder, which defined what controls or types are defined in the library. For example, sap.m is a library contains the common ui controls.
library.js's initLibrary method specify the library's namespace, version, dependency, types, and the UI controls implemented by the library.
key methods in sap-ui-core.js
jQuery.sap.require : load a control or ;ibrary
requireModule: send xhr request to load a js module resource
execModule: exec the loaded js module using eval
UI5 Component (or UIComponent)
UI5 Component is used to distribute a set of mvc view and controller, so that it can be used in different index.html page. It can be used to implement an independent business logic, for example, each tile in fiori launch pad is a separate UI component.
When creating a UI5 app from template, it actually create a simple UI5 component, and then wraps it into index.html. The same component can be easily used in other html files.
A UI5 component contains one or more UI5 MVC view and controller to handle the business logic. In the component meta data, it can specify a rootview, which will load the first mvc view in the component. The component can set model on it, which will be inherited to views and controllers created by the component.
Each component has a component.js to initialize the component, and set the model for the component. Starting from ui5 1.30, the component.js can also specify a metadata file to specify the configuration, such as the rootview name and type, resource model, etc. This metadata file is also called application descriptor file. Although it actually describes the UI component.
UI5 MVC view
MVC view is a UI control object, and can be directly put into html page by placeAt method, the view can specify a MVC controller by name, and also has a getController method to get the associated controller, the view has a setModel/getModel method to set/get associated model object, multiple model object can associate to a view by giving different model name. The default model does not have a name.
When a method is referenced by name in xml view, the method name refers to the method defined in controller object used by the view.
MVC view uses createContent method to specify what UI controls are put in the view object, the method can return a single UI control or an array of UI controls.
Although view can be created by xml, js, json. It is better to create view using javascript for debug purpose.
In order to create a js view instance, use the below sample code
createContent : function(oController) {
var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS,
viewName:"sap.ui.demo.wt.view.HelloPanel"});
return myView;
}
In case the sap.m.Page content does not show while it already exists on the DOM tree, you may need to disable scroll or set page height to 100%
var page = new sap.m.Page({
title : "{i18n>homePageTitle}",
content : controls,
enableScrolling : false,
height: "100%"
});
UI5 MVC controller
MVC controller has getView method to get the mvc view object associated with it. it also has getOwnerComponent to get the UI component that contains the controller.
UI5 Model
UI5 model are mvc's model object, MVC view has setModel and getModel method to set/get model.
UI5 sap.m.page, panel, app, and shell
sap.m includes container view as panel, page, app, and shell, they can be used to organize the ui controls, and also provide common function and UI such as page title and navigation buttons. sap.m.shell can also be used to adapt screen size and theme.
UI5 sap.ui.core.Icon
There is a good article talking about how icon is organized in UI5 view
http://scn.sap.com/community/fiori/blog/2015/06/27/fiori-icon-logic
The icon is specified by data-sap-ui-icon-content attribute, and then the actual image data is rendered by library.css style.
No comments:
Post a Comment