wd ui building blocks

7/29/2019 WD UI Building Blocks

1/19

1

SAP TechEd 04

Web Dynpro for Java:UI Building Blocks

SAP NetWeaver Product Management

SAP AG

Configuring UI Building Blocks

Overview and Benefits

Floor Plans and UI Patterns

UI Building Blocks and Web Dynpro Foundation


2/19

2

SAP TechEd 04





SAP AG2005,/ 4

Motivation: Protecting Your Investment

Development time

Errorpotential

high

long short

low

Web Dynpro FoundationWeb Dynpro Foundation

BSPBSP

Web Dynpro UI Building BlocksWeb Dynpro UI Building Blocks

ABAP DynprosABAP Dynpros

Thanks to the clear separation of the UI and the business

logic and the use of UI building blocks, Web Dynpro

signif icantly reduces development costs.

Thanks to the clear separation of the UI and the business

logic and the use of UI building blocks, Web Dynpro

signif icantly reduces development costs.


3/19

3

SAP TechEd 04

SAP AG2005,/ 5

Motivation

Inconsistent UI behaviorDifferent UIs for the same user task

Training effort for end users

Lot of work for customers to train

the users

Different UI technologiesPoor integration and expensive to

maintain

Difficult to adaptHard/impossible to adapt to

customer needs

Problems Goals

Improve UI consistencyUse standardized UI building blocks

Improve end user efficiencyUse standardized UI building blocks

Improve development efficiencyOne UI technology (Portal & Web

Dynpro)

Improve adaptabilityEnable business experts to build or

adapt the UI

SAP AG2005,/ 6

What is a UI Building Block?

A UI bui ld ing block is a generic, configurable Web Dynpro

component. Each UI building block is designed for a task common to

a large number of applications.

Example: A context navigation panel

List of Views

Search area

Links to other floor

plans and related

documents


4/19

4

SAP TechEd 04

SAP AG2005,/ 7

What is a Floor Plan?

A f loor plan is a container for several UI patterns. It determines how

they are arranged and how they interact with one another.

Example: A floor plan containing three UI patterns

UI pattern

UI pattern

UI pattern

SAP AG2005,/ 8

Benefits of UI Building Blocks

Productivity

Developers can focus on business logic

Developers require less training

Less application code higher quality UI easier to main tain

Quality

At tract ive, user-friendly in ter faces

Developers can use predefined solutions for typical interactiontasks:

Identifying objects

Entering data

Displaying hierarchical data

Developers can configure each UI to meet an applicationsspecific needs

The UI can be enhanced/improved centrall y

UIs in different applications are consistent with each other


5/19

5

SAP TechEd 04

SAP AG2005,/ 9

Development Process for UI Building Blocks

Configuration Part

Develop UI building

blocks using SAP

NetWeaver Developer

Studio

Runtime Part

Define which elements of

UI building block s

application developers can

configure

Configuration

Data

UI BB

Developers

Appl ication

Developers

Run the

application

Run the

applicationEnd

Users

Configure UI building blocks

using Visual Composer

Configure UI building blocks

using Visual Composer

SAP AG2005,/ 10

Accessing Floor Plans from the Portal

Control Center

HomeCentral business

access and control

point for the user

Business PortalPortal as common UI

Quick

Act iv ity

Object

Instance

Guided

Acti vity

Appl ication Floor PlansModeled User Interfaces Using Configurable UI Building Blocks

Work CenterRepresent a certain

area of activity

of a business user


area of activity

of a business user


area of activity

of a business user


6/19

6

SAP TechEd 04

SAP AG2005,/ 11

UI Building Blocks and iViews

UI Building Block

(Floor Plan)

UI Building Blocks

(UI Patterns)iView

Object Instance Floor Plan

Object Data Pattern

Identification Pattern

Contextual

Navigation

Pattern






7/19

7

SAP TechEd 04

SAP AG2005,/ 13

UI Building Blocks Library

UI building blocks provided for the new application platform:

Floor Plans:

1. Object Instance Floor Plan

2. Guided Activity Floor Plan

3. Quick Activit y Floor Plan

UI Patterns/Pattern Elements:

4. Contextual Navigation Panel

5. Object Search Pattern Element

6. Object Selection Pattern

7. Identification Pattern

8. Simple Object Data Pattern

9. List /Table Pattern Element

10. Form Pane Pattern Element

11. Confirmation Pattern

12. Roadmap Pattern Element

13. Browse & Collect Pattern14. Object Worklist Pattern

15. Hierarchical Pattern

SAP AG2005,/ 14

Object Instance Floor Plan

Allows users to view and edit all propert ies of a business object

Users can navigate between different views of the object data, navigate to

related objects/documents and secondary activities as well as search for

other objects


8/19

8

SAP TechEd 04

SAP AG2005,/ 15

Header

Contextual

Navigation

Pattern

Fact Sheet

Object Instance Floor Plan: UI Patterns

SAP AG2005,/ 16

Guided Activity Floor Plan

User navigates through a series of screens representing a task sequence

Used to guide inexperienced users


9/19

9

SAP TechEd 04

SAP AG2005,/ 17

Guided Activity Floor Plan: UI Patterns

Roadmap

Browse & Collect

Contextual

Navigation

Panel

SAP AG2005,/ 18

Quick Activity Floor Plan

Shows the most important attributes allowing user to complete task rapidly

(20% of information to solve 80% of the tasks)

Provides links to more powerful tools or applications and to related activities


10/19

10

SAP TechEd 04

SAP AG2005,/ 19

Quick Activity Floor Plan: UI Patterns

Form

Related Actions

Orientation






11/19

11

SAP TechEd 04

SAP AG2005,/ 21

Configuring UI Building Blocks Using Visual Composer

Design Time:

UI building blocksconfigured using

Visual Composer

Design Time:

UI building blocksconfigured using

Visual Composer

Runtime application based on

UI building blocks

Runtime application based on

UI building blocks

SAP AG2005,/ 22

UI Building Blocks (UI BBs): Creating a New Model


12/19

12

SAP TechEd 04

SAP AG2005,/ 23

UI BBs: Creating a Floor Plan

SAP AG2005,/ 24

UI BBs: Selecting a System, a Business Object and aQuery

Query

System

Business object

Al ternat ively , ESI_PURCHASE_ORDER

Al ternat ively , ESI_PURCHASE_ORDER_QUERY

BO node

Al ternat ively , ESI_PURCHASE_ORDER_HEADER


13/19

13

SAP TechEd 04

SAP AG2005,/ 25

UI BBs: Creating Views

SAP AG2005,/ 26

UI BBs: Configuring Views


14/19

14

SAP TechEd 04

SAP AG2005,/ 27

UI BBs: The Runtime Application






15/19

15

SAP TechEd 04

SAP AG2005,/ 29

Pure Foundation

UI created in SAP NetWeaver Developer Studio (Studio)

Mainly declarative but coding also poss ible Powerful tools allow you to create complex UIs.

Used by framework developers and application developers

Cannot be migrated to Visual Composer (VC)

SAP AG2005,/ 30

Pure UI Building Blocks

UI building blocks are created in Studio.

Floor plans and UI patterns are configured in Visual Composer.

Development is 100% declarative, no coding possible.

Used by business experts and application developers

Configured application cannot be imported into Studio for further

processing.


16/19

16

SAP TechEd 04

SAP AG2005,/ 31

Hybrid Scenario

VC-compatible components are created in Studio.

Components are deployed to J2EE engine.

Appl ication developer configures f loor plan and UI patterns in Visual

Composer.

Component required is accessed from J2EE engine.

Component is incorporated into floor plan by implementing the

relevant interface.

J2EE Engine

Deploy

components

Select

component

required

SAP AG2005,/ 32

Breaking Out: Programming Exits and Service Adaptation

What if the predefined UI building blocks are not suf ficient?

Breakout Scenarios:UI Building Blocks

Create your own UI Web Dynpro Foundation component withNetWeaver Developer Studio

Plug it in to a floor plan using VCL and Visual ComposerModel Components

Create your own service adaptation component wi th SAP NetWeaverDeveloper Studio

Adapt the implementation accord ing to your own UI-specific needson top of UI-independent ESI services where the standard mechanismsfall short


17/19

17

SAP TechEd 04

SAP AG2005,/ 33

Programming Exits: Implementing Interfaces

Embedding

Web Dynpro

Component

Web Dynpro Interface

Default

Implementation

Component

imported from

J2EE engine

Configuration

Data

Replace default

implementation

with componentfrom J2EE engine

Just i mplement

the relevant

interface

For example, a form For example, a chart

SAP AG2005,/ 34

Where Can You Use Programming Exits?

IPatternComponent

IDP SODP OSP Exit

Floor plan

UI Patterns

Pattern elements

IPaneContainer

Pane container

IPane

List pane Form pane Exit

Exit

Configuration

data

At the level of :

UI Patterns

Pane container

Panes


18/19

18

SAP TechEd 04

SAP AG2005,/ 35

Summary

UI building blocks are generic Web Dynpro componentsfor building user-friendly interfaces.

Using UI building blocks reduces errors and lowers TCO.

Developers use Web Dynpro to create floor plans and UI

patterns.

Appl ication developers use Visual Composer to configure

UI building blocks.

SAP AG2005,/ 36

Further Information

Public Web:SAP Developer Network: www.sdn.sap.comWeb Application Server

Web Dynpro

Knowledge Warehouse DocumentationHelp Portal: http://helpportal.wdf.sap.corp:1080/ -> Documentation in Progress -> SAPNetWeaver xx -> Select language English on the right) -> SAP NetWeaver ->

Application Platform (SAP Web Application Server) -> Java Technology in SAP Web

Application Server -> Developer manual -> Developing Web Application -> Web

Dynpro

SAPNet:www.intranet.sap.com/webdynpro


19/19

SAP TechEd 04

SAP AG2005,/ 37

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express

permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other

software vendors.

Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries,

pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or

registered trademarks of IBM Corporation in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered

trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium,

Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and

implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver and other SAP products and services mentioned hereinas well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other

countries all over the world. All other product and service names mentioned are the trademarks of their respective

companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated

companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group

shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and

services are those that are set forth in the express warranty statements accompanying such products and services, if any.

Nothing herein should be construed as constituting an additional warranty.

Copyright 2005 SAP AG. All Rights Reserved

wd ui building blocks

Documents