有不少朋友,在使用演示demo时,出现了打不开access数据库的情况,经园友@smalltide的帮助下,找到了问题,数据层读取默认连接信息时有误(该问题也可能存在其他多数据并存的系统),暂时不更新源代码了,等后面一起更新,遇到的朋友请指定一下数据库,在DataAccess项目下将DBHelper类中,将 EDatabase DB = new EDatabase(),改成web.config中的连接名称 ,EDatabase DB = new EDatabase("farm").

  Smart UI的框架,主要包括UI层(Smart UI)、数据接口、业务层、数据层四个部分。今天主要讲解UI层,这部分与以往通常框架的架构不同的是,为纯前台的开发架构,css+html】,css和js都有着详细的分层,不仅在Smart UI中,其他框架的朋友也可以借鉴,也希望大家能提出宝贵的建议。

  

  • Smart UI

  一、从内容上来说,Smart UI要有五大部分组成:

  

  

  1. Basic Layout :

    基本布局,包括页面的Head、Body、Foot、Search、Edit、View等公共的htm布局基础结构的预设。

  2. Basic CSS :

    基础样式,包括全局样式初始化,基本布局样式、各种基本表单,控件样式。

  3. Core(js):

    核心JS库,完成Smart UI的核心操作

  

  4. JQ Plugins :

    各种JQ的插件库,包括Smart UI自带的,和其他外部引入的插件。

  5. Components :

    组件库,封装的各种通用的业务组件,例如:数据字典、信息发布、图片展示等等。【这个内容主要就靠日常的积累以及以后使用Smar UI朋友的分享】

  二、从结构上来说,主要是CSS和Javascript,而且其中还有着详细的划分。

  •   CSS结构

  

分成四块部分组成,

  1. Global: 全局样式初始化和设置,还要页面主体布局的设置;

  2. BaseLayout:主要是各种基础表单的布局样式控制。Smart UI为了实现大部分应用场景的动态生成,在htm结构上是有一定的规范的,但可以灵活的运用这些规范,配合设置样式达到预期的效果。【使用非动态生成的自定义开发模式时没有此问题】。

  3.Controls:各种控件(JQ plugin)的样式预设样式,除了少数特殊的控件需要一定的结构外,大多数的控件都支持自定义模版,设置样式十分方便。但默认的Smart UI中会给出比较合理的结构以及对应的样式,会比重新设置简单方便很多。

  4.Site:泛指Web站点的具体样式,作为上面三个文件的补充,可以根据需求自设。

  此外,还可以使用一个Sytle.css文件统一引用上面四个文件的出口,只需要在页面上应用一个文件。【这个根据情况来,使用css文件引用其他css文件在网速慢的时候,可能会加载失败,导致样式丢失的情况。建议在开发时统一,发布时分别引用】。

  •   JS结构

如图,这个Smart UI抽象出来的JS结构和层次关系,这里我简单说明一下各自的用途:

  JSConst:

    全局常量库,记录各种常量信息,多语言内容,枚举等等内容。

  jsconfig:

    公共配置库,全局性配置,控件公共属性配置。

  sw-prototype:

    主要是js原生对象的扩展和一些常用的方法,如:数据处理、加密、验证等等。除了JSConfig【设置库】和jsConst【常量库】外不依赖于其他库。

  SW:

    核心库,封装了核心的操作,页面加载,全局内容等。

  controls:

  控件库的组成就复杂一些,有三块内容:

  1.sw-controls-core :控件核心库支持库,所有plugin的公共方法,统一的设置(如:ajax)。

  2.plugin:各种Smart UI 插件和其他引入的JQ插件。

  3.sw-controls:控件的统一出口,无论是Smart UI 插件还是其他引入的JQ插件的公共出口,根据具体情况,对控件初始化设置。这种方式,统一插件库出入接口,使得管理和设置、版本更新、或者是控件更换都十分便利和安全。

   

  sw-helper:

    页面帮助库,页面初始化,常用场景的支持,取值、赋值等。

  Modals:

    设置实体库,整个前台业务的设置核心内容,类似于数据中的表-字段的结构,设置各种属性已达到对各种场景的支持,如:控件、列表、数据类型、格式、验证等等。

  Page:

    页面设置库,master页面、内容页面路径、uicode的设置。

  site:

    泛指网站的公告脚本库,主要为业务处理。

  pagecode :

    各页面对应的代码库,htm + js,类似于aspx + cs,不过不是对应一个页面而是一组功能。虽然js代码可以直接放在内容页面上,以这种page-code的方式有利于编码的开发【智能感知、调试】。

  前台的结构已基本介绍完成,下篇介绍后台方面的内容“统一数据接口”以及“业务层”,“数据层”怎么与数据接口结合。

   

  注:所有内容皆为原创,转载请注明出处 By JQuery Smart UI - Roy Zhang

  

 posted on 2010-11-20 10:58  Roy Zhang  阅读(18596)  评论(7编辑  收藏  举报