基于MVC+EasyUI的Web開發(fā)框架經(jīng)驗(yàn)總結(jié)（14）--自動(dòng)生成圖標(biāo)樣式文件和圖標(biāo)的選擇操作

在很多Web系統(tǒng)中，一般都可能提供一些圖標(biāo)的選擇，方便配置按鈕，菜單等界面元素的圖標(biāo)，從而是Web系統(tǒng)界面看起來更加美觀和協(xié)調(diào)。但是在系統(tǒng)中一般內(nèi)置的圖標(biāo)樣式相對(duì)比較有限，而且硬編碼寫到樣式表里面，這樣給我們擴(kuò)展使用有很多的不方便。基于這個(gè)原因，我想如果能夠獨(dú)立一個(gè)模塊，自動(dòng)根據(jù)圖標(biāo)生成圖標(biāo)CSS樣式文件，并存儲(chǔ)相應(yīng)的記錄到數(shù)據(jù)庫(kù)里面，方便我們查詢顯示，那樣我們使用起來就很方便了，最后有了這些數(shù)據(jù)，只需要做一個(gè)通用的圖標(biāo)選擇界面，并可以在很多地方重用了。本文正是基于這個(gè)思路，開發(fā)了一個(gè)圖標(biāo)管理模塊和圖標(biāo)選擇界面，本文主要闡述這個(gè)開發(fā)過程和最終的效果展示。

1、圖標(biāo)樣式生成管理

為了方便根據(jù)讀取的圖標(biāo)文件列表，生成對(duì)應(yīng)的圖標(biāo)樣式文件，我們可以利用NVelocity組件，基于模板進(jìn)行CSS樣式文件的生成。關(guān)于NVelocity的使用，可以參考我多篇關(guān)于它的介紹，這個(gè)組件非常強(qiáng)大，我自己的代碼生成工具也是基于它編寫了很多模板進(jìn)行代碼生成，具體可以參考一下《使用NVelocity生成內(nèi)容的幾種方式》這篇文章。

1.1 圖標(biāo)樣式文件準(zhǔn)備

有了這些準(zhǔn)備，我們可以定義一個(gè)模板的文件用來生成樣式文件了，我們先看最終的樣式文件效果。

.icon-table{
    background:url('table.png') no-repeat center center;
}
.icon-telephone{
    background:url('telephone.png') no-repeat center center;
}
.icon-user{
    background:url('user.png') no-repeat center center;
}
.icon-view{
    background:url('view.png') no-repeat center center;
}
.icon-word{
    background:url('word.png') no-repeat center center;
}

根據(jù)以上組織效果，我們可以定義一個(gè)模板內(nèi)容如下所示。

#foreach($item in ${FileNameList})
.${item.Text}{
    background:url('${item.Value}') no-repeat center center;
}
#end ##endforeach

其中FileNameList變量是一個(gè)基于名稱和值的集合對(duì)象，我們遍歷它進(jìn)行生成就可以了。

1.2 圖標(biāo)樣式的生成操作

有了模板，我們還需要組織好對(duì)應(yīng)的文件目錄，一般來說，Web的圖標(biāo)可以使用16,24,32這些標(biāo)準(zhǔn)大小的圖表，適應(yīng)不同場(chǎng)合的需要。

因此我們創(chuàng)建幾個(gè)不同的目錄，并放入對(duì)應(yīng)的模板文件和圖標(biāo)文件。

生成圖標(biāo)樣式文件的操作分為下面幾個(gè)步驟：

獲取對(duì)應(yīng)目錄的圖標(biāo)文件，轉(zhuǎn)換為實(shí)際的對(duì)象格式集合，生成圖標(biāo)樣式文件，存儲(chǔ)圖表樣式到數(shù)據(jù)庫(kù)方便查詢。

這些操作我們?cè)趫D標(biāo)管理的控制器 IconController 里面增加方法完成，部分代碼如下所示。

/// <summary>
/// 生成圖標(biāo)文件
/// </summary>
/// <param name="iconSize">圖表尺寸，可選16,32等</param>
/// <returns></returns>
public ActionResult GenerateIconCSS(int iconSize = 16)
{
	CommonResult result = new CommonResult();

	string realPath = Server.MapPath("~/Content/icons-customed/" + iconSize);
	if (Directory.Exists(realPath))
	{
		List<CListItem> list = GetImageToList(realPath, iconSize);

		try
		{
			//使用相對(duì)路徑進(jìn)行構(gòu)造處理
			string template = string.Format("Content/icons-customed/{0}/icon.css.vm", iconSize);
			NVelocityHelper helper = new NVelocityHelper(template);
			helper.AddKeyValue("FileNameList", list);

			helper.FileNameOfOutput = "icon";
			helper.FileExtension = ".css";
			helper.DirectoryOfOutput = realPath;//指定實(shí)際路徑

			string outputFilePath = helper.ExecuteFile();
			if (!string.IsNullOrEmpty(outputFilePath))
			{
				result.Success = true;

				//寫入數(shù)據(jù)庫(kù)
				bool write = BLLFactory<Icon>.Instance.BatchAddIcon(list, iconSize);
			}
		}
		catch (Exception ex)
		{
			LogTextHelper.Error(ex);
			result.ErrorMessage = ex.Message;
		}
	}
	else
	{
		result.ErrorMessage = "沒有找到圖片文件";
	}

	return ToJsonContent(result);
}

上面的方法很好的完成了對(duì)圖標(biāo)樣式的生成和保存數(shù)據(jù)庫(kù)的操作，這個(gè)生成操作主要就是基于模板化的生成，非常方便。

在構(gòu)建名稱值的集合的時(shí)候，注意圖標(biāo)樣式名稱，不能包含有 一些特殊的字符，如[]()這些符號(hào)需要去掉，因此可以通過下面的正則表達(dá)式替換方法進(jìn)行去除。

string displayText = Path.GetFileNameWithoutExtension(file);
//文件名需要去除（）和[]等符號(hào)
displayText = CRegex.Replace(displayText, @"[)\];,\t\r ]|[\n]", "", 0);
displayText = CRegex.Replace(displayText, @"[(\[]", "-", 0);

最終，我們可以構(gòu)建一個(gè)獨(dú)立的頁(yè)面，用來實(shí)現(xiàn)生成圖標(biāo)樣式并保存的操作，界面如下所示。

界面操作代碼如下所示。

//綁定按鈕的的點(diǎn)擊事件
function BindEvent() {                
	$("#btnGenerateCSS").click(function () {
		$.messager.confirm("操作確認(rèn)", "您確認(rèn)重新生成圖標(biāo)記錄嗎？", function (action) {
			if (action) {
				//圖表尺寸
				var iconSize = $("#IconSize").combobox('getValue');
				//alert(iconSize);
				var postData = "";

				$.ajax({
					type: 'POST',
					url: '/Icon/GenerateIconCSS?iconSize=' + iconSize,
					dataType: 'json',
					data: postData,
					success: function (data) {
						if (data.Success) {
							showTips("操作成功");
							location.reload();
						}
						else {
							showError("操作失敗：" + data.ErrorMessage, 3000);
						}
					}
				});
			}
		});
	});
}

2、圖標(biāo)的分頁(yè)展示

為了有效查看我們生成在數(shù)據(jù)庫(kù)的圖標(biāo)列表，我們需要一個(gè)合理的界面表現(xiàn)方式，用來顯示圖標(biāo)信息。傳統(tǒng)的使用datagrid的方式比較呆板，也不是很方便，所以我們需要自定義分頁(yè)處理進(jìn)行展現(xiàn)，基于重用一些優(yōu)秀組件的原則，我側(cè)重于使用一些現(xiàn)成的組件模塊，MVC分頁(yè)方面，考慮使用楊濤的MVC分頁(yè)控件（http://www.webdiyer.com/mvcpager/），這個(gè)功能看起來很不錯(cuò)。

圖表的展現(xiàn)方式，我希望通過easyui的這個(gè)例子進(jìn)行展現(xiàn)一組圖表的效果。

2.1 圖表展現(xiàn)的界面效果

然后系統(tǒng)通過把它們進(jìn)行分頁(yè)處理，選擇一些好的分頁(yè)樣式表現(xiàn)方式

最終實(shí)現(xiàn)的圖表樣式顯示效果如下所示。

小圖標(biāo)效果如下所示。

大圖標(biāo)效果如下所示。

2.2 圖標(biāo)的分頁(yè)處理操作

楊濤的分頁(yè)控件，提供了很多綁定分頁(yè)的方式，不過都主要是基于MVC的模型數(shù)據(jù)處理，在我的Web框架里面主要利用JS綁定數(shù)據(jù)，有 一定的差異，但是既然大家都是MVC應(yīng)用，整合還是沒問題的。

為了展現(xiàn)上面的效果，我們需要建立一個(gè)表單查詢的內(nèi)容，代碼如下所示。

<fieldset>
	<legend>功能操作</legend>
	@using (Html.BeginForm("select", "Icon", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
	{
		<span>尺寸：</span>
		<select class="easyui-combobox" id="IconSize" name="IconSize" >
			<option value="16">16×16</option>
			<option value="24">24×24</option>
			<option value="32">32×32</option>
		</select>
		<input type="submit" value="搜索(S)" accesskey="S" />
	}
</fieldset>

數(shù)據(jù)內(nèi)容的展現(xiàn)，主要就是利用了easyUI的樣式，創(chuàng)建一些linkbutton的代碼，代碼如下所示。這里注意的是，我也是用了model，它是PagedList<WHC.MVCWebMis.Entity.IconInfo>類型的。

也就是說，最終這個(gè)視圖界面后臺(tái)，是有一個(gè)模型的綁定的。

<div id="contents">
@using Webdiyer.WebControls.Mvc;
@model  PagedList<WHC.MVCWebMis.Entity.IconInfo>
@foreach (var item in Model)
{
	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="SelectItem(this, '@item.IconCls')" id="@item.ID" data-options="plain:true,iconCls:'@item.IconCls',size:'large',toggle:true"> </a>
}
</div>

圖標(biāo)后臺(tái)處理的控制器方法如下所示。

/// <summary>
/// 根據(jù)條件獲取基于PagedList的對(duì)象集合，并返回給分頁(yè)視圖使用
/// </summary>
/// <param name="id">分頁(yè)頁(yè)碼</param>
/// <param name="iconsize">圖標(biāo)尺寸</param>
/// <returns></returns>
private PagedList<IconInfo> GetPageList(int? id, int? iconsize = 16)
{
	int size = iconsize ?? 16;
	int pageIndex = id ?? 1;
	int pageSize = 200;

	PagerInfo pagerInfo = new PagerInfo();
	pagerInfo.CurrenetPageIndex = pageIndex;
	pagerInfo.PageSize = pageSize;

	string where = string.Format("iconsize = {0}", size);
	List<IconInfo> list = BLLFactory<Icon>.Instance.FindWithPager(where, pagerInfo);
	PagedList<IconInfo> pageList = pageList = new PagedList<IconInfo>(list, pageIndex, pageSize, pagerInfo.RecordCount);
	return pageList;
}

/// <summary>
/// 根據(jù)條件獲取分頁(yè)數(shù)據(jù)集合，并綁定到視圖里面
/// </summary>
/// <param name="id">分頁(yè)頁(yè)碼</param>
/// <param name="iconsize">圖標(biāo)尺寸</param>
/// <returns></returns>
public ActionResult Select(int? id = 1, int? iconsize = 16)
{
	PagedList<IconInfo> pageList = GetPageList(id, iconsize);
	return View("select", pageList);
}

最后部分是分頁(yè)部分的展現(xiàn)了，就是在底部展現(xiàn)各頁(yè)的頁(yè)碼等信息了。

這個(gè)部分很簡(jiǎn)單，代碼如下所示。

<div>
	<div >
		共 @Model.TotalPageCount 頁(yè) @Model.TotalItemCount 條記錄，當(dāng)前為第 @Model.CurrentPageIndex 頁(yè)
	</div>
	@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id" }, new { style = "float:right", id = "badoopager" })
</div>

在分頁(yè)的時(shí)候，可能很多時(shí)候，發(fā)現(xiàn)更新頁(yè)面后，條件就消失了，這種情況是因?yàn)闆]有很好綁定條件的值到界面上，我們可以通過頁(yè)面加載完成后，把URL里面的參數(shù)值賦值給控件就可以了。

$(function () {
	var iconSize = '@Request.QueryString["iconSize"]';
	if(iconSize != undefined && iconSize != "")
	{
		$("#IconSize").combobox('setValue', iconSize);
	}
});

這樣圖表大小的條件就一直可以保持正確的內(nèi)容，提交表單后依舊可以正常保持了。

3、圖標(biāo)的選擇

既然生成了圖標(biāo)文件，并且構(gòu)建了圖標(biāo)的展示界面，那么我們就需要在一些需要配置圖標(biāo)的地方，能夠提供一個(gè)界面選擇圖標(biāo)了。

綁定彈出選擇圖標(biāo)界面操作，在EasyUI的基礎(chǔ)上，使用了擴(kuò)展對(duì)話框的操作，可以彈出一個(gè)外部頁(yè)面的選擇圖標(biāo)菜單。

function SelectIcon(id, value) {
	$.showWindow({
		title: '選擇圖標(biāo)',
		useiframe: true,
		width: 960,
		height: 640,
		content: 'url:/Icon/Select',
		data: { id: $(id), value: $(value) },
		buttons: [{
			text: 'OK',
			iconCls: 'icon-ok',
			handler: 'doOK' //此方法在_content3.html中
		}, {
			text: '取消',
			iconCls: 'icon-cancel',
			handler: function (win) {
				win.close();
			}
		}],
		onLoad: function (win, content) {
			//window打開時(shí)調(diào)用，初始化form內(nèi)容
			if (content) {
				content.doInit(win);
			}
		}
	});
}

//綁定選擇按鈕的事件
function BindSelectIconEvent() {
	$("#tdIcon").click(function () { SelectIcon("#imgIcon", "#WebIcon") });
	$("#tdIcon1").click(function () { SelectIcon("#imgIcon1", "#WebIcon1") });
}

選擇好每個(gè)圖標(biāo)后，我們就會(huì)返回到主界面上，并設(shè)置好主界面上的圖表樣式，讓它顯示出我們選擇的圖標(biāo)效果。