cewebdynpronewfeatures

SAP NetWeaver CompositionEnvironment 7.20

New Features and Best Practices inWeb Dynpro for Java

Angel DichevSAP IP and NW RIG

April 21 2010

© SAP AG 2009. All rights reserved. /

Agenda

1. Web Dynpro Java at a Glance

2. Features Introduced in CE 7.11

3. New functionality in CE 7.20UI OpennessEnhanced User InteractivityAdopted Standards

4. Additional Improvements and Information


Web Dynpro for Java

Web Dynpro is the standard UI programmingmodel for Building SAP NetWeaver Applications

• Graphical, intuitive tools• Declarative programming

Minimizing Coding,Maximizing Design

• Templates, wizards, drag and drop features.• Auto generation of code• Reuse, libraries of generic services

Lower TCO

• Follows the MVC architecture (SAP’simplementation)

Separation of thePresentation,Backend andBusiness logic


Web Dynpro for Java – Over the Years

2003 2006 2007 2008 2009 2010SAP NetWeaver04

SAP NetWeaver7.0

SAP NetWeaverCE 7.1 SAP NetWeaver

CE 7.11 EhP1

SAP NetWeaverCE 7.20

Foundation UITechnology

for SAPapplications like

ESS/MSS

Implicit Personalization,Suspend/ResumeApplicationInteroperability, tableenrichments,new UI elements

CCTS Datatypes,Calendar UI elements,context menus,streamlined componentmodel

Web Dynpro Ajax Client,Drag&Drop, EJB 3 Model

Extended UI Openness,Async Views, SessionManagement, AdoptedStandards

Use

r Int

erac

tivity


Web Dynpro Java – Some Technical Facts

Model-DrivenDevelopment

ClientAbstraction

ModelAbstraction

ComponentConcept

Web Dynpro Java

Web Dynpro Java is SAP’s standardJava toolset for UI development andexecution on SAP NetWeaver AS Java

The Web Dynpro Java programmingmodel is single-threaded and event-based with serverside applicationlogic and rendering

Web Dynpro Java applications adhereto the Web Dynpro specific flavor ofModel-View-Controller paradigmbased on components, views,controllers and models

The Web Dynpro Java RuntimeFramework is part of theSAP NetWeaver AS Java but cannotbe deployed to other J2EE servers


Web Dynpro Java UI TechnologyGoals and Concepts at Glance

Model-Driven Development• MVC Programming Model• Ease of Development based on

Declaration and Code-Generation• Web Dynpro Tools

Client Abstraction• Client-Device-Independance• Predefined UI-Element-Library• Generic UI Services, Valuehelp,

I18N, P13N*, Accessibility

Model Abstraction• Common Model Interface• Separation of Business Logic and

Presentation Logic

Component Model• Reuse, Maintainability, Extensibility,

Flexibility• Loose Component Coupling using

Interface Definitions

StandardSAP NetWeaver Web-

UI-Framework


Agenda


2. Features Introduced in C.E 7.11

3. New functionality in C.E 7.20UI OpennessEnhanced User InteractivityAdopted Standards

4. Additional Improvements


Web Dynpro AJAX Client Succeeds HTML Client inSAP NetWeaver CE 7.1 EhP1

TheThe Web Dynpro AJAX Client …Web Dynpro AJAX Client …is the renamed successor of the formerWeb Dynpro HTML Client based on thefollowing Ajax functions implemented inSAP NetWeaver CE 7.1 EhP1:

Drag & Drop features, Suggestion support,Page RearrangementUse of XMLHTTPRequestObjectAsynchronous Input ValidationInputField UI elements supports onChange event,In-place editing and input promptExtensive Keyboard Support (hot and access keys)MessageBasedTrigger UI elementFluid animations based on UR LightspeedEnhanced client/server communication supportingon-demand JavaScriptNew Web Dynpro UI theme SAP Tradeshow Plus


SAP Tradeshow Standard Theme …


New SAP Tradeshow Plus Theme …


Browse & Collect Pattern:Browse & Collect Pattern:

New Ajax Functions – Drag & Drop Support (2)


Generic Drag & DropGeneric Drag & Drop

New Ajax Functions – Drag & Drop Support (1)


New Ajax Functions – Suggestion Support

Suggestion Support forSuggestion Support for InputFieldInputField UI ElementUI Element


New Ajax Functions – Asynchronous InputValidation and new onChange Event

Asynchronous Input Validation for numeric fieldsAsynchronous Input Validation for numeric fields

NewNew onChangeonChange UI element eventUI element event


New Web Dypro Ajax Functions – In-PlaceEditing and Input Prompt

InIn--place Editingplace Editing

Input PromptInput Prompt


New Web Dynpro Ajax Functions –Enhanced Keyboard Support (1)

Access UI Elements with KeyboardAccess UI Elements with Keyboard Access KeysAccess Keys


New Web Dynpro Ajax Functions –Enhanced Keyboard Support (2)

Access UI Elements with KeyboardAccess UI Elements with Keyboard Hot KeysHot Keys::


More Openness in Web Dynpro Java –Adobe Flash Island for Web Dynpro

In SAP NetWeaver CE 7.1 EhP1 Web DynproJava provides openness to other UItechnologies like Adobe Flash or Java ServerFacesAdobe Flash Islands for Web Dynpro JavaAdobe Flash Islands for Web Dynpro Java

Provide a GenericFlash UI Element tointegrate additional Flash Controls likeYahooMaps in Web Dynpro view layouts.Support rich user interaction with FlashControls utilizing transition effects, drag &drop, sliders,tooltips etc.Provide subset of WD4VC Analytics UIElements like the AnalyticsChartAnalyticsChart UIElement in Web Dynpro Java UI ElementLibrary.


New Calendar UI Elements

New Outlook-like Calendar UI ElementsCalendar UI Elements with year, week, day and hierarchi-cal month perspectives


Hierachical Context Menu UI Elements

Provide Hierarchical Context MenusHierarchical Context Menus in Web Dynpro View Layouts

View DesignerView Designer


Further Table Enhancements (1)

The Table UI element is further enhanced in NW CE 7.1The Table UI element is further enhanced in NW CE 7.1

Scroll tipScroll tip

Empty RowsEmpty Rows

number of elements = 3visibleRowCount = 5displayEmptyRows = true (default)

Selection MenuSelection Menu


Further Table Enhancements (2)

The Table UI element is further enhanced in NW CE 7.1The Table UI element is further enhanced in NW CE 7.1


RowRepeater UI Element

NewNew RowRepeaterRowRepeater UI ElementUI Element


Further UI Element Enhancements

FormattedTextViewFormattedTextView UI ElementUI ElementSupports XHTML modules Text, List, Hypertext, Image

FormattedTextEditFormattedTextEdit UI ElementUI Element

ButtonChoiceButtonChoice UI ElementUI ElementButton with Menu

ToolBarPopinToolBarPopin UI ElementUI Element

MisceleaneousMisceleaneous AdditionsAdditionsTransparentContainer with SectionHeaderIcons within the LegendAllow to set default values for editable UI Elements on client-sideBold LinksTriggering FileDownload from within action event handlerMeltingGroup:Connects several UI Elements acting as one UI Element in a master column of aColumn LayoutSectionHeader: used as form header UI Element in a non-layouting TransparentContainer


New MessageBasedTrigger UI Element

New (Pull) Message Based Trigger UI ElementNew (Pull) Message Based Trigger UI Element

Based on the integration of the RTMF Messaging Framework in the Web Dynpro AjaxClient

Enhanced version of the former TimedTriggerTimedTrigger UI ElementUI Element

Web Dynpro UI control that triggers a pull from the client to the server in regular timeintervals

By placing this UI Element in a Web Dynpro View, you are able to register theapplication for incoming messages on the Client

WDMBTParametersWDMBTParameters--APIMap providing typed access to Parameters of the MessageBasedTrigger UIElement

RestrictionRestriction: Currently only supported for MS IE 6 and IE 7MS IE 6 and IE 7


JSF Integration in Web Dynpro Java

In SAP NetWeaver CE 7.1 EhP1 Web Dynpro Java provides openness toother UI technologies like Adobe Flash or Java Server Faces with new …Web Dynpro JSF Integration*

Allow usage of JSF (composite)UI components in Web Dynpro UIsUI Mashups with Web Dynpro and JSF:combine UI content from both side to allowa novel form of reuse


Agenda


2. Features Introduced in CE 7.11

3. New functionality in CE 7.20 for Custom DevelopmentUI OpennessEnhanced User InteractivityAdopted StandardsOther features



Extended UI Openness

WebWidget UI elements allowsyou to integrate external HTMLcontent into your Web DynproJava views

Integration capabilities allow youto create mashup content easily

Support Rich User Interactionthrough Microsoft Silverlight

Better Integration andflexibility through

extended UI Openness


New Web Dynpro WebWidget UI Element

“A web widget is a portable chunk of code that can beinstalled and executed within any separate HTML-based webpage by an end user without requiring additionalcompilation. They are derived from the idea of code reuse.Other terms used to describe web widgets include: gadget,badge, module, capsule, snippet, mini and flake. Webwidgets often but not always use DHTML, JavaScript, orAdobe Flash.”

[Source: http://en.wikipedia.org/wiki/Web_widget]

http://en.wikipedia.org/wiki/Web_widget


Web Dynpro WebWidget UI Element:Motivation

EnterpriseSOA

WebWidgets Which?


Web Dynpro WebWidget UI Element

The WebWidget UI element is used toembed a piece of custom HTML orJavaScript code into a Web Dynproview where it can be used as a rootelement.

Pass HTML, “style” information andJavaScript to WebWidget UI element usingUI element propertiesApply context data binding to transferkey/value-based state information betweenWebWidget and Web Dynpro controllerApply action eventing to react onWebWidget events.


Web Dynpro WebWidget UI Element: UseCases

Integrate custom HTML contentor RSS feeds

Integrate OpenSearch ProviderStandard

Integrate lightweight HTML/Java Script based customcontrols

Integrate UI controls from thirdparty WebWidget libraries, e.g.Yahoo UI Library Note:

The correctness of HTML and JavaScriptsyntax is not checked by the Web DynproFramework


Web Dynpro WebWidget UI Element:Properties

htmlDescribes the HTML content, which is embedded in the WebWidget UI element. This contentis always rendered when the client side is completely rendered, or when only the WebWidgetcontrol is rendered in a delta request.

scriptOnLoadThe JavaScript handler is executed after the WebWidget control is rendered which is possibleeither in an initial request, or in a delta request. In this part you can access the Web Widgetparameters, and you can trigger roundtrips.

scriptOnUnloadThe Javascript handler, which is executed, after the WebWidget control is destroyed. Thishappens when:

The page is destroyed by the browser (e.g. after navigation to a different side)In a delta request, when the WebWidget control is removed or replaced.

styleThe style attribute of the root container of widget. Example:For the HTML coding ... style='background-color: red'...


Microsoft Silverlight Islands for WebDynpro Java

Support rich user interaction withMicrosoft Silverlight applications usingsubset of WPF (Windows PresentationFoundation)

Provide a SilverlightIsland UI element tointegrate custom Silverlight componentswith Web Dynpro context data bindingand action eventing support

Note:

No generic internationalization support by SAP

No generic Right-to-Left support by SAP

No generic accessibility support by SAP


Microsoft Silverlight Islands for WebDynpro Java

Using user interface element SilverlightIsland, you can develop Webmedia applications with video and audio file integration, applicationscontaining vector-based graphics, and highly interactiveapplications with very fast response times.

RequirementsSAP NetWeaver installation with Web Dynpro

runtime and Developer Studio with Silverlight plugins

Silverlight Player Version 2 installation

Licensed Visual Studio with Silverlight plugins

Licenced Media server

About 2 MB client size


Microsoft Silverlight Islands for WebDynpro Java: UI Element

Note:

A SilverlightIsland control cannot beintegrated into scrollable containers such astransparent containers, trays, or groups, ifscrolling mode is set to auto or both. Alsointegration into popups is not possible.

SilverlightIsland controls are integrated inWeb Dynpro views by replacing the root UIelement. The UI element contains the pathto the Silverlight application file. This fileresides in the MIME repository and canbe shipped together with the Web Dynproapplication.The SilverlightIsland integration is one-directional that means that always aSilverlightIsland is integrated into a WebDynpro view, and not vice versa.A SilverlightIsland is displayed as arectangular control in a Web Dynpro view.


Microsoft Silverlight Islands for WebDynpro Java: Use Cases

Combine WPF (WindowsPresentation Foundation)programming model with WebDynpro Java and ABAP application

Leverage user productivity withSilverlight island of high interactivity

Utilize existing Microsofttechnologies like C# and .NET.


Embed External UI Content with StatefulIFrames

Iframe UI element is an internal frame withinan view.

Note: IFrame contentembedder (developer) has tocomply with performance,accessibility, security and SAPUI standard requirements.

IFrame content keeps alive “flicker-free“ insubsequent requestsData transfer using POST/GET-parametersContext data binding not supportedCommunication based on client-side eventingtechniqueIWDIFrame was undeprecated in CE 7.2


Embed External UI Content with StatefulIframes: Use Cases

Embed external mashup content with different lifecycle than the embeddingWeb Dynpro application.

Embed more complex mashup content with startup overhead (e.g. flickeringGoogleMap, GWT application boot-up).

Realize secure mashup scenarios with isolated HTML/JavaScript/CSScontent


Agenda



3. New functionality in C.E 7.20UI OpennessEnhanced User InteractivityAdopted StandardsOther features



Enhanced User Interactivity

Tool Enhancements like tabbedproperties, snippets, inlineediting, cheat sheets

High scalability through StatelessWeb Dynpro Java Applications

Performance Optimizationthrough Asynchronous WebDynpro Views

Extended UI Element Library

Enhanced UserInteractivity and

Performance


Enable Developing Asynchronous View in WebDynpro

Embed asynchronously running Web Dynpro application into WebDynpro component.

Synchronous view processing is the default behavior in Web DynproNow in WDJ, an asynchronous mode for the views is availablePartial Screen Update Allowed: allow rendering of screen although not allprocessing has finished on server side and incrementally update/inject missingUI parts without blocking user interaction. Asynchronous view can providepreliminary UI content.Progress Monitor: provide visual feedback while waiting for asynchronousserver response.

.


Enable Developing Asynchronous View in WebDynpro

Component Hierarchy: For a clear separation of the application partsrunning synchronously, and the ones that are running asynchronously, thecomponent concept in Web Dynpro is used

The main Web Dynpro component with the synchronous parts is theembedding component, it contains the user elements and data bindings theuser needs later on for working in the screen, while in the asynchronous partother data is processed.

For the asynchronously processed data, an embedded component is definedcontaining the views, context data and methods for the integrated application.The interface IWDApplicationHandle handles the programmatic interactionbetween the embedding and the embedded application


Asynchronous View in Web Dynpro: PortalIntegration

Integration of Asynchronous Viewswith SAP NetWeaver Portal issupported.

Portal Content Admin (Via Portal ContentStudio) Portal ContentGo to Web Dynpro applicationsOpen the context menu, Web Dynprocomponent async EmbeddedApplicationSelect Copy, Open context menu on PortalApplications, select paste as PCD ObjectTo start the application, select Preview fromthe context menu on the embeddedapplication.In the appearing window, replace the URLparameter sap-config-mode=true with sap-wd-embedding=New&sap-wd-client=AjaxClient.


Asynchronous View in Web Dynpro: Use Cases

Rapid UI Startup:: Incremental page display on Application startup

BI Reports:: Display “long-running” BI reports in Web Dynpro view layouts

Asynchrony:: Process functionality in different threads so that parts of the screen can already be

rendered while other UI content is pending.

Note:

Asynchrony is restricted to separate WebDynpro applications.

Web Dynpro components in same applicationcannot run asynchronously.


Run Stateless Web Dynpro JavaApplications

Web Dynpro components can be defined asstateful or stateless.Stateless application is initialized normally,then serializes its state and exits. Allocatedmemory gets released on server side.Upon request, application is initialized againand de-serializes its state.Then phase model makes a loop and normal

follow-up request handling is done (e.g. tohandle action event)State is kept on client side.


Run Stateless Web Dynpro JavaApplications: Use Cases

Web Dynpro “Widgets“: Run simple oneclick Web Dynpro Java applications asstateless “widgets“, e.g. to read/write datarepeatedly in long time intervals.

High Scalability: Run stateless applicationswith much more simultaneous users based onhighly reduced server-side memoryconsumption.

Note:

Application logic must manage statedefinition, serialization and de-serialization(context, UI element and action state).

. Application logic must re-initialize state onfollow-up requests.


New Splitter UI Element

Splitter UI element provides two panes which areseparated either horizontally or vertically by a divider(sash). Divider moves in direction of mouse pointermovement and increases the size of one pane whiledecreasing the size of the other one..

Create Multi Pane UIs

Note:

Splitter content must not comprise of Iframes or Active Components(JNet, JGantt, Office, Adobe Flash Islands) i.e. in HTML basedclients, user interface elements using a placeholder like IFramecannot be combined with the Splitter controlPane split into

two vertically


Splitter UI Element: Properties

Borderareadivider: 3D like borderclosure: small border is displayednone: no border is displayed

collapseDirectionnext: collapse second areanone: do not collapse any areaprevious: collapse first area

collapsedheightsashPositionsashPositionModeverticalwidth


New Accordion UI Element

Accordion UI PatternAccordion container UI element enables the user tonavigate between its children using a vertical stack ofcollapsible panels named AccordionItems. Rearrangeaccordion items with Drag&Drop

Accordion menusnavigate among accordion items (main sections) while stillbeing able to quickly browse to the content of another item(subsections)


New Accordion UI Element

An Accordion visualizes a stack ofAccordionItems.

You can insert two different types of items into anAccordion

AccordionItemAn AccordionItem is a single item of theAccordion.

MultipleAccordionItemThis view element allows you to define thedesired accordion items dynamically throughcontext binding.


New Shuttle UI Element

A Shuttle is a user interface element used in the Browse and Collect Pattern.It is used to move entries from one table to another table to select the entries.

Shuttle PropertiesavailableListIdbehaviorenableAddButtonsenableRemoveButtonsselectedListIdshowAllButtonsvertical


Implementing Drag and Drop

It will be possible to use a caption as dragsource (like an image).

Drag possible with the secondary mousebutton and get an application-definedcontext menu on drop

Row Repeater UI Element Drag-and-Dropsupported.

Drag-and-drop within trees and hierarchicaltables is supported.


Other Tool Enhancements

A host of enhancements are provided byWeb Dynpro Tooling to increase thedeveloper productivity.

Enhancements in Drag and DropTabbed PropertiesSnippetsTest ModeExecutioner ModelingCheat sheetsSVS/OVS


Agenda






Adopted Standards

Improved Page buildingcapabilities, client sideperformance optimization, deltaupdates through LightSpeedAdoption

Session Management Unificationprovides adoption of techniqueslike custom error pages,declarative security

Use of Web Dynpro Java UIComponents as CompositionUnits

Adopted Standards


Unified Client Framework Integration

Web Dynpro Java Runtime now uses the SAPUnified Client Framework (UCF) for silent“AjaxAjax--like“like“ and XMLHttpRequestXMLHttpRequest--basedbasedclient-server communication.

Web Dynpro Java Runtime drops ownHTML/JavaScript communication layer to adoptexisting and future UR LightspeedLightspeed controlsand mechanisms more easily (e.g. improvedpage-building capabilities, client-sideperformance optimization, delta updates, ...).


Session Management Cleanup

Streamlined, JEE standardJEE standard--orientedoriented Web Dynpro Java sessionmanagement yields further improvement of Web Dynpro JavaRuntime layer.

Session management unification in Web Dynpro Java provides thebasis for future adoption of existing JEE standard techniques likecustom error pages or declarative security.custom error pages or declarative security.

Adaptation to next generation SSOnext generation SSO (NGSSO in SAP NetWeaverAS Java).


Use Web Dynpro Java UI Components asComposition Units

The main scope of the new Composition Units is enabling

semantic communication between a broad scope ofUI consumers (Galaxy, VC, etc.) andUI providers (WD, VC, JSF, etc) based onsemantic contracts defined between them andreusable technology adapters

Note:

Composition Unit services are not part of theWeb Dynpro Java

. But Web Dynpro based composition unitconsumers and providers are the primaryadopters in SAP NetWeaver CE 7.20 release


Use Web Dynpro Java UI Components asComposition Units: Use Cases

ProcessStepUsed by Galaxy for the unified UI consumption

NestedViewContract for visual embedding of the UI components and their communication(e.g. VC Blackboxes)

MashableUsage of the UI components in the mash-up scenarios


Agenda






Web Dynpro Flash Islands

Web Dynpro Java provides openness toother UI technologies like Adobe Flash orJava Server Faces

Flash Island is based on Adobe Flex. Flexprovides a general development environmentthat can be used to create Rich InternetApplications (RIA).

Prerequisites

To implement Flash Island applications for Web DynproJava, you require the following:

Adobe Flex Builder 2 (or 3)Adobe Flash Player 9 (Update 3)Flash Island Flex libraryA Web Dynpro component with a FlashIsland UIelement Note: This was introduced as

part of CE 7.1 EhP1. With 7.2,there are furtherenhancements


Adaptive Web Service Model

CMI base implementationCMI base implementation: Brings features like improved eventing between model and context (explicitnode invalidation is no longer needed), model object creation through context etc. just like with EJB model.Yields simplified controller coding.

Automatic Model Class RenamingAutomatic Model Class Renaming: Importer now does automatic renaming of model classes (so far thishad to be done manually by app dev; major pain point for large enterprise services).

Mass Configuration SupportMass Configuration Support: WS destinations are no longer used, but a "service group" is created onimport / deployed with the application. This changes the way how the WS provider system is configured.

Mass configuration entity (service group) for deployment archive created during AWS model import.Service consumption application visible in NWA: SOA Management / Business Administration / Configuration ScenarioManagement - Assign provider system to service consumption application

Enhanced AWS Model ImporterEnhanced AWS Model Importer: default package name, improved error message with recovery option,early finish, adoption of Mass Configuration, automatic model class renaming

Support xsd:any, list types: AWS now has no longer own restrictions as for WSDL / XSD support; notethere are still some limitations (e.g. type union) coming from the underlying WS-Runtime.

Metadata Caching: AWS metadata is now invalidated after re-import / redeploy of model (no need forserver restart). Implicit metadata cache invalidation by import timestamp set on model (re-) import.

Basic support for idempotent and asynchronous services: Idempotent and asynchronous serviceoperations will each show with special icon for model class in model


Adaptive RFC2 Model

New Adaptive RFC 2 (ARFC2) modelNew Adaptive RFC 2 (ARFC2) model is a new CMI model implementationis a new CMI model implementationwhich is the successor of the former, nowwhich is the successor of the former, now deprecateddeprecated Adaptive RFC model.Adaptive RFC model.

The ARFC 2 model uses JCo 3.0JCo 3.0 for connecting to SAP systems.JCo 3.0 offers improved connection management, faster performance and lowermemory consumption as compared to JCo 2.0.JCo 3.0 manages connections internally. This implies ARFC2 needs no own connectionmanagement so that the WD SystemLandscape API isso that the WD SystemLandscape API is no longer needed.no longer needed.

Standard RFC destinations:This implies configuration is done in NWA so that WD Content Admin isso that WD Content Admin is nonolonger needed by ARFC2longer needed by ARFC2

Compatible as far as possible to ARFC1 to allow for easy migrationAdditional features: model class renaming, enhanced CMI support, ...

Interoperability ARFC1 / ARFC2Configuration for ARFC1 and ARFC2 to use same statefull connection. Settings:

sap.interoperability_arfc1_arfc2.mode from {on, off,sap.interoperability_arfc1_arfc2.mode from {on, off,filterDestinationName, filterModelName}filterDestinationName, filterModelName}

sap.interoperability_arfc1_arfc2.filtersap.interoperability_arfc1_arfc2.filter to define names for filter* modes


Agenda






1. Tooling2. User Interface3. Programming Model4. Models

Additional Improvementsand Information


SAP NetWeaver Developer Studio:Tools Enhancements

ComponentModeler

Data Modeler

ContextDebugger

View Designer


Component Modeler

New graphical tool for creating

Web Dynpro ComponentsComponent Interface DefinitionsModels and Model Usages


Data Modeler

Redesigned with enhanced layouting options


Context Debugger

Browsing through context structuresOn-the-fly changing of attribute valuesNavigation from a selected context object in debugger to its design-time source in Context editor


Calendar

New Outlook-like Calendar UI Element with different perspectives


New Calendar UI Elements

Support of Year, Week, and Month viewsFeatures of the calendar views

Display working timesDifferent time scales (full hour, half hour…)Calendar paginator

EntriesUse of Core Data Types for datesPredefined semantic colorsRecurring entriesFull day entriesStriped entries (e.g., to symbolize tentative)


Context Menu

Submenus

Check boxes

Radio-buttons

Action items

Separators


Context Menu

ToolBar

Table

Link

Context area is defined through connection to a UI Element


Context Menu

Provide Hierarchical Context Menus in Web Dynpro ViewsMenus may contain action items, check boxes, radio buttons, andseparators.Menus may have submenus.Provide a Web Dynpro runtime API to define menus and to attach them toview elementsEmbed Menus in Trees and Tables

Added special view controller hook method:wdOnContextMenu(IWDContextMenuManger mgr,

IWDContextMenuEvent event)


Column Layout

Allows aligned positioning of UI Elements across container borders

MatrixLayoutMatrixLayout

ColumnLayoutColumnLayout


Column Layout

Especially designed to define a content area combining several formsand tables that have to be aligned

Divide screen into three (up to five) master columns

Works cross component and view borders

UI elements are placed automatically

Each UI element uses one or more columns

Each visual container can start a new column layout


Table Enhancements (1/2)

Selection Menu


Table Enhancements (2/2)

Grouping

Scroll tip

Scroll Bar


Row Repeater

Google-like search result display in repeated containers

Supports non-input UI elements like TextView, Link, Image


Row Repeater Example – Enterprise Search


MessageBasedTrigger UI Element

Based on integration of RealTime Messaging Framework (RTMF)

Web Dynpro UI control that triggers a pull from client to serverIn regular time intervals orEvery time a registered message comes in


Generic Drag & DropImage as generic drag source

Dragging the image as a way todrag the business object itself(image may visualize a businessobject)

DropTarget as generic drop target

Normally invisible frame aroundarbitrary UI elementHighlighted in selection color whiledraggingOften, a thin dashed border is allone can see

Ajax Functions – Drag & Drop Support (1/3)


Browse & Collect Pattern:Support for implementing UI patternssimilar to browse & collect

Table: Drag multiple selectedrows, auto-scrolling, insertbefore/after item Note: Selectionand scrolling require a roundtrip!Item List Box: Drag multipleselected rows, auto-scrolling,insert before/after itemTree: Drag single selectednode/leaf, no auto-scrolling, insertbefore/after node/leaf or drop rightonto a node



Runtime Authoring:Rearrange sections of the UI by direct manipulation

No selection, uses handles instead: Caption, Image, SectionHeader

Today, only supported by single column grid layout

Handle and layout cell may even belong to different applications, cf.page builder scenario



Ajax Functions – Suggestion Support

Suggestion Support for InputField UI Element*User starts typing and framework provides afiltered list of valid values matching the userinputApplication developer can configure the inputfield so it supports suggested values if possibleValue set of the data type has to supportsuggestion

Suggestion based on a static valuesetdefined in a Dictionary simple type.Suggestion based on a serverside querycombined with OVS valuehelp service

* Requires a server roundtrip. Not available for ABAP Web Dynprountil enhancement pack 2 for SAP NetWeaver 7.0


Ajax Functions – Asynchronous InputValidation and new onChange Event

Asynchronous Input Validation for numericfields

When leaving the input field a generic inputvalidation is asynchronously processed on theserver side without blocking the user fromtyping into another fieldThe asynchronous input validation feature isactivated by default for all numeric fields (e.g.byte, short, long, date, time, ...)

New onChange UI element eventIntroduced new onChange event for UIelements InputField, FormattedTextEdit,TextEdit, ToolBarInputFieldThe action (the onChange event is bound to) isperformed when a UI element loses focus ANDits value has been changed


Web Dypro Ajax Functions –In-Place Editing and Input Prompt

In-Place EditingNew boolean property displayAsText allowsyou to display an editable UI element as textand morph the display to an editable InputFieldon focus.The displayAsText property can be definedfor various UI elements

Input PromptPre-fill an InputField UI element witha prompt that tells the user what todo or typeHelps make the UI self-explanatoryOften used when no label text is displayedBased on new InputField propertyinputPrompt


Web Dynpro Ajax Functions –Enhanced Keyboard Support (1/2)

Access UI Elements with Keyboard AccessKeys

Access keys are keyboard short cuts(e.g. <ALT + R>) for UI elementnavigationApplication developer specifies whichUI elements have access key supportAccess key is defined by Web Dynproframework (first character of theassociated label or UI element's text)The same access key can be used fordifferent UI elements

Users toggle through the elementsby pressing the access key multipletimes


Web Dynpro Ajax Functions –Enhanced Keyboard Support (2/2)

Access UI Elements with Keyboard HotKeys:

Hot keys are keyboard short cuts (e.g.<CTRL + SHIFT + F7>) that trigger anaction. After pressing the ALT key, accesskeys will be underlined on the UIDeveloper controls the assignment andscope of the hot keysHot key information is added to the tooltipor appended to the menu itemWDHotkey enumeration constant in WebDynpro Java Runtime API lists all hot keyssupported in Web Dynpro


Component Architecture – Window Controller

New Window Controller

A Window now has its own Window controller like a View has its View controller

Based on the new Window plug concept Window controllers can easilyimplement cross-component navigation logic.

Forward incoming navigation events to views inside the window

A Window and its Window controller act as implementors of ComponentInterface Views

The window controller replaces the former Component Interface ViewcontrollerElimination of 1:1 relation between Window and Component Interface View


Component Architecture – Window Plugs

Painpoint: Navigation across Components

Introduced Inbound and Outbound Plugs for Windows

Simplified navigation across component bordersAllow non-view-triggered navigation

Requires no serverside eventing + navigation dispatcher view like in SAPNetWeaver ‘04 and SAP NetWeaver 7.0

Plugs can now be defined for windowsPlugs can be fired within the new window controllers


CCTS Data Type Support –Core Component Types

CCTS provides data types like Amount, Code, Duration, QuantityCore Component Types = Basic Building Blocks in CCTSComplex Structure = Aggregation of Component Types

Context Elements can be typed with CCTS typesType-adapted UI Element renderingData binding to components of complex-typed context attributes

ComplexCCTS TypesComplexCCTS Types

Content andSupplementaryComponents

Content andSupplementaryComponents

All CCTsavailablefrom scratch

All CCTsavailablefrom scratch

Type SpecificRenderingType SpecificRendering

currencyCodeamount

AmountAmount

DateDate

Single UIElement TypeSingle UIElement Type


CCTS Data Type Support –Core Component Types

MeasureDuration DateTime Amount


Context Enhancements

Universal context elements overcome the separation of value elements versusmodel elements

CMI-based context functionality (Common Model Interface)Sorting and filtering (runtime only)Paging

SAP JVM (session failover support) related context extensionsSupport of transient, buffered and unbuffered attributes

Further enhancementsAllow context nodes of undefined typesAllow node element creation without supplying a model instance in model nodesMapping of recursive context nodesDeletion of dynamic nodes and attributesDiverse API-extensionsMultiple typed representations of a single generic model


Exception Support for Public ControllerMethods

Defining Exceptions for Web Dynpro Controller Methods

In addition to method parameters, exceptions can be defined

The related throw statements are added to the controller code by the WebDynpro Generation Framework.


View Controller Hook wdDoBeforeAction()

New View Controller Hook wdDoBeforeAction()

For additional validation support, it is now possible to implement the view controller’shook wdDoBeforeAction()

This hook enables application developer to report additional validation errors whichcannot be defined as a constraint for the given data typeValidation code should have the same quality as dictionary validation and shouldmainly focus on the UICalled for all visible view controllersThe result of the validation code is reported to an instance of IWDBeforeActionwhich is a framework provided parameter.

If validation errors are reported to IWDBeforeAction, subsequent validatingactions are not executed and the errors reported are displayed.For non-validation actions the messages are not displayed and the action isexecuted.If a message or validation error should have a longer lifetime, an instance ofWDPermanentMessage is to be used.


View Controller Hook wdDoBeforeAction() –Sample

wdDoInit(){

...

}

wdDoBeforeAction(IWDBeforeAction validation){

}onActionValidate(IWDCustomEvent wdEvent) {

}

wdDoBeforeAction(

IWDBeforeAction validation){

… validation

.reportValidationError()

}

wdDoBeforeAction(

IWDBeforeAction validation){

… validation

.reportValidationError()

}

State

UI/View Layout View Controller Code Comment

Initial stateInputFields Start and End Date displayinitial data values

User presses button validate andtriggers a validating action.wdDoBeforeAction() is called andreports a custom validation erroronActionValidate() is therefor notcalled

1

2

3

4

User presses button validate andtriggers a validating action.The generic type validation reports aninvalid End Date.wdDoBeforeAction() is called andreports a custom validation erroronActionValidate() is therefor notcalled.

User presses button validate andtriggers a validating action.wdDoBeforeAction() is called andreports no custom validation error.Validating action event handleronActionValidate() is now called.


Popup Windows

New features and visualization of Popup WindowsWindow Title BarMaximize and resize Popup Window

NewTitle Bar

ResizeFooter

Maximize


Personalization

Support the definition of Default Values for personalizable UI elementproperties

For every UI element property (e.g. UIElement.visible, Button.text)SAP UI designers have decided if the property should be available foradmin or end user personalization.

Example: end user will be allowed to hide things (i.e. setUIElement.visible = NONE), admin will be allowed to change abutton's text.

Administrator canDisable end-user personalization of UI elements (simple) or evenUI element properties (complex)Pre-define this default value

End user can define their own default value for personalizable UIelement properties


Portal Integration

Further enhancements of the Web Dynpro Portal Page Builder technologyCentral message displayBased on the Generic Portal Application Notion (GPAL) it is now possibleto maintain application properties inside the portal. The same applicationcould run on the same page with different instances.


Adaptive Web Service Model (1/2)

Enhanced Web Service Model ImplementationCMI implementation, generic + typed modelImproved support for WSDL / XML schema constructsTyped model classes based on generic base and/or delegation classes,bug fixes possible without new code generationAllow renaming of model classes during import

Runtime settings configurableWS-Runtime configurationWS destinations

SAP Service Registry SupportDirectly import Web services from the SAP Service RegistryPublish Web services into the service registry with classification information


Adaptive Web Service Model (2/2)

Advanced Web Service Security SupportAdvanced security settings supported via WS-R Service Extension InterfacesSSO Support

Debugging and Tracing SupportTracing of model content / SOAP traffic for problem analysisModel metadata, datahttp-request/-response for SOAP calls

Logical Web Service DestinationsConfiguration of connection, authentication, encryption settingsNote: Currently only for WS providers supporting WSIL


Using Web Services with Logical Destinations

Service ConsumerSystem

AdministratorTasks

DeveloperTasks

ApplicationX

Service ProviderSystem

WS A WS B

ApplicationY

Service ConsumerSystem

ApplicationX

ApplicationY

Service ProviderSystem

WS BWS A

Development ConsolidationTransport

Destination


EJB Model Import

New EJB Model ImportApplication developer simply imports the EJB model (available in the Model Typeselection wizard) and the typed model classes are generated automatically.EJB Model implements Common Model Interface (CMI)Supports EJB business methods based on simple types and Java Beans

Value-Adds in comparison with the former JavaBean ModelNo handcrafting of Command Beans (encapsulating EJB methods), requiredNo creation of Exception Classes (bound to CMI Exception) requiredJavaBean Model never generated typed model classes but delegated the task tobean classes contained in the jar-filesThe new EJB Model generates typed model classes


Adaptive RFC2 Model –Enhancement Pack 1

Adaptive RFC 2 (ARFC2) model is a new CMI model implementation which is thesuccessor of the former, now deprecated Adaptive RFC model.

The RFC 2 model uses JCo 3.0 for connecting to SAP systemsImproved connection managementFaster performance and better memory consumption compared to JCo 2.0Use of JCo DestinationDataProvider.

Standard RFC destinations - Configuration is done in SAP NetWeaver Administrator -WD Content Admin not needed by ARFC2JCo 3.0 manages connections internally

No need for your own connection management - the WD SystemLandscape APIis no longer needed

Compatible (as far as possible) with ARFC1 to allow for easy migrationAdditional features: model class renaming, enhanced CMI support, ...

Interoperability ARFC1 / ARFC2Configuration for ARFC1 and ARFC2 to use same stateful connection.


Enhancements in Adaptive Web Services –Enhancement Pack 1 (1/2)

Metadata caching:Adaptive Web Services (AWS) metadata is now invalidated after reimport /redeploy of model (no need for server restart).Restricted API to access / invalidate the cacheImplicit metadata cache invalidation by import timestamp set on model (re-)import.

CMI base implementation:Improved eventing between model and context (no invalidate necessary)Model object creation through context - just like with EJB modelSimplified controller coding

Automatic Model Class RenamingImporter now does automatic renaming of model classes (until now this had to bedone manually by the developer).


Enhancements in Adaptive Web Services –Enhancement Pack 1 (2/2)

Mass Configuration SupportWS destinations are no longer used"service group" is created on import and deployed with the applicationMass configuration entity (service group) for deployment archive created duringAWS model importService consumption application visible in NWA– SOA Management / Business Administration / Configuration Scenario

Management - Assign provider system to service consumption applicationBasic support for idempotent and asynchronous servicesEnhanced AWS Model Importer

Default package nameImproved error message with recovery option, early finish,Adoption of Mass Configuration, automatic model class renaming


Summary

Web Dynpro Java becomes more and more Open, thuspermitting a high level of integration

Significant investments in enhancing the User Interactivitycapabilities, help create Rich and engaging user experience

Rapid adoption of various standards by Web DynproFramework, new improved Java Runtime layer

Web Dynpro Java leverages Openness, third partystandards to create innovative, flexible and complexapplications with great ease

Thank You!We value Your Feedback!


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 hereinmay 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, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries,eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+,POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex,MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or othercountries.

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.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respectivelogos are trademarks or registered trademarks of SAP AG in Germany and other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products andservices mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries.Business Objects is an SAP company.

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 Groupproducts and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construedas constituting an additional warrant.

Copyright 2009 SAP AGAll Rights Reserved

cewebdynpronewfeatures

Documents