AndroMDA Getting started(八)

16．搜索结果界面

我们现在准备实现搜索结果界面，我们要通过在Search Timecards活动图中增加的两个步骤来实现。第一个步骤会引入结果表，第二个步骤会引入到Timecard明细的导航。活动图如下：

注意，我们增加了page variable来调用timecardSummaries，TimecardSummaryVO对象的数组。这个page variable用来被用于标记告诉AndroMDA作为一个表解释它。

• ArgoUML (under construction)
• MagicDraw 9.x
• MagicDraw 11.5
• RSM 6

我们现在需要增强我们的SearchController用搜索结果填充page variable，我们需要做两件事情：

1．Page variable必须对populateSearchScreen()方法来说是可用的。要做到这一点，在这个模型中增加第六个参数到这个方法中。参数的名字和类型必须精确匹配timecardSummaries。

2．SearchController需要访问TimeTrackingService。打开Service图，增加一个依赖，从SearchController 到TimeTrackingService。

现在，让我们要求AndroMDA为修改的Search Timecards功能生成代码：

1．  在命令提示符下面执行mvn install，确保看到了构建成功的信息。

接下来修改SearchController用搜索结果来初始化timecardSummaries page variable。修改文件SearchControllerImpl.java，用下面的粗体替换：

// license-header java merge-point

package org.andromda.timetracker.web.timecardsearch;

...

import javax.servlet.http.HttpServletResponse;

import org.andromda.timetracker.domain.TimecardStatus;

import org.andromda.timetracker.vo.TimecardSearchCriteriaVO;

import org.andromda.timetracker.vo.TimecardSummaryVO;

import org.andromda.timetracker.vo.UserVO;

...

public class SearchControllerImpl extends SearchController

{

    ...

    public final void populateSearchScreen(...)

    throws Exception

    {

        ...

        // Populate submitter and approver dropdowns

        form.setSubmitterBackingList(userList, "id", "username");

        form.setApproverBackingList(userList, "id", "username");

        // Populate status dropdown

        List statusLabels = new ArrayList(TimecardStatus.literals());

        List statusValues = new ArrayList(TimecardStatus.literals());

        statusLabels.add(0, ALL_STRING);

        statusValues.add(0, "");

        form.setStatusLabelList(statusLabels.toArray());

        form.setStatusValueList(statusValues.toArray());

        // Populate timecard summaries

        TimecardStatus status = null;

        if (form.getStatus() != null && form.getStatus().length() > 0) {

            status = TimecardStatus.fromString(form.getStatus());

        }

        TimecardSearchCriteriaVO criteria = new TimecardSearchCriteriaVO(

            form.getSubmitter(),

            form.getApprover(),

            status,

            form.getStartDateMinimumAsDate(),

            form.getStartDateMaximumAsDate());

        TimecardSummaryVO[] timecards =

            getTimeTrackingService().findTimecards(criteria);

        form.setTimecardSummaries(timecards);

    }

}

 

接着，用下面的步骤在JBoss上构建和部署应用，并且进行测试：

1．  只构建web项目来确保上边增加的代码被编译和打包。Mvn –f web/pom.xml install

2．  确保JBoss服务正在运行。

3．  部署这个应用：mvn –f app/pom.xml –Ddeploy

4．  打开浏览器并且指向http://localhost:8080/timetracker。TimeTracker搜索页面会显示和一些搜索结果。你应该能改变搜索参数来看到新的搜索结果。

下面是搜索屏幕的，差的不太远。

 

17．细节列 Detail Column

在这一章中，我们会增加一些详细的列到结果表中。当你点击时这个列会有按钮把你指向详细的页面去。为这个功能修改的活动图像如下：

这个活动图没有新的建模思想，因此我们只会给你高级的步骤来构建它。一般的，我们正在试着创建一个details触发器。这个details触发器会包含一个id参数，指明点击的是那个timecard。我们需要通过id到下一个叫做Timecard Details的用例。因而，id不是一种非常描述性的名称，我们更喜欢转换它为timecardID。被叫做Initialize Timecard的活动转换id参数为timecardId页变量。因此，有这记不更新你的活动图。

1．  首先创建活动的名字叫做Initialize Timecard Id。记住action state的名字应该为Initialize Timecard(不仅仅是Lable)。通过双击状态，在action state描述输入名字。

2．  从Search Timecards到Initialize Timecard Id创建一个transition。在这个叫做detail的transition上面创建一个信号触发器，并且增加一个参数叫做id，类型为Long。

3．  增加一个标记到id参数，叫做@andromda.presentation.web.view.field.type并且设置它的值为link。这个标记确保在表中的id列会被连接而不是默认的文本框。

4．  在叫做@andromda.presentation.web.action.tablelink的transition上增加一个标签并且设置它的值为timecardSummaries。这个标签确保在表上的detail触发器会发生，显示timecardSummaries。因此我们没有描述任何属性在这个value中。

5．  创建一个终止状态。

6．  增加一个transition(迁移)从Initialize Timecard Id到终止状态。

7．  创建一个page variable叫做timecardId类型为Long在这个迁移上。

8．  切换到Services图，在SearchController中增加下面的方法：+initializeTimecardId(id:Long,timecardId:Long):void。

9．  选择前面的活动图，从Initialize Timecard Id活动状态调用initializeTimecardId()方法。记住调用应该被作为deferrable事件增加。（这与增加populateSearchScreen()的调用很相似）。

10． 我们需要连接终止状态到下个Timecard Details用例。通过在上面双击，简单的打开终止状态的描述。在Name域，输入Timecard Details。AndroMDA对连接到终止状态的目标用例做名称匹配。

 

完成了Search Timecards活动图。当然，我们仍然需要创建Timecard Details用例，否则AndroMDA会抱怨不能在Search Timecards活动图中找到终止状态的目标。下面的步骤创建非常简单的Timecard Details用例：

1．  打开叫做Application Use Cases的用例图。

2．  增加一个新的用例，叫做Timecard Details。Stereotype为<<FrontEndUseCase>>。

3．  在模型中，在org.andromda.timetracker.web下创建一个新包叫做timecarddetails。

4．  从Use Cases包中移动Timecard Details用例到我们刚刚创建的timecarddetails包。

5．  在timecarddetails包下面创建一个类叫做TimecardController。

6．  在Timecard Details用例下创建一个新的活动图并且命名为Timecard Details Activity Diagram。

7．  连接TimecardController到活动图，使用你的模型描述中的过程描述。

8．  打开Timecard Details活动图并且输入下面的元素。注意page variable timecardId从上面的用例获得他的值(Search Timecards)。

 

现在让我们让AndroMDA生成修改过的模型的代码：

1．  在命令提示符中执行命令mvn clean，接着是mvn install。构建会失败，抱怨我们没有实现SearchControllerImpl类的initializeTimecardId()方法。

2．  打开SearchControllerImpl.java并且增加下面的代码到里面

  public final void initializeTimecardId(

        ActionMapping mapping,

        org.andromda.timetracker.web.timecardsearch.InitializeTimecardIdForm form,

        HttpServletRequest request,

        HttpServletResponse response)

    throws Exception

    {

        form.setTimecardId(form.getId());

    }

3．  只构建web项目确保上面的代码已经编译和打包。Mvn –f web/pom.xml install

4．  确保JBoss服务正在运行

5．  部署应用 mvn –f app/pom.xml –Ddeploy

6．  打开浏览器，指向http://localhost:8080/timetracker。搜索页会出现，而且也有Details按钮在结果面板上。

7．  点击一个Details按钮。浏览器会前进到Timecard Details页。注意id在URL的参数中传递。

 

18．定制Look and Feel

在这一章，我们要定制搜索界面的感官，像timetracker原型中的那样。

为前台定制的基本处理是好看简单。正如你所知，AndroMDA在web/target/src目录生成前台元素（例如JSP，样式表和javascript）。如果你需要定制这些元素，仅仅拷贝他们到web/src/main目录，保留相同的树结构。现在你可以作任何文件的修改。当你再次构建你的应用时，maven会拷贝成果，从src目录拷贝到target目录。因而，你能缓和自动生成和定制生成的文件，在你的war中。注意最好等到界面的功能完成在开始定制界面样式，再定制界面后再进行功能改变会和成果很难同步。

在这种背景下，我们准备定制我们的前台。注意定制要求掌握HTML,CSS,JSP,Struts,Tiles,JavaScript和相关的前台技术的知识。我们不可能在这篇教程中覆盖所有的这些主题，因此我们会简单的提供一些定制文件给你。下面是定制搜索界面的步骤：

1．下载custrom-look-and-feel.zip并且解压到C:/timetracker/web/src/main。你可以得到一个子目录在main下面，叫做jsp。这个目录以后会包含三个子目录：

a)      layout:新的部署和关联的文件

b)      org:为搜索页面定制的jsp文件

c)      styles:被jsp文件使用的新的样式表

2．编辑文件C:/timetracker/web/src/main/roperties/messages.properties并且用下面的内容覆盖相关内容。这些属性处理我们的jsp使用的信息。

#Temporary message until Approve Timecards page is defined

approve.timecards.title=Approve Timecards

# Overrides of AndroMDA generated messages

time.tracker.home=Home

# Custom messages

search.criteria=Search Criteria

search.results=Search Results

3．执行命令mvn clean，跟着执行mvn install。

4．JBoss服务器运行

5．部署应用 mvn –f app/pom.xml –Ddeploy

6．打开浏览器，定位到http://locahost:8080/timetracker。会出现新的页面。

恭喜，我们完成了搜索界面。