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。会出现新的页面。
恭喜,我们完成了搜索界面。