TinyUI组件开发示例

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

TinyUI实际上并不是一个具体的UI展现组件,它只是一个UI构建体系。它可以适应于各种Html+CSS+JS的体系架构中。

TinyUI主要解决下面的问题:

  1. UI中JS的引入与顺序,JS合并的问题
  2. UI中css的引入与顺序,CSS合并的问题
  3. UI中碰到性能问题时的影响范围,比如:一个树出现问题,要改动许多用到树的地方
  4. 代码重复的问题,同样的内容在许多地方都有,如果要改动就要改动许多个地方
  5. 整体布局调整困难的问题
  6. 开发效率的问题
  7. 执行效率的问题,前台响应要求速度更快
  8. 集群的问题
  9. 国际化的问题
  10. 等等
所以,它只是一个体系,不提供具体的UI组件,只是便于进行对其它UI框架进行包装、集成,同时解决运行过程中的各种问题。它还解决了模块化的问题,也就是说大家都按照规范构建一个一个的模块,然后复用的时候,是不用考虑如何引入css,js以及其引入顺序的相关问题的。

关于体系性的说明,请移步查阅UI开发的终极方案。

下面我们就以集成Jquery和Jqueryui来示例,如何进行TinyUI组件包的开发。

JQuery TinyUI组件包的的开发

  1. 新建一个Maven的Jar类型工程
  2. 在main/resources/中创建jquery/js目录,然后在/jquery/js/目录中放入jquery-1.11.0.js文件
  3. 在main/resources目录中创建jquery.ui.xml,文件内容如下
<ui-components><ui-component name="jquery"><js-resource>/jquery/js/jquery-1.11.0.js</js-resource></ui-component>
</ui-components>

OK,JQuery的UI组件包就算开发完毕了。

简单说明:其实上面的文件组织形式,只是个示例而已,实际上你也可以根据你自己的需要制订自己的规范,来进行目录的组织,唯一需要注意的是js-resource中的jquery-1.11.0.js所在的路径,以/resources为根开始要正确引用。

JQueryUI TinyUI组件包的的开发

  1. 新建一个Maven的Jar类型工程,并依赖上面创建的jquery工程
  2. 在main/resources/中创建jqueryui/js目录,然后在/jqueryui/js/目录中放入jquery-1.11.0.js文件
  3. 在main/resource/jqueryui/中创建theme目录,里面放jqueryui的所有主题文件夹
  4. 在main/resources目录中创建jqueryui.ui.xml,文件内容如下
<ui-components><ui-component name="jqueryui" dependencies="jquery"><js-resource>/jqueryui/js/jquery-ui-1.10.3.custom.js</js-resource></ui-component>
</ui-components>

OK,JQueryUI的UI组件包就算基本开发完毕了。

解释一下与做JQuery工程时的差异,为什么要在pom中依赖上面创建的jquery工程呢??原因是JQueryUI的运行需要用于JQuery运行库。

为什么已经在pom中依赖jquery包,还要在ui-component一行中要增加dependencies="jquery"属性呢??

因为Pom依赖解决的问题是如果要用JQueryUI,则必须要有JQuery的运行库。

但是有了运行库之后呢,JS的引入是有先后顺序的。这个时候,TinyUI框架就无法知道把哪个js引入在前面,但是有了dependencies="jquery"属性,TinyUI框架就知道,哦,jqueryui只能在jquery之后引用。

为什么上面有个说法叫基本完成呢?就是说,现在确实可以算做已经完成,但是程序员在写代码的时候还是要对JQueryUI进行深入学习,然后编写时的写法与原来没有什么本质的区别,这当然不是TinyUI框架解决问题的终点。

有没有办法,让不懂JQueryUI的人也可以简单的使用JQueryUI?当然可以,请看下节,创建界面组件定义文件。

TinyUI组件的定义

在jqueryui工程的/resources目录中创建component目录,然后中其中创建jquery_ui.component文件

##==================================================================================
## jqueryUI Dialog
##==================================================================================
#*
参数
id:ID
title:标题
construct:构建参数,详细参见jqueryui手册
*#
#macro(jui_dialog $id $title $construct)
<div id="$id" title="$!title">$!bodyContent
</div>
<script>$(function() {$( "#$!id").dialog($!construct);});
</script>
#end
##=================================================================================

如上,定义了一个宏,名字叫jui_dialog,它有两个参数,一个是标题,一个是构建参数。

采用的语法是Velocity语法--因为内部就是集成了Velocity模板语言的。

以后的人开发的时候,使用就非常简单了,只要输入下面的内容:

#@jui_dialog("窗口标题")
这里放内容
#end

就可以直接使用JQueryUI的Dialog来显示一个对话框了。

当然,你也可以定义更多的宏,比如:

##==================================================================================
## jquery accordion,参数:ID,构建参数
##==================================================================================
#macro(jui_accordion $id $construct) 
<div id="$id">$!bodyContent
</div>
<script>
$(function() {$( "#$id" ).accordion($construct);
});
</script>
#end
##==================================================================================##==================================================================================
##by 罗果 jquery accordion section,参数:标题
##==================================================================================
#macro(jui_accordionSection $title)<h3>$!title</h3><div>$!bodyContent</div>
#end
##==================================================================================

然后就可以在编写界面的时候用下面的方式来构建一个抽屉效果了:

#@jui_accordion("abc")#@jui_accordionSection("第一个抽屉")第一个抽屉的内容#end#@jui_accordionSection("第二个抽屉")第二个抽屉的内容#end#@jui_accordionSection("第二个抽屉")第二个抽屉的内容#end
#end
通过上面的处理,就可以在很大程度上屏蔽开发人员对具体的UI开发框架的依赖,而是在别人研究之后的基础上,像调用函数一下,就可以方便的来构建界面应用了。

TinyUI界面的开发

TinyUI的界面开发,有两种文件格式,一种以.page结尾,一种以.layout结尾


.page文件表示是用来展现的一个页面文件,.layout文件表示是一个布局文件,它自己不能被单独用来展示,但是可以进行布局定义,并影响.page文件的展现效果。干巴巴的说,比较晦涩,还是用例子来进行演示:

  1. 新建一个jar类型的maven工程
  2. 在main/resources/目录中创建下面的目录结构目录,
main/resources/demo/a
main/resources/demo/b

也就是说在main/resources上创建demo目录,然后在demo目录中分别创建a和b两个子目录

在demo目录中创建default.layout文件,内容如下:

<h3>这里是Header</h3>
$pageContent
<h3>这里是Footer</h3>

然后在a目录中创建一个a.page,内容如下:

我是a

在b目录中创建一个 b.page,内容如下:

我是b

在执行的时候,浏览器中输入http://localhost:8080/sample1/demo/a.page

它的运行结果是:

<h3>这里是Header</h3>
我是a
<h3>这里是Footer</h3>

在执行的时候,浏览器中输入http://localhost:8080/sample1/demo/b.page

它的运行结果是:

<h3>这里是Header</h3>
我是b
<h3>这里是Footer</h3>

看起来,布局文件确实已经起效果了。

一些特殊用法

用法1:个性化,从上面的例子中,可以看到布局文件会对当前文件夹中的所有文件起作用。但是在特殊场景下,确实有想不一样的情况出现,这时有两个办法:一个是把不一样的从当前目录中分离出去,另外一个是创建一个同名的布局文件。

比如,在上面的例子中,在demo目录中创建一个a.layout文件,其内容是如下:

<h3>This is Header</h3>
$pageContent
<h3>This is Footer</h3>



在执行的时候,浏览器中输入http://localhost:8080/sample1/demo/a.page

它的运行结果就会变成:

<h3>This is Header</h3>
我是a
<h3>This is Footer</h3>

用法2:Ajax支持:

比如,用Ajax进行局部加载的时候,不期望进行布局加载,只想这个page文件有啥就出啥,否则就会导致重复渲染的情况。TinyUI框架对此也有良好支持,只要请求的时候,在page后面加个let即可:

http://localhost:8080/sample1/demo/a.pagelet

这个时候它出来的内容都只有:

我是a
用法3:国际化支持

如果我想中国人访问,显示“我是a”,美国人访问,显示"I am a",怎么办呢?

创建a.zh_CN.page内容是“我是a”

创建a.en_US.page内容是 “I am a”

同理,布局文件也支持同样的国际化规则支持。

当然这个适合于两个页面结构及内容大相径庭的情况。

如果只是利用国际化资源进行简单的国际化内容支持

比如,有个国际国资源key值是title,那只要简单的写成#i("title")即可。

总结:

TinyUI是一个UI构建体系,但它不是一个具体的UI框架,因此它里面没有JS,没有CSS,也没有HTML,它只是提供了集成各种UI展现框架的能力,并提供了UI组件包的组织形式。并解决JS,CSS引入顺序、合并、压缩、国际化等问题。

上面只演示了部分的特性,更多的请参阅相关文档或下载后直接试用。


转载于:https://my.oschina.net/tinyframework/blog/202825

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300178.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一键搞定ASP.NET Core Web API幂等性

API的幂等性&#xff08;Idempotent&#xff09;&#xff0c;是指调用某个方法1次或N次对资源产生的影响结果都是相同的。GET请求默认是幂等的&#xff0c;因为它只是查询资源&#xff0c;而不会修改资源。而POST请求默认是不幂等的&#xff0c;多次调用POST方法可能会产生不同…

你这么爱听歌,一定活得很难过吧 | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅让笑声飞沙雕营长大象ROV全球第一最搞搞笑热门神吐槽朱莉生活日记

暴笑小笑话集----转自通信公社

07-4-11.女&#xff1a;“只要有钱&#xff0c;我嫁给谁都行。”男&#xff1a;“银行的保险柜你嫁吗&#xff1f;” 2.争吵的时候&#xff0c;男人和女人的区别就像是和机关枪的区别。3.我妻子想减肥&#xff0c;所以她每天都去骑马。结果马一个月之中瘦了四十斤。4.病人&…

Web开发中的矢量绘图(vml,svg)处理和应用

为什么80%的码农都做不了架构师&#xff1f;>>> 前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展&#xff0c;HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分…

c语言环境窗口组成,如何搭建C语言环境

如何搭建C语言环境开发C程序的时候我们用的开发软件有VC6.0、visual studio等等&#xff0c;但对于有些简单的程序我们更喜欢用记事本或者notepad等方便的工具进行编辑&#xff0c;编辑完后再通过cmd窗口编译运行&#xff0c;但我们得给它一个环境&#xff0c;以便它可以是使用…

C#新手该如何规划学习【学习路线指南】

花费了几天时间整理了C#学习路线图&#xff0c;可以说是纯野生C#程序员成长路线规划&#xff0c;在这里分享下&#xff0c;希望可以帮助到想从事C#开发的同学们。本人阅历尚浅&#xff0c;有些知识点可能分享不正确&#xff0c;希望广大网友评论区补充&#xff0c;我会同步修正…

msdn中C#中常用词汇概念(转帖)

p C# 是一种简洁、类型安全的面向对象的语言&#xff0c;开发人员可以使用它来构建在 .NET Framework 上运行的各种安全、可靠的应用程序。 p C# 作为一种面向对象的语言,支持封装、继承和多态性概念。所有的变量和方法&#xff0c;包括 Main 方法&#xff08;应用程…

丰巢刷脸取件被小学生破解,号称3D、深度学习加持的人脸识别究竟靠谱吗?...

全世界只有3.14 % 的人关注了青少年数学之旅经费不够&#xff0c;2D来凑&#xff1f;前些天&#xff0c;丰巢智能快递柜被“小学生”用打印照片破解&#xff0c;让人大跌眼镜。据《人民日报》报道&#xff0c;嘉兴上外秀洲外国语学校402班科学小队向都市快报《好奇实验室》报料…

Linux脚本利器sed

sed文本例子使用以下文件 $pg quote.txt The honeysuckle band played all night long for only $90. It was an evening of splendid music and company. Too bad the disco floor fell through at 23:10. The local nurse Miss P.Neave was in attendance.1 sed怎样读取…

伍迷随想冷饭集 之 瞻前顾后之随想

哈哈&#xff0c;很是开心&#xff0c;今天是我的生日&#xff0c;由于各地对年龄的计算方法不同&#xff0c;你认为我是25周岁、26岁、还是27虚岁都行&#xff0c;反正是又老一年了。几乎在每年的这个时候&#xff0c;我都会对自己做一个小小的总结&#xff0c;不过以前都没有…

c语言while运行出现错误,【图片】为什么我的while(1)不执行啊?【c语言吧】_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include #include #include #include #include /*设定&#xff1a;玩家&#xff1a;攻击力&#xff0c;生命值&#xff0c;技能效果&#xff0c;CD&#xff1b;敌人&#xff1a;攻击力&#xff0c;生命值&#xff0c;CD&#xff1…

研究生和本科生

一个月拼死拼活&#xff0c;一分钱不花才能买到连半个单人床都不到的屁大点地方。结婚得10年&#xff0c;买房得25年……这样生活还不如花5块钱买把犏刀抢银行&#xff01;&#xff01;&#xff01;于是我做梦手持菜刀&#xff0c;凶神恶刹一样冲到银行门口。突然&#xff0c;一…

微软面向初学者的机器学习课程:3.1-构建使用ML模型的Web应用程序

写在前面&#xff1a;最近在参与microsoft/ML-For-Beginners的翻译活动&#xff0c;欢迎有兴趣的朋友加入&#xff08;https://github.com/microsoft/ML-For-Beginners/issues/71&#xff09;构建使用ML模型的Web应用程序在本课中&#xff0c;你将在一个数据集上训练一个ML模型…

我们单位里新来的应届毕业生(转贴)

我在一个BBS上看到的贴,觉得很好玩,就转过来了....大家一起分享吧....1.公司新配给我一个助理.今天,我,助理以及我们老总,去局里开会.会毕,领导要写个注意事项给我们.我和老总当时拿笔都不太方便.我随口问助理..你带笔了吗?他马上回答:带了然后,几双眼睛看着他..接下来的十秒钟…

boost pool内存池库使用简要介绍

2019独角兽企业重金招聘Python工程师标准>>> 我厂内存次神马的一般都自己实现。我曾经也自己写过一个demo(mempool)。后来发现boost库里面有一个内存池库boost pool&#xff0c;貌似很好用&#xff0c;使用挺好&#xff0c;例子可以贴出来。 boost一共有4种内存池&…

嫁给我好吗?| 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅

c语言得到txt文件的长度,我利用C语言实现SHA-256算法,需要从一个txt文件中读出数据并把...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼并把得到的密文写入另一个txt文件张该怎么改代码啊&#xff1f;#include #include extern char* StrSHA256(const char* str, long long length, char* sha256);int main(void){char text[] "123";char sha256[65];StrS…

惠普前总裁孙振耀指点职业规划

HP大中华区总裁孙振耀退休感言&#xff1a;如果这篇文章没有分享给你&#xff0c;那是我的错。 如果这篇文章分享给你了&#xff0c;你却没有读&#xff0c;继续走弯路的你不要怪我。 如果你看了这篇文章&#xff0c;只读了一半你就说没时间了&#xff0c;说明你已经是个“茫”…

.NET Core etcd 配置源

etcd 是一个高可用的 Key/Value 存储系统&#xff0c;主要用于共享配置和服务发现&#xff0c;和目前比较主流的配置中心&#xff08;如&#xff1a;Spring Cloud Config、Apollo、Consul、Nacos&#xff09;、注册中心&#xff08;如&#xff1a;Zookeeper、Eureka、Consul、N…

继相对论、量子论之后,它的出现,给牛顿又来了致命一刀

全世界只有3.14 % 的人关注了青少年数学之旅前两天&#xff0c;有模友留言。今天&#xff0c;它来了。“微小的变化能带动整个系统的长期的巨大的连锁反应。”——节选自其实“混沌”一词&#xff0c;最早指的是宇宙未形成之前的混乱状态。/此混沌非彼馄饨/在希腊神话中&#x…