Wednesday, May 24, 2017

sapUiSizeCozy vs sapUiSizeCompact

Content Density
CSS Class
'Large' design: Dimensions of the controls are optimized for touch-enabled devices, such as smartphones, to allow users to interact with controls more easily.
This is the default density for most controls, particularly those in the sap.m library.
Reduced-size design: The font size is the same as for the cozy density, but the dimensions of the controls and the spacing between them are reduced. This density is more suitable for mouse-operated devices, such as desktops.

Cozy Density: Mainly for Touch Devices (e.g. Smartphones)

Compact Density: Mainly for Mouse-Operated Devices (e.g. Desktops)

ABAP Debugger vs Browser Debugger

Browser Debugging for ABAP Developers

To debug in SAPUI5, use your browser's debugging tool.
When you debug code in SAPUI5, keep in mind that you can not debug SAPUI5 in your IDE. If you use Eclipse, for example, a breakpoint set in Eclipse does not stop your script when it is executed in your browser, unless you use the debugger; statement explicitly in your code. The browser does not know about your IDE and does not communicate directly with it.
ABAP Debugger vs. Browser Debugger
This section explains how you use the debugging tool of a Chrome browser. Keep in mind that you have to test your application on all browsers that are officially supported by SAP, because the implementation differs depending on the browser used, seeChoose your Browser. To start the debugger, use the browser menu or choose F12 (valid for most browsers).
The following explanations assume that your application is up and running on your web server, either a local Tomcat, or a remote server.
In a first step, locate the lines of code you would like to inspect and set breakpoints. The following figure shows an application that is opened in the Chrome debugger. The default tab Elements is opened, and a small bell icon with a number located at the right border of the footer indicates the number of messages from the console.
SAPUI5 Troubleshooting JS Debugger 1
On the Elements tab, the HTML elements of the DOM are displayed in a tree structure. To see the JavaScript code within the application and to set a breakpoint there, open the Sources tab. From there, you can open any source files that is included. When you open the tools the first time, you ususally have to click the arrow icon on the left hand side of the Sources tab (as indicated in the following figure) to open the sources tree.
SAPUI5 Troubleshooting Open Navigator
To see the actual content of the HTML page and to set a breakpoint, open the HTML page from the sources tree. This is similar to the ABAP debugger when you execute and debug an application from the workbench. The following figures show the ABAP workbench debugger and the Chrome debugger.
The following figure shows the ABAP workbench debugger. The bubbles indicate the opened application and its location (1), the call stack (2), and the tab where you enter the variables you want to watch (3).
SAPUI5 Troubleshooting ABAP Debugger
The next figure shows the Chrome debugger. Here, the bubbles indicate the script you are looking at (1), the watch expressions where you can add the variables you want to watch (3), the call stack that indicates if the code execution stops on a breakpoint (2), and the breakpoint (4). The call stack is only visible when the code execution is on hold.
SAPUI5 Troubleshooting JS Debugger 2
JavaScript does not support a forward navigation, meaning that you can not jump to a method by double clicking. Instead, you either have to jump to the method during execution, or you open the file containing the method.
If you are not sure in which file exactly a piece of code is located, Firefox offers you an option to search through several files included in your page. Chrome, however, does not support this option.
Setting Breakpoints
The browser debugger supports several options for setting breakpoints. You can, for example, click once on the line number where you would like to break. To remove the breakpoint, click the respective line again. To temporarily disable or edit the breakpoint, right click on an existing breakpoint. To set a conditional breakpoint, right click on a line without breakpoint. You can also set breakpoints on a certain event or event listeners, see the option in the lower right screen area of the figure above. For more information, see the tutorials for your respective browser that are available in the internet.
In most cases after setting a breakpoint, you have to reload the page to execute the code again and to make it stop at the respective line. If you use Internet Explorer, choose Start Debugging in the developer tools to activate your breakpoint.
Adding Variables to Watch
To add a variable to the list of watched variables, open the context menu for the variable in the code line and choose Add to watch. Another option is to choose the + button at the top of the watch list to add a new line, in which you can then enter the name of the variable you want to watch.
Modifying Variables
If you want to modify a variable to find out if the code works correctly with a different value, open the console, for example by choosing ESC in the debugging tool and enter the new value manually directly in the JavaScript code. To confirm the change, choose ENTER in Chrome and Execute in Firefox.
Stepping Through Executed Code
In ABAP, a yellow arrow indicates the line of code that is currently being executed. In Chrome, the arrow is red and the code line is highlighted. The following table gives an overview of the function keys for the ABAP workbench and Java Script:
Step-by-step execution, also stepping into functions and loopsF5F11
Step-by-step execution, stepping over functionsF6F10
Skipping the rest of the current function and stepping out to the last cursor positionF7SHIFT+F11
Resume executionF8
(Internet Explorer: F5)

Data Binding

Sorry! SAP, I am not sure if  you will keep this nice document active, so I am making a copy of it for future reference.

Data Binding

You use data binding to bind two data sources or information sources together to keep them in synch: All changes in one data source are also reflected in the other data source.
For data binding, you need a model and a data binding instance: The model instance holds the data and provides methods to set the data or to retrieve the data from a server. It also provides a method for creating bindings to the data. When this method is called, a data binding instance is created, which contains the binding information and provides an event, which is fired whenever the bound data is changed. An element can listen to this event and update its visualization according to the new data.
The UI usually uses data binding to bind UI controls to the model, which holds the application data, so that the controls are updated automatically whenever application data is changed. Data binding is also used when changes in the control cause updates in the underlying application data, such as data being entered by a user.
The default binding mode for model implementations (if not implemented otherwise) is two-way binding and the supported binding modes by the model are one-way binding, two-way binding and one-time binding. The default binding mode can be changed by the application for each model instance. A model implementation should specify its supported binding modes and set the default binding mode accordingly (e.g. if the model supports only one-way binding the default binding mode should also be set to one-way).
To learn more about data binding use the tutorial: Data Binding
Binding Modes
The binding mode defines how the data sources are bound. The different model implementations require specific binding modes. The resource model, for example, only supports one-time binding, that is, a binding from the model to the view.
SAPUI5 provides the following binding modes:
  • One Way: One-way binding means a binding from the model to the view; value changes in the model update all corresponding bindings and the view
  • Two Way: Two-way binding means a binding from the model to the view and from the view to the model; value changes in the model and in the view update all corresponding bindings and the view and model, respectively
  • One Time: One-time binding means from model to view once.
The following table shows, which binding modes the respective binding models support:
OData modelX (default)XX
JSON modelXX (default)X
XML modelXX (default)X
Resource model----X
NoteThe following image contains links to more information.
The OData V2 Model enables binding of controls to data from OData services.The sap.ui.model.odata.v4.ODataModel is the model implementation for consuming an OData V4 service.The JSON model can be used to bind controls to JavaScript object data, which is usually serialized in the JSON format.The XML model allows to bind controls to XML data. It is a client-side model intended for small datasets, which are completely available on the client. The XML model does not contain mechanisms for server-based paging or loading of deltas. It supports two-way binding.The resource model is used as a wrapper for resource bundles. In data binding you use the resource model instance, for example, to bind texts of a control to language-dependent resource bundle properties.
The resource model only supports the one-time binding mode because it deals with static texts only.
For more information, see the API Reference for sap.ui.model.BindingMode in the Demo Kit.
Binding Types
SAPUI5 supports three different binding types: Property binding, aggregation binding, and element binding. The binding types are introduced in the following sections.