Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces

[BeGanz]

New Web Dynpro Java learning material with sample application on Web Dynpro Java UI design 

 

 In this WebLog I want to announce our new presentation/exercise/sample combination on "Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces". Download this new material to understand and apply important concepts and practical guidelines for developing Web Dypro view layouts:

• In-depth technical presentation: Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces - Presentation
• Exercise document: Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces - Exercises
• Software Component Archive: Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces - Zipped SCA Archive  (with Web Dynpro DCs to implement and run the Web Dynpro exercise application)
• SAP NetWeaver CE 7.11 EhP1: EHP1 for SAP NetWeaver Composition Environment 7.1 - Preview Version

This new Web Dynpro Java learning material was first presented at SAP TechEd '08, lecture COMP266 on "Best Practices for Building State of the Art Web Dynpro Java User Interfaces". 

Enjoy Web Dynpro Java,

Bertram Ganz, Mykola Gorbarov, Ivan Perelomov, NW Core UI&AM F, SAP AG

Abstract

Within this hands-on material you will learn important concepts and practical guidelines for building state-of-the-art Web Dynpro Java user interfaces.
We introduce different container layouts, provide rules for the horizontal and vertical sizing of UI element containers, container cells and UI elements and differentiate the visibility, readOnly and enabled states of UI elements. 
We cover additional UI design aspects like nesting container UI elements or finding the best container layout to optimize rendering performance.
We finally introduce new Web Dynpro UI elements and enhancements in SAP NetWeaver CE 7.1, like the new column layout for the vertical alignment of UI elements across component borders.

Table of Content

1. Web Dynpro UI Containers
2. Web Dynpro UI Container Layouts
3. Web Dynpro UI Element Positioning and Virtual Layout Cells
4. Web Dynpro UI Element Sizing
5. Web Dynpro UI Element States
6. What‘s New in SAP NetWeaver CE 7.1

Exercises

Four hands-on exercises enrich this presentation based on a SCA archive comprising Web Dynrpo DCs to be imported into the SAP NetWeaver CE 7.11 EhP1 Developer Studio:

1. Creating a Simple Search View with GridLayout
2. How to build an Advanced Search Form using MatrixLayout
3. Order Details View
4. Creating final Sales Order application

Slide Galery

 View Layout Metamodel

Virtual Cells inside UI Element Containers

ReadOnly versus Enabled UI Element states

 Tray UI Element Design