怎么给公司做微网站,wordpress 添加到主屏,微信公众号对接网站做,团风做网站2019独角兽企业重金招聘Python工程师标准 TinyUI实际上并不是一个具体的UI展现组件#xff0c;它只是一个UI构建体系。它可以适应于各种HtmlCSSJS的体系架构中。 TinyUI主要解决下面的问题#xff1a; UI中JS的引入与顺序#xff0c;JS合并的问题 UI中css的… 2019独角兽企业重金招聘Python工程师标准 TinyUI实际上并不是一个具体的UI展现组件它只是一个UI构建体系。它可以适应于各种HtmlCSSJS的体系架构中。 TinyUI主要解决下面的问题 UI中JS的引入与顺序JS合并的问题 UI中css的引入与顺序CSS合并的问题 UI中碰到性能问题时的影响范围比如一个树出现问题要改动许多用到树的地方 代码重复的问题同样的内容在许多地方都有如果要改动就要改动许多个地方 整体布局调整困难的问题 开发效率的问题 执行效率的问题前台响应要求速度更快 集群的问题 国际化的问题 等等 所以它只是一个体系不提供具体的UI组件只是便于进行对其它UI框架进行包装、集成同时解决运行过程中的各种问题。它还解决了模块化的问题也就是说大家都按照规范构建一个一个的模块然后复用的时候是不用考虑如何引入css,js以及其引入顺序的相关问题的。 关于体系性的说明请移步查阅UI开发的终极方案。 下面我们就以集成Jquery和Jqueryui来示例如何进行TinyUI组件包的开发。 JQuery TinyUI组件包的的开发 新建一个Maven的Jar类型工程 在main/resources/中创建jquery/js目录然后在/jquery/js/目录中放入jquery-1.11.0.js文件 在main/resources目录中创建jquery.ui.xml文件内容如下 ui-componentsui-component namejqueryjs-resource/jquery/js/jquery-1.11.0.js/js-resource/ui-component
/ui-components OKJQuery的UI组件包就算开发完毕了。 简单说明其实上面的文件组织形式只是个示例而已实际上你也可以根据你自己的需要制订自己的规范来进行目录的组织唯一需要注意的是js-resource中的jquery-1.11.0.js所在的路径以/resources为根开始要正确引用。 JQueryUI TinyUI组件包的的开发 新建一个Maven的Jar类型工程并依赖上面创建的jquery工程 在main/resources/中创建jqueryui/js目录然后在/jqueryui/js/目录中放入jquery-1.11.0.js文件 在main/resource/jqueryui/中创建theme目录里面放jqueryui的所有主题文件夹 在main/resources目录中创建jqueryui.ui.xml文件内容如下 ui-componentsui-component namejqueryui dependenciesjqueryjs-resource/jqueryui/js/jquery-ui-1.10.3.custom.js/js-resource/ui-component
/ui-components OKJQueryUI的UI组件包就算基本开发完毕了。 解释一下与做JQuery工程时的差异为什么要在pom中依赖上面创建的jquery工程呢原因是JQueryUI的运行需要用于JQuery运行库。 为什么已经在pom中依赖jquery包还要在ui-component一行中要增加dependenciesjquery属性呢 因为Pom依赖解决的问题是如果要用JQueryUI则必须要有JQuery的运行库。 但是有了运行库之后呢JS的引入是有先后顺序的。这个时候TinyUI框架就无法知道把哪个js引入在前面但是有了dependenciesjquery属性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/h3div$!bodyContent/div
#end
## 然后就可以在编写界面的时候用下面的方式来构建一个抽屉效果了 #jui_accordion(abc)#jui_accordionSection(第一个抽屉)第一个抽屉的内容#end#jui_accordionSection(第二个抽屉)第二个抽屉的内容#end#jui_accordionSection(第二个抽屉)第二个抽屉的内容#end
#end 通过上面的处理就可以在很大程度上屏蔽开发人员对具体的UI开发框架的依赖而是在别人研究之后的基础上像调用函数一下就可以方便的来构建界面应用了。 TinyUI界面的开发 TinyUI的界面开发有两种文件格式一种以.page结尾一种以.layout结尾 .page文件表示是用来展现的一个页面文件.layout文件表示是一个布局文件它自己不能被单独用来展示但是可以进行布局定义并影响.page文件的展现效果。干巴巴的说比较晦涩还是用例子来进行演示 新建一个jar类型的maven工程 在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文件其内容是如下 h3This is Header/h3
$pageContent
h3This is Footer/h3 在执行的时候浏览器中输入http://localhost:8080/sample1/demo/a.page 它的运行结果就会变成 h3This is Header/h3
我是a
h3This is Footer/h3 用法2Ajax支持 比如用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
