在现代软件开发中,敏捷发布周期是一种常见的项目管理方法。本文将介绍如何使用JavaScript/JQuery和CSS实现一个敏捷发布周期日历,它具有最少的服务器端逻辑,适合所有Web开发者使用。
敏捷发布周期可以通过三种不同的方式展示:月历视图、只读列表和可编辑列表。所有视图都可以包含以下项目:
可以从网站下载示例项目:
在日历视图中,每个日期都包含一个简短的描述,当鼠标悬停时会显示。一周的第一天是一个可配置的属性,可以轻松地切换到周一、周日,甚至是周五。
日历中的日期是可选的,可以为“选择日期”事件绑定任何事件处理程序。可以为每个敏捷项目自定义颜色:计划、冲刺、假期 - 所有项目都可以有自己的颜色。
还可以自定义团队成员的图标。如果团队成员有休假,他的图标将在日历中显示在休假期间。
除了日历之外,还有两个模板用于以只读模式和编辑模式显示敏捷发布周期。只读模式非常简单:只显示计划、冲刺、假期和休假的列表。
编辑模式也以列表形式显示所有项目,但它允许:
项目包含两个模型用于敏捷发布周期:领域模型和视图模型。领域模型用于从服务器检索数据并保存回去。视图模型基于领域模型生成,并用于在视图中渲染HTML。
领域模型:
public class ReleaseCycleModel
{
// 领域模型的实现
}
视图模型:
public class CalendarViewModel
{
// 视图模型的实现
}
有三个主要视图用于显示数据:月历视图、只读视图和编辑视图。月历视图操作自己的数据模型,与敏捷发布周期抽象化。如前所述,这允许轻松地重用此模板用于任何其他实体。
只读视图以简单易读的方式显示敏捷发布周期。编辑视图以与只读视图相同的方式显示数据,但允许数据编辑:
控制器没有服务器端逻辑。只有一些关于如何序列化/反序列化数据和构建月历的小示例。
public ActionResult AgileCalendar(ReleaseCycleModel model)
{
// 控制器的实现
}
@model AgileCalendarExample.Models.DomainModels.ReleaseCycleModel
@section Scripts
{
<script type="text/javascript" src="@Url.Content("~/Content/js/calendar.js")"></script>
}
<div>
@Html.Action("AgileCalendar", Model)
</div>
<div>
@Html.DisplayFor(m => m, "ReleaseCycle")
</div>
@model AgileCalendarExample.Models.DomainModels.ReleaseCycleModel
@section Scripts
{
<script type="text/javascript" src="@Url.Content("~/Content/js/teamMemberPicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/js/colorPicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/js/agileReleaseCycle.js")"></script>
}
<div>
@Html.EditorFor(m => m, "ReleaseCycle")
</div>
@Html.Action("GetTeamMembers", "TeamMembers")