CompositePage 产品
项目描述
内容
简介
CompositePage是一种将网页片段组装成网页的方法。通过使用Zope页面模板、基于浏览器的拖放和自定义上下文菜单,CompositePage可以轻松地将页面片段可视化地组合成完整的页面。
CompositePage取代了PageDesign产品并使用PDLib,一个JavaScript库。CompositePage是为支持DOM (文档对象模型) 和CSS (层叠样式表) 级别2的浏览器设计的:Firefox、Internet Explorer 5+、Opera、Konqueror等。
如何使用CompositePage
按照以下步骤操作
通过将存档解压到您的Products目录中,在Zope中安装CompositePage产品。我只测试了当前的Zope checkout,类似于Zope 2.7。
在中央位置创建一个Composite Tool实例,可能是根文件夹。
创建一个Composite对象。在创建表单中,有一个复选框用于创建示例模板。请勾选该复选框。
访问Composite对象并选择“设计”选项卡。你应该会看到一个三列布局,您可以在允许插入内容的地方看到蓝色的虚线。
点击蓝色线条的下方。会出现一个上下文菜单。选择“添加...”。
您将被引导到一个槽(一个文件夹样式的对象)。在槽中,您可以添加复合元素。添加一个指向脚本的复合元素。
找到之前创建的复合元素,并再次选择“设计”标签。您的新对象现在应该显示在槽中。
使用拖放将对象移动到不同的槽。当鼠标光标悬停在允许的目标上(蓝色虚线为目标)时,目标将被突出显示。松开鼠标,并观察您的对象出现在新位置。
右键单击您的对象,并从上下文菜单中选择“删除”。
如何编写模板
模板可以是任何Zope对象,但ZPT(Zope页面模板)是最常见的。专为与复合元素一起使用而设计的模板使用复合的“槽”属性。槽属性是一个类似映射的对象。
这是一个简单的复合感知页面模板
<html> <head> </head> <body> <div tal:content="structure here/slots/center/single"> This will be replaced with one element from one slot. </div> </body> </html>
表达式‘here/slots/center/single’获取复合的“槽”属性,找到名为“center”的槽,并调用槽的single()方法,返回包含HTML结构的字符串。
您必须在模板中命名槽的位置。如果模板引用了一个尚未存在的槽,复合将创建并返回一个空槽。如果您使用拖放界面将该槽放置了内容,复合将透明地在一个新的“filled_slots”文件夹中添加一个新的槽。请注意,Zope阻止您存储以下划线开头或与现有文件夹属性冲突的槽名。
模板使用槽的单个()或多个()方法。单个()返回一个字符串,而多个()返回一个字符串列表。当您预期槽不会包含超过一个元素时,请使用单个()。要允许超过一个元素,请使用多个()。在两种情况下,都不要忘记使用ZPT的“结构”关键字,因为返回的字符串包含不应转义的HTML。
槽表达式
您还可以使用特殊的槽表达式类型在模板中定义槽
<html> <head> </head> <body> <div tal:content="slot: center"> This will be replaced with elements in the center slot. </div> </body> </html>
此语法允许模板作者定义槽标题以及槽名称。模板作者可以编写
<div tal:content="slot: center 'Page Center'">
槽标题将显示给页面设计师。
工作原理
渲染
当您渲染(查看)复合时,它会调用其模板。当模板引用一个槽时,复合会在filled_slots文件夹中查找名为槽的槽。如果找到槽,则返回它;如果没有找到,则复合创建一个临时的空槽。然后模板调用单个()或多个()方法,槽渲染并返回其内容。
编辑模式下的渲染
当请求时,复合调用一个“UI”对象以编辑模式渲染其模板和槽。在编辑模式下,槽向HTML标签添加‘class’、‘source_path’、‘target_path’和‘target_index’属性以标记可移动对象和可放置目标。槽自动添加用于放置目标的HTML标记。当使用单个()方法渲染时,只有当槽为空时,槽才提供放置目标。当使用多个()方法渲染时,槽在元素之间以及槽的开始和结束处插入放置目标。
UI对象可以使用各种机制来使页面可编辑。大多数UI对象使用正则表达式查找‘head’和‘body’标签。然后UI对象插入脚本、样式和HTML元素。转换的结果被发送回浏览器。
拖放
在编辑模式下渲染的页面底部调用pd_setupPage() JavaScript函数。pd_setupPage()搜索页面上的所有元素,寻找具有特定'class'属性的元素。当找到'slot_element'时,一个处理程序会为该元素添加事件监听器,以便在用户在该元素上按下鼠标按钮时做出反应。当pd_setupPage()找到'slot_target'时,另一个处理程序会添加事件监听器,以便在用户拖动到该元素时做出反应。
如果用户在拖动到目标时释放鼠标,JavaScript代码会将适当的源路径、目标路径和目标索引放入隐藏表单,并将该表单提交到Zope中的组合工具。组合工具移动元素然后重定向浏览器到原始页面。浏览器再次以编辑模式加载页面,并将在新位置渲染移动的元素。
将CompositePage适配到其他应用
CompositePage提供了一个与Zope管理界面集成的默认用户界面,但提供了与任何用户界面集成的机制。请查看design.py、'common'子目录和'zmi'子目录以获取指导。简单的自定义可能不需要比ZMI UI更多的代码。
1.1 (2011-07-07)
Plone4兼容性清理
在Zope 2.12+下修复了剩余的弃用警告。
导入规范化。
单元测试规范化。
标题规范化。
1.0 (2011-04-30)
修复了由于Zope和Python 7年变化导致的测试失败。这主要涉及简单的现代化。
使用zope.interface、zope.tales和zope.pagetemplate而不是它们的前身。
使用绝对导入。
尽可能使用Unicode。
让我们停止在渲染模板以获取槽列表时吞咽发生的错误。错误消息比无声的破坏更友好。
槽现在仅在槽的顶部和底部显示添加元素界面,而不是在元素之间。)(嗯,这应该是可配置的吗?)
0.2 (2004-06-16)
更改了UI以使用元素和目标图像。
添加了内联视图。现在您可以选择模板以渲染对象。
上下文菜单现在有标题。
剪贴板现在工作。
现在可以使用“slot:”表达式在模板中定义槽,这应该使编写模板更容易。
组合工具现在在做出任何更改之前会检查复制/粘贴权限。
槽现在有__str__方法,使其易于直接渲染。