Permalink
Browse files

Simplify body tile rendering to not require a corresponding header

svn path=/plone.app.blocks/branches/tile-simplification/; revision=50405
  • Loading branch information...
1 parent 55ef64f commit b57581a4e9bc99c36c1c4f129ec5d98f3a4f292a @optilude optilude committed Jun 13, 2011
@@ -50,11 +50,11 @@ def __call__(self):
tree = panel.merge(self.request, tree)
if tree is None:
- raise TypeError("Page could not be merged")
-
- # Find tiles
- tiles = utils.findTiles(self.request, tree, remove=True)
-
+ raise ValueError("Page could not be merged")
+
+ # Find tiles and remove head links if applicable (before we reuse the tree)
+ tiles = utils.findTiles(self.request, tree, removeHeadLinks=True, ignoreHeadTiles=True)
+
# Build the stylesheet
xsltRoot = etree.fromstring(XSLT_BOILERPLATE)
xsltTree = xsltRoot.getroottree()
@@ -64,19 +64,14 @@ def __call__(self):
# Copy the whole content HTML file into the XSLT as the template
xsltTemplate.append(tree.getroot())
- for (tileId, (tileHref, hasTarget)) in sorted(tiles.items(),
- cmp=utils.tileSort):
-
- if not hasTarget:
- continue
+ for tileId, tileHref, tileNode in tiles:
- tileTarget = utils.xpath1("//*[@id='%s']" % tileId, xsltTemplate)
- if tileTarget is None:
+ if tileNode is None:
continue
# Replace the tile placeholder's contents with an <xsl:copy-of />
- tileTarget.getparent().replace(
- tileTarget, E("{%s}copy-of" % XSLT_NS,
+ tileNode.getparent().replace(
+ tileNode, E("{%s}copy-of" % XSLT_NS,
select="/html/body/div[@id='%s']" % tileId))
# Make sure we have the correct content type
@@ -99,14 +99,12 @@ We will also register a simple layout and a simple page using these tiles.
... <head>
... <title>Layout title</title>
... <link rel="panel" rev="panel1" target="panel1" />
- ... <link rel="tile" target="layout-non-esi-tile" href="./@@test.tile2/tile1" />
- ... <link rel="tile" target="layout-esi-tile" href="./@@test.tile3/tile2" />
... </head>
... <body>
... <h1>Welcome!</h1>
... <div id="panel1">Content goes here</div>
- ... <div id="layout-non-esi-tile">Layout tile 1 placeholder</div>
- ... <div id="layout-esi-tile">Layout tile 2 placeholder</div>
+ ... <div id="layout-non-esi-tile" class="tile-placeholder" data-tile-href="./@@test.tile2/tile1">Layout tile 1 placeholder</div>
+ ... <div id="layout-esi-tile" class="tile-placeholder" data-tile-href="./@@test.tile3/tile2">Layout tile 2 placeholder</div>
... </body>
... </html>
... """
@@ -131,13 +129,11 @@ directly.
... <head>
... <title>Page title</title>
... <link rel="layout" href="./@@test-layout"/>
- ... <link rel="tile" target="page-non-esi-tile" href="./@@test.tile2/tile3?foo=bar" />
- ... <link rel="tile" target="page-esi-tile" href="./@@test.tile3/tile4?foo=bar" />
... </head>
... <body>
... <div id="panel1">
- ... <div id="page-non-esi-tile">Page tile 3 placeholder</div>
- ... <div id="page-esi-tile">Page tile 4 placeholder</div>
+ ... <div id="page-non-esi-tile" class="tile-placeholder" data-tile-href="./@@test.tile2/tile3?foo=bar">Page tile 3 placeholder</div>
+ ... <div id="page-esi-tile" class="tile-placeholder" data-tile-href="./@@test.tile3/tile4?foo=bar">Page tile 4 placeholder</div>
... </div>
... </body>
... </html>
@@ -186,10 +182,10 @@ be rendered as normal.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<title>Page title</title>
- <meta name="tile-name" content="tile2" />
- <meta name="tile-name" content="tile1" />
- <meta name="tile-name" content="tile4" />
<meta name="tile-name" content="tile3" />
+ <meta name="tile-name" content="tile4" />
+ <meta name="tile-name" content="tile1" />
+ <meta name="tile-name" content="tile2" />
</head>
<body>
<h1>Welcome!</h1>
@@ -224,30 +220,30 @@ Tile-page rendering should work similarly:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
- <meta name="tile-name" content="tile2" />
- <meta name="tile-name" content="tile1" />
- <meta name="tile-name" content="tile4" />
<meta name="tile-name" content="tile3" />
+ <meta name="tile-name" content="tile4" />
+ <meta name="tile-name" content="tile1" />
+ <meta name="tile-name" content="tile2" />
</head>
<body>
- <div id="layout-esi-tile">
+ <div id="page-non-esi-tile">
<p>
- ESI tile with query string
+ Non-ESI tile with query string foo=bar
</p>
</div>
- <div id="layout-non-esi-tile">
+ <div id="page-esi-tile">
<p>
- Non-ESI tile with query string
+ ESI tile with query string foo=bar
</p>
</div>
- <div id="page-esi-tile">
+ <div id="layout-non-esi-tile">
<p>
- ESI tile with query string foo=bar
+ Non-ESI tile with query string
</p>
</div>
- <div id="page-non-esi-tile">
+ <div id="layout-esi-tile">
<p>
- Non-ESI tile with query string foo=bar
+ ESI tile with query string
</p>
</div>
</body>
@@ -289,8 +285,8 @@ tiles should be rendered as ESI links. See `plone.tiles`_ for more details.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<title>Page title</title>
- <meta name="tile-name" content="tile1" />
<meta name="tile-name" content="tile3" />
+ <meta name="tile-name" content="tile1" />
</head>
<body>
<h1>Welcome!</h1>
@@ -339,26 +335,26 @@ Tile-page rendering works similarly:
<html xmlns:esi="http://www.edge-delivery.org/esi/1.0" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
- <meta name="tile-name" content="tile1" />
<meta name="tile-name" content="tile3" />
+ <meta name="tile-name" content="tile1" />
</head>
<body>
- <div id="layout-esi-tile">
- <esi:include src="http://nohost/plone/@@test.tile3/tile2/@@esi-body?" />
- </div>
- <div id="layout-non-esi-tile">
+ <div id="page-non-esi-tile">
<p>
- Non-ESI tile with query string
+ Non-ESI tile with query string foo=bar
</p>
</div>
<div id="page-esi-tile">
<esi:include src="http://nohost/plone/@@test.tile3/tile4/@@esi-body?foo=bar" />
</div>
- <div id="page-non-esi-tile">
+ <div id="layout-non-esi-tile">
<p>
- Non-ESI tile with query string foo=bar
+ Non-ESI tile with query string
</p>
</div>
+ <div id="layout-esi-tile">
+ <esi:include src="http://nohost/plone/@@test.tile3/tile2/@@esi-body?" />
+ </div>
</body>
</html>
@@ -28,18 +28,19 @@ consists of the following steps:
The rest of the content page is discarded.
5. Resolve and obtain tiles. A tile is a placeholder element in the page
which will be replaced by the contents of a document referenced by a URL.
- Again, the tile is identified by a ``<link />`` element in the head of
- the rendered page.
+
+ A tile in the head of the page is identified by a ``<link />`` element
+ with ``rel="tile"`` and an ``href`` containing to the tile URL.
+
+ A tile in the body of the page is identified by a placeholder element with
+ the the CSS class ``tile-placeholder`` and an attribute ``data-tile-href``
+ containing the tile URL.
Note that at this point, panel merging has taken place, so if a panel in
the content page contains tiles, the associated ``<link >`` tags will be
carried over into the merged page. Also note that it is possible to have
tiles outside of panels - the two concepts are not directly related.
-
- The format of a tile link is: ``<link rel="tile" target="..."
- href="..." />``. The ``target`` attribute indicates the id of the
- placeholder element. The ``href`` indicates the URL of the tile.
-
+
The ``plone.tiles`` package provides a framework for writing tiles,
although in reality a tile can be any HTML page.
6. Place tiles into the page. The tile should resolve to a full HTML
@@ -96,9 +97,9 @@ content and layout pages could just as easily be created by views of content
objects, or even resources external to Zope/Plone.
First, we will create a resource representing the site layout and its panels.
-This includes some resources and other elements in the ``<head />``, ``<link
-/>`` tags which identify tile placeholders and panels, as well as content
-inside and outside panels. The tiles in this case are managed by
+This includes some resources and other elements in the ``<head />``,
+``<link />`` tags which identify tile placeholders and panels, as well as
+content inside and outside panels. The tiles in this case are managed by
``plone.tiles``, and are both of the same type.
>>> layoutHTML = """\
@@ -121,20 +122,18 @@ inside and outside panels. The tiles in this case are managed by
... <link rel="panel" rev="panel2" target="panel2" />
... <link rel="panel" rev="panel3" target="panel3" />
...
- ... <link rel="tile" target="layout-tile1" href="./@@test.tile1/tile1" />
- ... <link rel="tile" target="layout-tile2" href="./@@test.tile1/tile2" />
... <link rel="tile" href="./@@test.tile_nobody/tile_css" />
... </head>
... <body>
... <h1>Welcome!</h1>
... <div id="panel1">Layout panel 1</div>
... <div id="panel2">
... Layout panel 2
- ... <div id="layout-tile1">Layout tile 1 placeholder</div>
+ ... <div id="layout-tile1" class="tile-placeholder" data-tile-href="./@@test.tile1/tile1">Layout tile 1 placeholder</div>
... </div>
... <div id="panel3">
... Layout panel 3
- ... <div id="layout-tile2">Layout tile 2 placeholder</div>
+ ... <div id="layout-tile2" class="tile-placeholder" data-tile-href="./@@test.tile1/tile2">Layout tile 2 placeholder</div>
... </div>
... </body>
... </html>
@@ -180,20 +179,18 @@ that.
<link rel="panel" rev="panel1" target="panel1" />
<link rel="panel" rev="panel2" target="panel2" />
<link rel="panel" rev="panel3" target="panel3" />
- <link rel="tile" target="layout-tile1" href="./@@test.tile1/tile1" />
- <link rel="tile" target="layout-tile2" href="./@@test.tile1/tile2" />
<link rel="tile" href="./@@test.tile_nobody/tile_css" />
</head>
<body>
<h1>Welcome!</h1>
<div id="panel1">Layout panel 1</div>
<div id="panel2">
Layout panel 2
- <div id="layout-tile1">Layout tile 1 placeholder</div>
+ <div id="layout-tile1" class="tile-placeholder" data-tile-href="./@@test.tile1/tile1">Layout tile 1 placeholder</div>
</div>
<div id="panel3">
Layout panel 3
- <div id="layout-tile2">Layout tile 2 placeholder</div>
+ <div id="layout-tile2" class="tile-placeholder" data-tile-href="./@@test.tile1/tile2">Layout tile 2 placeholder</div>
</div>
</body>
</html>
@@ -225,24 +222,20 @@ the ``@@default-site-layout`` indirection view:
... <script type="text/javascript">alert('page');</script>
...
... <link rel="layout" href="./@@default-site-layout"/>
- ...
- ... <link rel="tile" target="page-tile2" href="./@@test.tile1/tile2?magicNumber:int=2" />
- ... <link rel="tile" target="page-tile3" href="./@@test.tile1/tile3" />
- ... <link rel="tile" target="page-tile4" href="./@@test.tile1/tile4" />
... </head>
... <body>
... <h1>Welcome!</h1>
... <div id="panel1">
... Page panel 1
- ... <div id="page-tile2">Page tile 2 placeholder</div>
+ ... <div id="page-tile2" class="tile-placeholder" data-tile-href="./@@test.tile1/tile2?magicNumber:int=2">Page tile 2 placeholder</div>
... </div>
... <div id="panel2">
... Page panel 2
- ... <div id="page-tile3">Page tile 3 placeholder</div>
+ ... <div id="page-tile3" class="tile-placeholder" data-tile-href="./@@test.tile1/tile3">Page tile 3 placeholder</div>
... </div>
... <div id="panel4">
... Page panel 4 (ignored)
- ... <div id="page-tile4">Page tile 4 placeholder</div>
+ ... <div id="page-tile4" class="tile-placeholder" data-tile-href="./@@test.tile1/tile4">Page tile 4 placeholder</div>
... </div>
... </body>
... </html>
@@ -365,8 +358,8 @@ working, it should perform its magic. We make sure that Zope is in
<script type="text/javascript">alert('page');</script>
<link rel="stylesheet" type="text/css" href="tiled.css" />
<meta name="tile-name" content="tile2" />
- <meta name="tile-name" content="tile2" />
<meta name="tile-name" content="tile3" />
+ <meta name="tile-name" content="tile2" />
</head>
<body>
<h1>Welcome!</h1>
@@ -442,29 +435,29 @@ We then try to access the same page again.
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<link rel="stylesheet" type="text/css" href="tiled.css" />
<meta name="tile-name" content="tile2" />
- <meta name="tile-name" content="tile2" />
<meta name="tile-name" content="tile3" />
+ <meta name="tile-name" content="tile2" />
</head>
<body>
- <div id="layout-tile2">
+ <div id="page-tile2">
<p>
This is a demo tile with id tile2
</p>
<p>
- Magic number: -1; Form: []; Query string:
+ Magic number: 2; Form: [('magicNumber', 2)]; Query string: magicNumber:int=2
</p>
</div>
- <div id="page-tile2">
+ <div id="page-tile3">
<p>
- This is a demo tile with id tile2
+ This is a demo tile with id tile3
</p>
<p>
- Magic number: 2; Form: [('magicNumber', 2)]; Query string: magicNumber:int=2
+ Magic number: -1; Form: []; Query string:
</p>
</div>
- <div id="page-tile3">
+ <div id="layout-tile2">
<p>
- This is a demo tile with id tile3
+ This is a demo tile with id tile2
</p>
<p>
Magic number: -1; Form: []; Query string:
@@ -17,20 +17,18 @@
<link rel="panel" rev="panel2" target="panel2" />
<link rel="panel" rev="panel3" target="panel3" />
- <link rel="tile" target="layout-tile1" href="./@@test.tile1/tile1" />
- <link rel="tile" target="layout-tile2" href="./@@test.tile1/tile2" />
<link rel="tile" href="./@@test.tile_nobody/tile_css" />
</head>
<body>
<h1>Welcome!</h1>
<div id="panel1">Layout panel 1</div>
<div id="panel2">
Layout panel 2
- <div id="layout-tile1">Layout tile 1 placeholder</div>
+ <div id="layout-tile1" class="tile-placeholder" data-tile-href="./@@test.tile1/tile1">Layout tile 1 placeholder</div>
</div>
<div id="panel3">
Layout panel 3
- <div id="layout-tile2">Layout tile 2 placeholder</div>
+ <div id="layout-tile2" class="tile-placeholder" data-tile-href="./@@test.tile1/tile2">Layout tile 2 placeholder</div>
</div>
</body>
</html>
@@ -17,20 +17,18 @@
<link rel="panel" rev="panel2" target="panel2" />
<link rel="panel" rev="panel3" target="panel3" />
- <link rel="tile" target="layout-tile1" href="./@@test.tile1/tile1" />
- <link rel="tile" target="layout-tile2" href="./@@test.tile1/tile2" />
<link rel="tile" href="./@@test.tile_nobody/tile_css" />
</head>
<body>
<h1>Welcome to layout 2!</h1>
<div id="panel1">Layout panel 1</div>
<div id="panel2">
Layout panel 2
- <div id="layout-tile1">Layout tile 1 placeholder</div>
+ <div id="layout-tile1" class="tile-placeholder" data-tile-href="./@@test.tile1/tile1">Layout tile 1 placeholder</div>
</div>
<div id="panel3">
Layout panel 3
- <div id="layout-tile2">Layout tile 2 placeholder</div>
+ <div id="layout-tile2" class="tile-placeholder" data-tile-href="./@@test.tile1/tile2">Layout tile 2 placeholder</div>
</div>
</body>
</html>
Oops, something went wrong.

0 comments on commit b57581a

Please sign in to comment.