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模式的菜单源代码。