Please enable JavaScript.

Coggle requires JavaScript to display documents.

3. SAPUI5 Foundations (Data Binding (3 types of binding modes (Two-way …

- - - - implements the fetch and update methods
    - - user interface (UI) controls
    - - handles the user interaction
        
        input validation
    - - Modularity
      - Parallel development
  - - - JSON Models
        
        common usage is for device properties
        
        client-side model
        
        sap.ui.model.json.JSONModel
      - XML Model
        
        sap.ui.model.xml.XMLModel
      - OData V2 Model
        
        sap.ui.model.odata.v2.ODataModel
        
        manual operations
        
        Query
        
        GET
        
        Read
        
        GET
        
        Create
        
        POST
        
        Update
        
        PUT or MERGE
        
        Delete
        
        DELETE
      - Resource Model
        
        language-dependent texts
        
        .properties
    - - JavaScript Views
        
        .view.js
        
        createContent()
        
        returns either a single SAPUI5 control or a hierarchy of SAPUI5 controls
        
        getControllerName()
        
        Ex: return "ViewTypes.controller.View2";
      - XML Views
        
        .view.xml
        
        controllerName is specified in the root tag (<mvc:View>)
      - HTML Views
        
        .view.html
        
        <template/> is the root element of the HTML
      - JSON Views
        
        .view.json
        
        Class sap.ui.core.mvc.JSONView is the root control
    - - Lifecycle Hooks
        
        onInit()
        
        1 time
        
        view isn’t yet rendered
        
        onBeforeRendering()
        
        every time a view rendered
        
        view isn’t yet rendered
        
        onAfterRendering()
        
        after every time a view rendered
        
        post-rendered
        
        onExit()
        
        whenever the view is destroyed
      - Asynchronous Module Loading
        
        sap.ui.define([
        "sap/ui/core/mvc/Controller"
        ], function (Controller) {
        "use strict";
        return Controller.extend("QuickStartApplication.controller.View1", {
        });
        });
      - .controller.js
    - - independent
      - lightweight
      - reusable UI parts
      - used to modularize the view part of your app.
      - NOT have an associated controller
- - - - An SAP Fiori app is an example of a UI component
      - have an associated UI part
    - - code-only parts
      - primary component
      - Metadata
        
        Component.js will contain a reference to manifest.json
    - - createContent()
        
        return a hierarchy of SAPUI5 controls, representing
        the UI part
  - - - sap.app.id
      - sap.app.i18n
      - sap.app.applicationVersion
      - sap.app.title
      - sap.app.ach
        
        SAP Support Component which you can use to raise bugs to SAP.
      - sap.app.dataSources
        
        decalre data sources such as
        OData, JSON, and XML.
      - sap.ui.icons
        
        relative path to various icons to be used in the app
      - sap.ui.deviceTypes
      - sap.ui.fullWidth
      - sap.ui5.resources
        
        JavaScript files and CSS files to be loaded
      - sap.ui5.dependencies
      - sap.ui5.models
        
        Specifies which models need to be automatically created and destroyed by the SAPUI5 framework
      - sap.ui5.routing
      - sap.ui5.contentDensities
        
        compact
        
        cozy
- - - - Change Model
        
        UI data changed
    - - Change Model
        
        UI data changed
      - Change UI data
        
        Model data changed
    - - Resource models use this binding mode for setting
        translatable texts
  - - - use value = "{/PropertyName}" at <Input/>
  - - - Template-based
        aggregation binding
        
        Multiple child controls mirroring the template get created for each row
      - Factory Functions
        
        This function will return a tree of SAPUI5 controls.
        
        Run once per each entry of the bound data
        
        useful when you have complex requirements
      - Filtering, Sorting, and Grouping
  - - - refer to the Products element available at the root
        
        {ProductName} & {ProductID}
        
        relative binding path:there must be a binding context available on the control itself or for one of its parents
- - - - routes
        
        targets
        
        Each target has a name and then specifies a viewName.
        
        an array of different valid routes
      - defines default values for various routes and targets
- - - - – Set the model containing the data to VizFrame.
      - – Set the dataset created in the preceding step to VizFrame.
      - – Set the VizType, specifying the type of chart.