跳转到主要内容

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中的组合工具。组合工具移动元素然后重定向浏览器到原始页面。浏览器再次以编辑模式加载页面,并将在新位置渲染移动的元素。

上下文菜单

与拖放一样,上下文菜单依赖于pd_setupPage()。当pd_setupPage()找到'slot_element'时,一个处理程序会为该元素添加上下文菜单监听器。当上下文菜单被激活时,会定位并显示一个看起来像上下文菜单的HTML元素。一旦显示,预计用户将选择上下文菜单中的某个项目,或者点击上下文菜单外部使其消失。对于'slot_target'元素也存在类似的进程,但使用的是不同的不可见HTML元素。

在弹出上下文菜单之前,其内容使用JavaScript表达式进行过滤。某些操作仅在用户至少选择了一个项目时有效,而其他操作仅在恰好选择了一个项目时有效。过滤表达式提供了一种表达这些约束的方法。

将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__方法,使其易于直接渲染。

项目详情


下载文件

下载适合您平台的文件。如果您不确定选择哪个,请了解更多关于安装包的信息。

源分布

Products.CompositePage-1.1.tar.gz (46.1 kB 查看哈希值)

上传时间

由以下支持