使用JxLib定制灵活网页布局Flexible weblayout
2012-08-23 07:54
357 查看
在MapGuide中,灵活网页布局提供了5个模版,每个模版都有各自不同的样式,你可以选择一个你喜欢的使用。但也许你希望能够对这些模版进行定制,或者干脆创建你自己的模版,如果你真有这想法,希望这篇文章能给你一点启发。MapGuide中的灵活网页布局也就是Fusion viewer是基于OpenLayers 和 JxLib的。他的界面布局部分由JxLib来完成,所以你可以参考JxLib的使用来对布局进行修改。
这里我做个很简单的例子,即为Slate模版添加一个panel,下面是效果截图:
下面开始着手干,用你喜欢的文本编辑器打开Slate的模版文件,缺省在 C:\Program Files\Autodesk\Autodesk Infrastructure Web Server Extension 2013\www\fusion\templates\mapguide\slate\index.html,然后按照下面修改代码:
…
panel3 = new Jx.Panel({
label: OpenLayers.i18n('taskPaneTitle'),
collapse: true,
maximize: true,
contentId: 'TaskPane'
});
panel4 = new Jx.Panel({
label: 'mytest',
collapse : true,
maximize : true,
contentId : 'mytest',
content : 'your content here'
});
panelman = new Jx.PanelSet({
parent: splitter.elements[0],
panels: [panel1, panel2, panel3,panel4]
});
…
注意其中黑体的我增加的代码。
这个只是非常简单的例子,如果你想了解更多,还是需要阅读JxLib的相关文档来实现。你可以还会对这个DevTV视频感兴趣:
DevTV: MapGuide Fusion Technology Introduction
A self-paced video tutorial on how to build a web-based mapping application using the Fusion Viewer Technology and MapGuide Enterprise.
View Online | Download
这里我做个很简单的例子,即为Slate模版添加一个panel,下面是效果截图:
下面开始着手干,用你喜欢的文本编辑器打开Slate的模版文件,缺省在 C:\Program Files\Autodesk\Autodesk Infrastructure Web Server Extension 2013\www\fusion\templates\mapguide\slate\index.html,然后按照下面修改代码:
…
panel3 = new Jx.Panel({
label: OpenLayers.i18n('taskPaneTitle'),
collapse: true,
maximize: true,
contentId: 'TaskPane'
});
panel4 = new Jx.Panel({
label: 'mytest',
collapse : true,
maximize : true,
contentId : 'mytest',
content : 'your content here'
});
panelman = new Jx.PanelSet({
parent: splitter.elements[0],
panels: [panel1, panel2, panel3,panel4]
});
…
注意其中黑体的我增加的代码。
这个只是非常简单的例子,如果你想了解更多,还是需要阅读JxLib的相关文档来实现。你可以还会对这个DevTV视频感兴趣:
DevTV: MapGuide Fusion Technology Introduction
A self-paced video tutorial on how to build a web-based mapping application using the Fusion Viewer Technology and MapGuide Enterprise.
View Online | Download
相关文章推荐
- 使用ConstraintLayout构建一个灵活的布局
- Web基础入门(表格)-使用表格嵌套的形式制作一个简单的网页布局
- web前端开发——网页布局显示错位的可能原因(shift+F6重命名快捷键的使用注意)
- 使用约束布局(ConstraintLayout)构建灵活的UI
- 使用约束布局(ConstraintLayout)构建灵活的UI
- 自己开发的web快速开发平台教程(1),布局(Layout)的使用教程
- MapGuide应用开发系列(九)---- MapGuide Studio准备地图之网页布局(WebLayout)
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
- 使用Gulp + Webpack定制前端开发环境
- web设计 网页流动布局和弹性布局 转载
- 第三章 强大而又灵活——灵活网页布局
- 在网页布局中合理使用inline formating context(IFC)
- 安卓使用WebView打开网页
- Web服务器使用JSP来创建网页的步骤
- xcode6中自动布局autolayout和sizeclass的使用
- Python抓取网页动态数据——selenium webdriver的使用
- Android-使用WebView显示网页
- 使用WebStorm开发web前端 网页中文乱码问题的解决方案
- android 使用webview加载网页问题
- 使用LinearLayout线性布局编写左上右上左下右下中央