敏捷发布周期日历

在现代软件开发中,敏捷发布周期是一种常见的项目管理方法。本文将介绍如何使用JavaScript/JQuery和CSS实现一个敏捷发布周期日历,它具有最少的服务器端逻辑,适合所有Web开发者使用。

敏捷发布周期可以通过三种不同的方式展示:月历视图、只读列表和可编辑列表。所有视图都可以包含以下项目:

  • 计划 - 每个发布周期只有一个;
  • 冲刺 - 可以有任意数量的冲刺,但至少需要一个;
  • 假期 - 可以有任意数量的假期;
  • 团队成员休假 - 可以有任意数量的休假。

可以从网站下载示例项目:

日历视图

在日历视图中,每个日期都包含一个简短的描述,当鼠标悬停时会显示。一周的第一天是一个可配置的属性,可以轻松地切换到周一、周日,甚至是周五。

日历中的日期是可选的,可以为“选择日期”事件绑定任何事件处理程序。可以为每个敏捷项目自定义颜色:计划、冲刺、假期 - 所有项目都可以有自己的颜色。

还可以自定义团队成员的图标。如果团队成员有休假,他的图标将在日历中显示在休假期间。

只读和编辑模式

除了日历之外,还有两个模板用于以只读模式和编辑模式显示敏捷发布周期。只读模式非常简单:只显示计划、冲刺、假期和休假的列表。

编辑模式也以列表形式显示所有项目,但它允许:

  • 添加新项目;
  • 通过拖动到垃圾箱来删除项目;
  • 使用漂亮的颜色选择器选择颜色;
  • 使用酷酷的团队成员选择器选择团队成员;
  • 验证控件并获取JSON表示。

使用代码

项目包含两个模型用于敏捷发布周期:领域模型和视图模型。领域模型用于从服务器检索数据并保存回去。视图模型基于领域模型生成,并用于在视图中渲染HTML。

领域模型:

public class ReleaseCycleModel { // 领域模型的实现 }

视图模型:

public class CalendarViewModel { // 视图模型的实现 }

视图

有三个主要视图用于显示数据:月历视图、只读视图和编辑视图。月历视图操作自己的数据模型,与敏捷发布周期抽象化。如前所述,这允许轻松地重用此模板用于任何其他实体。

只读视图以简单易读的方式显示敏捷发布周期。编辑视图以与只读视图相同的方式显示数据,但允许数据编辑:

  • 有一个动态添加的模板行用于输入新数据:新的冲刺、假期或休假;
  • 视图有一个颜色选择器来设置项目的自定义颜色;
  • 有一个团队成员选择器来编辑休假;
  • 有一个JavaScript函数用于验证控件并获取敏捷发布周期的JSON表示。

控制器

控制器没有服务器端逻辑。只有一些关于如何序列化/反序列化数据和构建月历的小示例。

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")
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485