thymeleaf 中文文档==_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
thymeleaf 中文文档==
上传于||暂无简介
阅读已结束，如果下载本文需要使用5下载券
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩17页未读，继续阅读
你可能喜欢posts - 77,&
comments - 51,&
trackbacks - 0
thymeleaf，我个人认为是个比较好的模板，性能也比一般的，比如freemaker的要高，而且把将美工和程序员能够结合起来，美工能够在浏览器中查看静态效果，程序员可以在应用服务器查看带数据的效果。thymeleaf是一个支持html原型的自然引擎，它在html标签增加额外的属性来达到模板+数据的展示方式，由于浏览器解释html时，忽略未定义的标签属性，因此thymeleaf的模板可以静态运行。由于thymeleaf在内存缓存解析后的模板，解析后的模板是基于tree的dom节点树，因此thymeleaf适用于一般的web页面，不适合基于数据的xml。thymeleaf 的context，即提供数据的地方，基于web的context，即WebContext相对context增加 param,session,application变量，并且自动将request atttributes添加到context variable
map，可以在模板直接访问。在模板处理前，thymeleaf还会增加一个变量execInfo，比如${execInfo.templateName},${execInfo.now}等。数据访问模式：${...}，变量引用模式，比如${myBean.property}，如果用springDialect，则使用的是spring EL，如果不用spring，则用的ognl。*{...}，选择表达式，一般是th:object之后，直接取object中的属性。当没有选取对象时，其功能等同${...},*{firstName}也等同于${#object.firstName},#object代表当前选择的对象。@{...}链接url的表达式。th:href="@{/xxx/aa.do(id=${o.id})"，会自动进行url-encoding的处理。@{...}内部可以是需要计算的表达式，比如：th:href=”@{'/details/'+${user.login}(orderId=${o.id})}"#{...}，i18n，国际化。需要注意的：#{${welcomeMsgKey}(${session.user.name})}：i18n message支持占位。各个表达式支持嵌套。表达式基本对象：#ctx：context object#root或者#vars#locale#httpServletRequest#httpSession表达式功能对象：#dates：java.util.Date的功能方法类。#calendars:类似#dates，面向java.util.Calendar#numbers:格式化数字的功能方法类。#strings：字符串对象的功能类，contains,startWiths,prepending/appending等等。#objects:对objects的功能类操作。#bools:对布尔值求值的功能方法。#arrays：对数组的功能类方法。#lists:对lists功能类方法#sets#maps#aggregates:对数组或者集合创建聚合的功能方法，th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}"#messages:在变量表达式中获取外部信息的功能类方法。#ids：处理可能重复的id属性的功能类方法。条件操作：(if)?(then):满足条件，执行then。(if)?(then):(else)(value)?:(defalutValue)一些标签：th:text="${data}",将data的值替换该属性所在标签的body。字符常量要用引号，比如th:text="'hello world'",th:text="2011+3",th:text="'my name is '+${user.name}"th:utext，和th:text的区别是"unescaped text"。th:with,定义变量，th:with="isEven=${prodStat.count}%2==0"，定义多个变量可以用逗号分隔。th:attr，设置标签属性，多个属性可以用逗号分隔，比如th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。th:[tagAttr],设置标签的各个属性，比如th:value,th:action等。可以一次设置两个属性，比如：th:alt-title="#{logo}"对属性增加前缀和后缀，用th:attrappend，th:attrprepend,比如：th:attrappend="class=${' '+cssStyle}"对于属性是有些特定值的，比如checked属性，thymeleaf都采用bool值，比如th:checked=${user.isActive}th:each, 循环，&tr
th:each="user,userStat:${users}"&,userStat是状态变量，有 index,count,size,current,even,odd,first,last等属性，如果没有显示设置状态变量，thymeleaf会默 认给个“变量名+Stat"的状态变量。th:if or th:unless，条件判断，支持布尔值，数字（非零为true)，字符，字符串等。th:switch，th:case，选择语句。 th:case="*"表示default case。th:fragment，th:include,th:substituteby:fragment为片段标记，指定一个模板内一部分代码为一个片段，然后在其它的页面中用th:include或th:substituteby进行包含。包含的格式为，格式内可以为表达式，比如th:include="footer::$(user.logined)?'logined':'notLogin'"："templatename::fragname"，指定模板内的指定片段。"templateName::[domselector]"，指定模板的dom selector，被包含的模板内不需要th:fragment.”templatename"，包含整个模板。th:include和th:substituteby的区别在于前者包含片段的内容到当前标签内，后者是用整个片段（内容和上一层）替换当前标签（不仅仅是标签内容）。th:remove="all|body|tag|all-but-first"，一般用于将mock数据在真实环境中移除，all表示移除标签以及标签内容，body只移除内容，tag只移除所属标签，不移除内容，all-but-first，除第一条外其它不移除。由 于一个标签内可以包含多个th:x属性，其先后顺序为：include,each,if/unless/switch/case,with,attr /attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。内联文本：[[...]]内联文本的表示方式，使用时，必须先用th:inline="text/javascript/none"激活，th:inline可以在父级标签内使用，甚至作为body的标签。内联文本尽管比th:text的代码少，但是不利于原型显示。内联js:&scriptth:inline="javascript"&/*&![CDATA[*/...var username = /*[[${sesion.user.name}]]*/ 'Sebastian';.../*]]&*/&/script&js附加代码：/*[+var msg = 'This is a working application';+]*/js移除代码：/*[- */var msg = 'This is a non-working template';/* -]*/模板缓存：1、指定特定的缓存：templateResolver.setCacheable(false);templateResolver.getCacheablePatternSpec().addPattern("/users/*");2、清除缓存：templateEngine.clearTemplateCache();templateEngine.clearTemplateCacheFor("/users/userList");补充点url知识：1、绝对路径：.cn2、相对路径：&&& 2.1：页面相对路径，一般指相对当前请求的url，比如 aa.do&&& 2.2:上下文相对，比如/xxx/aa.do&&& 2.3:服务器相对路径，比如~/other/xxx/aa.do,允许切换到相同服务器不同上下文的路径。
阅读(50521)
&re: thymeleaf 学习笔记
thymeleaf适用于一般的web页面，不适合基于数据的xml。这点不同意，参数中可以设定不做缓存喔。对于属性是有些特定值的，比如checked属性，thymeleaf都采用bool值，比如th:checked=${user.isActive}这里，user.isActive=false时应该checked是不会出现这个attr的。总的来说thymeleaf是不错的，但内联不是太好用，经常js的alert的时候，不得不把后半个括号换一行，如alert(&aaa& + /*[[#{message}]]*/'message');这种情况，会把后面的);都删掉所以只能写成alert(&aaa& + /*[[#{message}]]*/'message');这样的形式。总得来说你总结的不错，但没找到我想要的，呵呵。&&&&&&
&re: thymeleaf 学习笔记
@Yockii“thymeleaf适用于一般的web页面，不适合基于数据的xml”这个是官方自己声明的，原文如下“if you are generating XML files with sizes around the tens of megabytes in a single template execution, you probably should not be using Thymeleaf.”&&&&&&
&re: thymeleaf 学习笔记[未登录]
@naturezhm你曲解了原文啊。原文意思是“如果你要一次生成数十M的xml的话，最好不要用Thymeleaf”。&&&&&&
27282930311234568101112131415161718192122232425262728123456789
随笔分类(31)
随笔档案(75)
文章分类(1)
文章档案(3)
阅读排行榜
评论排行榜Through this tutorial, we’re going to learn the basics of collisions , physics & bounding boxes by playing with the WebGL Babylon.js engine and a physics engine companion named oimo.js .
Here’s the demo we’re going to build together: Babylon.js Espilit Physics demo with Oimo.js
You can launch it in a WebGL compatible browser like IE11, Firefox, Chrome, Opera or Safari 8. Then, move inside the scene like in an-FPS game.
Press the “ s ” key
to launch some spheres/balls and the
“ b ” key
to launch some boxes. Using your mouse, you can click on one of the spheres or boxes to apply some impulse force on it also. Understanding collisions Looking at the Wikipedia Collision detection definition, we can read that: “
Collision detection
typically refers to the computational problem of detecting the intersection of two or more objects. While the topic is most often associated with its use in video games and other physical simulations , it also has applications in robotics . In addition to determining whether two objects have collided, collision detection systems may also calculate time of impact (TOI), and report a contact manifold (the set of intersecting points).
Collision response deals with simulating what happens when a collision is detected (see physics engine , ragdoll physics ). Solving collision detection problems requires extensive use of concepts from linear algebra and computational geometry .
Let’s project that into this cool 3D scene we have on our website: /index.html?ESPILIT that will act as our starting base for this tutorial. You can move into this great museum without going through the floor, you cannot go through the walls neither. At last, as you’re supposed to be a human, you’re stuck on the floor. You can’t fly. We’re then simulating gravity. All of that seems pretty obvious but requires a bunch of computation to simulate that in a 3D virtual world. The first question we need to resolve when we think about collision detection is how complex it should be? Indeed, testing if 2 complex meshes are colliding could cost a lot of CPU, even more in JavaScript engine where it’s complex to offload that on something else that the UI thread.To better understand how we’re managing this complexity, navigate into the Espilit museum near the desk:
You’re block by the table even if there seem to be some available space on the right. Is it a bug in our collision algorithm? Not it’s not (babylon.js is free of bugs! ;-)). It’s because Michel Rousseau, the 3D artist who has built this scene, has done this choice. To simplify the collision detection, he has used a specific collider.What’s a collider?Rather than testing the collisions against the complete detailed meshes, you can put them into simple invisible geometries. Those colliders will act as the mesh representation and will be used by the collision engine instead. Most of the time, you won’t see the differences but it will allow us to use much less CPU as the math behind that is much simpler to compute. Every engine supports at least 2 types of colliders: the bounding box and the bounding sphere . You’ll better understand by looking at this picture:
Extracted from: Computer Visualization, Ray Tracing, Video Games, Replacement of Bounding Boxes
This beautiful yellow deck is the mesh to be displayed. Rather than testing the collisions against every of it faces, we can try to insert it into the best bounding geometry. In this case, a box seems a better choice than a sphere to act as the mesh impostor. But the choice really depends of the mesh itself.Let’s go back to the Espilit scene and let’s display the invisible bounding element in a semitransparent red color:
You can now understand why you can’t move by the right of the desk. It’s because you’re colliding (well, the Babylon.js camera is colliding) with this box. If you’d like to do so, simply change its size by lowering the width to perfectly fit the width of the desk.
if you’d like to start learning Babylon.js, you can follow our Free MVA training course . For instance, you can jump directly to the “ Introduction to WebGL 3D with HTML5 and Babylon.js - Using Babylon.js for Beginners ” where we’re covering this collision part of Babylon.js. You can also have a look at the code inside our interactive playground tool: Babylon.js playground - Collisions sample
Based on the complexity of the collision or physics engine, there are other types of colliders available: the capsule and the mesh for instance.
Extracted from: Getting Started with Unity - Colliders & UnityScript
Capsule is useful for humans or humanoids as it better fits our body than a box or a sphere. The Mesh one is almost never the complete mesh itself. It’s rather a simplified version than the original mesh you’re targeting but still much more precise than a box, a sphere or a capsule.Loading the starting sceneTo load our Espilit scene, you have various options: 1 – Download it from our github: /BabylonJS/Samples/tree/master/Scenes/Espilit and follow this module of our MVA course to understand how to load a .babylon scene: Introduction to WebGL 3D with HTML5 and Babylon.js - Loading Assets . Basically, you need to host the assets and the Babylon.js engine into a web server and set the proper MIME types for the .babylon extension OR 2 – Download this already setup Visual Studio solution: BabylonJSEspilitWithPhysicsStartingSolution.zip
if you don’t know Visual Studio or not using it yet, have a look to this article: Web developers, Visual Studio could be a great free tool to develop with… Please note also that the Pro version is now free for a lot of different scenarios. It’s named Visual Studio 2013 Community Edition . Of course, you can still follow this tutorial if you don’t want to use Visual Studio. ;-) Here is the code to load our scene:/// &reference path=&/scripts/babylon.js& /&var var var document.addEventListener(&DOMContentLoaded&, startGame, false);function startGame() { if (BABYLON.Engine.isSupported()) {
canvas = document.getElementById(&renderCanvas&);
engine = new BABYLON.Engine(canvas, true);
BABYLON.SceneLoader.Load(&Espilit/&, &Espilit.babylon&, engine, function (loadedScene) {
scene = loadedS
// Wait for textures and shaders to be ready
scene.executeWhenReady(function () {
// Attach camera to canvas inputs
scene.activeCamera.attachControl(canvas);
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function () {
scene.render();
}, function (progress) {
// To do: give progress feedback to user
}); }} Using this material, you will only benefit from the embedded collision engine of Babylon.js. Indeed, we’re making a difference between our collision engine and a physics engine. The collision engine is mostly dedicated to the camera interacting with the scene. You can enable gravity or not on the camera, you can enable the “ checkCollision ” option on the camera and on the various meshes. The collision engine can also help you to know if two meshes are colliding. But that’s all (this is already a lot in fact!). The collision engine won’t generate actions, force or impulse after two Babylon.js objects are colliding. You need a physics engine for that to bring life to the objects.
The way we’ve been integrating physics in Babylon.js is via a plug-in mechanism. You can read more about that here: Adding your own physics engine plugin to Babylon.js . We’re supporting two open-source physics engine: cannon.js and oimo.js . Oimo is now the preferred default physics engine.
If you’ve chosen “ option 1 ” to load the scene, you then need to download Oimo.js from our github: /BabylonJS/Babylon.js . It’s a slightly updated version we’ve made to better support Babylon.js. If you’ve chosen “ option 2 ”, it’s already referenced and available in the VS solution under the “ scripts ” folder. Enabling physics support in the scene & transforming colliders into physics impostorsFirst thing to do is to enable physics on the scene. For that, please add this line of code:scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());//scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.CannonJSPlugin());You’re setting up the gravity level (-10 on the Y axis in this sample code, which is more or less like on Earth) and the physics engine you’d like to use. We’ll use Oimo.js but the commented line shows how to use cannon.js. Now, we need to iterate through all non-visible colliders used by the collision engine and activate physics properties on it. For that, you simply need to find all meshes where “ checkCollisions ” is set to true but not visible in the scene: for (var i = 1; i & scene.meshes. i++) {if (scene.meshes[i].checkCollisions && scene.meshes[i].isVisible === false) {scene.meshes[i].setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.7 });meshesColliderList.push(scene.meshes[i]);}} Please declare the meshesColliderList also: var meshesColliderList = [];And we’re done! We’re ready to throw some objects in our scene and put a lot of mess in this beautiful but way to calm museum.Creating spheres & boxes with physics statesWe’re now going to add some spheres (with an Amiga texture) and some boxes (with a wood texture) to the scene. This meshes will have physics state set. This mean for instance that they will bounce on the floor if you launch it in the air, bounce between them after a collision has been detected and so on. The physics engine need to know which kind of impostor you’d like to use for the mesh (plane, sphere or box today), the mass and friction properties. If you’ve chosen “ option 1 ”, you can download the 2 textures here: physicsassets.zip Add this code to your project:function CreateMaterials() { materialAmiga = new BABYLON.StandardMaterial(&amiga&, scene); materialAmiga.diffuseTexture = new BABYLON.Texture(&assets/amiga.jpg&, scene); materialAmiga.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5); materialAmiga.diffuseTexture.uScale = 5; materialAmiga.diffuseTexture.vScale = 5; materialWood = new BABYLON.StandardMaterial(&wood&, scene); materialWood.diffuseTexture = new BABYLON.Texture(&assets/wood.jpg&, scene); materialWood.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);}function addListeners() { window.addEventListener(&keydown&, function (evt) {
// s for sphere
if (evt.keyCode == 83) {
for (var index = 0; index & 25; index++) {
var sphere = BABYLON.Mesh.CreateSphere(&Sphere0&, 10, 0.5, scene);
sphere.material = materialA
sphere.position = new BABYLON.Vector3(0 + index / 10, 3, 5 + index / 10);
sphere.setPhysicsState(BABYLON.PhysicsEngine.SphereImpostor, { mass: 1 });
// b for box
if (evt.keyCode == 66) {
for (var index = 0; index & 10; index++) {
var box0 = BABYLON.Mesh.CreateBox(&Box0&, 0.5, scene);
box0.position = new BABYLON.Vector3(0 + index / 5, 3, 5 + index / 5);
box0.material = materialW
box0.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, { mass: 4 });
} });}You see that boxes are heavier by 4 than the sphere.
if you need to understand how material works in Babylon.js, jump to this module: Introduction to WebGL 3D with HTML5 and Babylon.js - Understanding Materials and Inputs or play with our dedicated Playground sample: Babylon.js Playground - Materials sample
Add these 2 lines of code after the scene.enablePhysics line: CreateMaterials();addListeners();And launch the web project. Navigate to the center of the museum and press rather the “s” or “b” keys. You’ll obtain this fun result:
Adding picking support to click on meshesLet’s add another cool feature. Let’s now imagine you’d like to click on one of the objects to throw them away. For that, you need the send an array from the 2D coordinates of the mouse inside the 3D scene, check if this array touches one of the interesting meshes and if so, apply an impulse force on it to try to move it.
to understand how picking works, please view this MVA module: Introduction to WebGL 3D with HTML5 and Babylon.js - Advanced Features or play with our online sample: Babylon.js Playground - Picking sample
Add this code into the addListeners() function: canvas.addEventListener(&mousedown&, function (evt) { var pickResult = scene.pick(evt.clientX, evt.clientY, function (mesh) {
if (mesh.name.indexOf(&Sphere0&) !== -1 || mesh.name.indexOf(&Box0&) !== -1) {
return true;
return false; }); if (pickResult.hit) {
var dir = pickResult.pickedPoint.subtract(scene.activeCamera.position);
dir.normalize();
pickResult.pickedMesh.applyImpulse(dir.scale(1), pickResult.pickedPoint); }});Launch again your code into your favorite browser. You can now click on your physic meshes to play with them.Displaying the bounding boxes to better understand the whole storyWe’re finally going to create a debug scene to let you displaying/hiding the colliders and activating/deactivating the physics properties on them.We’re going to inject the UI into this div:&div id=&lcContainer&&&ul id=&listColliders&&&/ul&&/div&And we’ll use this function to handle the UI:function CreateCollidersHTMLList() { var listColliders = document.getElementById(&listColliders&); for (var j = 0; j & meshesColliderList. j++) {
var newLi = document.createElement(&li&);
var chkVisibility = document.createElement('input');
chkVisibility.type = &checkbox&;
chkVisibility.name = meshesColliderList[j].
chkVisibility.id = &colvis& +
var chkPhysics = document.createElement('input');
chkPhysics.type = &checkbox&;
chkPhysics.name = meshesColliderList[j].
chkPhysics.id = &colphysx& +
(function (j) {
chkVisibility.addEventListener(
function (event) {
onChangeVisibility(j, event);
chkPhysics.addEventListener(
function (event) {
onChangePhysics(j, event);
newLi.textContent = meshesColliderList[j].name + & visibility/physx &;
newLi.appendChild(chkVisibility);
newLi.appendChild(chkPhysics);
listColliders.appendChild(newLi); } function onChangeVisibility(id, event) {
if (!meshesColliderList[id].isVisible) {
meshesColliderList[id].isVisible = true;
meshesColliderList[id].material.alpha = 0.75;
meshesColliderList[id].material.ambientColor.r = 1;
meshesColliderList[id].isVisible = false;
} } function onChangePhysics(id, event) {
if (!meshesColliderList[id].checkCollisions) {
meshesColliderList[id].checkCollisions = true;
meshesColliderList[id].setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.7 });
meshesColliderList[id].checkCollisions = false;
meshesColliderList[id].setPhysicsState(BABYLON.PhysicsEngine.NoImpostor);
} }}I know, it generates a very ugly UI but I was too lazy to spend more time on it. Feel free to improve it! :-P Call this new function and launch the web project. Now, for instance, display the colliders 12 & 17 :
You can also with the second checkbox enable/disable the physics properties. For instance if you’re disabling the physics properties on collider 12 and launch the spheres, they will now go through this wall! On the following screenshot, this is for instance the case of the sphere surrounded by the red square:
You can play with this debugging sample directly in your browser here: Babylon.js Espilit Physics debug demo if you’d like. Please also have a look at this awesome demo built by Samuel Girardin that also use Oimo.js on some funny characters:
Hope you’d enjoyed this tutorial! Feel free to ping me on Twitter: /davrous to comment it. David
无相关信息