widget和Decorator装修器的使用



ofbiz中的Widget小窗口和Decorator装修器是ofbizView层的技术，使用widget我们可以将很多零散的页面部分拼合成一张页面。

这样，每张页面都有的公共部分。因此我们只创建一次，再创建新页面时，我们只创建不同的部分即可。

Widget是用xml文件表示的，存放的位置是..\widget\XxxxScreen.xml。

零散的页面通常放在相应的app\webapp\app\下和app\webapp\app\includes\下。

（app\webapp\app\存放的是不同的页面部分，app\webapp\app\includes\下存放的是相同的页面部分）

Widget示例代码：

screen name="news"       section            widgets                platform-specifichtmlhtml-template location="component://hello2/webapp/hello2/includes/header.ftl"//html/platform-specific                platform-specifichtmlhtml-template location="component://hello2/webapp/hello2/news.ftl"//html/platform-specific                platform-specifichtmlhtml-template location="component://hello2/webapp/hello2/includes/footer.ftl"//html/platform-specific            /widgets       /section /screen

代码中我们可以看到news页面由三部分组成：header.ftl,main.ftl,footer.ftl。这三部分的路径都在代码中明确给出，这样的话当用户请求页面news时，ofbiz就会根据代码中给出的路径找到页面的不同部分，将它们组合起来再返回一张完整的页面的用户。

 

   然而，当View比较复杂，页面太多时，这样在XML里定义每一张页面时，XML的代码量也是非常大的，而且不利于维护。

因此，Decorator装修器可以帮我们解决这个问题！Decorator是一个页面模板，该模板也是一个screen元素，模板名通常叫CommonDecorator，和widget定义在相同的XML文件中。当模板定义后每一个页面的定义就不用像上面这样将所有的部分都列出来了，可以只用列出和其它页面不同的部分。

Decorator示例代码：

screenname="CommonDecorator"       section            widgets                platform-specifichtmlhtml-template location="component://hello2/webapp/hello2/includes/header.ftl"//html/platform-specific                decorator-section-include name="body"/                platform-specifichtmlhtml-template location="component://hello2/webapp/hello2/includes/footer.ftl"//html/platform-specific            /widgets       /section /screen   screen name="news"       section            widgets                decorator-screenname="CommonDecorator"                   decorator-section name="body"                      platform-specifichtmlhtml-templatelocation="component://hello2/webapp/hello2/news.ftl"//html/platform-specific                     /decorator-section                /decorator-screen            /widgets       /section /screen

代码中，页面news的代码就要比一开始少了很多，原因就是使用了模板CommonDecorator。

模板页面和普通页面是一样的XML元素，但在其中有一句话不同：decorator-section-includename="body"/，该句话所在的位置就是使用了该模板的页面需要添加自己内容的位置。

在示例代码中，模板定义了HTML头和脚，使用该模板需要添加的部分就是主体部分。

模板中可以添加内容的位置用decorator-section-includename="body"/标识，应该可以有多个位置可以。