SAP TechEd 2010
1
SAP TechEd 2010
2
SAP TechEd 2010
SAP TechEd 2010
4
SAP TechEd 2010
5
SAP TechEd 2010
A container manages its children using an instance of Layout. The layout defines how the children are arranged in their container. All non-container UI elements must be placed in a container. Containers can also contain sub containers.The size of the container is specified using the attributes width and height. Width and height may be specified by CSS (cascading-style-sheet) size values. This is a percentage value like "50%", a pixel value like "100px" or a relative font size value like "1.5em" or "1ex". Root UI Elements of Views You can use the following UI elements as the root element of a view using the Switch Root Element function in the context menu: ContextualPanel, FlashIsland, Group, PageHeader, PageLayout, Panel, PanelStack, SilverlightIsland, Table, TabStrip, TransparentContainer, Tray, Tree, ViewContainerUIElement Note: ScrollContainer ( class CL_WD_SCROLL_CONTAINER) UI element is deprecated. Instead use TransparentContainer. Special UI Element Containers There are special UI elements like the TabStrip or PanelStack UI element. They can be considered containers, but unlike a UI element container can only contain certain sub-elements. A TabStrip UI element, for example, can only contain Tab subelements. Each Tab sub-element can contain a title (Caption UI element), a toolbar and additional UI elements to display a content.
SAP TechEd 2010
What the property isLayoutContainer means
The initial value of the TransparentContainer‟s isLayoutContainer property is true. The property determines whether this transparent container is used purely for layouting. The alternative is a container used for grouping e.g. input fields and labels in order to create a "form" in a way that has meaning to the end user. Such a grouping container needs an accessibility description (which a pure layouting container does not need) and will allow keyboard navigation (skipping). NOTE: Do not carelessly mark containers as non-layouting!
SAP TechEd 2010
*New in SAP NetWeaver 7.0 EhP1: Toolbars in Tray, Group and Panel containers can have a ToolBarPopin with TextBar and Content
NOTE: The above screenshot of a „Group Container UI element sample‟ highlights „technically‟ possible design and function aspects of the Web Dynpro ABAP Group UI element. It does not visualize a realistic „user centric‟ UI following proven User Interface design principles.
SAP TechEd 2010
Popup menu in Tray Toolbar and ToolBarPopin with TextBar and content are new in SAP NetWeaver 7.0 EhP1 (SAP ERP 6.0 EhP4, SAP Business Suite 7) Also possible but seldom used: Toolbars in Tray containers can have a ToolBarPopin with TextBar and Content NOTE: The above screenshot of a „Group Container UI element sample‟ highlights „technically‟ possible design and function aspects of the Web Dynpro ABAP Group UI element. It does not visualize a realistic „user centric‟ UI following proven User Interface design principles.
SAP TechEd 2010
*New in SAP NetWeaver 7.0 EhP1: Toolbars in Tray, Group and Panel containers can have a ToolBarPopin with TextBar and Content
Notes:
Do not mix Trays and Panel on same screen to avoid confusion for end users.
With its three different toolbar flavors the new Panel UI element container is powerful enough to replace Trays and Groups.
SAP TechEd 2010
The ScrollContainer UI element is the same as the TransparentContainer with the additional functionality in that it can have vertical and horizontal scroll bars. Avoid Scrolling at all and don’t use ScrollContainers in Tabs To fulfill the immediacy principle within a Tab all its UI elements should be directly visible without the necessity to scroll. When the size of embedded UI elements gets too large don‟t use ScrollContainers or other scrollable container UI elements but reconsider your UI design or view composition in terms of Web Dynpro by separating content to another view and to display it via navigation.
SAP TechEd 2010
Dynamic UI Programming Aspects The layout specifies the arrangement of the UI elements in their UI element container. An object of the type CL_WD_LAYOUT can be added to each container. To each child object contained in this container, an appropriate object of the type CL_WD_LAYOUT_DATA can be added. This CL_WD_LAYOUT_DATA object specifies the layout properties of the corresponding child - for example, the position in a coordinate system defined by the layout. In SAP NetWeaver 7.0 EhP2 the CL_WD_LAYOUT_DATA class is extended by the following subclasses: • CL_WD_FORM_DATA* • CL_WD_FORM_HEAD_DATA* • CL_WD_FORM_TOP_DATA* • CL_WD_FLOW_DATA • CL_WD_GRID_DATA • CL_WD_MATRIX_DATA • CL_WD_MATRIX_HEAD_DATA • CL_WD_ROW_DATA • CL_WD_ROW_HEAD_DATA • CL_WD_MELTINGGROUP_DATA * New in SAP NetWeaver 7.0 EhP2
SAP TechEd 2010
Technically in HTML:
The final appearance depends on the client technology and the size of the browser window.
SAP TechEd 2010
Row Layout A RowLayout has a similar behavior to the MatrixLayout. However, it sequentially assigns the UI elements to exactly one column. Once a UI Element in the container sets this property to RowHeadData, all proceeding UI elements will appear behind it on the same row, until a UI Element is encountered with this property set to RowHeadData, in which case a new row will then be started. In the above example the Root TransparentContainer is set to RowLayout. All Label UI Elements have the property layoutdata set to RowHeadData. The button as well is set to RowHeadData so that is shows up on its own row. Notice that there is no control of vertical spacing. It is a great advantage of the RowLayout that you can easily create consistent layout structures using the predefined cell classes, which are also provided in the MatrixLayout. NOTE: Choose the row layout over the grid or matrix layout if you don‟t need horizontal alignment (one column layouts). RowLayout technically in HTML:
SAP TechEd 2010
MatrixLayout A MatrixLayout arranges the container children in a tabular format, similar to the GridLayout. You can use the properties stretchedHorizontally and stretchedVertically to specify whether or not the UI elements match the container size. You cannot explicitly define the number of columns, for example, which you can do when using the GridLayout. Instead you assign a MatrixHeadData object to a UI element so this UI element is wrapped. It is a great advantage of the MatrixLayout over the GridLayout that you can easily create consistent layout structures using the provided cell classes.
SAP TechEd 2010
NOTE: Instead of the GridLayout, use the MatrixLayout whenever possible. A GridLayout arranges the container children in a two-dimensional grid with a defined column number and any number of rows. Line breaks can be defined. Line breaks are automatically inserted when a UI element is too long to be displayed within one row.
SAP TechEd 2010
When the RowLayout is implemented in an application, performance is better than if a MatrixLayout were used, but the layout flexibility is not compromised. For this reason, you should structure the view and container in horizontal areas as early as possible, using the RowLayout.
SAP TechEd 2010
Based on its flexibility and its ease of use you should favor the use of the MatrixLayout. This won‟t enhance the performance, but we think it is easier for the application developer to work with it. Additionally the MatrixLayout provides the properties hAlign, vAlign to specify the horizontal and vertical alignment of the contained UI elements as well as the vGutterproperty for horizontal distances between the cell contents. Avoid Using the GridLayout The GridLayout should not be used in new view layouts any longer. This recommendation is based on the fact that the GridLayout cannot be laid out with predefined (like “rPad”), but with any combination of values (with CSS-sizes) for the different padding properties.
SAP TechEd 2010
Note: The stretchedVertically property works in the same manner, but vertical of course. Generally you don‟t run into this problem as often since most don‟t oversize vertically, but none the less this is good to remember.
SAP TechEd 2010
Runtime – For dynamic view layouts programmatically created at runtime in hook method WDDOMODIFYVIEW( ):
When dynamically creating matrix or grid layout object instances (CL_WD_MATRIX_LAYOUT, CL_WD_GRID_LAYOUT) inside a container UI element the layout properties stretchedHorizontally and stretchedVertically are set false by default.
But these default settings do not lead to the best layout in most cases.
Exception: To realize 100% Height size in Web Dynpro ABAP UIs you MUST vertically stretch the Matrix Layout!
Design Time - For Static View Layouts created at design time in ABAP Workbench:
When using the matrix or grid layout inside a container UI element the layout properties stretchedHorizontally and stretchedVertically are set false by default (other than the runtime instance default!).
SAP TechEd 2010
Based on using given Web Dynpro ABAP UI Container Layouts (Grid, Matrix, …) there is no possibility or workaround to solve the described layout limitations! Solution: Apply new FormLayout available with SAP NetWeaver 7.0 EhP2
21
SAP TechEd 2010
22
SAP TechEd 2010
Form Layouts are „non-pushing‟ = content does not „push‟ layout cells! If a label is too long to be displayed completely, the label text is cut and “…” is added to indicate that the label has been cut. A tooltip displays the complete label text.
23
SAP TechEd 2010
24
SAP TechEd 2010
25
SAP TechEd 2010
Note: Elements belonging to RowLayout only have the shown properties if their layoutdata property is set to RowHeadData.
SAP TechEd 2010
Special UI Element Containers There are special UI elements like the TabStrip UI element. They can be considered containers, but unlike a UI element container can only contain certain subelements. A TabStrip UI element, for example, can only contain Tab subelements. Each Tab subelement can contain a title (Caption UI element), a toolbar and additional UI elements to display a content.
SAP TechEd 2010
SAP TechEd 2010
SAP TechEd 2010
SAP TechEd 2010
IMPORTANT NOTE: Allthough the LayoutData Properties are listed on UI element level they refer to the virtual cell containing the UI element, but not to the UI element itself. The LayoutData defines cell specific layout properties (like width, height, vertical gutter or paddings) and how a UI element is laid out in its embedding container cell, i.e. on the container grid (vertical alignment, horizontal alignment).
SAP TechEd 2010
Note: • Some properties are common to the layout cell and to the UI element itself, like width or hAlign depending on the given layout of the embedding container (like MatrixLayout) and the contained UI element (like TextView with hAlign and width). • Make sure, that you clearly differentiate between LayoutData properties referring to the UI element„s embedding virtual container cell and UI element properties referring to the UI element itself.
SAP TechEd 2010
33
SAP TechEd 2010
SAP TechEd 2010
SAP TechEd 2010
SAP TechEd 2010
From a performance point of view it is often better to have one large grid or matrix layout with column spans where necessary instead of a nested layout that includes transparent containers with flow or grid layout and so on. Complex Views Complex views can require the usage of many containers and sub-containers. Some views require the usage of not only the Root Transparent Container, but Group containers that in turn may contain Tray containers, which in turn may contain Transparent containers to achieve proper spacing, but try to avoid nested containers as much as possible! Some containers use matrix layouts that have long columns, in this case some rows might want multiple UI Elements on a column
To do this you can create a Transparent container for that row‟s column and have it contain multiple UI Elements.
SAP TechEd 2010
A reasonable usage of the TransparentContainer is to change the layout of inner UI elements compared with the layout of the embedding container. This is often done to arrange Button UI elements based on a FlowLayout whereas the embedding container UI element has a MatrixLayout General Rule: Never, Ever Misuse Web Dynpro UI Elements Do not modify, use, or combine UI elements for a purpose they have not been designed for. This means do not try to produce a certain display result of a UI element by setting improper property values. An example is trying to produce an empty Group UI element in order to get a highlighted header text. The appearance of Web Dynpro UI elements is subject to change. With the Web Dynpro UI Element technology, changes to the controls can be applied centrally, without having to edit individual screens. Misused Web Dynpro UI elements will most probably be displayed other than before in this case.
SAP TechEd 2010
Intrinsic sizing means that Web Dynpro (the Web Dynpro UI renderer and the Web Dynpro Client) adequately specifies anc calculates these sizing properties itself.
The size of a Web Dynpro container is specified using the attributes width and height.
Width and height may be specified by CSS (cascading-style-sheet) size values.
This is a percentage value like "50%", a pixel value like "100px" or a relative font size value like "1.5em" or "1ex".
SAP TechEd 2010
Exchanging Element Definition In the View Designer in the layout you can replace each UI element with another UI element, for example, replace a Button with a InputField. This works the same as when exchanging ROOTUIELEMENTCONTAINER elements. • When UI elements are exchanged, aggregated elements are transferred too, as far as possible. This means that it is not necessary to delete root child elements in advance, since the root is now replaced centrally through the element exchange. • It is always the targets of the respective aggregation that are exchanged, for example, all UI elements in the case of child elements, and all Table Cell Editors in the case of Table Cell Editors. • The properties of UI elements are also automatically transferred as far as possible. • If possible the primary property bindings are automatically transferred. You can exchange the element definition by choosing Exchanging Element Definition in the context menu of a UI element in the preview or in the UI element tree.
SAP TechEd 2010
41
SAP TechEd 2010
42
SAP TechEd 2010
What does 100% mean? At first we have to get a better understanding of the meaning of “100% height”. Let‟s study a toy model. Assume we have two controls in our browser window: a red and a blue one. Controls in this context could be DIVs or a TransparentContainer UI Element containing an InteractiveForm UI element. If the height of the blue control is 100% it doesn‟t mean that it should cover 100% of the browser height but 100% of the height inside the red control. If the red control‟s height is 100px then the blue one will also be roughly 100px high minus some padding, margin, etc. Please note that resizing of the browser will not change either the size of the red or the blue control. There are cases when the actual height of the blue and the red control will exceed the absolute height of the red control. The reason is a general principle in HTML: controls can push. The browser calculates a minimum height (and width) for the content of a DIV or TABLE (e.g. a Web Dynpro ABAP view element TransparentContainer or MatrixLayout) and then the surrounding control will be stretched to accommodate the content. Please note that the minimum height for a UI element that requires a plugin e.g. InteractiveForm, JNet, FlashIsland, etc. is usually 0px! So if you add buttons and texts to a transparent container with height 1px, the buttons and texts will “push” the height of the transparent container and they are visible. If you try the same with an InteractiveForm you are in for bad surprise: the InteractiveForm will hardly be visible. Assume now that both the red and the blue control have 100% height. Then both of them will be as large as the browser window (minus padding, margin, etc.) and both of them will be elastic controls.
43
SAP TechEd 2010
There are several layouts in Web Dynpro ABAP but only MatrixLayout and GridLayout are safe to be used in containers that contain an elastic view element. All others may lead to disappointing results because they either contain SPANs (FlowLayout, RowLayout) or because they are rigid grids (FormLayout). You may find that Row- and FlowLayouts may work under certain circumstances but problems have been reported in the past and therefore they should be avoided.
44
SAP TechEd 2010
The naïve approach of setting the UI element‟s height to 100% may not always suffice. HTML-based Web Dynpro UI elements like Groups, Trays, etc. might not stretch as much as intended. UI elements that represent browser plugins (e.g. InteractiveForm) may even collapse to a line. This leaves a lot of developers puzzled. This lecture section tries to explain how a Web Dynpro ABAP application has to be tailored to embed an elastic UI element and it gives some background information. In theory, the Golden rule above applies to width as well. Experience shows that browsers are much more benign when dealing with 100% width than 100% height although there have been problems in Safari 4. (Please refer to PAM if you want to know which versions of Web Dynpro ABAP support which browser). If you violate the Golden Rule you may be lucky – particularly if you use Internet Explorer – but other browsers might be less forgiving. Nothing serious will happen to HTML-based view elements. Usually they will “push” and be visible anyway. However, if you use a view element based on a plug in like e.g. InteractiveForms no “pushing” can be expected. The control will collapse to a line if the Golden Rule is violated only once!
45
SAP TechEd 2010
46
SAP TechEd 2010
There are several layouts in Web Dynpro ABAP but only MatrixLayout and GridLayout are safe to be used in containers that contain an elastic view element. All others may lead to disappointing results because they either contain SPANs (FlowLayout, RowLayout) or because they are rigid grids (FormLayout). You may find that Row- and FlowLayouts may work under certain circumstances but problems have been reported in the past and therefore they should be avoided. Notes on Step 5: Further adjustments need to be made if a WD ABAP application is embedded in a SAP NetWeaver Portal. The Height Type of the relevant iView must be set to FULL_PAGE. The AUTOMATIC height type may cause UI elements with a height of 100% not to be displayed or not to be displayed in full. If it is displayed next to other iViews on the same page, the application may be in 100%-mode and may appear too large - it should only take up the space it really needs. In this case the Web Dynpro Application Parameter WDUSPPORTSFULLHEIGHT needs to be set to 2. See SAP Note 1266588 …
47
SAP TechEd 2010
See Also Related SAP Notes dealing with the 100% Height Topic Note 1266588 - Automatic height adjustment does not work Note 1347454 - WD ABAP: Active UI Elements with height 100% in Firefox Note 1351822 - WD ABAP: UI Elements of 100% height in popup windows
48
SAP TechEd 2010
See also SAP Note 1253282 - Layout of the table UI element and SAP Note 999498 - Correct use of Web Dynpro ABAP UIElements
49
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 Correct use of Web Dynpro ABAP UIElements Also consider the following: The browsers determine the width of an InputField in different ways. In Internet Explorer, the width of the InputField is the same as the width of its content. This is not the case in any other browsers. As a result, a column with InputFields in Internet Explorer is as wide as the widest text that was entered. In other browsers, it is as wide as the heading of the column.
In addition, we do not recommend mixing absolute units (ex,px,em) and relative units with regard to table column widths in Internet Explorer: the widths are usually set incorrectly as a result.
50
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 Correct use of Web Dynpro ABAP UIElements fixedTableLayout (This property can be personalized by administrators) With fixedTableLayout each Table column has the exact width specified. In this case, the widths for the Table and TableColumns must be specified. For more information, see SAP Note 1253282. If the content is larger it is cut off on the right. Without fixedTableLayout, the width of the column is as specified or as large as the widest visible TableCellEditor. Here, the table column widths are minimum widths. In this mode, the width distribution of the table columns can change when you scroll through the Table vertically. Note If scrollableColCount=-2 is used, fixedTableLayout should be set.
51
SAP TechEd 2010
52
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 Correct use of Web Dynpro ABAP UIElements
53
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 Correct use of Web Dynpro ABAP UIElements
54
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 Correct use of Web Dynpro ABAP UIElements
55
SAP TechEd 2010
Introduced new application parameter WDUIGUIDELINE. Its default value GL11 (UI-Guideline 1.1) ensures that your application works as in the past. Setting it to GL20 (UI-Guideline 2.0) leads to a new look and feel for tables and layouts. The Table is subject to some major changes in the GL2.0-mode: Tables will now be filtered and sorted using a table header menu which also contains filter value suggestions (here e.g. all airlines that can be found in the table).
Table column resizing via click and drag has been introduced in 7.01. Now, Web Dynpro ABAP offers a second column resizing behavior that also allows client-side smooth column scrolling. This feature can be switched on and off by end-user personalization. If the property fixedTableLayout=true and personalization is activated, the user can change the width of the columns by dragging the column boundary with the mouse. The new values are persisted in the user's personalization data. The selection of the table works differently: the selection buttons on the left are toggling. If the table has no lead-selection and no selection actions are defined (the preferred option in BTC) selections no longer cause roundtrips and always follow the focus (e.g. if you click into cells or navigate via keyboard).
56
SAP TechEd 2010
Client-side column scrolling and column-based table column resizing is switched on for a Web Dynpro ABAP Table if the following conditions hold:
The new WD ABAP application parameter WDUIGUIDELINE is set to GL20 and columnResizeBehavior=preserveOtherColumns are set The property Table.width is set to a value. All units are allowed: px,em, ex and %. If a width is not set in this way, the Web Dynpro Framework attempts to determine a width from the cell editor. The property Table.fixedTableLayout is set to true. The property width is set for all aggregated TableColumns and AbstractMasterTableColumns (i.e. TreeByKeyTableColumn and TreeByNestingTableColumn) of the table and none of those widths are relative i.e. only the unites px, em and ex are allowed The property fixedPosition of all TableColumns is set to notFixed. Caution: fixed table columns are not possible with columnResizeMode = preserveOtherColumnWidths.
57
SAP TechEd 2010
58
SAP TechEd 2010
We recommend that you do not insert too many columns in a Table. However, should this be necessary, horizontal column scrolling can prevent users from having to scroll horizontally in the browser window. The following modes for column scrolling are available: 1) Server-Side Horizontal Column Scrolling
Fixed specification of the number of visible columns. This mode is activated by specifying a fixed number of scrollable columns in property scrollableColumnCount. The maximum number of columns that can be displayed is always this specified number, and a paginator is provided in the footer for scrolling. Columns fitting in the Table: As many columns as fit in the Table will be displayed. If one of the columns is too wide, has a wrong unit, or has no width specification at all, it will be displayed individually in the full width of the Table. Note that if there is an existing selection column, the specified Table width is increased by this column. The following prerequisites must be met for this mode to function reliably:
scrollableColumnCount = -2 activates the mode fixedTableLayout=true should also be activated so that columns are only as wide as specified. The width of all columns and of the Table must be specified, and the widths must be set in the same unit (exception: the Table width can be in a different unit if the column widths are specified as a percentage)
1) Client-Side Smooth Horizontal Column Scrolling (SAP NetWeaver 7.02)
If WDUIGUIDELINE=GL20 and columnResizeBehavior=preserveOtherColumns are set, you get a smooth horizontal column scrolling on the client side. 59
SAP TechEd 2010
60
SAP TechEd 2010
61
SAP TechEd 2010
62
SAP TechEd 2010
For more details See documentation in SAP Online Help - http://help.sap.com : SAP NetWeaver 7.0 EhP1 > Web Dynpro for ABAP > Web Dynpro ABAP: Development in Detail > Quality Assurance and Supportability > Performance Monitor http://help.sap.com/saphelp_nw70ehp1/helpdata/en/4b/4cdb2ffcf74d39ac958fe2170 2887b/frameset.htm The performance monitor is used to check the general performance of Web Dynpro applications. The monitor does not provide detailed information, it just gives a rough assessment of performance.
Caution Do not use the performance monitor for accurate performance measurements. You use it to get an overall view of whether performance is satisfactory or whether further performance analyses are necessary.
63
SAP TechEd 2010
Note: Prerequisites to apply Web Dynpro ABAP Performance Monitor
User needs debug rights Performance Monitor must be activated in Web Dynpro Trace Tool. It is inactive by default. The Web Dynpro trace tool can be activated for a specific user on an application server. Start Web Dynpro application using the URL parameter sap-wdperfMonitor=X All Web Dynpro applications started within 30 minutes can then be traced for this user with an activated Performance Monitor.
For more details See documentation in SAP Online Help - http://help.sap.com : SAP NetWeaver 7.0 EhP1 > Web Dynpro for ABAP > Web Dynpro ABAP: Development in Detail > Quality Assurance and Supportability > Web Dynpro Trace Tool or URL http://help.sap.com/saphelp_nw70ehp1/helpdata/en/43/2a63b164700b19e1000 0000a1553f6/frameset.htm
64
SAP TechEd 2010
See also: SAP Design Guild article “The PeP Project: Evaluating the Responsiveness of SAP Applications from a User-Centered Perspective“ By Gerd Waloszek, SAP User Experience, SAP AG, and Ulrich Kreichgauer, oCTO, SAP AG – October 13, 2009 • original article (story), http://www.sapdesignguild.org/editions/edition10/ux_pep.asp Table: PeP adaptation of human time ranges table, including variations in parentheses
End to End Response Time can be split into main contributors
Server part Client part Network part in WAN scenarios (out of focus in this lecture)
Break down of End to End Response Time for simple tasks
Server part: < 300ms Client part: < 700ms
Why does the client consume that much time? Rendering in web browsers is slow (compared to others GUIs like NWBC or SAP GUI) HTML parsing, rendering and DOM tree manipulations are costly wrt performance
65
SAP TechEd 2010
See also: SAP Design Guild article “The PeP Project: Evaluating the Responsiveness of SAP Applications from a User-Centered Perspective" By Gerd Waloszek, SAP User Experience, SAP AG, and Ulrich Kreichgauer, oCTO, SAP AG – October 13, 2009 • original article (story), http://www.sapdesignguild.org/editions/edition10/ux_pep.asp
The overall end to end response time can be split into its two main contributors, the client part and the server part; the network is out of focus in this document. This lecture presentation concentrates on simple tasks (also see table in previous slide) as they occur in most application frequently. To assure the server has sufficient time to process complex requests and the end to end time stays below one second (upper bound for simple tasks), the Client CPU Time for Rendering must be kept below 700ms. As the client often consumes the major part of the overall end to end response, it shows the highest potential for performance optimizations. The simplest rule to save time and build fast screens is keeping them as simple as possible; that means leaving as many UI elements as possible by putting not to many different tasks on one screen but split it into several ones.
66
SAP TechEd 2010
The given values should be understood as indicators showing a kind of trend; summing up the price tags of all UI elements of a screen will typically not represents its real Client CPU Time for Rendering. Another very important factor which can influence the Client CPU Time for Rendering is the used Client hardware. The reported numbers are based on measurements done on reference hardware for NetWeaver 7.20 (2.4 GHz single core CPU, 1 GB Memory, Windows XP SP2, Internet Explorer 6) which reflects the standard equipment used at many customer sites.
67
SAP TechEd 2010
Rendering Times of UI elements depend on their complexity Internal layout Style attributes Shadowing Shading Nesting levels (table, critical, average) Overall complexity of the screen on which UI element is used
68
SAP TechEd 2010
One of the simplest rules for fast screens might be to keep them as simple as possible; designing them more complex by putting more and more elements and information on a screen can result in horrible end to end response times. The effect of the overall complexity of a screen can be shown best by using an example. The complexity of the above Web Dynpro ABAP UI screen could be decreased dramatically by reducing the number of displayed line items from 22 entries to 10 ones in a first step (1) and by removing the phase indicator (2) in a second step. Although removing the phase indicator without replacement is no option in real life, this example clearly demonstrates how single UI elements can contribute to the client CPU time for rendering consumption and hence slow down the overall performance of a screen. The html table nesting level as well as the html critical nesting level stays stable over all three screens. Therefore these metrics do not influence the performance in this example.
69
SAP TechEd 2010
The reduction of the Client CPU Time can be explained with the decreased overall complexity of the internal DOM tree representation of the screen within the browser (also see result table on next slide).
70
SAP TechEd 2010
71
SAP TechEd 2010
FPM Classroom Training NET313: (http://www.sap.com/usa/services/education/)
Three / four days classroom training for application developers at Customer Site
FPM@SDN (https://www.sdn.sap.com/irj/sdn/nw-wdabap#section2 Follow „Floorplan Manager‟)
Developer„s Guide
Introduction to application programming based on FPM
FPM@SDN-Forum (https://www.sdn.sap.com/irj/scn/forum?forumID=296&start=0)
General discussions round about the Floorplan Manager
72
SAP TechEd 2010
Because Web Dynpro comes with a big choice of UI elements and layout managers, Web Dynpro applications tend to look alike. The Floorplan Manager, which was introduced in SAP NetWeaver 7.0 EHP 1, goes a step further: It offers building blocks that can be arranged on a page and configured. This allows for cross-project consistent UIs. Benefits UI Consistency: consistency across Web Dynpro ABAP applications with unified look and feel. Configurability and Reusability: Easy configuration and assembly of predefined (reusable) building blocks called Floorplans and Generic UI Building Blocks (“code free UI”) Adaptability: Modification free customers adaptations of Web Dynpro ABAP applications delivered by SAP based on simple UI configuration SAP UI Guideline Compliance: compliance with SAP User Interface and architecture guidelines. Efficiency: APIs provided for standard functionality like event handling, message management, navigation, dynamic behavior or personalization. The Floorplan Manager is the standard tool for the creation of new Web Dynpro ABAP applications in the SAP Business Suite, for instance ERP, PLM, or SRM.
73
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
74
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
75
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
76
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
77
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
78
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
79
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
80
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
81
SAP TechEd 2010
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
82
SAP TechEd 2010
Generic UI Building Blocks are …
Guideline conform UI content templates
Full integration into FPM Framework
Generic configuration based on feeder classes
Complete separation of User Interface and Business Logic
Business Logic in feeder classes
Code-free configuration of User Interfaces
Outlook to future GUIBBs:
Power List GUIBB
Reuse UIBBs (Attachments, Notes, …)
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
83
SAP TechEd 2010
Personalization (End User):
Applies to the end user only.
Personalization of the application UI
FPM Customizing (Admin):
Applies to all users at the client.
Delta handling at the configuration
FPM Configuration (Developer):
Applies to all users and clients
Configuration of the overall application
Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation, messaging and personalizing SAP HCM transactions” (Content Area: Human Capital Management) ASUG October 2010, Orlando
84
SAP TechEd 2010
85
SAP TechEd 08
SAP TechEd 2010
1. SAP supplies the overall WD Component in a FPM application. In this case the FPM Component is FPM_OVP_COMPONENT. 2. Via Component Configuration each inner Web Dynpro Component is defined. These inner Web Dynpro Components are called UIBBs – UI Building Blocks. 3. Each UIBB WD Component has a component usage declared for another WD Component that will act as the Shared Data Component. This component must have the IF_FPM_SHARED_DATA interface. This is where all the common context data is modeled and all shared methods are declared. 4. Whenever a component is instantiated by the FPM, the FPM analyzes all usages of that component. If it detects a usage pointing to a component which implements the IF_FPM_SHARED_DATA interface, a singleton of this shared data component is automatically attached to the usage.
SAP TechEd 2010
87
SAP TechEd 2010
88
SAP TechEd 2010
89
SAP TechEd 2010
Warning: Cross Component Context Binding always creates copies of the bound context at runtime. This is very different than context mapping between controllers within the same component – which always uses only a single copy of the context. Although the framework takes care of the logic to keep the context copies in sync, this can still greatly add to the memory requirements of your application. The more UIBBs you have, the greater the number of copies of the shared context nodes. Try to limit the amount of data you place into the shared data context and in each UIBB only bind the sections of the context that you absolutely need for that particular UIBB.
90
SAP TechEd 08
SAP TechEd 2010
1. SAP supplies the overall WD Component in a FPM application. In this case the FPM Component is FPM_OVP_COMPONENT. 2. Via Component Configuration each inner Web Dynpro Component is defined. These inner Web Dynpro Components are called UIBBs – UI Building Blocks. 3. In this case we have UIBBs that are no implemented as freestyle Web Dynpro Components. Instead we have a List Generic UIBB (GUIBB). This is a standard SAP Web Dynpro Component named FPM_LIST_UIBB which is implemented as a Feeder Class. Feeder classes are standard ABAP classes which contain a certain interface (IF_FPM_GUIBB_LIST in this case). The SAP Component (FPM_LIST_UIBB) will call methods of the this class for its implementation. 4. Instead of a component usage and a central shared data component, we instead use a normal ABAP class. It is designed with the Singleton Instantiation approach so that all request of an object instance will return the same shared instance. 5. Both the Feeder Class GUIBB and the Web Dynpro Component UIBB call a Static Method of the Singleton class to recieve a reference to its instance. They can then call methods or access the public attributes of this instance.
SAP TechEd 2010
92
SAP TechEd 2010
93
SAP TechEd 2010
94
SAP TechEd 2010
95
SAP TechEd 2010
96
SAP TechEd 2010
97
SAP TechEd 2010
98
SAP TechEd 2010
99
SAP TechEd 2010
100
