Mvc+easyui-based Web development Framework Experience Summary (14)--automatic generation of icon style files and icon selection actions

In many web systems, it is generally possible to provide some icon selection, easy to configure the buttons, menus and other interface elements of the icon, so that the web system interface looks more beautiful and coordinated. But in the system generally built-in icon style is relatively limited, and hard-coded to write to the style sheet inside, so that we extend the use of a lot of inconvenience. For this reason, I think if can be independent of a module, automatically according to the icon to generate the icon CSS style file, and store the corresponding record into the database, convenient for us to query the display, so we use it very convenient, finally with this data, only need to do a common icon selection interface, And can be reused in many places. This article is based on this idea, developed an icon management module and icon selection interface, this article mainly elaborated this development process and the final effect demonstration.

1. Icon Style Generation management

To facilitate the creation of a corresponding icon style file based on the list of icon files that are read, we can use the Nvelocity component to generate CSS style files based on templates. About the use of nvelocity, you can refer to my many articles about it, this component is very powerful, my own code generation tool is based on it to write a lot of templates for code generation, specifically, you can refer to the "Use nvelocity to generate content of several ways" this article.

1.1 Icon Style File preparation

With these preparations, we can define a template of the file used to generate the style file, we first look at the final style file effect.

. 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;}

Based on these organizational effects, we can define a template content as shown below.

#foreach ($item in ${filenamelist}). ${item. text}{Background:url (' ${item. Value} ') No-repeat Center Center;} #end # #endforeach

Where the filenamelist variable is a collection object based on the name and value, we traverse it to generate it.

1.2 Build actions for Icon styles

With the template, we also need to organize the corresponding file directory, in general, the Web icon can use 16,24,32 these standard-sized charts, to meet the needs of different occasions.

So we create several different directories and put in the corresponding template files and icon files.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130915305859633.png "style=" border:0px; "/ >

The actions for creating an icon style file are divided into the following steps:

Get the icon file for the corresponding directory, convert to the actual collection of object formats, generate icon style files, store chart styles to the database for easy querying.

These operations we have in the icon Management controller   iconcontroller  Add the method to complete, some of the code is as follows.

 <summary>///  Generate Icon file/// </summary>/// <param name= "Iconsize" > Chart size, optional 16,32, etc. </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{//uses relative paths to construct the processing 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;//Specifies the actual path string outputfilepath = helper. Executefile ();if  (!string. IsnulloreMpty (Outputfilepath)) {result. success = true;//write database bool write = bllfactory<icon>. Instance.batchaddicon (list, iconsize);}} catch  (Exception ex) {logtexthelper.error (ex); result. Errormessage = ex. Message;}} Else{result. errormessage =  "No image file found";} Return tojsoncontent (result);}

The above method is very good to complete the creation of the icon style and save the database operation, this generation operation is mainly based on the template generation, very convenient.

When building a collection of name values, note the icon style name and cannot contain some special characters, such as [] () These symbols need to be removed, so can be removed by the following regular expression substitution method.

String displayText = path.getfilenamewithoutextension (file);//file names need to be removed () and [] symbols displayText = Cregex.replace ( DisplayText, @ "[) \];,\t\r]| [\ n] "," ", 0);d Isplaytext = Cregex.replace (DisplayText, @" [(\[] ","-", 0);

Finally, we can build a separate page to implement the icon style and save the operation, the interface is as follows.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130936315225958.png "style=" border:0px; "/ >

The interface operation code is shown below.

Click event function Bindevent () {$ ("#btnGenerateCSS") of the Bind button. Click (function () {$.messager.confirm ("Operation Confirmation", "you confirm that the weight Does the new Build icon record? ", function (action) {if (action) {//Chart size 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 ("Operation succeeded"); Location.reload ();} else {showerror ("operation failed:" + data. ErrorMessage, 3000);}});});

2, the page display of the icon

In order to effectively view the list of icons we generate in the database, we need a reasonable interface representation to display the icon information. The traditional way of using the DataGrid is rather stiff and not very convenient, so we need to customize the paging process, based on the principle of reusing some good components, I'm focusing on using some out-of-the-box component modules, MVC paging, consider using Yang Tao's MVC Paging control (HTTP/ www.webdiyer.com/mvcpager/), this function looks very good.

The way the chart is presented, I want to show the effect of a set of charts through this example of Easyui.

2.1 Graphical display of the interface effect

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130927496785897.png "style=" border:0px; "/ >

Then the system by paging them, choose some good page style presentation

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130933047104375.png "width=" 544 "height=" 205 "style=" border:0px; "/>

The resulting chart style display looks like the following.

The small icon effect is shown below.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130933292882851.png "style=" border:0px; "/ >

The large icon effect is shown below.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130933576942730.png "style=" border:0px; "/ >

2.2 Page-handling operation of icons

Yang Tao Paging control, provides a lot of ways to bind paging, but mainly based on the MVC model data processing, in my web framework mainly using JS binding data, there are some differences, but since everyone is MVC application, integration is not a problem.

In order to show the above effect, we need to create a form query, the code is as follows.

<fieldset><legend> function Operation </legend> @using (Html.BeginForm ("select", "Icon", New RouteValueDictionary {{"id", ""}}, Formmethod.get)) {<span> size: </span><select class= "Easyui-combobox" id= "Iconsize" Name= " Iconsize "style=" width:100px "><option value=" >16x16</option><option value= ">24x24</" Option><option value= ">32x32</option></select><input" type= "submit" value= "Search (S)" accesskey= "S"/>}</fieldset>

The presentation of data content is mainly the use of the Easyui style, to create some LinkButton code, the code is as follows. The note here is that I also used the model, which is PAGEDLIST<WHC. Type of mvcwebmis.entity.iconinfo>.

In other words, the end of this view interface is the binding of a model.

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

The Controller method for background processing of icons is shown below.

 <summary>///  gets a collection of Pagedlist-based objects based on conditions and returns to paged view using/// </summary>/// <param  name= "id" > Page number </param>/// <param name= "Iconsize" > Icon size </param>///  <returns></returns>private pagedlist<iconinfo> getpagelist (int? id, int? &NBSP;ICONSIZE&NBSP;=&NBSP;16) {int size = iconsize ??  16;int pageindex = id ??  1;int pageSize = 200; Pagerinfo pagerinfo = new pagerinfo ();p agerinfo.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>///  gets a collection of paging data based on conditions and binds to the view inside/// </summary>/// <param name= " ID "> Page number </param>/// <param name=" Iconsize "> Icon size </param>/// <returns> </returns>public actionresult select (int? id = 1, int? iconsize  =&NBSP;16) {pagedlist<iconinfo> pagelist = getpagelist (id, iconsize); Return View ("select",  pagelist);}

The last part is the pagination part of the show, is at the bottom of the page to show the number of information.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130953151949018.png "style=" border:0px; "/ >

This section is simple and the code is shown below.

<div><div style= "float:left;width:50%" > Total @Model. totalpagecount page @Model. Totalitemcount Record, current Model.currentpageindex page </div> @Html. Pager (Model, new pageroptions {pageindexparametername = "id"}, new {style = " Float:right ", id =" Badoopager "}) </div>

In the paging, there may be many times, found that the update page, the condition disappears, this situation is because there is no good binding condition of the value to the interface, we can be loaded through the page, the URL parameter values are assigned to the control.

$ (function () {var iconsize = ' @Request. querystring["Iconsize"]; if (iconsize! = undefined && iconsize! = "") {$ ("# Iconsize "). ComboBox (' SetValue ', iconsize);});

The condition of the chart size will keep the correct content, and the form can still be maintained after submission.

3, the selection of icons

Now that the icon file is generated and the icon's display interface is built, we need to provide an interface selection icon in some places where we need to configure the icon.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/131000273971927.png "style=" border:0px; "/ >

binding popup Selection icon interface operation, on the basis of Easyui, using the extended dialog, you can pop up an external page of the selection icon menu.

function selecticon (id, value)  {$.showwindow ({title:  ' Select the icon ',useiframe: true,width: 960,height: 640,content:  ' Url:/icon/select ', data: {  id: $ (ID),  value: $ (value)  },buttons: [{text:  ' OK ',iconcls:  ' Icon-ok ' ,handler:  ' Dook '  //this method in _content3.html}, {text:  ' Cancel ',iconcls:  ' Icon-cancel ', handler:  function  (Win)  {win.close ();}}],onload: function  (win, content)  {// Called when Window opens, initializes the form contents if  (content)  {content.doinit (win);}});} The event function bindselecticonevent ()  {$ ("#tdIcon") of the Bind selection button. Click (function  ()  {  Selecticon ("#imgIcon",  "#WebIcon")  }); $ ("#tdIcon1"). Click (function  ()  { selecticon ("# ImgIcon1 ", " #WebIcon1 ")  }); 

After selecting each icon, we will return to the main interface and set the chart style on the main interface so that it shows the effect of the icons we have selected.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130933576942730.png "style=" border:0px; "/ >

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1829091

Mvc+easyui-based Web development Framework Experience Summary (14)--automatic generation of icon style files and icon selection actions