Web Dynpro 开发指南.docx

Web Dynpro开发指南目录使用指南12007-4-181目录21总体介绍41.1DC工程结构说明41.2开发一个程序的一般过程52SAP NETWEAVER 开发指南52.1第一章 HELLO WORD52.2第二章 MASTER PAGE的使用292.3第三章 基本控件的使用302.3.1第一节 基本控件302.3.2第二节 VIEWSET的使用352.3.3第三节 页面跳转362.3.4第四节 FILEUPLOAD与FILEDOWNLOAD392.4第四章 ADOBE开发中脚本的使用472.4.1第一节 使用脚本添加删除TABLE的行472.4.2第二节 使用脚本添加删除一个子表单（SUBFORM）492.4.3第三节 用JAVASCRIPT做弹出对话框502.4.4第四节 一个实现大写金额的示例代码512.5第五章 弹出子窗口552.5.1按如下结构创建工程552.5.2按下图样式编辑EmailView的用户界面（这里的内容是Web Dynpro中的控件而非Adobe中的控件）。562.5.3为按钮Search(Google)添加Action562.5.4接下来我们要实现如下图所示的通讯录功能：572.5.5实现 EmailWindow 与AddressbookWindow的交互632.5.6添加确认窗口692.6第六章 动态添加行712.6.1创建工程结构712.6.2创建Context712.6.3编辑AddrowCompView722.6.4View Controller的开发732.6.5Eee732.7操作CONTEXT742.8调用BAPI752.9添加RFC中的结构方式801 总体介绍1.1 DC工程结构说明1.2 开发一个程序的一般过程 创建一个Project 创建一个Application 在Component Controller创建一个Context 创建一个 View 创建一个 Viewset 把 View 嵌入到 Viewset中 添加页面导航 设计布局 数据绑定 发布、运行程序2 SAP NETWEAVER 开发指南2.1 第一章 HELLO WORD双击桌面上的快捷方式，打开SAP NetWeaver Developer Studio，或者选择开始-程序中的链接；下面是软件打开后的开发界面（如果是第一次打开软件，则默认有一个Project001）；删除Project001，右键单击Project001，选中Delete；在弹出的对话框中可以选择是否彻底删除Project001的文件，这里选择不彻底删除，即Do not delete contents，然后单击Yes继续；下面开始创建一个自己的project，选择菜单File-New-Web Dynpro Project创建一个Web Dynpro Project；在弹出对话框中输入project的名字，如AdobeTesting，单击Finish完成创建；（注意：Project的名字必须是由a.z、A.Z、0.9和_组成，且要以大写开头。）可以看到在Web Dynpro Explorer窗口新增加了一个project如下；下面开始创建一个Application，选中AdobeTesting-Web Dynpro-Application-Create Application开始创建；在弹出对话框中输入Application的名字和Package的名字如：AdobeTesting和com.sap.adobe.test，单击Next继续；这里选择创建一个新的组件，即Create a new component；单击Next继续；这里不做任何修改，默认，单击Finish完成创建；可以看到在Application下已经有一个AdobeTesting；展开树状结构，选择AdobeTesting-Web Dynpro-Web Dynpro Component-AdobeTesting-Views-AdobeTestingView-，双击AdobeTestingView，并单击Context如下；接下来需要在Context中定义Form要用到的参数，注意：dataSource和pdfSource的概念，重要！右键单击Context，选择New-Value Node；在弹出的对话框中输入Name，如Datasource，单击Finish完成创建；可以看到在Context中已产生一个Datasource；右键单击Datasource，选择New-Value Attribute;在弹出对话框中输入Name，如display，单击Finish；注意1：1和0：1右键单击Context，选择New- Value Attribute，如下；在弹出对话框中输入Name，如PdfSource，单击Finish；这样，在Context中共创建了三个变量，下面修改一下PdfSource的属性，可以右键单击PdfSource，选择Properties；或者左键选中PdfSource，然后在框口的下方点击Properties，如下图，修改PdfSource的type为binary。点击Layout，在Outline窗口中右键点击RootUIElementContainer，选择Insert Child创建form，如下：在弹出对话框中选中InteractiveForm，并设置Id为InteractiveForm1，如下，单击Finish；接下来设置InteractiveForm1的属性，比较重要的是dataSource和pdfSource，选中InteractiveForm1，点击Properties，然后分别设置dataSource和pdfSource的值，其他的属性可以根据需要设置，如下图首先设置dataSource的值，点击右侧的按钮，弹出对话框如下，选中DataSource，点击OK；同上，设置pdfSource的值，点击右侧的按钮，弹出对话框如下，选中PdfSource，点击OK；接下来需要插入一段代码，完成赋值；选中Implementation，Outline窗口的内容会发生变化，选中wdDoInit()，增加一段代码如下：wdContext.currentDataSourceElement().setDisplay(Hello World);注：setDisplay这里的display为定义Context中的Display接下来要使用图形化的界面来设计Form。选中Layout，右键单击InteractiveForm1，选择Edit。接上一步，点击Edit后，软件会启动组件Adobe LiveCycle Designer来完成图形化的设计，下图是Adobe LiveCycle Designer打开后的效果图：上图中1：是标题；2：是Adobe LiveCycle Designer的工具栏3：结构和数据窗口4：AdobeForm布局设计窗口5：图形组件及属性等6：属性及其他实际过程中，会感觉显示器不够大，可以双击1来最大化Form设计界面（再次双击1则可以返回），也可以通过调整2中的布局，节省少许的屏幕空间。Adobe LiveCycle Designer支持拖拽的方式来实现Form的布局涉及，例如：选中Library中的Check Box，按住鼠标左键，拖拽到4中，即可在From中创建一个复选框。双击上图中1后的效果如下，双击下图中的1则可以返回到上图的布局：选中Data View，点击display，拖拽至form中的相应位置，这样就在form中创建了一个display的控件。选中工具栏中的Save All Metadata，检查并保存数据；下面几步配置服务器地址。选中菜单Window-Preferences弹出对话框如下：选中SAP J2EE Engine，设置SAP NW应用服务器的地址及端口，点击OK保存。北京（123901）右键单击AdobeTesting-WebDynpro-Applicaitons-AdobeTesting，选中Deploy New Archive and Run，发布并执行。如果执行成功，则可以看到执行结果如下：如果执行不成功，请检查Form的设计过程有无不正确的地方，应用服务器的地址是否配置正确，服务器端是否具备相应的License等。2.2 第二章 MASTER PAGE的使用这里的MASTER PAGE其实就是一个让多个PAGE保持一致风格的模板页。每创建一个INTERACTIVEFORM就会有一个MASTERPAGE，在MASTERPAGE中也可以像在普通的PAGE中拖放各种控件。在MASTERPAGE下的PAGE1下面有一个（UNTITLED CONTENT AREA）以下简称AREA。MASTERPAGE通常的使用方式是：用AREA划定正文的显示范围，在编辑MASTERPAGE时不对AREA范围内的区域进行编辑，在AREA之外可以加一些每一个PAGE都要用的东西如：LOGO或者页眉，页脚之类的东西。其中比较常用的是自动计算页码。在AREA的下面（也就是页脚的位置）我们可以加一个文本，然后右键点击这个文本，在菜单中有一个CURRENT PAGE NUMBER（当前页）和一个NUMBER OF PAGES（总页数）。如：拖一个文本，在其中输入PAGE然后点击右键，选择CURRENT PAGE NUMBER这是你会看到在PAGE的后面多了一个#号，在#号后输入一个/再点击右键选择NUMBER OF PAGES，这时你看到的是PAGE #/#，到这就做完了，现在可以预览一下，你会在你的PDF文档中看到#号已经被告换成了数字。如PAGE 1/4。做好了MASTERPAGE后，再编辑普通的PAGE时，页面中会有一个框，这个框就是AREA定义的范围，这时只能在这这个框内进行编辑。框以外的范围是不可编辑的。2.3 第三章 基本控件的使用 2.3.1 第一节 基本控件在这里我将向大家简单介绍一下ADOBE开发中，几个常用的页面控件的使用。除了我下面要介绍的几种控件以外，还有许多功能各异的控件，需要大家共同努力去学习。1在上一章HELLO WORD的基础上，在CONTEXT中添加与页面控件相对应的参数，如下图：右键点击CHECKBOX，选择PROPERTIES（或者点击页面最下面的PROPERTIES）设置CHECKBOX的数据类型为BOOLEAN（CHECKBOX的值必须为BOOLEAN类型）同样设置DATE的数据类型为DATE，（设置为DATE类型后控件会自动变为日期控件）。2点击CONTEXT面板下面的LAYOUT按钮，在左边OUTLINE面板右键点击INTERACTIVEFORM选择PROPERTIES（或者点击页面下面的PROPERTIES按钮）。在下面的PROPERTIES面板设置INTERACTIVEFORM的属性。为dataSource选择数据源（即在CONTEXT中创建的DATASOURCE）为pdfSource选择数据源（即在CONTEXT中创建的PDFSOURCE）；3在左边OUTLINE面板右键点击INTERACTIVEFORM，选择编辑（EDIT），在下面的面板双击INTERACTIVEFORM。点击DATAVIEW面板，将面板中的DISPLAY，CHECKBOX，TEXTAREA，DATE拖放到主面板（DESIGN VIEW），选中面板中的控件，在右边OBJECT面板修改它们的属性，对于CHECKBOX：在OBJECT下的BINDING面板将它的ON VALUE 和OFF VALUE的值改为TRUE和FALSE。TEXTAREA：要想把它变成文本域，需在OBJECT下的FIELD面板，勾选ALLOW MULTIPLE LINES， DROPDOWNLIST：先在LIBRARY下的WEBDYNPRONATIVE面板拖一个DROP-DOWNLIST， 再把DATA VIEW 中的DROPDOWNLIST拖到DROP-DOWNLIST的上面覆盖它，这时会弹出一个对话框，如下图，取消TYPE的选择，点击OK：在OBJECT下的FIELD面板可以点击+可以静态的为DROPDOWNLIST赋值。RADIOBUTTON：先在LIBRARY下的STANDARD面板下拖几个RADIOBUTTON到主面板，再用DATA VIEW 中的RADIOBUTTON去覆盖它，这时同样会弹出一个对话框，直接点击OK。在OBJECT下的BINDING面板更改RADIOBUTTON的值。4右键单击TEST04-WebDynpro-Applicaitons-TEST04，选中Deploy New Archive and Run，发布并执行。2.3.2 第二节 VIEWSET的使用这里的VIEWSET的作用就像是HTML中的FRAMSET，是实现在一个页面中分块显示多个不同的页面文件。1创建PROJECT：TEST05。2创建APPLICATION：TEST05；同时创建一个新组件：TEST05COMP。3在VIEWS结点下，创建2个VIEW，名字分别为：FIRST，SECOND。4找到WINDOWS-TEST05COMP-TEST05COMPVIEW结点，右键点击该结点，创建一个VIEW CONTAINER（CREATE VIEW CONTAINER），右键点击这个CONTAINER，创建一个VIEWSET。在VIEWSET的属性中可修改VIEWSET的行数和列数。这里将其改为1行2列，右键点击VIEWSET下的CELL，选EMBED VIEW，选中一个VIEW，FINISH。将2个VIEW分别嵌入到2个CELL中，如图。5在VIEWS结点下，双击FIRST，在OUTLINE面板中添加一个GROUP，在GROUP下添加一个IFRAM。同样地为SECOND也添加一个IFRAM。注：这里添加的IFRAM，只是让结果更明显一些，可以不加。6发布并运行程序。结果如下：2.3.3 第三节 页面跳转1创建PROGRAM，TEST04；2创建APPLICATION，名字也是TEST04。3添加VIEW组件；展开项目的目录，右键点击VIEWS结点，选择CREATE VIEW。给视图（VIEW）起一个名字如：FIRST。现在VIEWS结点下已有了两个VIEW。其中TEST04VIEW是在创建APPLICATION时创建的另一个FIRST是刚创建的。4展开WINDOWS结点，下面有一个TEST04，右键点击TEST04选择EMBED VIEW（如上图），选择第二项，点击NEXT，选择FIRST，点击FINISH。5双击WINDOWS结点下的TEST04，在窗口右上方会出现一个DIAGRAM VIEW面板，在这个面板中调整两个VIEW的位置，在组件面板中点击下方标有IN的蓝色箭头，再点击名为FIRST的VIEW，在弹出的对话框中输入INFROMTEST，同样将粉色的标有OUT的箭头放置到TEST04上，在弹出的对话框中输入OUTTOFIRST。用OUT下面的虚线，从OUT连接到IN。如下图。6双击VIEW结点下的TEST04VIEW。在OUTLINE面板，右键点击ROOTUIELEMENTCONTAINER，选择INSERT CHILD，添加一个GROUP，再用右键点击GROUP，选择INSERT TOOLBAR，右键点击TOOLBAR，INSERT TOOLBARITEM，添加一个TOOLBARBUTTON；7选中TOOLBARBUTTON右键点击，选择PROPERTIES， 在PROPERTIES面板，输入TEXT的值，在ON ACTION处为其添加事件。点击上图红色圆圈处，会弹出如下窗口，在NAME文本框输入名字，如：CLICK。点击FINISH。8点击IMPLEMENTATION按钮。 在OUTLINE面板中点击ONACTIONCLICK结点。在ONACTONCLICK方法中加入代码： wdThis.wdFirePlugOuttofirst();这里，wdFirePlug后面的Outtofirst是与第5步中的粉色箭头的名字相对应的。9发布并运行程序。2.3.4 第四节 FILEUPLOAD与FILEDOWNLOAD 创建工程结构Web Dynpro 工程结构 Web Dynpro Project: TEST06 Web Dynpro Application: TEST06APP Web Dynpro Component: TEST06COMP View: TEST06COMPView View: FILEDOWNLOADView: FILEUPLOADWindows: TEST06COMP ViewSet: MYVIEWSET在MyViewSet的属性中把columns的值改为1。如下图： 展开WindowsTest06Comp结点分别在Cell1,1和Cell2,1中嵌入FileDownLoad与FileUpLoad两个View。此时工程结构如下图：把本节要用到的TravelRequest.xdp（为用Adobe Desinger中画好的页面）拷贝到WORKSPACE/SRC/MIMES/COMPONENTS/./文件夹下。如.dtcLocalDevelopmentDCtest07_compsrcconfigurationComponents 创建CONTEXT双击COMPONENT CONTROLER结点， 5点击CONTEXT按钮，在结点下创建如下图的Context注：接下来把Component Controller 的Context映射到Test06CompView双击组件Test06Comp，用一个Data Link把Test06CompView和Component Controller联接起来（从Test06CompView到Component Controller）。把Context下的DataSource从右边拖到左边的Context下，在弹出的窗口中选中全部属性，完成。用同样方法将Context下的PdfSource映射到FileUpload下。然后再到FileDownload的Context下创建一个Attribute：PdfSource类型为Binary。 页面跳转添加从FileUpload到Test06CompView的页面跳转（参照本章第三节内容）。控件类型控件名 Inbound plugInFromUpload Outbound plugOutToTest06Navigate linklink 界面设计.1 FileDownload：为FileDownload用户控件的data属性绑定Context的PdfSource属性。.2 FileUpload：同样为FileUpload用户控件的data属性绑定Context的PdfSource属性。为Open按钮创建一个Aciton名为：OpenPress.3 Test06CompView:InteractiveForm的设置：properties控件名 DatasourceDataSource pdfsourcePdfSource 代码实现双击View下面的FileDownload，点击它的Implementation进入代码编辑器，加入以下代码：public void wdDoInit() /begin wdDoInit()/IWDAttributeInfo attInfo = wdContext.currentContextElement().node()/.getNodeInfo().getAttribute(PdfSource);/ISimpleTypeModifiable type = attInfo.getModifiableSimpleType();/IWDModifiableBinaryType binaryType = (IWDModifiableBinaryType) type;/binaryType.setFileName(TravelRequest.pdf); / Set file name/binaryType.setMimeType(WDWebResourceType.PDF); / set the mime typeIWDAttributeInfo attInfo = wdContext.currentContextElement().node().getNodeInfo().getAttribute(PdfSource);ISimpleTypeModifiable type = attInfo.getModifiableSimpleType();IWDModifiableBinaryType binaryType = (IWDModifiableBinaryType) type;binaryType.setFileName(TravelRequest.pdf); /set file namebinaryType.setMimeType(WDWebResourceType.PDF); /set the mime typeString fileName =tempwebdynproweblocalTest06Componentscom.sap.rikenhin.Test06CompTravelRequest.pdf;/ path to the source file/* converts the binary file to a byte array and moves it to the context element */try File file = new File(fileName); FileInputStream in = new FileInputStream(file); ByteArrayOutputStream out = new ByteArrayOutputStream(); int length; byte part = new byte 10 * 1024; while (length = in.read(part) != -1) out.write(part, 0, length); in.close(); wdContext.currentContextElement().setPdfSource(out.toByteArray();catch(Exception e) throw new WDRuntimeException(e);以同样方式进入FileUpload的代码编辑器，加入以下代码： public void onActionOpenPress(gmodel.api.IWDCustomEvent wdEvent ) /begin onActionOpenPress(ServerEvent)wdThis.wdGetTest06CompController().wdGetContext().currentContextElement().setPdfSource(wdContext.currentContextElement().getPdfSource();wdThis.wdFirePlugOutToTest06(); /end 2.4 第四章 ADOBE开发中脚本的使用2.4.1 第一节 使用脚本添加删除TABLE的行1打开WEB DYNPRO DEVELOPER STUDIO创建一个PROJECT名为：Test06，在它的下面创建一个APPLICATION名为：Test06App,在创建APPLICATION的过程中创建一个COMPONENT名为：Test06Comp、WINDOWS的名称为Test06Win、VIEW的名称为：Test06View。此时PROJECT的结构如下图：2双击VIEW结点下的Test06View，在下面的OUTLINE窗口，在ROOTUIELEMENTCONTAINER的下面创建一个INTERACTIVEFORM，右键点击刚创建的INTERACTIVEFORM，选择EDIT，打开编辑窗口。在右边的LIBRARY下的STANDARD标签下拖一个SUBFORM控件到编辑窗口，再拖一个TABLE控件到SUBFORM上。设置TABLE的列数为5、行数为1、包含标题行。3在左侧的Hierarchy窗口下找到（UNTITLED SUBFORM）（PAGE1）-(UNTITLED SUBFORM)-TABLE1。右键点击TABLE1下的HEADER ROW。选择INSERT-ROW ABOVE。再拖两个BUTTON到TABLE中，如下图：4点击TABLE1结点下的ROW1，再点击右侧的OBJECT面板，在BINDING选项卡中勾选REPEAT ROW FOR EACH ITEM。如下图：5.选中ADD ROW按钮，在上面的脚本编辑器中，在名为SHOW的下拉框中选择CLICK，在右边LANGUAGE处选择JAVASCRIPT。在文本编辑区域输入代码：Table1.Row1.instanceManager.addInstance(true);6.同样在X按钮的CLICK事件中输入台下代码：Table1.Row1.instanceManager.removeInstance(index);7点击ADOBE FORM LIVE CYCLE的工具栏中的EDIT按钮选择FORM PROPERTIES，在弹出窗口的DEFAULTS选项卡中把XDP PREVIEW FORMAT的值改为ACROBAT 8（DYNAMIC）XML FORM。注:这里这一步是必不可少的，默认的是静态的，不能实现动态。8在右侧BORDER面板中调整TABLE1的边框，去掉不想要的边框，点击PREVIEW PDF选项卡，会看到如下结果：点击上面的addRow按钮，则添加一行，点击每行前面的X按钮可以删除选中的行。注意：初始时的第一行是删不掉的，当点击这一行前的按钮时会删除它下面的一行。2.4.2 第二节 使用脚本添加删除一个子表单（SUBFORM）添加删除子表单与上一节的添加TABLE行基本上是一样的。参考代码：添加：Subform1.instanceManager.addInstance(true);xfa.form.recalculate(true);删除：Subform1.instanceManager.removeInstance(1);要注意的是：Subform1上要做一些设置，选择Subform1上，在右边OBJECT下，SUBFORM选项的CONTENT要选择FLOWED。Table的BINDING选项卡下要勾选REPEAT SUBFORM FOR EACH DATA ITEM。2.4.3 第三节 用JAVASCRIPT做弹出对话框 使用以下代码可以弹出一条消息：xfa.host.messageBox(Enter the text for the popup here);或都：xfa.host.messageBox(“The value of temp is “ + temp);你还可以给弹出的对话框加一个标题：xfa.host.messageBox(“Message”, “Title”);在消息或者标题的后面还可以加入两个整型的参数，第一个整数代表消息的类型如：0代表Error，1代表Warning；第二个整数是允许一个返回值：xfa.host.messageBox(“Message”, “Title”, 1, 1);第一个整数代表的意义： 0 Error (Default)1 Warning2 Question3 Status 4 模式框第二个整数代表的意义： 0 Ok (Default) /只显示一个OK按钮。 1 Ok, Cancel /显示一个OK按钮和一个Cancel按钮。 2 Yes, No /显示一个Yes按钮和一个No按钮。 3 Yes, No, Cancel /显示Yes, No, Cancel三个按钮。不同的按钮所对应的不同返回值： 1 Ok 2 Cancel 3 No 4 Yes2.4.4 第四节 一个实现大写金额的示例代码以上是该程序的界面：在大写金额后面的文本框的calculate事件中加入下面代码.- Zsg_Bapi_Fi_Clbx_01_Input.FirstPage.BodyForm.FooterForm.FooterTable.Row3.Cell2:calculate: - (JavaScript, client) var inputNumber = Zsg_Bapi_Fi_Clbx_01_Input.FirstPage.BodyForm.FooterForm.FooterTable.Row2.Ysbc.rawValue;var isNegative = false;if(inputNumber 15)xfa.host.messageBox(超出范围);if (numberValue=0)chineseValue = 零元整;TextField1.rawValue = chineseValue;String2 = String2.substr(String2.length-len, len); / 取出对应位数的STRING2的值for(var i=0; i= 3 )Ch1 = ;Ch2 = ;nZero = nZero + 1;elseCh1 = ;Ch2 = String2.substr(i, 1);nZero = nZero + 1;if( i = (len - 11) | i = (len - 3) / 如果该位是亿位或元位，则必须写上Ch2 = String2.substr(i, 1);chineseValue = chineseValue + Ch1 + Ch2;if ( String3 = 0 ) / 最后一位（分）为0时，加上“整”chineseValue = chineseValue + 整;if(isNegative) chineseValue = 负+chineseValue;Zsg_Bapi_Fi_Clbx_01_Input.FirstPage.BodyForm.FooterForm.FooterTable.Row3.Cell2.rawValue= chineseValue;2.5 第五章 弹出子窗口在NETWEAVER中子窗口的使用是很常见的，如使用子窗口实现VALUE HELP.下面的示例将向大家展示如何实现一个子窗口。2.5.1 按如下结构创建工程Web Dynpro 工程结构 Web Dynpro Project: TutWD_Popup_Init Web Dynpro Application: PopupApp Web Dynpro Component: PopupComp View: EmailView /写邮件的界面容器 Windows: EmailWindow /包含EmailView 的 window. 2.5.2 按下图样式编辑EmailView的用户界面（这里的内容是Web Dynpro中的控件而非Adobe中的控件）。2.5.3 为按钮Search(Google)添加ActionAction 的名为ShowGoogleWindow，其它使用默认设置。进入EmailView的CONTROLLER(JAVA CODE)中在onActionShowGoogleWindow()方法中加入下面的代码：onActionShowGoogleWindow()public void onActionShowGoogleWindow(gmodel.api.IWDCustomEvent wdEvent ) /begin onActionShowGoogleWindow(ServerEvent)IWDWindow window = wdComponentAPI.getWindowManager().createExternalWindow(http:/www.google.de,Google - Search for an email address,false);window.open();/end 2.5.4 接下来我们要实现如下图所示的通讯录功能：点击To按钮弹出一个窗口。当关闭窗口时将选中的EmailAddress传回到EmailView中，为此我们要在component controller中定义一个事件。1. 首先为AddressBook创建一个 window 2. 在window中嵌入一个新的View3. 为AddressBook创建一个Context 4. 实现AddressbookView的界面 5. 实现AddressbookView的Controller 为AddressBook创建一个 Window在 Web Dynpro Explorer中, 找到以下结点: Web Dynpro - Web Dynpro PopupComp -Components Windows. 右键点击Windows结点，选择Create Window. 在弹出的窗口中输入 window 的名字： AddressbookWindow. 点击 Finish完成Window的创建. AddressbookWindow的 Properties 选项卡中把 AddressbookWindow 的title改为： Addressbook. 为AddressbookWindow嵌入一个新View右键点击AddressbookWindow 选择 Embed View. 在弹出窗口中选择Embed new View，点击Next，输入View的名字：AddressbookView点击完成。 为Address Book创建Context打开PopupComp的Component Controller (Web DynproComponents PopupComp Component Controller). 选择 Context 选项卡 添加一个结点Addressbook和一个属性Email: Context Element Type Properties Value Addressbook Value node cardinality 0.n E-mail Value attribute type String 接下来把Component Controller的Context映射到AddressbookView和EmailView ：双击PopupComp结点打开下面的窗口。 添加一个Link 从 AddressbookView 到 Component Controller的Data Link. 在弹出的窗口中把Addressbook结点从右边Component Controller拖到左边AddressbookView 的Context下。在弹出的对话框中选中Email属性和Addressbook结点. 用同样的方法把Component Controller的Context映射到EmailView。再在AddressbookView 的Context下添加一个name属性。与Email属性不同这个name属性是只在AddressbookView中显示的所以不需要在Component Controller的Context下创建。Context Element Type Properties Value Name Value attribu