65.9K
CodeProject 正在变化。 阅读更多。
Home

敏捷发布周期控件

SupperSlonic
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (7投票s)

2014 年 2 月 2 日

CPOL

4分钟阅读

viewsIcon

20854

downloadIcon

399

敏捷发布周期显示在3个视图中：月历，只读视图，编辑视图

引言

此控件允许您显示和编辑一个敏捷发布周期。它具有最少的服务器端逻辑，并且所有功能都使用JavaScript/JQuery和CSS实现，因此对所有Web开发者都很有用。

敏捷发布周期可以以三种不同的方式显示：月历，只读列表和可编辑列表。它们都可以包含以下项目

  • 规划 – 每个发布周期只有一个； 
  • 冲刺 – 任意数量的冲刺，但至少应有一个；
  • 节假日 – 任意数量的节假日； 
  • 团队成员的假期 – 任意数量的假期。  

您可以从我的网站下载一个示例项目。
http://supperslonic.com/WebControls/AgileReleaseCycleCalendar.

日历视图

每个日期都包含简短的描述，该描述在鼠标悬停事件时显示。

每周的第一天是一个可配置的属性。您可以轻松切换到星期一、星期日，甚至星期五。=)

日历中的日期是可选的。您可以将任何事件处理程序绑定到“选择日期”事件。

您可以自定义每种敏捷项目的颜色：规划、冲刺、节假日 – 所有项目都可以有自己的颜色。

您可以自定义团队成员的图标。如果团队成员有假期，则其图标将在日历中显示为假期期间。


只读和编辑模式

除了日历，还有两个模板用于以只读模式和编辑模式显示敏捷发布周期。

只读模式非常简单：仅显示规划、冲刺、节假日和假期的列表。

编辑模式也以列表形式显示所有项目，但它允许您： 

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

 

使用代码

模型

项目包含敏捷发布周期的两个模型：域模型和视图模型。域模型用于从服务器检索数据并将其保存回服务器。视图模型根据域模型填充，并用于在视图中渲染HTML。

域模型

ReleaseCycleModel 类描述了敏捷发布周期的域模型。此类支持XML序列化和反序列化。

模型的XML结构非常简单，项目还包含一个XSD模式来验证XML。 

<?xml version="1.0" encoding="utf-8" ?>
<releaseCycle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="urn:supperslonic:agileCalendar">
  <planning name="planning 1" start="2013-12-27" end="2014-01-03" color="yellow"/>
  <sprint name="sprint 1" start="2014-01-06" end="2014-01-15" color="redTomato"/>
  <sprint name="sprint 2" start="2014-01-16" end="2014-01-21" color="pinkSoftDark"/>
  <sprint name="sprint 3" start="2014-01-22" end="2014-02-04" color="greenPeace"/>
  <sprint name="sprint 4" start="2014-02-05" end="2014-02-17" color="blueGloss"/>
  <holiday name="New Year" start="2014-01-01" end="2014-01-01" color="blueSky" />
  <vacation name="Emmy's vacation" start="2014-02-05" end="2014-02-06" teamMemberIcon="teamMember5"/>
  <vacation name="Maxic's vacation" start="2014-02-06" end="2014-02-15" teamMemberIcon="teamMember4"/>
</releaseCycle>

视图模型

视图模型仅用于在月历中显示敏捷发布周期。

日历渲染逻辑与敏捷数据模型分离，并且仅与抽象类一起工作。
有一个CalendarBuilder 类，它使用抽象工厂 CalendarDateFactoryBase 来渲染HTML。工厂返回一个抽象类 CalendarDateBase，该类表示日历的日期。

这允许您将日历的渲染逻辑用于任何其他目的
显示任何自定义日期,
轻松扩展并覆盖它以进行测试。

日历日期使用自定义工厂的构建逻辑

/// <summary>
/// Gets all the dates for the calendar
/// </summary>
/// <returns>A list of date's models</returns>
public IList<CalendarDateBase> BuildDates()
{
	IList<CalendarDateBase> result = new List<CalendarDateBase>();

	DateTime startDate = this.datesFactory.StartDate;
	DateTime endDate = this.datesFactory.EndDate;
	MonthPeriodIterator monthIterator = new MonthPeriodIterator(startDate, endDate, this);

	DatesIteratorBase alignIterator;
	while (monthIterator.HasNext)
	{
		alignIterator = new AlignStartOfTheMonthIterator(monthIterator.CurrentDate, this);
		while (alignIterator.HasNext)
			result.Add(alignIterator.ReadNext(this.datesFactory.GetEmptyViewModel()));

		monthIterator.IsNewMonth = false;
		while (!monthIterator.IsNewMonth && monthIterator.HasNext)
			result.Add(monthIterator.ReadNext(this.datesFactory.GetCalendarDate(monthIterator.CurrentDate)));

		alignIterator = new AlignEndOfTheMonthIterator(monthIterator.CurrentDate, this);
		while (alignIterator.HasNext)
			result.Add(alignIterator.ReadNext(this.datesFactory.GetEmptyViewModel()));
	}

	return result;
} 

日历构建逻辑中使用了三个迭代器。

  1. AlignStartOfTheMonthIterator；
  2. AlignEndOfTheMonthIterator；
  3. MonthPeriodIterator。 

前两个迭代器通过生成“空单元格”来将月份的开始和结束与星期对齐。
第三个迭代器从工厂提供日历日期，并用于内部指示新月份的开始。

对于敏捷日历，存在一个AgileDateFactory 类，它根据域模型创建视图模型（CalendarDateBase）。

[ChildActionOnly]
public ActionResult AgileCalendar(ReleaseCycleModel model)
{
	//AgileDateFactory inherits CalendarDateFactoryBase
	AgileDateFactory factory = new AgileDateFactory(model.Normolize());
	CalendarBuilder builder = new CalendarBuilder(DayOfWeek.Monday /* week starts from Monday */,
factory);

	return PartialView("Calendar", builder.Build() /* build CalendarModel */);
}  

视图

有3个主要视图用于显示数据： 

  • 月历视图；
  • 只读视图；
  • 编辑视图。 

月历视图操作其自己的数据模型，该模型已从敏捷发布周期中抽象出来。如前所述，这允许您轻松地将此模板用于任何其他实体。

只读视图以简单易读的方式显示敏捷发布周期。

编辑视图以与只读视图相同的方式显示数据，但允许数据编辑。

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

还有一些在主视图中内部使用的模板。对于客户端支持，有四个.js 文件和四个.css 文件

  • agileReleaseCycle.js agileReleaseCycle.css;
  • calendar.js calendar.css;
  • colorPicker.js colorPicker.css;
  • teamMemberPicker.js teamMemberPicker.css。 

控制器 (Controller)

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

如何使用

只读模式和月历

@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") 





© . All rights reserved.