在SOUI中使用布局模板

概要

注意：布局模板是SOUI 2.8.0.4 新增加的功能。之前版本不支持。

SOUI的listview等一系統(tǒng)控件支持通過模板來創(chuàng)建列表項，這里要說的模板不是指listview中的使用的列表項模板。


對于比較大的項目，在頁面布局中可能會出現(xiàn)重復(fù)的布局結(jié)構(gòu)，只是部分屬性不一樣。對于完全相同的布局，soui一直支持使用include屬性來重復(fù)引用布局XML腳本。但是對于屬性可能發(fā)生變化但整體布局一致的情況，在實現(xiàn)布局模板支持之前，除了在布局腳本中重復(fù)XML沒有更好的辦法。

有了布局模板，這樣重復(fù)的布局就可以更好的解決了。

使用示例

我們先看一下demo中提供的例子。

首先是增加了一個values\template.xml文件，當(dāng)然在uidef.xml里也加上：
<!--定義全局template對象--> <template src="values:template"/>
再打開template.xml:
<?xml version="1.0" encoding="utf-8"?> <template> <g.block> <window name
="{{name}}" layout="hbox" gravity="center"> <window size="-1,-1" layout="hbox">
<text text="name:" colorText="{{color}}" /> <link.web text="{{text}}" href
="{{text}}"/> </window> <img skin="skin_avatar"/> </window> </g.block> </
template>
在demo中我們通過template.xml的template元素定義了一個模板：g.block
，這里用"g."開頭，代表這是一個全局的模板。有全局模板就會有局部模板，局部模板和全局模板定義類似，只是它定義在布局文件的SOUI節(jié)點下，和root節(jié)點平級即可，也可參考局部style，局部skin的設(shè)置。一個局部的模板只能在當(dāng)前宿主窗口中有效。另外這里的名字可以隨便寫，不一定要以“g.”開頭。

觀察上面的模板，我們發(fā)現(xiàn)有3個字符串是“{{xxx}}”形式，這是布局的變量，將會在使用布局的時候被傳遞的實際參數(shù)替換。

再看一下在布局XML里如何引用這個模板：
<t:g.block size="-1,-1"> <data name="tpl_soime" color="#ff0000" text
="soime.cn!"/> </t:g.block> <t:g.block size="-2,-1"> <data name="tpl_soui" color
="#0000ff" text="ui520.cn"/> </t:g.block>
注意，SOUI使用“t:”這個名字空間來標(biāo)識后面是一個模板調(diào)用。

模板調(diào)用后面的布局參數(shù)會覆蓋模板的第一個子節(jié)點的布局參數(shù)。注意，一個模板應(yīng)該只有一個布局根節(jié)點，多個布局根節(jié)點會被自動忽略。

在調(diào)用模板的XML節(jié)點必須有一個data子節(jié)點來存儲參數(shù)值，這些參數(shù)會自動替換模板中對應(yīng)的變量。

這就是整個模板使用過程。如果不使用模板，達(dá)到同樣的效果，模板中的XML要重復(fù)寫2次，使用模板后，xml結(jié)構(gòu)會更簡潔。

運行效果：

下面我們看看demo中的效果：



?

模板的使用方法完成。

啟程軟件 2019-03-14

• ? 上一篇：oracle ORA-12514: TNS: no listener 解決方案，修改計算機名稱，重啟Oracle服務(wù)和監(jiān)聽
• ? 下一篇：Consul和Kong的實踐（一）