Plone: advanced Detail-View für Archetypes ContentType
Archetypes erlaubt es einen kompletten ContentType in einem Schema zu definieren. Hieraus werden Edit-Form und Base-View erzeugt. Nachfolgend wird eine Zope Browser View für einen ContentType erzeugt, die analog zu den Tabs in der Edit-Form die Feldinhalte nach Schemata-Tabs darstellt.
Wir erzeugen uns zu nächste eine Zope Browser View und fügen die folgende Methode hinzu:
def get_tab_names(self):
ignore_tabs = ['metadata', 'default', 'settings',
'categorization', 'dates']
tabs = [{'title': tab,
'id': tab.replace(',', '').replace(' ', '_')}
for tab in self.context.Schemata().keys()
if tab not in ignore_tabs]
return tabs
Das Template zur Base-View
Das Template der Zope Browser View sieht wie folgt aus.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"
metal:use-macro="here/main_template/macros/master"
i18n:domain="gin.summaries">
<head>
<metal:block fill-slot="column_two_slot" />
</head>
<body>
<div metal:fill-slot="main" id="example_base_view">
<metal:main_macro define-macro="main">
<metal:header_macro define-macro="header"
tal:define="kssClassesView context/@@kss_field_decorator_view;
getKssClasses nocall:kssClassesView/getKssClassesInlineEditable;
">
<div tal:replace="structure provider:plone.abovecontenttitle" />
<h1 metal:use-macro="here/kss_generic_macros/macros/generic_title_view">
Title or id
</h1>
<div tal:replace="structure provider:plone.belowcontenttitle" />
</metal:header_macro>
<metal:body_macro metal:define-macro="body">
<div tal:replace="structure provider:plone.abovecontentbody" />
<p class="documentDescription"
tal:content="structure context/Description" />
<div id="schemata_tabs" class="ui-tabs-nav" style="margin-bottom: 1em">
<ul>
<li tal:repeat="schemata view/get_tab_names">
<a tal:attributes="href string:#${schemata/id};
title schemata/id"><span tal:content="schemata/title" /></a>
</li>
</ul>
<tal:schemata_tabs repeat="schemata view/get_tab_names">
<a tal:attributes="name schemata/id"> </a>
<div tal:attributes="id schemata/id" class="ui-tabs-panel">
<tal:fields tal:define="field_macro field_macro | here/widgets/field/macros/view"
tal:repeat="field python:here.Schemata()[schemata['title']].filterFields(isMetadata=0)">
<tal:if_visible define="mode string:view;
visState python:field.widget.isVisible(here, mode);
visCondition python:field.widget.testCondition(context.aq_inner.aq_parent, portal, context);"
condition="python:visState == 'visible' and visCondition">
<metal:use_field use-macro="field_macro" />
</tal:if_visible>
</tal:fields>
</div>
</tal:schemata_tabs>
</div>
</metal:body_macro>
</metal:main_macro>
</div>
</html>
JQuery UI Tabs
Mit den JQuery UI Tabs, können die einzelnen Bereiche, in Karteireitern (Tabs) dargestellt werden.
// JQuery UI Tabs
jq('#schemata_tabs').tabs();
Analog kann dass ganze z.B. auch mit den JQuery Tools Tabs umgesetzt werden.
