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

7/24/2019 Using Date Navigator (DateNavigator UI Element) in Web Dynpro Java

1/12

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

2010 SAP AG 1

Using Date Navigator(DateNavigator UI Element) in WebDynpro for Java

Applies to:

SAP Web Dynpro for Java. For more information, visit theWeb 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.
http://www.sdn.sap.com/irj/sdn/nw-wdjavahttp://www.sdn.sap.com/irj/sdn/nw-wdjavahttp://www.sdn.sap.com/irj/sdn/nw-wdjavahttp://www.sdn.sap.com/irj/sdn/nw-wdjava


2/12

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


2010 SAP AG 2

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


3/12



2010 SAP AG 3

DateNavigator

The DateNavigator is an UI element of Web Dynpro Java. It helps to present User with a list of dates wherethe user may navigate and choose single or a range of date(s).

The dates may be categorized and highlighted using the DateNavigatorLegend (currently deprecated andreplaced 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 ofentered dates in a highlighted color. On selecting a date from this range the same will be displayed in theoriginal window.

This can be compared to a situation where the User makes a Trip for certain period and fills up the expensesincurred. Using the DateNavigator we can restrict the expense date to be within the Trip Dates and make thedate entry easy for the User.


4/12



2010 SAP AG 4

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 DateNavigatorAppand add the componentDateNavigatorComp, window DateNavigatorMainWindow and view DateNavigatorMainView.

Create a window for popup DateNavigatorPopUpWindow and itsview DateNavigatorPopUpView.

Create the Context

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

ChildWindow has cardinality 1..1and its attribute WinInfo is of typecom.sap.tc.webdynpro.services.session.api.IWDWindow.

Date has cardinality 1..1and 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 oftype date.


5/12



2010 SAP AG 5

Design the Views

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

In the DateNavigatorPopUpView add the DateNavigator UI element.


6/12



2010 SAP AG 6

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 categorybeing deprecated we use daySemanticsto specify the background color of the cell.Lets use the TableCellDesign criticalvalue_medium.


7/12



2010 SAP AG 7

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 popupwithout 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)


8/12



2010 SAP AG 8

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 theDateNavigator 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

}


9/12



2010 SAP AG 9

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

}


10/12



2010 SAP AG 10

Deploy and Test the Application

Now deploy the application and test your DateNavigator.

Select a highlighted date (Inside range).

Date successfully selected.


11/12



2010 SAP AG 11

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 tohttp://help.sap.comandhttp://sdn.sap.comfor further information and/or your specificrequirements.

Related Content

DateNavigator

DateNavigatorMarking

DateNavigatorLegend

For more information, visit theWeb Dynpro Java homepage
http://help.sap.com/http://help.sap.com/http://help.sap.com/http://sdn.sap.com/http://sdn.sap.com/http://sdn.sap.com/http://help.sap.com/SAPHELP_NW70/helpdata/EN/81/ab884118aa1709e10000000a155106/content.htmhttp://help.sap.com/SAPHELP_NW70/helpdata/EN/81/ab884118aa1709e10000000a155106/content.htmhttp://help.sap.com/SAPHELP_NW70/helpdata/EN/53/fe8b41b4b3b25fe10000000a1550b0/frameset.htmhttp://help.sap.com/SAPHELP_NW70/helpdata/EN/53/fe8b41b4b3b25fe10000000a1550b0/frameset.htmhttp://help.sap.com/SAPHELP_NW70/helpdata/EN/1a/fe8b41b4b3b25fe10000000a1550b0/frameset.htmhttp://help.sap.com/SAPHELP_NW70/helpdata/EN/1a/fe8b41b4b3b25fe10000000a1550b0/frameset.htmhttp://www.sdn.sap.com/irj/sdn/nw-wdjavahttp://www.sdn.sap.com/irj/sdn/nw-wdjavahttp://www.sdn.sap.com/irj/sdn/nw-wdjavahttp://www.sdn.sap.com/irj/sdn/nw-wdjavahttp://help.sap.com/SAPHELP_NW70/helpdata/EN/1a/fe8b41b4b3b25fe10000000a1550b0/frameset.htmhttp://help.sap.com/SAPHELP_NW70/helpdata/EN/53/fe8b41b4b3b25fe10000000a1550b0/frameset.htmhttp://help.sap.com/SAPHELP_NW70/helpdata/EN/81/ab884118aa1709e10000000a155106/content.htmhttp://sdn.sap.com/http://help.sap.com/


12/12



Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is notsupported 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 orcode sample, including any liability resulting from incompatibility between the content within this document and the materials andservices offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of thisdocument.

Documents

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