敏捷发布周期控制

分享于 

10分钟阅读

Web开发

  繁體

介绍

这个控制让你可以显示和编辑的敏捷发布周期。 具有服务器端逻辑,所有内容都使用/jquery和实现,因此它对所有的web开发人员都是有用的。

灵活发布周期可以三种不同的方式显示: 月历,只读列表和可以编辑列表。 它们都可以包含以下项:

  • 计划 - 每个发行周期只有一个
  • 按收费- 任何冲刺数,但应该至少是一个;
  • 假日 - 任何数量的假日;
  • 团队成员休假 - 任意休假次数。

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

日历视图:

每个日期都包含一个简短的描述,它在鼠标上方显示。

一周的第一天的第一天是一个配置的属性表。 你可以轻松地 switch 到星期一或者星期日,甚至星期五。 = )

日历中的日期为 select。 你可以将任何事件处理程序绑定到"选择日期( s )"事件。

可以为每个敏捷项目自定义颜色: 计划。冲刺。假日- 一切都有自己的颜色。

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


只读取和编辑模式:

另外,还有两个模板可以在读取模式和编辑模式下显示敏捷释放周期。

只读模式非常简单: 只显示计划。冲刺。假期和假期的列表。

编辑模式也显示列表中的所有项,但它允许你:

  • 添加新项目;
  • 将项目拖到废纸篓中,删除
  • 选择带有漂亮的颜色选取器的颜色;
  • 选择有一个酷的team-Member-Picker
  • 验证控件并获取JSON表示。

使用代码

型号

项目包含了两个用于敏捷发行版cylce的模型: 域模型和视图模型。 域模型用于从服务器检索数据并将它的保存回去。 基于域模型填充视图模型,并用于在视图中呈现 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> 



视图模型:

视图模型只用于显示月calendar的敏捷发布周期。

日历呈现逻辑与敏捷数据模型分离,只使用抽象类。
使用的CalendarBuilder类,它使用一个收费的抽象工厂CalendarDateFactoryBase来呈现 Html。 工厂返回一个收费的抽象类,表示日历日期。

这允许你重复使用日历逻辑的呈现以满足任何其他目的:
显示任何自定义日期,
轻松扩展并覆盖它。

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


/// <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;


} 



有三个迭代器使用 inside 构建日历逻辑。

  • AlignStartOfTheMonthIterator ;
  • AlignEndOfTheMonthIterator ;
  • MonthPeriodIterator。

第一个迭代器通过生成"空单元格"来对齐开始和月末的开始和结束日期。
第三个迭代器提供工厂日历日期,并在内部用于指示新月份的开始日期。

对于敏捷日历,有一个收费的类,它根据领域模型创建视图模型( 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个:

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

按它的自己的数据模型( 从敏捷发布周期抽象出来),每月月的日历视图。 如上所述,这允许你对任何其他实体重用这里模板。

只读视图以简单且easy-to-read方式显示敏捷发行周期。

编辑视图显示数据的方式与只读视图相同,但允许进行数据编辑:

  • 要输入新的数据,动态添加的模板行有个: 新的冲刺。假期或者假期;
  • 视图有一个收费的颜色选取器设置项目的自定义颜色 ;
  • 用于编辑假期的 team-member-Picker ;
  • 有一个的JavaScript函数来验证控件,并获得敏捷发布周期的JSON 表示。

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

  • agileReleaseCycle.js agilereleasecycle。css ;
  • calendar.js 日历;
  • 确定是使用显式宽度还是测量宽度的一种简便方法
  • teamMemberPicker.js teamMemberPicker.css.
控制器

控件没有服务器端逻辑。 如何序列化/反序列化数据并生成月历的小示例。

如何使用

只读模式和月历:


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









控制  REL  Cycle  AGI  Agile  release-cycle  
相关文章