`
wyuch
  • 浏览: 74250 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一种简约可行的后台界面UI开发方案

阅读更多
我认为对于后台UI的开发方案或者说开发框架,应该要做到如下几点要求

1、美工只负责整个后台界面的风格设计,负责维护全局CSS、控件相关的图片和CSS
2、具体到某个功能的界面只与程序员有关,并且程序员不需要去写CSS,也能做出美观且风格统一的界面。
3、应该能在Dreamweaver中直接编辑即相应控件在Dreamweaver可视化编辑中有体现,并且不会破坏整个页面布局。
4、UI框架最好不具有侵略性,不能让我使用了这一UI框架之后丧失了直接使用HTML的权利,即我可以只在页面的局部使用这一框架。
5、性能要足够好,要基本上能够和只使用纯HTML的性能接近。
6、最好能够兼容IE和Firefox,能兼容Opera、Safari和Chorme就更好了


这几点应该说是很自然的要求,但已经否决了一大把的方案了。

其实如果公司自己已经有一些积累的话,实现如上几点要求并不特别困难。有资深的美工和架构师,并且两种人员都非常稳定、配合良好,美工精通CSS,但也需要熟悉JavaScript,架构师得非常精通JavaScript。在付出相当的努力后整理JS封装控件,并进一步封装成JSP Tag即可达到目的。如果需要实现一定程度的可视化的话,可以为Dreamweaver开发扩展,即可高效率地实现UI的开发


其中的关键之处在于JSP中的自定义标签的封装方式,例如一个按钮,一般喜欢封装成
<z:tbutton onClick="edit()" icon="../Icons/icon020a4.gif" text="修改"/>

但实际使用中远不如以下封装便利
<z:tbutton onClick="edit()"> <img src="../Icons/icon020a4.gif" width="20" height="20" />修改</z:tbutton>

因为这样可以在Dreamweaver中直接改按钮文字和图标。

再比如一个数据表格,一般都喜欢构建一个复杂的JS类,通过为JS类指定属性的方式来展现,远不如以下方式:
<z:datagrid id="dg1" method="com.zving.platform.Schedule.dg1DataBind" size="15">
	<table width="100%" cellpadding="2" cellspacing="0" class="dataTable">
	  <tr ztype="head" class="dataTableHead">
		<td  width="3%" align="center" ztype="RowNo">&nbsp;</td>
		<td width="3%" align="center" ztype="selector" field="id">&nbsp;</td>
		<td width="12%"><b>类别</b></td>
		<td width="20%"><b>任务名称</b></td>
		<td width="8%">是否启用</td>
		<td width="16%"><b>下次运行时间</b></td>
		<td width="32%"><b>任务描述</b></td>
	  </tr>
	  <tr onDblClick="edit();">
		<td align="center">&nbsp;</td>
		<td align="center">&nbsp;</td>
		<td>${TypeCodeName}</td>
		<td>${SourceIDName}</td>
		<td>${IsUsingName}</td>
		<td>${NextRunTime}</td>
		<td>${Description}</td>
	  </tr>
	  <tr ztype="pagebar">
		<td colspan="7">${PageBar}</td>
	  </tr>
	</table>
</z:datagrid>


可以很方便地看出,这样的DataGrid控件可以可视化地为表格增加列,修改列名、列宽度等等操作,可维护性大大增加。这种Tag的特征是Tag包含有Body,Tag执行时解析Body中的HTML,达到定义文字、样式、数据的目的。因为Body中含有HTML,所以整个标签在Dreamweaver是可见的。

在Dreamweaver中的DataGrid:


实际运行后的DataGrid:


在Dreamweaver中的表单:


实际运行后的表单:


----------ZvingSoft--------
ZCMS(泽元内容管理系统),泽元软件出品,免费下载,不限用途。
欢迎大家通过http://demo.zving.com/试用。
分享到:
评论
62 楼 winie 2013-08-23  
路过打酱油  我一直都想找个这样的框架 科学一直都没有
61 楼 当当猫 2010-04-22  
很高兴看到你这篇文章,我有个疑问希望能解答就是zDialog在jsp中使用为什么会报
topWin.Dialog没有定义?
60 楼 crabboy 2009-09-02  
图片看不了
59 楼 不是流氓 2009-08-18  
wyuch 写道
不是流氓 写道
LZ能不能分享下前端都代码,要不发我封邮件也行,对界面不感冒是瞎话,
说白了,我做出来都页面,我自己看着也想吐!


主要是前后端是一体,没法完全区分,得跟JSP的标签配合着用。可以去下载一个ZCMS,然后我把JS的源代码给你,你配合着看看有没有参考价值

谢谢,我都Email:neocanable@gmail.com
58 楼 wyuch 2009-08-18  
不是流氓 写道
LZ能不能分享下前端都代码,要不发我封邮件也行,对界面不感冒是瞎话,
说白了,我做出来都页面,我自己看着也想吐!


主要是前后端是一体,没法完全区分,得跟JSP的标签配合着用。可以去下载一个ZCMS,然后我把JS的源代码给你,你配合着看看有没有参考价值
57 楼 不是流氓 2009-08-18  
whaosoft 写道
有积累的公司就是好 不像我们这是的 吗也没有 写死我啦

跑个题,大哥,你是不是liao?
56 楼 不是流氓 2009-08-18  
LZ能不能分享下前端都代码,要不发我封邮件也行,对界面不感冒是瞎话,
说白了,我做出来都页面,我自己看着也想吐!
55 楼 wyuch 2009-08-18  
Tab按键的问题已经修复,还有一个问题就是拖拽到最右边会出现滚动条的问题也修复了,不过得等本周发布的新版本了
54 楼 happysoul 2009-08-18  
tab按键 什么时候能修复啊!
弹出窗口后tab还能选择后面的东西啊~~~~~
53 楼 iaimstar 2009-07-13  
okwxj 写道
wyuch 写道
lw223 写道
标签里面千万不要加自定义样式。


严重同意,我们的标签都只提供数据展现方面的服务,样式由标签的BODY部分决定。


标签里连onclick都不应该出现

为啥?
52 楼 okwxj 2009-07-13  
wyuch 写道
lw223 写道
标签里面千万不要加自定义样式。


严重同意,我们的标签都只提供数据展现方面的服务,样式由标签的BODY部分决定。


标签里连onclick都不应该出现
51 楼 jaychaoqun 2009-07-08  
怎么下载源代码啊 ,,
50 楼 wyuch 2009-06-10  
丑鑫鑫 写道
浏览器回退按钮能够使用吗?


在IE下完全可以,在Firefox下暂时还不行,将在2.0里改进。
49 楼 丑鑫鑫 2009-06-10  
浏览器回退按钮能够使用吗?
48 楼 sznmail 2009-06-10  
这个界面很强大啊
47 楼 wyuch 2009-06-07  
kingkit 写道
兄弟,看完了你发的几篇帖子,感慨很多!
谢谢你发表了这么好的文章,同时也谢谢你提供程序的下载。我也是一创业者,大学准备毕业的时候就开始走上了创业的道路了。
看了你的帖子我首先佩服的是,楼子的无私奉献,推动了大家的技术交流!
我也下载了程序运行了,也稍微看了一下楼主写的代码,写的很赞!
希望楼主继续保持这份热忱。
加油,你们很快就会成功的了!


呵呵,在很多人看来我都是重复发明轮子。
46 楼 mikeandmore 2009-06-07  
后台最简单的就是Django的admin了。。。
45 楼 YiSingQ 2009-06-07  
很好的作品,功能设计强大,JS效果很好,对学习很有帮助!谢谢
44 楼 key232323 2009-06-07  
kingkit 写道
兄弟,看完了你发的几篇帖子,感慨很多!
谢谢你发表了这么好的文章,同时也谢谢你提供程序的下载。我也是一创业者,大学准备毕业的时候就开始走上了创业的道路了。
看了你的帖子我首先佩服的是,楼子的无私奉献,推动了大家的技术交流!
我也下载了程序运行了,也稍微看了一下楼主写的代码,写的很赞!
希望楼主继续保持这份热忱。
加油,你们很快就会成功的了!


支持创业者,我曾经算是,以后一定会是!
43 楼 kingkit 2009-06-06  
兄弟,看完了你发的几篇帖子,感慨很多!
谢谢你发表了这么好的文章,同时也谢谢你提供程序的下载。我也是一创业者,大学准备毕业的时候就开始走上了创业的道路了。
看了你的帖子我首先佩服的是,楼子的无私奉献,推动了大家的技术交流!
我也下载了程序运行了,也稍微看了一下楼主写的代码,写的很赞!
希望楼主继续保持这份热忱。
加油,你们很快就会成功的了!

相关推荐

    数据库基础测验20241113.doc

    数据库基础测验20241113.doc

    微信小程序下拉选择组件

    微信小程序下拉选择组件

    DICOM文件+DX放射平片-数字X射线图像DICOM测试文件

    DICOM文件+DX放射平片—数字X射线图像DICOM测试文件,文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用,请勿用于非法用途。

    Jupyter Notebook《基于双流 Faster R-CNN 网络的 图像篡改检测》+项目源码+文档说明+代码注释

    <项目介绍> - 基于双流 Faster R-CNN 网络的 图像篡改检测 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    使用epf捕获没有CA证书的SSLTLS明文(LinuxAndroid内核支持amd64arm64).zip

    c语言

    (源码)基于Arduino的天文数据库管理系统.zip

    # 基于Arduino的天文数据库管理系统 ## 项目简介 本项目是一个基于Arduino的天文数据库管理系统,旨在为Arduino设备提供一个完整的天文数据库,包括星星、星系、星团等天体数据。项目支持多种语言的星座名称,并提供了详细的天体信息,如赤道坐标、视星等。 ## 项目的主要特性和功能 星座目录包含88个星座,提供拉丁语、英语和法语的缩写和全名。 恒星目录包含494颗亮度达到4等的恒星。 梅西耶目录包含110个梅西耶天体。 NGC目录包含3993个NGC天体,亮度达到14等。 IC目录包含401个IC天体,亮度达到14等。 天体信息每个天体(不包括星座)提供名称、命名、相关星座、赤道坐标(J2000)和视星等信息。 恒星额外信息对于恒星,还提供每年在赤经和赤纬上的漂移以及视差。 ## 安装使用步骤 1. 安装库使用Arduino IDE的库管理器安装本项目的库。 2. 解压数据库将db.zip解压到SD卡中。

    (源码)基于JSP和SQL Server的维修管理系统.zip

    # 基于JSP和SQL Server的维修管理系统 ## 项目简介 本项目是一个基于JSP和SQL Server的维修管理系统,旨在提供一个高效、便捷的维修管理解决方案。系统涵盖了从维修订单的创建、管理到配件的录入、更新等多个功能模块,适用于各类维修服务行业。 ## 项目的主要特性和功能 1. 用户管理 管理员和客户的注册与登录。 管理员信息的管理与更新。 客户信息的创建、查询与更新。 2. 维修订单管理 维修订单的创建、查询与更新。 维修回执单的创建与管理。 3. 配件管理 配件信息的录入与更新。 配件库存的管理与查询。 4. 评价与反馈 客户对维修服务的评价记录。 系统反馈信息的收集与管理。 5. 数据加密与安全 使用MD5加密算法对用户密码进行加密存储。 通过过滤器实现登录验证,确保系统安全。 ## 安装使用步骤

    devecostudio-windows-3.1.0.501.zip

    HUAWEI DevEco Studio,以下简称DevEco Studio)是基于IntelliJ IDEA Community开源版本打造,为运行在HarmonyOS和OpenHarmony系统上的应用和服务(以下简称应用/服务)提供一站式的开发平台。 作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点: - 高效智能代码编辑:支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。更多详细信息,请参考[编辑器使用技巧] - 低代码可视化开发:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    springboot小徐影城管理系统(代码+数据库+LW)

    随着现在网络的快速发展,网上管理系统也逐渐快速发展起来,网上管理模式很快融入到了许多生活之中,随之就产生了“小徐影城管理系统”,这样就让小徐影城管理系统更加方便简单。 对于本小徐影城管理系统的设计来说,系统开发主要是采用java语言技术,在整个系统的设计中应用MySQL数据库来完成数据存储,具体根据小徐影城管理系统的现状来进行开发的,具体根据现实的需求来实现小徐影城管理系统网络化的管理,各类信息有序地进行存储,进入小徐影城管理系统页面之后,方可开始操作主控界面,主要功能包括管理员:首页、个人中心、用户管理、电影类型管理、放映厅管理、电影信息管理、购票统计管理、系统管理、订单管理,用户前台;首页、电影信息、电影资讯、个人中心、后台管理、在线客服等功能。 本论文主要讲述了小徐影城管理系统开发背景,该系统它主要是对需求分析和功能需求做了介绍,并且对系统做了详细的测试和总结。具体从业务流程、数据库设计和系统结构等多方面的问题。望能利用先进的计算机技术和网络技术来改变目前的小徐影城管理系统状况,提高管理效率。

    C++与Matlab实现SIFT特征提取算法+项目源码+文档说明+代码注释

    <项目介绍> - SIFT特征提取算法C++与Matlab实现 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    (1991-2024年)国家自然、社科基金部分名单(含部分标书)(最新!!!)

    数据介绍 数据名称:国家自然、社科基金部分名单 数据年份:1991-2024年 样本数量:10万+ 数据格式:PDF、excel

    卓晴-信号与系统课件.pdf

    卓晴

    as-bundled-clients

    as-bundled-clients

    学习时最后的资料包括面试等信息

    学习时最后的资料包括面试等信息

    (源码)基于Spring Boot和Ant Design的雨选课系统.zip

    # 基于Spring Boot和Ant Design的雨选课系统 ## 项目简介 雨选课系统是一个基于Spring Boot和Ant Design框架构建的前后端分离的选课系统。该系统实现了学生选课、成绩查询、教师成绩修改、课程编辑、课程新增等功能。登录信息使用Redis存储,并支持课程图片的上传功能。 ## 项目的主要特性和功能 1. 用户登录与权限管理 学生、教师和管理员分别有不同的登录权限。 登录信息使用Redis进行存储。 2. 课程管理 学生可以查看可选课程列表,并进行选课和退选操作。 教师可以查看自己教授的课程,并修改学生成绩。 管理员可以编辑和新增课程。 3. 成绩管理 学生可以查询自己的成绩。 教师可以修改学生的成绩。 4. 图片上传 支持课程图片的上传和展示。 5. 日志记录 系统记录请求和响应的日志信息,便于问题追踪和性能分析。

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目),含有代码注释,满分大作业资源,新手也可看懂,期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。该项目可以作为课程设计期末大作业使用,该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅

    江苏镇江两座小桥的技术状况评估与维修建议

    内容概要:本文针对镇江市丹徒区辛丰镇的两座小型桥梁(大叶二组滚水坝桥与东联组桥)进行了详细的技术状况评定和现状调查。主要内容包括:桥梁的基本参数描述、桥梁各部分的具体检查结果以及存在的具体病害及其原因分析,同时依据《公路桥梁技术状况评定标准》对每座桥梁分别给出了综合评分和技术状况等级,并提出了具体的维护与修复建议。大叶二组滚水坝桥技术状况良好(2类),但需要解决桥面铺装裂缝和桥墩的混凝土剥落问题;而东联组桥则需重点关注桥面施工不完整及护栏损坏等问题。 适用人群:桥梁管理人员、维护工作人员及城市基础设施规划相关人员。 使用场景及目标:适用于中小跨度桥梁的常规检查与维修决策制定过程中,旨在帮助专业人士快速掌握桥梁的实际状态,确保桥梁安全可靠运行。 其他说明:文中附有多张实拍图片用于直观展示桥梁现状及存在问题。

    基于套接字API开发的高性能高稳定性跨平台MQTT客户端,可以在嵌入式设备FreeRTOS LiteOS RTThre.zip

    c语言

    【Unity 天气系统插件】Enviro 3 - Sky and Weather 高度可定制的云、雾和光照系统

    文件名:Enviro 3 - Sky and Weather v3.1.6b.unitypackage Enviro 3 - Sky and Weather 是一款功能强大的 Unity 插件,专门用于模拟逼真的天空、天气和环境效果。它适用于需要动态天气和日夜循环的游戏或应用,如开放世界 RPG、模拟类游戏等。Enviro 3 提供了大量的设置选项和自定义功能,帮助开发者在 Unity 中创建沉浸式的自然环境效果。 以下是 Enviro 3 - Sky and Weather 的一些关键特点和功能介绍: 1. 动态天气系统 天气变化:支持多种天气效果,如晴天、阴天、雨天、雪天、雾天、暴风雨等,所有天气效果可以动态切换,使游戏环境更加生动。 天气事件:允许开发者设置特定的天气事件,如风暴、雷电等,添加到游戏中的特殊场景或事件。 湿度与温度控制:可以根据天气变化动态控制湿度和温度,影响环境效果和玩家体验。 2. 日夜循环系统 动态时间系统:Enviro 3 支持实时的日夜循环,包括昼夜的过渡,太阳和月亮的运动轨迹。 光照调整:随着时间变化,Enviro 3 会自动调整环境光、

Global site tag (gtag.js) - Google Analytics