opencms95自建网站可视化拖拽环境搭建

1.1搭配自定义网站的可视化编辑环境在opencms官方网站中，很炫的展示了在示例站点上拖拉放组件，建立导航。但是按官方文档中的建站指南进行操作，无法达到其效果。经过几番探索，终于摸索到一条途径。Opencms示例站点，是基于bootsrap的。Bootstap重要的是栅格布局。典型特征是：看起来像表格，但是与表格有差别。主要是一个栅格（像excel中单元格，或形象说就是格子方格）中可以再生成系列栅格(理论是无限制的，实际受设备的显示屏约束)。这样在布局时，只要提供栅格布局，就不再提供什么页头，页脚，左中右等等了。因为要达到这种布局效果，只需拖三个栅格，分别表示页头、页中、页脚。页中再施三个栅格进行左右右表示即可。如果还不能理解栅格，请移步到bootstap官方网站看栅格系统方面的教材。Opencms的栅格布局，重点由行，列组成。所有的像label、text、list等这些组件必须存在栅格中，没有栅格无法存在。Opencms在可视化拖放操作，分成了template行列、layout行列、拖放像label、text等这类组件三步操作。Template行列必须在container容器中，layout行列必须存在template行列中，而label、text必须存在layout行列中。要搭建自定义网站的可视化编辑环境，需要借用opnecms的bootstap模板，根踪示例网站不难发现是：/system/modules/com.alkacon.bootstrap.formatters/templates/bootstrap-grid-page.jsp为了不影响官方的示例站点，请自建一个模块，然后克隆这个文件。为了简化，请把这个文件中的有关搜索的语句注释掉：cms:includefile=%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/search/config.jsp:b4a9ffc9-416c-11e3-81ba-000c297c001d)/OPENCMS的组件的数据是借助XML进行存放的，该文件位于站点的.content下的相应文件夹中。文件名由该组件所在模块的moduleconfiguration类型且名为.config的文件进行指定。为了简化，强烈建议把示例站点中.content下的文件夹全部COPY到自建网站中来，并把这些文件夹清空(这是清除垃圾)。综上所述，要建立自定义网站的可视化编辑，总的工作是：建立自定义站点，建立自定义模块，复制并修改bootstrap-grid-page.jsp文件。建好后在自定义页面如何添加templaout行列，如何添加layout行列，如何添加text组件等。以下是较详尽演练：1.1.1进入opencms工作平台安装好并运行opencms后。这里按默认安装示例。在浏览器中打开网页输入用户密码Adminadmin.登陆。登陆后后台，点击reopenwindow1.1.2建立自定义模块（1）进入工作管理平台中，site指到/,view切换到adminstrator，点名字中含mondule相关项进行建立模块。图示如下：（2）在弹出的窗口中，点newmodule然后如下所示填入资料并确定。1.1.3复制并编辑bootstap模板Opencms管理工作平台中，site指到/,view切换到exploer状态。左边打开/system/modules/com.alkacon.bootstrap.formatters/templates/.按右键选copy，出现窗口中复制到：/system/modules/my.opencms.testmodule/templates/关键图示为：选中复制后文件，重命名为main.jsp.并打开编辑。这两者都是选中文件，按右键。编辑时注释掉如下语句。cms:includefile=%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/search/config.jsp:b4a9ffc9-416c-11e3-81ba-000c297c001d)/关键操作示例图如下：1.1.4建立自定义站点（1）进入工作管理平台中，site指到/,view切换到adminstrator，点右边的UP，直到出现有site、module等英文单词的主界面。（2）进入主界面点sitemangagement(3)在sitemangement界面中，点newsite输入如下资料。（4）进入工作管理平台中，site指到/,view切换到explore。选中site/mysite,点new，选folder。新建一个en的文件夹。选中folder时输入文件名后，其他不要管确定即可。1.1.5给站点文件夹指定template（1）工作管理平台中，site指到/,view切换到explore。打开site/mysite/，选en按右键，选属性。（2）在属性窗口中，切换到completeproperties下，点unusedpropertites.在template选项中输入自已的bootstrap模板。1.1.6复制组件所需要的文件夹到自已站点工作管理平台中，site指到/,view切换到explore。把/sites/default/.content所有文件夹复制到/sites/mysite/.content/下面。具体方法是左边选中/sites/default/.content，右边选中所需要的文件夹按右键，选COPY，图示略。1.1.7新建一个网页工作管理平台中，site指到/,view切换到explore。打开site/mysite/en，然后点上面的new。建一个类型为containerpage文件，文件名为index.html上图点continue后如下操作1.1.8在网页可视化编辑中可视化操作1.1.8.1从工作台进入可视化编辑状态（1）工作管理平台中，site指到测试站点,view切换到explore。左边打开sites/mysite/en点右边的index.html。浏览器将开index.html网页。（2）在浏览器打开的页面，点右边角的鸡眼睛。该页就处于可视化编辑状态1.1.8.2拖放template行列（1）切换到template状态，点添加内容(2)拖template行列(2)拖template列.与上类似，点添加图标，选中下面的templaterow，点result选中需要的列，拖入到背后的色块中。1.1.8.3拖layout行列与拖template行列类似。可视化编辑切换到layout，然后类似操作即可。拖好后的界面类似如下：1.1.8.4拖text之类的组件与拖layout行列类似。可视化编辑切换到default，然后按增加图标，选中需要拖放的组件即可。拖放后好，如果立即录入数据，将出现保存错误。请到opencms管理平台中打开自已的站点，在.content下找到该组件对应的XML文件，按属性，填上标题与描棕。关键图示：