zoukankan      html  css  js  c++  java
  • 菜单设计器(Menu Designer)及其B/S,C/S双重实现(B/S开源)

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

     

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


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

    image

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

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

    image

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

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

    image

    如图所示,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界面的实现效果

    image

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

    image

    再把它放到ContextStrip中去的效果

    image

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

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

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

    image

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

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

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

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

    image

     

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

    image

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

    image

    在这里使用了一个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模式的菜单源代码。

  • 相关阅读:
    (C#)中断程序流程,处理事件(委托,事件,Lambda表达式)2/3
    (C#) 字符串替换
    (C#基础) 方法的参数修饰符
    (C#基础) 数据类型
    (C#)中断程序流程,处理事件(委托,事件,Lambda表达式)1/3
    (PowerShell) 文件操作
    图像处理基础
    (C#)中断程序流程,处理事件(委托,事件,Lambda表达式)3/3
    迅速理解 XML
    VI命令使用(查找替换)
  • 原文地址:https://www.cnblogs.com/sczw-maqing/p/3190130.html
Copyright © 2011-2022 走看看