抽屉式布局其实是OutlookBar菜单的样式,只是其中放置的并非菜单项而是控件,它在JSP页面中添加了OutlookBarGroup标签而被用作布局的一种。
抽屉式布局
在sample项目的src下新建ViewModel命名outlookGroup。新建OutlookBar控件。步骤:【Controls】—>【Insert】—>【Others】—>【OutlookBar】。
图16-14
然后再新建4个Button按钮控件。
图16-15
保存之后新建outlookGroup相关的JSP页面outlook_group.jsp,通过【Dorado X-Insert】 在JSP页面中添加OutlookGroup标签,调整页面标签代码。
<d:View config="outlookGroup"> <d:OutlookBar id="outlookbar1"> <d:OutlookBarGroup name="group1" label="第一个组"> <d:Button id="button1" /> </d:OutlookBarGroup> <d:OutlookBarGroup name="group2" label="第二个组" padding="12"> <d:Button id="button2" /> </d:OutlookBarGroup> <d:OutlookBarGroup name="group3" label="第三个组" padding="12"> <d:Button id="button3" /> </d:OutlookBarGroup> <d:OutlookBarGroup name="group4" label="第四个组"> <d:Button id="button4" /> </d:OutlookBarGroup> </d:OutlookBar> </d:View>
图16-16
全部保存之后,打开outlook_group.jsp页面查看抽屉式布局效果。
图16-17
Attachments:
worddav70cc7b15b2da58ae86c6fe080fc61863.png (image/png)
worddav00968605717a43e3fdedf18c76796a66.png (image/png)
worddav2e76615c535f59b37ef8fd9c76813a52.png (image/png)
worddav60f1da1b3a271525903f74deb9beec49.png (image/png)
worddav5bbd7a7f77c217cbaea73fbe7dffeb94.png (image/png)
worddav00968605717a43e3fdedf18c76796a66.png (image/png)
worddav2e76615c535f59b37ef8fd9c76813a52.png (image/png)
worddav60f1da1b3a271525903f74deb9beec49.png (image/png)
worddav5bbd7a7f77c217cbaea73fbe7dffeb94.png (image/png)