Using Date Navigator

(DateNavigator UI Element) in Web

Dynpro for Java

Applies to:
SAP Web Dynpro for Java. For more information, visit the Web Dynpro Java homepage.

Summary
Here we learn to use some basic functionality of Date Navigator UI Element in Web Dynpro for Java
Author:

Shabbir Aslam

Company: HCL-AXON
Created on: 29 March 2010

Author Bio
Shabbir Aslam is having 3 years experience as a SAP Netweaver Consultant.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

1

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Table of Contents
DateNavigator ..................................................................................................................................................... 3
Demonstrating a Simple Use of DateNavigator .............................................................................................. 3
Create the Demo Project.............................................................................................................................................. 4
Create the Context ....................................................................................................................................................... 4
Design the Views ......................................................................................................................................................... 5
Implement the Event Handlers ..................................................................................................................................... 7
Deploy and Test the Application ................................................................................................................................ 10

Related Content ................................................................................................................................................ 11

Disclaimer and Liability Notice .......................................................................................................................... 12

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

2

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

DateNavigator
The DateNavigator is an UI element of Web Dynpro Java. It helps to present User with a list of dates where
the user may navigate and choose single or a range of date(s).
The dates may be categorized and highlighted using the DateNavigatorLegend (currently deprecated and
replaced by Legend UI element) and the DateNavigatorMarking.

Demonstrating a Simple Use of DateNavigator

We will create a small Web Dynpro Java Application where the User has the option to enter a date range
(start date and end date).
On clicking a button the DateNavigator will be displayed in a popup window and will show the range of
entered dates in a highlighted color. On selecting a date from this range the same will be displayed in the
original window.
This can be compared to a situation where the User makes a Trip for certain period and fills up the expenses
incurred. Using the DateNavigator we can restrict the expense date to be within the Trip Dates and make the
date entry easy for the User.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

3

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Create the Demo Project

Lets create a new Web Dynpro Java project and name it DateNavigatorDemo.
Now create an application for this project and name it DateNavigatorApp and add the component
DateNavigatorComp, window DateNavigatorMainWindow and view DateNavigatorMainView.
Create a window for popup DateNavigatorPopUpWindow and its view DateNavigatorPopUpView.

Create the Context

Following context elements are required to be defined in the component controller and mapped to both the
views for this demo application.

ChildWindow has cardinality 1..1 and its attribute WinInfo is of type

com.sap.tc.webdynpro.services.session.api.IWDWindow.
Date has cardinality 1..1 and it has three attributes EndDate, SelectedDate and StartDate all of type date.
NavigatorData has cardinality 1..1, its sub node MarkingDate has cardinality 0..n with an attribute Date of
type date.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

4

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Design the Views

Lets design the DateNavigatorMainView and do the context binding for Start Date, End Date and Selected
Date. The button Select Date is linked to event openDateNavigator which opens the popup window with
DateNavigator.

In the DateNavigatorPopUpView add the DateNavigator UI element.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

5

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

The DateNavigator has following properties:

Since we are creating a simple demo we will use the selection mode = single to select a single date from
the range.
Create an event handler setSelectedDate for the event onDaySelect.
Bind startsWith to Date.SelectedDate. This will open the navigator to the last selected date.
Now right click on the DateNavigator to Insert Marking which will mark the selectable dates.

Bind the dataSource and date of the Marking

The attribute MarkingDate.Date contains the list of dates to be marked.

The property category being deprecated we use daySemantics to specify the background color of the cell.
Lets use the TableCellDesign criticalvalue_medium.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

6

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Tooltip entered here is displayed when cursor is placed upon the marked dates.
Also add a Cancel button to the view and create an event handler onActionclosePopup to close the popup
without any selection.
Implement the Event Handlers
onActionopenDateNavigator In DateNavigatorMainView
This event handler validates if the Start and End Dates are Valid, if so then it populates the marking dates
and shows the popup.
Code:
public void
onActionopenDateNavigator(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )
{
//@@begin onActionopenDateNavigator(ServerEvent)
Date tripStartDate = wdContext.currentDateElement().getStartDate();
Date tripEndDate = wdContext.currentDateElement().getEndDate();
if( null != tripStartDate && null != tripEndDate){
if(! tripStartDate.after(tripEndDate)){
//Mark the Trip Dates on Date Navigator
Calendar calendar = Calendar.getInstance();
calendar.setTime(tripStartDate);
while(calendar.getTime().compareTo(tripEndDate) <= 0){
IPrivateDateNavigatorMainView.IMarkingDateElement markingElem
= wdContext.createMarkingDateElement();
Date tempDate = calendar.getTime();
markingElem.setDate(new java.sql.Date(tempDate.getTime()));
wdContext.nodeMarkingDate().addElement(markingElem);
calendar.add(Calendar.DATE, 1);
}
//Open the Popup
IWDWindowInfo windowInfo =
wdComponentAPI.getComponentInfo().findInWindows("DateNavigatorPopUpWindow");
IWDWindow window =
wdComponentAPI.getWindowManager().createModalWindow(windowInfo);
window.setWindowPosition(WDWindowPos.CENTER);
window.setWindowSize(100,100);
window.setTitle("Date Navigator");
window.show();
wdContext.currentChildWindowElement().setWinInfo(window);
}
else{
wdComponentAPI.getMessageManager().reportException("Start date cannot
be after End date.", false);
}
}
else{
wdComponentAPI.getMessageManager().reportException("Enter the Start and End
dates.", false);
}
//@@end
}

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

7

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

onActionsetSelectedDate In DateNavigatorPopupView
The event handler sets the selected date to context if it is within the permissible dates and closes the popup.
Add a parameter selectedDate of type date to this action. This parameter will pass the date selected in the
DateNavigator to the event handler.

Add the following code to populate selectedDate in wdDoModifyView

Code:
public static void wdDoModifyView(IPrivateDateNavigatorPopUpView wdThis,
IPrivateDateNavigatorPopUpView.IContextNode wdContext,
com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)
{
//@@begin wdDoModifyView
IWDDateNavigator dateNavigator = (IWDDateNavigator)
view.getElement("DateNavigator");
dateNavigator.mappingOfOnDaySelect().addSourceMapping("day", "selectedDate");
//@@end
}

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

8

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Code the onActionsetSelectedDate event handler to set the selected date to context.
Code:
public void onActionsetSelectedDate(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
wdEvent, java.sql.Date selectedDate )
{
//@@begin onActionsetSelectedDate(ServerEvent)
Date StartDate = wdContext.currentDateElement().getStartDate();
Date EndDate = wdContext.currentDateElement().getEndDate();
if(null != selectedDate){
if(!(selectedDate.equals(StartDate) || selectedDate.equals(EndDate) ||
(selectedDate.after(StartDate) && selectedDate.before(EndDate)))){
wdComponentAPI.getMessageManager().reportWarning("Date is outside
permissible range.");
}
else{
wdContext.currentDateElement().setSelectedDate(selectedDate);
wdContext.nodeNavigatorData().invalidate();
IWDWindow window =
(IWDWindow)wdContext.currentChildWindowElement().getWinInfo();
window.destroyInstance();
}
}
//@@end
}

onActionclosePopup In DateNavigatorPopupView
The event handler closes the popup without any date selection.
Code:
public void onActionclosePopup(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
wdEvent )
{
//@@begin onActionclosePopup(ServerEvent)
wdContext.nodeNavigatorData().invalidate();
IWDWindow window = (IWDWindow)wdContext.currentChildWindowElement().getWinInfo();
window.destroyInstance();
//@@end
}

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

9

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Deploy and Test the Application

Now deploy the application and test your DateNavigator.
Select a highlighted date (Inside range).

Date successfully selected.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

10

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Select a non-highlighted date (Outside range).

Warning message displayed.

Hope this example gives you an initial feel of the DateNavigator UI element in Web Dynpro for Java.
Kindly refer to http://help.sap.com and http://sdn.sap.com for further information and/or your specific
requirements.

Related Content

DateNavigator

DateNavigatorMarking

DateNavigatorLegend

For more information, visit the Web Dynpro Java homepage

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

11

Using Date Navigator (DateNavigator UI Element) in Web Dynpro for Java

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not
supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.
SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document,
and anyone using these methods does so at his/her own risk.
SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or
code sample, including any liability resulting from incompatibility between the content within this document and the materials and
services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this
document.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

12