xUIElements2Solution

《xUIElements2Solution》由会员分享，可在线阅读，更多相关《xUIElements2Solution（23页珍藏版）》请在装配图网上搜索。

1、UI ElementsSolutionChapter: UI ElementsTheme:Dictionary, TableAt the end of this Exercise, you are able to: Define a dictionary structure and reuse it from a Web Dynpro application. Define standard table functionality. 4Developing, Step-by-StepNote: In this exercise you have to type in some lines of

2、 java code. For your convenience, you can cut and paste the code from the corresponding solution project.But keep in mind: Some of the methods are automatically generated by Web Dynpro .Because of that, the methods names you have to choose can differ from the method names of the solution.4-1Define d

3、ata transport from StartView to TableView.4-1-1 Define view attributes for the context of the view StartView.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02.Select the node Views and open the context menu of StartView.Choose Edit.The Vie

4、w Designer for StartView appears on the right pane Choose the Context tab Open the context menu for the root node Context and choose the option New / Value Attribute.Define the following value attributes: NameTypectx_firstname stringctx_lastnamestring.ctx_dateBegindatectx_dateEnddate 4-1-2Define val

5、ue attributes for the context of the component controller.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02/ Web Dynpro / Web Dynpro Components / Exc_UI_02.Select the node Component Controller and open the context menu.Choose Edit.The Controller editor appears on the right pane Choose th

6、e tab Context Open the context menu for the root node Context and choose the option New / Value Attribute. Add the following value attributes: NameTypecmpCtx_firstnamestringcmpCtx_lastnamestring.cmpCtx_dateBegindate.cmpCtx_dateEnddate4-1-3Define the mapping between the context of the view StartView

7、and the context of the component controller.In the context menu of the node WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02, select the entry Open Data Modeler:In the left toolbar, choose Create a data link. This is then shaded in grey.Place the cursor on the view StartView and le

8、ft-click. Drag the data link to the Component Controller and release the left mouse button. The dialog box for defining the context mapping appears.Drag and drop the value node ctx_firstName, ctx_lastname, ctx_dateBegin, and ctx_dateEnd of the view context to the corresponding fields of the componen

9、t controller.To complete the data link definition, choose Finish.Data Modeler, Exc_UI_02:In the left toolbar, choose Create a data link. This is then shaded in grey.Place the cursor on TableView and left-click. Drag the data link to the Component Controller and release the left mouse button. The dia

10、log box for defining the context mapping appears.In this case, however, do not define a mapping between any context elements. Choose Finish.Save the new project data by choosing Save All Metadata from the toolbar.4-2In the Layout of view TableView, define a table UI element. Bind this UI element to

11、the views context.4-2-1 Define the table UI element.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02.Select the node Views. Open the context menu of TableView.Choose Edit.The View Designer for TableView appears on the right pane In the to

12、olbar, choose Complex Standard and drag and drop Table to the editor pane on the right.Note: Leave the dataSource property of the table blank. You will specify this property later.Save the new project data by choosing Save All Metadata from the toolbar.4-2-2Define a Dictionary structure type.In the

13、Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Dictionaries / Local Dictionary / Data Types.Select the node Structures and open the context menu.Choose Create Structure.In the wizard that appears, enterStructure namePersonStructure packagecom.sap.training.wd.basics.ui02.structuresChoose Fi

14、nish.Define the elements of the structure:Assign the following property values:Element NameBuilt-in TypeNot nullFIRSTNAMEstringxLASTNAMEstringxDATE_BEGIN dateDATE_ENDdateSave the new project data by choosing Save All Metadata from the toolbar.4-2-3Create the context for the view TableView with struc

15、ture binding.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Ex_UI_02.Select the node Views and open the context menu of the view TableView.Choose Edit.The View Designer for the view TableView appears on the right pane Choose the tab Context.Open

16、the context menu for the root node Context and choose the option New / Value Node. In the wizard, enterNamePersonSelect“Create with structure binding”Choose Next.Select the structurecom.sap.training.wd.basics.ui02.structures / Person Choose Next.Select all structure elements.Choose Finish.Save the n

17、ew project data by choosing Save All Metadata from the toolbar.4-2-4 Define the table binding between the table UI element and the context.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02.Select the Views node and open the context menu of

18、 TableView.Choose Edit.The View Designer for the view TableView appears on the right pane Choose the Layout tab and then choose the table UI element.Open the context menu and choose Create Binding. In the wizard that appears, select firstname and lastname from the node Person.Choose Finish.Save the

19、new project data by choosing Save All Metadata from the toolbar.4-2-5 Add the values of the input fields of StartView to the table of TableView.Open the View Designer for the view TableView again. Choose the Implementation tab. Add the following lines to the event handler method onPlugFromStartView(

20、):Note: Some of the following methods were generated by Web Dynpro after youve specified the context value nodes and values. Because of that, the methods names you have to choose can differ from the following names: public void onPlugfromStartView( ) /begin onPlugfromStartView(ServerEvent) String fi

21、rstname = wdThis.wdGetExc_UIController().wdGetContext(). currentContextElement().getCmpCtx_firstname(); String lastname = wdThis.wdGetExc_UIController().wdGetContext(). currentContextElement().getCmpCtx_lastname(); Date date_begin = wdThis.wdGetExc_UIController().wdGetContext(). currentContextElemen

22、t().getCmpCtx_dateBegin(); Date date_end = wdThis.wdGetExc_UIController().wdGetContext(). currentContextElement().getCmpCtx_dateEnd(); IPersonElement person = wdThis.wdGetContext().createPersonElement(); person.setFIRSTNAME(firstname); person.setLASTNAME(lastname); person.setDATE_BEGIN(date_begin);

23、person.setDATE_END(date_end); wdThis.wdGetContext().nodePerson().addElement(person); /endThis method is called, after the user has made some changes to the input fields in the view StartView and after the user has pressed the button Show names. The Web Dynpro automatically stores the values of the i

24、nput fields to the component context. Before the view TableView is shown, the Method onPlugFromStartView is called. Here youll create local variables for the persons data, get the values from the component context and create a new person attribute in the view context. Because the view context is bou

25、nd to the table as data source, the data is then shown in the table.Save the new project data by choosing Save All Metadata from the toolbar.4-5Create a Web Dynpro applicationIn the Web Dynpro Explorer, expand the node WD01_Basics_UI_02.Expand the node Web Dynpro and open the context menu for Applic

26、ations.To open the wizard, choose Create Application.In the wizard, enter:NameWD01_Basics_UI_02Packagecom.sap.training.wd.basics.ui02Accept the other suggested values and choose Next.Select Use existing component and choose Next.SelectWeb Dynpro ComponentExc_UI_02Interface ViewExc_UI_02_WindowInterf

27、aceViewStartup PlugDefaultand choose Finish.Successful result:The generated Web Dynpro application object completes your project structure. You can now deploy your project and start your Web Dynpro application. WD01_Basics_UI_02 enables you to address the Web application as a whole, when you launch

28、this complete application in the next step.5Building, Deploying, and Running, Step-by-StepDeploy and run the Web Dynpro application.In the Web Dynpro Explorer:Expand the node WD01_Basics_UI_02 / Web Dynpro / Applications.Open the context menu for ExcUI_02.To deploy and run the application, choose De

29、ploy new Archive and Run.Successful result:The Developer Studio launches the Web browser and chooses the active view StartView.You can insert some values in the input fields and choose the button Show Names.First, these values are stored in the value attributes of the context of view StartView, whic

30、h is mapped to the component controllers context. The values are then copied programmatically to the elements of the value node Person, which is defined in the context of view TableView. This context is visualized by the table UI element, which is bound to the context. 6Optional: Additional table fe

31、atures, Step-by-Step6-1Show Details of a selected table row in a separate view.6-1-1Define the data transport from the view TableView to the view TableDetailView.To transport the person detail data between the two views, it is necessary to define the person structure in the component context and map

32、 this structure to the two view contexts.6-1-1-1Define the component context value node Person for the component controller.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02.Open the context menu for the Component Controller node and choos

33、e Edit.The Controller editor appears on the right pane Choose the Context tab Open the context menu for the root node Context and choose the option New / Value NodeIn the wizard, enterNamePersonSelect “Create with structure binding”Choose Next.Select the structure com.sap.training.wd.basics.ui02.str

34、uctures/Person Choose Next.Select the node Person.Choose Finish.Successful result:The component context includes the value node Person and the value attributes cmpCtx_dateBegin, cmpCtx_dtaeEnd, cmpCtx_firstName and cmpCtx_lastNameSave the new project data by choosing Save All Metadata from the toolb

35、ar.6-1-1-2Define value node Person for the context of the view TableDetailView.You find a description of the necessary steps in exercise 4-2-3.6-1-1-4Define the context mapping between the view context of TableView and the component context.This mapping has already been created in exercise 4-1-3. In

36、 this exercise you have to update the data link.In the context menu of the node WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02, select the entry Open Data Modeler:Choose the data link between TableView and the component context. From the context menu choose Edit. Drag and drop th

37、e value node Person of the view context to the corresponding node Person of the component controller and map the corresponding fields To complete the data link definition, choose Finish.Save the new project data by choosing Save All Metadata from the toolbar.6-1-1-5Define the context mapping between

38、 the context of the view TableDetailView and the context of the component controller.Data Modeler, Exc_UI_02:In the left toolbar, choose Create a data link. This is then shaded in grey.Place the cursor on the view TableDetailView and left-click. Drag the data link to theComponent Controller and rele

39、ase the left mouse button. The dialog box for defining the context mapping appears.Drag and drop the context value node person of the view TableDetailView to the corresponding context node person of the component controller.To complete the data link definition, choose Finish.Save the new project dat

40、a by choosing Save All Metadata from the toolbar.6-1-2Add input fields for all context elements to the detail view TableDetailView. Apply the template Form to define input fields and labels.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02

41、.Select the node Views and open the context menu of view TableDetailView.Choose Edit.The View Designer for TableDetailView appears on the right pane Choose the Layout tab.The Outline view appears in the lower left side of the SAP NetWeaver Developer Studio.Choose the predefined Group node and choose

42、 Apply Template from the context menu.In the wizard that appears, choose Form.Choose Next.In the next screen select all attributes from the structure Person.Choose Finish.Successful result:The wizard creates all necessary labels and input fields for the view TableDetailView. The data binding between

43、 the input fields and the context attributes is also defined automatically.Save the new project data by choosing Save All Metadata from the toolbar.6-1-3Define the navigation between the views TableView and TableDetailView.In the Web Dynpro Explorer:Expand the nodes WD01_Basics_UI_02 / Web Dynpro /

44、Web Dynpro Components / Exc_UI_02.Select the node Windows. Open the context menu of Exc_UI_02 and choose Embed View.In the wizard that appears, choose Embed existing view.Choose TableDetailViewChoose FinishDefine the following navigation links:FromtoOutbound plugInbound plugtoDetailViewfromTableView

45、toTableViewfromDetailViewIn TableViewChoose the Action tab. Define a new Action ShowTableView (fires plug toDetailView).Choose the Layout tab. Add a button to the button group. Choose the following properties:TextDetailsEventonActionShowDetailsSave the new project data by choosing Save All Metadata

46、from the toolbar.6-1-4Create the Web Dynpro application WD01_Basics_UI_02.Take a look at exercise 4-5.6-1-5Build, deploy and run the application.Take a look at exercise 5-1.Successful result:As a result of this exercise, you added an additional view TableDetailView to the component. When you select

47、a table row and choose the Details button, the TableDetailView appears and shows all details of the selected person.6-2Delete a selected table row.6-2-1Define a toolbar for the table in the view TableView. Add a toolbarButton to the toolbar.In the Web Dynpro Explorer: Expand the nodes WD01_Basics_UI

48、_02 / Web Dynpro / Web Dynpro Components / Exc_UI_02.Select the node Views and open the context menu of TableView.Choose Edit.The View Designer for TableView appears on the right pane Choose the Layout tab.The Outline view appears in the lower left side of the SAP NetWeaver Developer Studio.Select t

49、he node table. Open the context menu and choose Insert Toolbar.Select the new Toolbar node. Open the context menu and choose Insert Toolbaritem.Choose type ToolbarButton.Choose Finish.Save the new project data by choosing Save All Metadata from the toolbar.6-2-2Define an action for the toolbar butto

50、n und bind the toolbarButton to this action.Choose the tab Actions for the view TableView.Define a new Action Name:DeleteEntryTextDelete entryEvent Handler:DefaultFire Plug:Choose Finish.Choose the tab Layout of the view TableView.Update the properties of the toolbar button:textAt runtime this will

51、be replaced by the text Delete entry that you have defined when you created the DeleteEntry action.onActionDeleteEntrySave the new project data by choosing Save All Metadata from the toolbar.6-2-3Implement the event handler for deleting a person entry.Choose the Implementaion tab of TableViewInsert

52、the following code in method onActionDeleteEntry()public void onActionDeleteEntry() /begin onActionDeleteEntry(ServerEvent) int n = wdContext.nodePerson().size(); int leadSelected = wdContext.nodePerson().getLeadSelection(); / loop backwards to avoid index troubles for (int i = n - 1; i = 0; -i) if

53、(wdContext.nodePerson().isMultiSelected(i) | leadSelected = i) wdContext.nodePerson().removeElement( wdContext.nodePerson().getElementAt(i); /if /for /endSave the new project data by choosing Save All Metadata from the toolbar.6-2-5Create the Web Dynpro application WD01_Basics_UI_02.Take a look at e

54、xercise 4-5.6-2-6Build, deploy and run the application.Take a look at exercise 5-1.Successful result:As a result of this exercise, you added a Delete button to the table toolbar.After having selected a table row and chosen the Delete button, the table row will be deleted.6-3Calculated attributes6-3-

55、1Update the structure Person in the local dictionary. Add an additional attribute DURATION (type long).In the Web Dynpro Explorer, expand the nodes WD01_Basics_UI_02 / Dictionary / Local Dictionary / Data Types / Structures.Select the node Person, open the context menu and choose Edit.The Structure

56、editor appears on the right pane Add the additional field DURATION of type long.Save the new project data by choosing Save All Metadata from the toolbar.6-3-2Update the component context.6-3-2-1Add the attribute DURATION to the context value node PersonIn the Web Dynpro Explorer, expand the nodesWD0

57、1_Basics_UI_02 / Web Dynpro / Web Dynpro Components.Select the node Exc_UI_02, open the context menu and choose Edit.In the context editor that appears, choose the tab Context.Choose the node Person, open the context menu and choose Edit Structure Binding. In the wizard that appears choose DURATION

58、and choose Finish 6-3-2-2Set the property calculated of this attribute trueIn the context editor choose the DURATION entry and change its property calculated to true,Save the new project data by choosing Save All Metadata from the toolbar.6-3-2-3Implement the generated method getPersonDURATION().In

59、the context editor choose the IMPLEMENTATION tab and navigate to the method getPersonDURATION():package com.sap.training.wd.basics.ui02;/begin importsimport java.sql.Date;import java.util.Calendar;import java.util.GregorianCalendar;/end. . .public long getPersonDURATION() /begin Date dateBegin = ele

60、ment.getDATE_BEGIN(); Date dateEnd = element.getDATE_END(); Calendar calBegin = new GregorianCalendar(); calBegin.setTime(dateBegin); long dt1 = calBegin.getTimeInMillis(); Calendar calEnd = new GregorianCalendar(); calEnd.setTime(dateEnd); long dt2 = calEnd.getTimeInMillis(); long days = (dt2 - dt1) / 86400000; return +days;