查看“Zope3宝典/新Web用户界面”的源代码



== Chapter 2: The New Web-Based Zope User Interface（第2章 新的基于WEB的用户接口） ==

----
原文出处：[http://dev.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/FrontPage/Zope3Book The Zope 3 Developers Book - An Introduction for Python Programmers]

原文作者：[http://www.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/StephanRichter StephanRichter], [http://www.zope.org zope.org]

授权许可：[http://www.creativecommons.cn/licenses/by-nc-sa/1.0/ 创作共用协议]

翻译人员：
* 马 剑 <honeyday.mj@gmail.com>

校对人员：[[Leal]], FireHare

适用版本：Zope 3

文章状态：草译阶段
----



'''Difficulty（难度）'''

Newcomer（新手）

'''Skills（技能）'''
**** You need to have some high-level object-oriented skills in order for the examples in this chapter to make sense.<br>需要一些高级的面向对象的技能来在本章的例子中找到感觉。
**** Familiarity with the component architecture would be useful because some of the vocabulary would make more sense. Optional.<br>熟悉组件架构将会对本章出现的词汇的理解有一定帮助。

'''Problem/Task（问题/任务）'''

At this point, you might say, “I have installed Zope 3, but now what?” This is a good question, especially if you have never seen any version of Zope before. After Zope starts with the bootstrap configuration, it starts up HTTP and FTP servers. The HTTP server provides a Web user interface in which the site manager cannot only configure the server further but also develop through-the-Web software (TTW). After introducing the basic elements and concepts of the Web interface, which is known as the Zope Management Interface (ZMI), this chapter gives a couple simple demonstrations. The Zope X3 3.0 release concentrates mainly on filesystem-based development--which this book is about--so TTW is still very immature and not even available via the Zope 3 distribution.<br>在这里你会说："我已经安装了Zope3，那么接下来呢？"这是一个好问题，特别是你从来没有接触过任何版本的Zope。当Zope使用启动配置文件启动后，它将启动一个HTTP和一个FTP服务器。通过HTTP服务器，提供了一个Web用户接口--站点管理器，通过它不仅可以配置服务器的特性，也可以开发所谓的TTW（through-the-Web）软件。在介绍了基本元素和Web接口（ZMI）的概念之后，我们给出一打的范例。Zope X3 3.0.0版本主要集中在给予文件系统的开发上，这是本书所关注的，所以TTW依然很不成熟，并且在本发布版本也是不可用的。

'''Solution（解决方案）'''

After Zope 3 starts, you can enter the ZMI via the Manage screen. The full URL is then http://localhost:8080/manage.
After you enter your username and password, you should see a screen similar to Figure 2.1 <br>Zope3启动之后，你可以通过"manage"屏幕进入ZMI。完整URL是 http://localhost:8080/manage 。在输入你的用户名和密码之后，你就可以看到类似 图 2.1 的屏幕。

attachment:figure_2_1.png

Figure 2.1: The initial Contents view of the Zope root folder.<br>图2.1： 根文件夹的初始内容视图

Zope 3 has very flexible skinning support, which allows you to alter the look and, to some extend, the feel of the ZMI. You can reach other skins by using the ++skin++ URL namespace. One nice skin is <code><nowiki>ZopeTop</nowiki></code>, which is excluded from the Zope X3 3.0.0 release but available in the repository. To see the initial contents screen of the <code><nowiki>ZopeTop</nowiki></code> skin, as shown in Figure 2.2, you use http://localhost:8080/++skin++ZopeTop/manage. <br>Zope3有非常有弹性的皮肤支持，通过它你可以修改ZMI的外观和感觉。其他皮肤可以通过++skin++的URL名字空间来更换。其中一个较好的皮肤是"<code><nowiki>ZopeTop</nowiki></code>",并不在 Zope X3 3.0.0 版本中但可以在库里找到。你可以使用 http://localhost:8080/++skin++ZopeTop/manage 来要观看如图2.2所示的 <code><nowiki>ZopeTop</nowiki></code> 皮肤的初始内容屏幕。

attachment:figure_2_2.png

Figure 2.2: The initial Contents view, using the <code><nowiki>ZopeTop</nowiki></code> skin.<br>图2.2：使用<code><nowiki>ZopeTop</nowiki></code>皮肤的初始内容视图

'''''Note:''' This book exclusively uses the default skin to describe the user interface (UI).<br>'''注意：''' 本书将只使用默认的皮肤来描述UI。''

=== 2.1 Getting Comfortable with the ZMI（使用 ZMI 获得舒适） ===

The ZMI is basically a classic two-column layout, with one horizontal bar at the top. The bar at the top is used for branding and some basic user information. The thin left column is known as the Navigators column. The first box of this column is usually the navigation tree, which is a hierarchical view of the object database structure. This works well because the two main object categories are normal objects and containers. Note that the tree uses <code><nowiki>JavaScript</nowiki></code> to load the contents and may not work well in all browsers, including Konqueror. If your browser does not support the <code><nowiki>JavaScript-based</nowiki></code> tree, you can use the <code><nowiki>StaticTree</nowiki></code> skin to get a pure HTML-based version of the tree. Below the tree can be a wide range of other boxes, including Add.<br>ZMI基本上是由两列和一个顶部横条所组成的经典视图。顶部横条一般用来做广告和一些用户的基本信息。左边的窄列是"导航器"。本列的第一块通常是导航树，一般是对像数据库结构一个纵向视图。他为我们工作的很好，因为这两个主要的对象目录是普通对象和容器。注意树使用 <code><nowiki>JavaScript</nowiki></code> 来引导内容的，也许并不能在所有浏览器上都能运行得很好，包括 Konqueror。 如果你的浏览器不支持基于 <code><nowiki>JavaScript</nowiki></code> 的树，那你可以使用基于静态树的皮肤来得到纯粹基于 HTML 的树。在树的下面，包括"Add"在内有个很大的一块区域。

The main part of the screen is the wide right column, known as the workspace. The workspace specifically provides functionality related to the accessed object. At the top of the workspace is the full path of the object, in “breadcrumbs” form, which provides a link to each element in the path.<br>屏幕的主要部分是右边的一大块叫"工作区(workspace)"的区域。工作区提特别供了集中访问对象的功能。在工作区的顶部的"面包屑"表单里是对象的完整路径,它提供了访问路径中每一个元素的链接。

Below the location is a tab-box. The tabs, known as ZMI views, are various views that have been defined for the object. You can think of these views as different ways of looking at an object. A good example is the Contents view of a Folder object.<br>在路径下面是一个标签页的头。标签页，作为"ZMI视图"，为对象定义了各种各样的视图。你可以将这些视图理解为观察对象的不同方式。一个好的例子是对像的"内容"视图。

Below the tabs, is a list of actions, known as ZMI actions. ZMI actions are also object specific, but they are usually available in a lot of different objects. Common actions that are available on all objects include Undo, Find , Grant and Help.<br>在标签的下面，你可以看到另外一个动作（ZMI动作）列表。ZMI动作也是对象特定的，但是通常对不同的对象都有效。通用动作包括"撤销"，"查找"，"赋予"和"帮助"，这些对所有的对象都有效。

Below the actions is the viewspace, which may contain several elements. All views have the Content column, which contains the information and forms of the selected tab. On the right side of the viewspace, there can be an optional column called Context Information. It is sometimes used to display view-specific help or meta-data.<br>在动作的下面是"视图区"，它可能包含若干元素。所有的视图都含有"内容"，它容纳信息和被选择的标签的表单。在视图区的右边有一个可选的列叫做"上下文信息"。它一般被用来显示一些视图指定的帮助信息或元数据。

Figure 2.1 shows an overview of all the functional sections of the ZMI.<br>图2.1显示了 ZMI 所有功能区的概况
----
attachment:figure_2_3.png

Figure 2.3:The sections of the ZMI.<br>图 2.3：使用在ZMI截屏上画出的区域

The ZMI is built to contain common elements for consistency.<br>为了保持一致性，ZMI 构建时将公用元素包括其中。

To see how the ZMI works, you cab try to create a folder and create a ZPT Page that displays the title of the folder:<br>为了了解 ZMI 是如何工作的，你将试着新建一个文件夹，并创建一个 ZPT 页面用来显示该文件夹的标题：

* Add a new object to the root by clicking the AMI action Add. You are presented with a list of all available content objects.<br>通过点击 ZMI 的“Add”在根中添加新对象。你将看到一个所有可用的内容对象列表。
* Select Folder and insert the name folder in the input box on the bottom. Finalize the addition by clicking the Add button. The system returns you to the root folder’s Contents view.<br>选择文件夹并在底部的输入框中输入文件夹名，点击“Add”按钮完成添加。系统将带你返回到根文件夹的内容视图。
* To add a sensible title to the new folder, click the empty cell of the Title column. An input field appears, and in it you can add the title Some Cool Title. Then press Enter.<br>为了给新文件夹添加一个易懂的标题，点击 Title 列的空格。将出现一个输入框，在其中你可以添加一个比较酷的标题，然后按回车。
* Enter the folder and add a ZPT Page called showTitle.html in the same way you added the folder. You are then presented with an Add page, which allows you to enter the source code.<br>进入文件夹，用添加文件夹相同的方式添加一个叫 showTitle.html 的 ZPT 页面。然后会出现一个添加页面，以便让你输入源代码。
* Add the following ZPT source code to the Source text area field:<br>在源代码文本区添加下列 ZPT 源代码：
<pre><nowiki>
1  <html>
2    <body>
3      <h4>Folder Title</h4>
4      <br/>
5      <h1 tal:content="context/zope:title">title here</h1>
6    </body>
7  </html>
</nowiki></pre><br>The strange tal namespace on line 5 is the first appearance of Zope’s powerful scripting language, Page Templates. The content attribute replaces title´here with the title of the folder when the template is executed, which is accessed by using context/zope:title.<br>在第5行有一个奇怪的 tal 名称空间，它是 Zope 强大的脚本语言，页面模板，第一次出现在我们面前。当这个模板执行时，内容属性将用这个标题来代替文件夹的标题。该模板通过使用 context/zope:title 而被访问。
* After you enter the code, click the Add button at the bottom of the form. You can safely ignore the other two options for now. You are forwarded to the folder’s Contents view again.<br>在你输入代码之后，点击表单底部的“Add”按钮。你目前可以先忽略掉其它两个选项。你将再次回到文件夹的内容视图。
* Click the template to open it. Then click the page’s Preview tab, and you see the title of the folder being displayed. You can open the page directly by using http://localhost:8080/folder/showTitle.html. <br>点击并打开模板，然后点击页面预览标签，你可以看到文件夹的标题已经出现了，你可以直接用 http://localhost:8080/folder/showTitle.html 来打开该页。

=== 2.2 Help and Documentation（帮助和文档） ===

Zope 3 comes with a simple online help system. Generally, you can reach this help system via the Help link in the ZMI actions list. If a particular help page is registered for the currently displayed view, then the Help link will directly forward you to this help page. The default is to show you the help system introduction page. Figure 2.4 shows Zope’s online help system.<br>Zope3有一个简单的在线帮助系统。通常情况下，你既可以通过 ZMI 操作列表中的"帮助"链接来访问。如果有一个帮助页面指定给当前显示的视图，那么帮助链接将带你到该帮助页面。缺省是将你带到帮助系统的介绍页。图2.4显示了 Zope 的在线帮助系统。

attachment:figure_2_4.png

Figure 2.4: Zope’s online help, with a table of contents on the left. <br>图2.4：Zope 的在线帮助，左边是内容表。

Another helpful feature is the Introspector view (see Figure 2.5). You might have noticed the Introspector ZMI tab that is available for all objects. It provides a list of all interfaces that the object provides and base classes that the object extends. <br>另一个有帮助的功能就是 Introspector 视图（参见图2.5）。你也许注意到 Introspector ZMI 标签对于所有对象都是可用的。它提供一个所有对象提供的接口和对象扩展的基类列表

attachment:figure_2_5.png

Figure 2.5:The Introspector view for an object. <br>对象的 Introspector 视图

The interfaces and classes listed in the Introspector view are actually linked to the API documentation, which is the third major dynamic documentation tool in Zope 3. The API doc tool (see Figure 2.6) is commonly accessed via http://localhost:8080/++apidoc++ and it provides dynamically generated documentation for interfaces, classes, the component architecture and ZCML. <br>在 Introspector 视图中列出的接口和类实际上都被链接到 API 文档，这是在 Zope 3 中第三个重要的动态文档工具。 API 文档工具（参见图2.6）通常可以通过 http://localhost:8080/++apidoc++ 来访问，同时它为接口、类、组件架构和 ZCML 提供动态生成的文档。

attachment:figure_2_6.png

Figure 2.6: The API doc tool showing the Interfaces menu and the IFile details.<br>图2.6：API 文档工具显示一个接口菜单和 IFile 接口的详细情况

The tools provided by the API doc tool are not just useful for scripters and users of the Web interface; they are also useful for Python developers, who can use them to get a fast overview of how components are connected to each other and the functionality they provide.<br> API 文档工具提供的工具不仅对脚本人员和 WEB 接口的用户有用，也对那些利用它们来快速查看组件是如何相互连接并提供哪些功能的 Python 开发人员来说也是有用。

=== 2.3 The Scripter’s World（脚本人员的世界） ===

Although Zope 3 is truly an object- and component-oriented application server, it tries to accommodate the scripter[md]someone who is a high-level developer but is not very familiar with advanced programming concepts. Several tools that have been developed for scripters are available in the Zope 3 source repository. However, the Zope X3 3.0.0 release concentrates on providing the Python developer with a solid framework to work with. The focus of the upcoming releases will be providing facilities that help scripters to switch from PHP, <code><nowiki>ColdFusion</nowiki></code>, and ASP to Zope 3. Furthermore, Zope helps a scripter become a developer.<br>虽然 Zope 3 是一个真正的面向对象和面向组件的应用服务，但它也试着去适应那些脚本人员，他是是高水平的开发人员但对高级编程概念并不很熟悉。我们已经为脚本人员开发了一些工具，并且这些工具在Zope3的源码库里有。然而，为了Zope X3 3.0.0发布版，我们决定集中精力在向Python开发者提供一个坚实的工作框架。即将发布版本的焦点将是提供更加灵巧的工具来帮助脚本人员从PHP、 <code><nowiki>ColdFusion</nowiki></code>和ASP转移到Zope3上来。此外，我们还将提供一个指导来使脚本人员向开发人员迁移。

=== 2.4 The Content Versus the Software Space（内容空间 VS 软件空间） ===

Zope 2 makes a great mistake by allowing software and content to live in the same place. Zope’s developers did not want to repeat the same mistake in version 3. Therefore, they developed a content space and a software space. So far in this book you have only worked in the content space.<br>Zope2在允许软件和内容放在同一空间上犯了一个巨大的错误。我们不想在Zope3中犯同样的错误。因此，我们开发了一个"内容空间"和"软件空间"。到目前为止，我们一直在内容空间里。

==== 2.4.1 Content Space（内容空间） ====

As the name implies, the content space only stores content. Whereas simple DTML and ZPT scripts are dynamic content, Python scripts are clearly software and are therefore not available in the content space. The only type of programming that is supported there is scripter support. However, being a scripter in this sense is not desirable, and Zope’s developers want to provide a way to help a scripter become a TTW developer. .<br>正如名字，在内容空间里我们只存储内容。我们可以将DTML和ZPT认为是一种动态内容，而Python脚本明显是软件，并且不能存放在内容空间里。在这里唯一支持的编程类型就是脚本。然而，"脚本"感觉上并不是很好，我们正准备为脚本人员提供一个变成 TTW 开发人员的途径。

==== 2.4.2 Software Space（软件空间） ====

Every Site object has a software space, which can be accessed via the Manage Site action. You can see the link when you are looking at the contents of the root folder because the root folder is always a site. But because it is not on the list of addable types, how do you create a Site object? To create a site, you create a folder, enter the folder by clicking on its name, and click the Make a Site action item. That’s it! Any folder can be upgraded to a site.<br>每一个"Site"对象都有一个软件空间，可以通过"Manage Site"动作来访问。当查看根文件夹的内容时你就可以看到这个链接，因为根文件夹总是一个站点。但是，怎样创建一个新的呢？它并不在可添加类型的列表里呀？为了创建一个站点，先创建一个文件夹，然后点击动作菜单上的"Make a site"链接。就是它！任何文件夹都可以通过这个途径升级为一个站点。

After the site is created and you click Manage Site, you are presented with an overview of possible tasks to do. Each site consists of several packages, including the default package, which is always defined. Packages are used to later pack up and distribute software. An involved registration and constraint system ensures the integrity of the setup.<br>一旦你点击了"Manage Site"，一个任务概要将展示在你的面前。每一个站点都由一些包组成，包括默认的包，总是定义过的。包被用来打包和发布软件。一个相关的注册与约束系统保证了安装的正确性。

If you now click the Visit Default Folder action link, you end up in the Contents view of the package. The goal is to add local components here that act as software. Because this looks and behaves very similar to the folder’s content space’s Contents view, the added components are called metacontent.<br>如果你现在点击"Visit default folder"链接，你将看到包的内容视图。目标是你在这里加入本地组件作为软件来使用。由于这个看上去与文件夹的内容空间的"内容"视图很像，所以我们经常把添加的组件称为"元内容"。

Let’s look at how all this hangs together. The simplest example is to create a local Translation Domain utility and use it to translate a silly message:好了，现在让我们看看这些是如何挂接在一起的。最简单的例子就是创建一个本地翻译域，然后用它翻译一条无聊的消息:

* In the Contents view of the default package, click Add, select Translation Domain, and enter Translations as the name. Then press the Add button to submit the request. You are then prompted to register the component.<br>在缺省包的内容视图中，点击“Add”，选择“Translation Domain”，键入“Translations”做为名称，然后点击“Add”按钮提交。随后提示你注册组件。
* Create a registration by clicking Register.<br>点击“Register”创建一个注册。
* Register the domain under the name silly (which will be the official domain name). The provided interface should be <code><nowiki>ILocalTranslationDomain</nowiki></code>, and the registration status should be set to Active. Finish the request by clicking the Add button. Now you have an active Translation Domain utility.<br>在 silly （这个将成为正式的域名）名字下注册域。提供的接口应该是 <code><nowiki>ILocalTranslationDomain</nowiki></code>，注册的状态应该设为 Active。点击“Add”按钮完成。现在你有一个激活了的 Translation Domain 工具。
* Click the Translate tab to enter the translation environment.<br>点击“Translate”标签进入翻译环境。
* In the translation environment, add some languages. Enter en under New Language and click the Add button. Do the same for de. Then select both English ( en) and German ( de) from the list on the left and click Edit. The table further down the page grows by two columns, each representing a language.<br>在翻译环境中，添加一些语言。在"New Language"下面输入en，然后按"Add"按钮。同样的方法输入de。现在你必须同时选中2个，英语和德语，然后点击"Edit"。你将看到表格的下面多出来两栏，每一栏代表一种语言。
* To add a new translation, look at the first row. For the message ID, enter greeting, and for the de and en columns add Hallo´Welt! and Hello´World!, respectively.<br>要添加一个新的翻译项，请看第一行。 对于Message Id，输入"greeting",对于de 和en 栏，分别输入"Hallo Welt!"和"Hello World!"。 
* To save the new translation, press the Edit Messages button at the bottom of the screen. You now have a translation of the greeting into English and German.<br>点击屏幕底部的"Edit Messages"按钮来保存这个新的翻译项。你此刻有一个将greeting翻译成英语和德语的翻译项了。

The translation screen can be seen in Figure 2.7<br>翻译屏幕请参见图2.7

attachment:figure_2_7.png

Figure 2.7: The Translate screen of the Translation Domain utility.<br>图2.7：Translation Domain 工具的翻译屏幕

Now that you have defined the software--the Translation Domain utility--it is time to go back to the content space and use the new software. In the root folder, you need to create a new ZPT page called i18n.html and add the following content to it:<br>我们已经定义了我们的软件-Translation Domain 工具，现在是时候回到内容空间并"使用"这个新软件了。 在根目录创建一个新的ZPT页面，叫做"i18n.html"并添加如下的内容：
<pre><nowiki>
1  <html>
2    <body i18n:domain="silly">
3      <h1 i18n:translate="">greeting</h1>
4    </body>
5  </html>
</nowiki></pre>
When you save these lines and click the Preview tab, with English as the preferred language, you see a big Hello World! onscreen. If you change the language to German ( de), Hallo´Welt! should appear.<br>当你保存这些行并点击"预览"标签之后，你将看到一个巨大的"Hello World！"，假定你是将英语指定为默认语言的。

'''''Note: '''In Mozilla you can change the preferred language by selecting Edit, Preferences, Navigator, Languages. Then you simply add German ( de) and move it to the top of the list.<br>'''注意：'''在 Mozilla 中你可以选择 <code><nowiki>Edit/Preferences/Navigator/Languages</nowiki></code> 来改变首选的语言编码，然后你简单添加German（de）并将其移至列表的顶部''

You have seen how simple it is to develop software in a site and then use it in the content space. As Zope 3 matures, it will offer much more impressive features, such as new views and TTW development of content components using schemas.<br>我们已经看到了在站点里开发一个软件并将其应用到内容空间的过程是多么的简单。随着Zope3越来越成熟，你将会看到更加激动人心的特色,比如使用Schemas来进行内容组件的TTW开发和写新视图。

This concludes our brief trip into the land of TTW development. After talking a little bit more about setting up Zope, we will turn to filesystem-based development and start take a more formal look at the concepts in Zope 3. <br>这些将把我们带到"通过网络（TTW）"的开发环境。在更多地了解了更多有关安装Zope的内容后，我们将要转向基于文件系统的开发并开始对Zope3的观念给出一个更加正式的介绍。