菜单设计器(Menu Designer)及其B/S,C/S双重实现（B/S开源）

ERP/MIS开发 菜单设计器(Menu Designer)及其B/S,C/S双重实现（B/S开源）

 

一直从事ERP/MIS的开发工作，今天来展现一下菜单设计器的设计，及其用途，并对B/S部分代码开源。

先用EXCEL来展现，需要表达的菜单结构

如图所示，一级菜单是销售，采购，仓库,其下的子菜单是，日记帐，报表，查询，设置，批次过帐。

第三级别的子菜单，以仓库为例

仓库日记帐的明细功能包括进仓，出仓，仓库调整, 仓库查询的明细功能包括，库存结余，物料存货明细，仓库未完订单.

下面来使用菜单设计器，设计以上的菜单结构. 打开EPN系统，执行Menu Definitions功能，界面效果如下

如图所示，Tree Processes是顶层的一级菜单名称，对应于文章开头提到的Sales,Purchase,Inventory.

Menu Types定义第二层菜单，对应于Transaction Entries,Reports,Enquiries,Setup

Functions and Icons对应于第三层菜单，也就是具体的功能，比如仓库的日记帐下面的功能，进仓，出仓和转仓。

如何设计数据库表结构来存取这个菜单？

先用三个表来存取这个菜单结构，也是最简洁直观的办法

TreeProcess(MenuCode,MenuLevel,ProcessCode,Description,Parent,ImageFile,Suspended,CloseIcon,OpenIcon)

表示第一层菜单，

MenuTypes(MenuType,Description,MenuCode,Suspended,CloseIcon,OpenIcon,Depth)来表示第二层菜单，Depth记录它的第一层菜单的主键。

FunctionIcons(ResponseType,FunctionCode,Description,MenuCode,Suspended,Depth)来表达最终的功能菜单,Depth记录它的第一层菜单的主键。

也可以用一个表，用Depth=1，2，3来表示菜单的级别。把上面这三个表的所有字段，拼凑到一个表中。对于不同的Depth,去不同的字段中读取值即可。

菜单的C/S界面的实现效果

如图所示，这三个功能实现效果，放在一颗树中。下面的图，是把菜单放在MenuStrip中

再把它放到ContextStrip中去的效果

同一个菜单，在多个地方都重复出现。这也表达了ERP的一个思想，灵活好用。想要用什么功能，要保证有很多种方式能快速找到它。如果你设计出一个很复杂的软件，用户要花很多时间来找他要的功能，可以认定你的界面设计是失败的。

从Visual Studio 2003到2005，2008，再到2010，每次的升级，菜单，功能导航几乎都没有什么变化，但是它的功能却越来越多，越来越好用。如何组织这些功能，呈现给用户，确实要花一些时间和心思来琢磨。我们做开发的，知道插件结构(plug-in,addon)可以用来组织开发的功能，即插即用，但是界面上组织这些功能给用户，却一直是个棘手的问题。我自己观察到的Visual Studio 增加新功能的方式

1 工具栏的contextmenu ，右键菜单，弹出的这个菜单列表，越来越长

2  放到MenuStrip中去.Visual Studio 很谨慎小心的在这里加菜单。

Visual Studio 2005/2008安装TeamFoundationExplorer之后，会加一个Team的菜单，

Visual Studio 2008/2010加入了一个Data菜单，以支持数据库操作，Test也只有安装了测试模板后才会出现，

Analyze分析功能，也是Visual Studio 2010新增加的功能。这提到的每一个菜单，都足够承担起一个软件的完全功能，它的功能之强大，有时候比单独的第三方的应用程序的功能还要多。

再回到B/S的ASP.NET的实现，效果图如下

使用了ComponentArt.Web.UI中的Menu控件呈现菜单，来看一下展开的效果

在这里使用了一个Menu.xml文件来表达菜单项，在App_Data目录下可以找到这个文件。

在菜单设计器中设计好菜单后，执行Export功能，就可以生成这个Menu.xml文件，直接放到网站的App_Data目录上，刷新即可，达到一次设计，C/S,B/S两次复用的目的。

一直都在做一个B/S的框架，并打算把它开源出来，因为C/S框架不开源（虽然我陆续在写文章，开放其中的模块及其实现代码），B/S的框架也不复杂。一个可配置的Menu,加上多页的Tab控件，加载不同的功能页面即可。

开放自己的源代码是件有价值好事情，但是也会遇到项目一开源就死的情况。Google已经足够强大，有时候你看到别人的代码里用到的技术，Google一下，自己曾经也学过，用过，差距就在于细节方面的把握了。这里举例几条，共勉励。

1 虽然Linq to sql已经out，Linq还是个好技术，特别是Linq to object,Linq to dataset,可以让你的代码简洁明了。

2 B/S项目的一个关键是UI的布局是否简洁漂亮。也不用ExtJs的那种华丽界面，界面上要能看得过去。如果细节把握不好，可以在网上多找一下这方面的布局，CSS控制的demo，或者直接修改这些demo，来演练技术。CSS，网页布局这些不能指望有美工帮你的忙，即使是切割好的图片给你，变成html之后，也会乱得一踏糊涂。我的心得是，要做ASP.NET或是Web方面的项目，网页布局能力一定要过关。

请到epn.codeplex.com上下载B/S模式的菜单源代码。