Embed Size (px)
DESCRIPTION
01 Web Dynpro for ABAP-Introduction
Citation preview
copy IBM Corporation 2013
IBM Global Business Services
Web Dynpro For ABAPIntroduction
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 2
Session Overview
Web Dynpro is a programming model provided by SAP Web Dynpro is
implemented in Java and ABAP It is suited to generate standardized user
interfaces (UIs) using a declarative approach resulting in a minimum time effort
to realize Web applications
The advantages of using the Web Dynpro programming model (compared to
other established Web programming models) will be explained in this unit In
this context the basic architecture and functionality of Web Dynpro will be
summarized
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 3
Learning Objectives
After completing this unit you will be able to
Describe the declarative programming approach used to create Web Dynpro applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 4
Why Another Technology for Building UIs
If you invest in a UI today you must be sure it will run on tomorrowrsquos technology
If you build a UI framework today you want to be sure it can take advantage of tomorrowrsquos technology
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 5
SAP UI History From SAP GUI to Web Dynpro
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 6
Web dynpro for ABAP Motivation
Web Dynpro UI definition
independent of client technology 1048708
As much abstract declaration as possible1048708
Different rendering engines for
different (future) UI technologies
without adapting application coding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 7
What is Web Dynpro
A Programming Model for User Interfaces1048708 Defines a standard structure for user interface applicationsndash
Derived from the MVC (ldquomodel-view-controllerrdquo) design pattern
A Set of Tools for User Interface Design1048708 Focus on graphical modelling
Code is generated from meta-model declarations1048708
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications1048708 Framework running on SAP Web AS server offers common services
A Technology for Software Modularization1048708 Components help structure applications and support pattern-based UIs
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 2
Session Overview
Web Dynpro is a programming model provided by SAP Web Dynpro is
implemented in Java and ABAP It is suited to generate standardized user
interfaces (UIs) using a declarative approach resulting in a minimum time effort
to realize Web applications
The advantages of using the Web Dynpro programming model (compared to
other established Web programming models) will be explained in this unit In
this context the basic architecture and functionality of Web Dynpro will be
summarized
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 3
Learning Objectives
After completing this unit you will be able to
Describe the declarative programming approach used to create Web Dynpro applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 4
Why Another Technology for Building UIs
If you invest in a UI today you must be sure it will run on tomorrowrsquos technology
If you build a UI framework today you want to be sure it can take advantage of tomorrowrsquos technology
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 5
SAP UI History From SAP GUI to Web Dynpro
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 6
Web dynpro for ABAP Motivation
Web Dynpro UI definition
independent of client technology 1048708
As much abstract declaration as possible1048708
Different rendering engines for
different (future) UI technologies
without adapting application coding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 7
What is Web Dynpro
A Programming Model for User Interfaces1048708 Defines a standard structure for user interface applicationsndash
Derived from the MVC (ldquomodel-view-controllerrdquo) design pattern
A Set of Tools for User Interface Design1048708 Focus on graphical modelling
Code is generated from meta-model declarations1048708
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications1048708 Framework running on SAP Web AS server offers common services
A Technology for Software Modularization1048708 Components help structure applications and support pattern-based UIs
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 3
Learning Objectives
After completing this unit you will be able to
Describe the declarative programming approach used to create Web Dynpro applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 4
Why Another Technology for Building UIs
If you invest in a UI today you must be sure it will run on tomorrowrsquos technology
If you build a UI framework today you want to be sure it can take advantage of tomorrowrsquos technology
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 5
SAP UI History From SAP GUI to Web Dynpro
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 6
Web dynpro for ABAP Motivation
Web Dynpro UI definition
independent of client technology 1048708
As much abstract declaration as possible1048708
Different rendering engines for
different (future) UI technologies
without adapting application coding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 7
What is Web Dynpro
A Programming Model for User Interfaces1048708 Defines a standard structure for user interface applicationsndash
Derived from the MVC (ldquomodel-view-controllerrdquo) design pattern
A Set of Tools for User Interface Design1048708 Focus on graphical modelling
Code is generated from meta-model declarations1048708
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications1048708 Framework running on SAP Web AS server offers common services
A Technology for Software Modularization1048708 Components help structure applications and support pattern-based UIs
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 4
Why Another Technology for Building UIs
If you invest in a UI today you must be sure it will run on tomorrowrsquos technology
If you build a UI framework today you want to be sure it can take advantage of tomorrowrsquos technology
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 5
SAP UI History From SAP GUI to Web Dynpro
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 6
Web dynpro for ABAP Motivation
Web Dynpro UI definition
independent of client technology 1048708
As much abstract declaration as possible1048708
Different rendering engines for
different (future) UI technologies
without adapting application coding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 7
What is Web Dynpro
A Programming Model for User Interfaces1048708 Defines a standard structure for user interface applicationsndash
Derived from the MVC (ldquomodel-view-controllerrdquo) design pattern
A Set of Tools for User Interface Design1048708 Focus on graphical modelling
Code is generated from meta-model declarations1048708
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications1048708 Framework running on SAP Web AS server offers common services
A Technology for Software Modularization1048708 Components help structure applications and support pattern-based UIs
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 5
SAP UI History From SAP GUI to Web Dynpro
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 6
Web dynpro for ABAP Motivation
Web Dynpro UI definition
independent of client technology 1048708
As much abstract declaration as possible1048708
Different rendering engines for
different (future) UI technologies
without adapting application coding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 7
What is Web Dynpro
A Programming Model for User Interfaces1048708 Defines a standard structure for user interface applicationsndash
Derived from the MVC (ldquomodel-view-controllerrdquo) design pattern
A Set of Tools for User Interface Design1048708 Focus on graphical modelling
Code is generated from meta-model declarations1048708
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications1048708 Framework running on SAP Web AS server offers common services
A Technology for Software Modularization1048708 Components help structure applications and support pattern-based UIs
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 6
Web dynpro for ABAP Motivation
Web Dynpro UI definition
independent of client technology 1048708
As much abstract declaration as possible1048708
Different rendering engines for
different (future) UI technologies
without adapting application coding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 7
What is Web Dynpro
A Programming Model for User Interfaces1048708 Defines a standard structure for user interface applicationsndash
Derived from the MVC (ldquomodel-view-controllerrdquo) design pattern
A Set of Tools for User Interface Design1048708 Focus on graphical modelling
Code is generated from meta-model declarations1048708
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications1048708 Framework running on SAP Web AS server offers common services
A Technology for Software Modularization1048708 Components help structure applications and support pattern-based UIs
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 7
What is Web Dynpro
A Programming Model for User Interfaces1048708 Defines a standard structure for user interface applicationsndash
Derived from the MVC (ldquomodel-view-controllerrdquo) design pattern
A Set of Tools for User Interface Design1048708 Focus on graphical modelling
Code is generated from meta-model declarations1048708
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications1048708 Framework running on SAP Web AS server offers common services
A Technology for Software Modularization1048708 Components help structure applications and support pattern-based UIs
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 8
Web Dynpro Main Benefits
Deliver an Enterprise Quality Web Development Environment1048708
Enforce clear separation between UI logic and business logic1048708
Little coding lots of design1048708
Declarative UI development
Achieve Independence1048708run on multiple platforms - Browser Smart Client Mobile Devicehellip
Supports major platformsJava (NetWeaver rsquo04) ABAP (NetWeaver rsquo04s)
Saves SAPrsquos and customersrsquo investmentsConversion of classic ABAP Screens
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 9
Development Benefits
Web Dynpro offers the following advantages for application developers
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported ndash that is if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context
Note that stateless applications are not possible
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 10
Development Benefits Contdhellip
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 11
Web Dynpro Programming Model
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 12
Meta-model Declarations and Custom Coding
Meta-model Declarations
Guarantees common app design
Good for graphical tool support
bull Screen Layout and Nesting
bull Navigation and Error Handling
bull1048708Data Flow
bull1048708Componentization 1048708
Custom Coding
Guarantees universality
Good for data-driven dynamic apps
bull1048708Implementation of business rules
bull1048708Dynamic screen modifications
bull1048708Access to services (files etc)
bull1048708Portal eventing 1048708
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 13
Model View Controller (MVC) Approach
Design approach for decoupling presentation and application logic within a Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
VIEWVisualization of application data
ControllerEvent handling
Application data update
Control flow definition
ModelApplication data definition
Connection to business functionality
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 14
Web Dynpro Component Architecture
Controller handle the user input and steers the application1048708
Views define the layout1048708
Model holds and provide the business logic
SAP Web Dynpro uses principles of MVC paradigm
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 15
Web Dynpro Components
Web Dynpro Component contains1048708
Windows1048708
ViewsUI elements
Layout1048708
ControllersContext Data
Eventing
Methods
Attributes1048708
Component InterfaceInterface Controller
Interface View
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 16
Web Dynpro Component Architecture Internally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 17
Web Dynpro Component Architecture Externally Visible Web Dynpro Entities
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 18
Web Dynpro Views and UI Elements
View1048708Is embedded into window1048708Defines the visible layout via predefined UI elements1048708
Donrsquot contain any HTML or scripting
UI elements1048708Are the smallest UI building blocks (button input fieldhellip)1048708
Available as provided UI element libraries1048708
Have properties which steer their behavior1048708
Can be nested with Container UI elements1048708
Are positioned in hierarchical structure
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 19
Defining View Layout
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 20
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any client presentation layer
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 21
View and View Controller
View
Contains the UI element
Defines the Layout
UI elements mapped to Context nodes
View Controller
Stores Data in Context
Methods access context data and Model layer
Supply functions fill context nodes
Actions for event handling
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 22
Windows and Nested Views
A Window is a set of all possible views that can make up a visible screen
A window can have zero or more views embedded in it
A View can have ViewContainerUIElement This allows nesting views within a window
A ViewContainerUIelement can only display one view at a time
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 23
View Assembly
View Assembly 1 View Assembly 2 View Assembly 3
The Subset of views visible at any point of time is known as a View Assembly
Navigation causes either specific views within a view area to be replaced or it can cause entire view combination within the window to be replaced
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 24
Context Mapping
Component Controller
Controller which is the backbone of the Web Dynpro component
Has its own Context
Contains the logic for interaction with the model (ABAP class function modules BAPIs Web Services)
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts
Framework cares about data transport
(references)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 25
Context Mapping
Mapping Relationship between Component Controller and View Controller
Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller
When two controllers within the same component share data through a mapig relationship it is known as Internal Mapping
The mapping between controller contexts located in different Web Dynpro components is known as External Mapping
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 26
Data Binding
Data binding is the means by which data is automatically transported from a view controllers context to a UI element in its layout and visa versa
The Web Dynpro framework then manages the following two tasks
The transport of data from the context attribute to the UI element during the screen rendering process
Repopulating the context attribute from the UI element after data has been entered by the user and the next server round trip is initiated
Context Mapping
Data Binding
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 27
Concepts Web Dynpro Application
Web Dynpro application is an entry point into a Web Dynpro component and is the only Web Dynpro entity that can be addressed via a URL
In order to define a Web Dynpro application you must Specify
Which interface view of the root component will be used the default views) in this interface view defines the default view assembly
The component to be invoked this component is then known as the root component
Which inbound plug will act as the entry point for the nominated interface view (this inbound plug must be of type Startup)
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
IBM Global Business Services
copy IBM Corporation 2013Topic Title | Jan-2007 28
Session Summary
You should now be able to
Describe the declarative programming approach used to create Web Dynpro
applications
Explain the benefits resulting from this metadata approach
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
