Author: steveh
Date: Thu Mar 24 15:31:41 2005
New Revision: 158967
URL: http://svn.apache.org/viewcvs?view=rev&rev=158967
Log:
(1) Latest data grid docs.
(2) Adding link to controls containment doc.
Added:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid4.gif
(with props)
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid5.gif
(with props)
Modified:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_databinding.xml
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/site.xml
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid3.gif
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/skinconf.xml
Modified:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_databinding.xml
URL:
http://svn.apache.org/viewcvs/incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_databinding.xml?view=diff&r1=158966&r2=158967
==============================================================================
---
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_databinding.xml
(original)
+++
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_databinding.xml
Thu Mar 24 15:31:41 2005
@@ -217,6 +217,41 @@
<title>
<code>container</code>
</title>
+ <p>The <code>container</code> refers to the
data set passed into a
+ <netui-data> or
<netui-data:repeater> tag. The <code>container</code>
+ allows access to the individual rows
and cells of the data set.</p>
+ <p>The <code>container</code> context has the
following properties.</p>
+ <table>
+ <tr>
+ <td><strong>Property
Name</strong></td>
+
<td><strong>Description</strong></td>
+ </tr>
+ <tr>
+
<td><code>container.item</code></td>
+ <td>Refers to the current row
of the data set.</td>
+ </tr>
+ <tr>
+
<td><code>container.item.[field_name]</code></td>
+ <td>Refers to an individual
+ field of the current row.</td>
+ </tr>
+ <tr>
+
<td><code>container.index</code></td>
+ <td>Refers to the integer index
of the current
+ row.</td>
+ </tr>
+ </table>
+ <p>The following example shows how to access the name,
type breed, and weight properties
+ in a data set passed to a data grid.</p>
+ <p>The context <code>container</code> refers to
the data set <code>pageInput.petList</code>.</p>
+<source><netui-data:dataGrid
dataSource="<strong>pageInput.petList</strong>" name="petGrid">
+ <netui-data:rows>
+ <netui-data:spanCell
value="${<strong>container.item.name</strong>}"/>
+ <netui-data:spanCell
value="${<strong>container.item.type</strong>}"/>
+ <netui-data:spanCell
value="${<strong>container.item.breed</strong>}"/>
+ <netui-data:spanCell
value="${<strong>container.item.weight</strong>}""/>
+ </netui-data:rows>
+</netui-data:dataGrid></source>
</section>
<section id="pageFlow">
<title>
@@ -315,6 +350,12 @@
<title>
<code>pageInput</code>
</title>
+ <p>The <code>pageInput</code> context is filled
with data by an action output
+ in the Controller class.</p>
+ <source>Forward f = new Forward("next_page");
+f.addActionOutput("message", sMessage);</source>
+ <p>The data can be retrieved on the JSP page as
follows:</p>
+ <source><netui:span
value="${pageInput.message}"/></source>
</section>
<section id="request">
<title>
Modified:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml
URL:
http://svn.apache.org/viewcvs/incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml?view=diff&r1=158966&r2=158967
==============================================================================
---
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml
(original)
+++
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml
Thu Mar 24 15:31:41 2005
@@ -42,15 +42,23 @@
tab library to handle data sets.</p>
</section>
<section id="setup_basic_grid"><title>Setting Up a Basic
Grid</title>
- <p>This section takes you through a step by step
process of setting up a basic grid
+ <p>This section takes you
through a step by step process of setting up a basic grid
for 'tabular' data, data such as a ResultSet,
RowSet, or any kind of data
- that can easily be set out like table with rows
and columns.</p>
- <p>(1) The first thing needed to set up a grid, is a
data source of some tabular data.
- Below we use the jpetstoreWeb's data as the
source
- of tabluar data. Begin by running through the
set up instructions for the <a href="site:jpetstore">jpetstoreWeb</a>
- Sample. In the following steps will add a data
grid to the jpetstoreWeb.
+ that can easily be set out like table with rows
and columns.
</p>
- <p>(2) Next edit the <code>viewCategory()</code> method
of the
+ <section id="setup_petstore"><title>Setup the Pestore
Sample</title>
+ <p>To set up a grid you first need a data
source of some tabular data.
+ Below we use the Petstore sample as the source
+ of tabluar data. Begin by running through the
set up instructions for the
+ <a href="site:jpetstore">Petstore</a>
+ Sample.
+ </p>
+ </section>
+ <section id="setup_datasource"><title>Connect to a
Tabular Data Source</title>
+ <p>Now that the Petstore sample is up and
running, we are ready to use
+ its data sources.</p>
+ <p><strong>Edit the Controller class</strong></p>
+ <p>Edit the <code>viewCategory()</code> method
of the
file
<code>petstoreWeb/shop/Controller.jpf</code> as
follows. Code to edit is shown in bold.</p>
<p><strong><code>petstoreWeb/shop/Controller.jpf</code></strong></p>
@@ -72,7 +80,8 @@
}
</source>
- <p>(3) Add a page called
<code>categoryGrid.jsp</code> to the folder <code>petstoreWeb\shop\</code>.
+ <p><strong>Add a JSP page</strong></p>
+ <p>Add a page called
<code>categoryGrid.jsp</code> to the folder <code>petstoreWeb\shop\</code>.
Edit the file so it appears as
follows.</p>
<p><strong><code>petstoreWeb/shop/categoryGrid.jsp</code></strong></p>
<source><%@ page language="java"
contentType="text/html;charset=UTF-8"%>
@@ -85,14 +94,16 @@
tabular data is available through the
databinding context
<code>pageInput.products</code>. In the next step you will
point a data grid at this
databinding context. </p>
- <p>(4) Before proceeding, recompile
jpetstoreWeb and visit the following URL.</p>
-
<source>http://localhost:8080/petstoreWeb/shop/rootSharedFlow.globalViewCategory.do?catId=FISH</source>
- <p>You should see a blank page.</p>
+ <p><strong>Recompile Petstore</strong></p>
+ <p>Before proceeding, recompile
Petstore.</p>
<p>The recompile step is necessary
because you have modified the
Controller.jpf file. In the steps below,
where you only modify the JSP page
<code>categoryGrid.jsp</code>,
- you will not need to recompile the
jpetstoreWeb app.</p>
- <p>(4) Edit <code>categoryGrid.jsp</code> so it
appears as follows.</p>
+ you will not need to recompile the
Petstore app to view your changes.</p>
+
+ </section>
+ <section id="basic_grid"><title>Render a Basic Data
Grid</title>
+ <p>Edit <code>categoryGrid.jsp</code>
so it appears as follows.</p>
<p><strong><code>petstoreWeb/shop/Controller.jpf</code></strong></p>
<source><%@ page language="java"
contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0";
prefix="netui-data"%>
@@ -103,30 +114,73 @@
<strong><netui-data:dataGrid name="productsGrid"
dataSource="pageInput.products">
<netui-data:rows>
<netui-data:spanCell value="${container.item.productId}" />
- <netui-data:spanCell value="${container.item.name}" />
- <netui-data:spanCell value="${container.item.description}"/>
+ <netui-data:spanCell value="${container.item.name}" />
+ <netui-data:spanCell value="${container.item.description}"/>
</netui-data:rows>
</netui-data:dataGrid></strong>
</source>
<p>When you visit the URL</p>
-<source>http://localhost:8080/petstoreWeb/shop/rootSharedFlow.globalViewCategory.do?catId=FISH</source>
+<source>http://localhost:8080/petstoreWeb/shop/viewCategory.do?catId=FISH</source>
<p>you should see the following page</p>
<p><img alt="categoryGrid1" src="images/categoryGrid1.gif"/></p>
-<p>Notice that the tabular data is passed to the data grid
(<netui-data:dataGrid>)
- through the <code>dataSource</code> attribute:</p>
-<source><netui-data:dataGrid name="productsGrid"
dataSource="pageInput.products"></source>
-<p>The tabular data is rendered as an HTML table, by the remaining tags
+ <p>The tabular data is rendered as an HTML table, by the remaining tags
(<netui-data:rows> and <netui-data:spanCell). <!--[todo: more
description here]--></p>
-<p> <strong>(5) Adding a Header</strong></p>
+<p>Here is the renderd HTML table.</p>
+<source>Page 1 of 1
+<table class="datagrid">
+ <tr class="datagrid-even">
+ <td class="datagrid"><span>FI-FW-02</span></td>
+ <td class="datagrid"><span>Goldfish</span></td>
+ <td class="datagrid"><span>Fresh Water fish from
China</span></td>
+ </tr>
+ <tr class="datagrid-odd">
+ <td class="datagrid"><span>FI-SW-02</span></td>
+ <td class="datagrid"><span>Tiger Shark</span></td>
+ <td class="datagrid"><span>Salt Water fish from
Australia</span></td>
+ </tr>
+ <tr class="datagrid-even">
+ <td class="datagrid"><span>FI-FW-01</span></td>
+ <td class="datagrid"><span>Koi</span></td>
+ <td class="datagrid"><span>Fresh Water fish from
Japan</span></td>
+ </tr>
+ <tr class="datagrid-odd">
+ <td class="datagrid"><span>FI-SW-01</span></td>
+ <td class="datagrid"><span>Angelfish</span></td>
+ <td class="datagrid"><span>Salt Water fish from
Australia</span></td>
+ </tr>
+</table></source>
+<p>Notice that the tabular data is passed to the data grid
+ through the <code>dataSource</code> attribute:</p>
+<source><netui-data:dataGrid name="productsGrid"
<strong>dataSource="pageInput.products"</strong>></source>
+<p>When a data set is passed into a <netui-data:dataGrid> tag, that data
becomes accessible through
+ the databinding contexts <strong><code>container</code></strong>,
+ <strong><code>item</code></strong>, and
<strong><code>index</code></strong>.
+ </p>
+ <ul>
+ <li><strong><code>container</code></strong> refers to the data
set passed into the data grid.</li>
+ <li><strong><code>container.item</code></strong> refers to the
current row
+ of the data set. <code>container.item</code> refers to each row
+ as the data grid iterates through the set.</li>
+ <li><strong><code>container.item.[field_name]</code></strong>
refers to an individual
+ field of the current row.</li>
+ <li><strong><code>container.index</code></strong> refers to the
integer index of the current
+ row.</li>
+ </ul>
+
+ <p>The <netui-data:rows> tag controls the rendering of the <tr>
tags. Through the
+ <netui-data:rows> tag, you can control the attributes of the
rendered <tr> tags, attribute
+ such as <code>align</code>, <code>valign</code>, and
<code>style</code>.</p>
+
+<p>In a similar way, the <netui-data:spanCell> tag controls the rendering
of the <td> tags.</p>
+
+ </section>
+ <section id="header"><title>Adding a Header</title>
<p>Edit <code>categoryGrid.jsp</code> so it appears as follows.</p>
<source><%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0";
prefix="netui-data"%>
<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0";
prefix="netui"%>
-<netui-data:declarePageInput
- name="products"
- type="org.apache.beehive.samples.petstore.model.Product[]"
- required="false"/>
+<netui-data:declarePageInput name="products"
type="org.apache.beehive.samples.petstore.model.Product[]" required="false"/>
<netui-data:dataGrid name="productsGrid" dataSource="pageInput.products">
<strong><netui-data:header>
@@ -142,19 +196,73 @@
</netui-data:dataGrid></source>
<p>Refresh the browser. You should see the following page.</p>
<p><img alt="categoryGrid2" src="images/categoryGrid2.gif"></img></p>
-<p><strong>(6) Configure the Pager</strong></p>
-<p>Edit <code>categoryGrid.jsp</code> so it appears as follows.</p>
+<p>The <netui-data:headerCell> renders the following HTML <tr><th>
row.</p>
+<source><tr class="datagrid-header">
+ <th class="datagrid">PetID</th>
+ <th class="datagrid">Name</th>
+ <th class="datagrid">Description</th>
+</tr></source>
+ </section>
+ <section id="CSS"><title>Controlling the CSS
Style</title>
+<p>Notice the various <code>class</code> attributes in the rendered HTML.</p>
+<ul><li><code>class="datagrid"</code></li>
+ <li><code>class="datagrid-header"</code></li>
+ <li><code>class="datagrid-even"</code></li>
+ <li><code>class="datagrid-odd"</code></li></ul>
+ <p>You control the data grid's style by changing the <em>prefix</em>
rendered in the
+ <code>class</code> attributes. If no prefix value is explicitly
specified,
+ the default prefix value is <em>datagrid</em>.</p>
+<p>To put this into practice, first create the following CSS file.</p>
+<p><strong>jpetstoreWeb/resource/css/style.css</strong></p>
+<source>/* Table row style referenced in generated various generated pages */
+.gridStyle
+{
+color: #111111;
+font-size: 14px;
+text-align: left;
+vertical-align: middle;
+padding: 5px 5px 5px 5px;
+}
+.gridStyle-header
+{
+background-color: #aaddaa;
+color: #FFF;
+vertical-align: baseline;
+line-height: 18px;
+}
+.gridStyle-even
+{
+background-color: #FFFFFF;
+color: #111111;
+font-size: 14px;
+text-align: left;
+border-color: #999999;
+border-style: solid;
+border-width: 1px;
+padding-left: 12px;
+}
+.gridStyle-odd
+{
+background-color: #dddddd;
+color: #111111;
+font-size: 14px;
+text-align: left;
+border-color: #999999;
+border-style: solid;
+border-width: 1px;
+padding-left: 12px;
+}</source>
+<p>To reference this CSS file, edit <code>categoryGrid.jsp</code> as shown
below.</p>
+<p><strong>petstoreWeb/shop/categoryGrid.jsp</strong></p>
<source><%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0";
prefix="netui-data"%>
<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0";
prefix="netui"%>
-<netui-data:declarePageInput
- name="products"
- type="org.apache.beehive.samples.petstore.model.Product[]"
- required="false"/>
+<strong><link
href="<%=request.getContextPath()%>/resources/css/style.css" type="text/css"
rel="stylesheet"/></strong>
-<netui-data:dataGrid name="productsGrid" dataSource="pageInput.products">
- <strong><netui-data:configurePager pageSize="3" pagerFormat="prevNext"
pageAction="viewCategory.do"/></strong>
+<netui-data:declarePageInput name="products"
type="org.apache.beehive.samples.petstore.model.Product[]" required="false"/>
+
+<netui-data:dataGrid name="productsGrid" dataSource="pageInput.products"
<strong>styleClassPrefix="gridStyle"</strong>>
<netui-data:header>
<netui-data:headerCell headerText="PetID"/>
<netui-data:headerCell headerText="Name"/>
@@ -166,13 +274,75 @@
<netui-data:spanCell value="${container.item.description}"/>
</netui-data:rows>
</netui-data:dataGrid></source>
-<p>Refresh the browser. You will see the following page.</p>
+<p>The resulting HTML page is shown below.</p>
<p><img alt="categoryGrid3" src="images/categoryGrid3.gif"/></p>
</section>
- <section id="pager">
- <title>The <netui-data:pager> Tag</title>
- <p>[todo]</p>
- </section>
+ <section id="config_pager">
+ <title>Configuring the Pager</title>
+ <p>The "pager" controls how many rows are
included on a single page of data.</p>
+ <p>The pager can be configured to appear above
and/or below the data grid.</p>
+
+ <p>To add a pager, edit
<code>categoryGrid.jsp</code> so it appears as
+ follows.</p>
+ <source><%@ page language="java"
contentType="text/html;charset=UTF-8"%>
+<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0";
prefix="netui-data"%>
+<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0";
prefix="netui"%>
+<link href="<%=request.getContextPath()%>/resources/css/style.css"
type="text/css" rel="stylesheet"/>
+
+<netui-data:declarePageInput name="products"
type="org.apache.beehive.samples.petstore.model.Product[]" required="false"/>
+
+<netui-data:dataGrid name="productsGrid" dataSource="pageInput.products"
styleClassPrefix="gridStyle">
+ <strong><netui-data:configurePager pageSize="3" pagerFormat="prevNext"
pageAction="viewCategory.do"/></strong>
+ <netui-data:header>
+ <netui-data:headerCell headerText="PetID"/>
+ <netui-data:headerCell headerText="Name"/>
+ <netui-data:headerCell headerText="Description"/>
+ </netui-data:header>
+ <netui-data:rows>
+ <netui-data:spanCell value="${container.item.productId}" />
+ <netui-data:spanCell value="${container.item.name}" />
+ <netui-data:spanCell value="${container.item.description}"/>
+ </netui-data:rows>
+</netui-data:dataGrid></source>
+ <p>Refresh the browser. You will see the
following page.</p>
+ <p>
+ <img alt="categoryGrid4"
src="images/categoryGrid4.gif"/>
+ </p>
+
+ </section>
+ <section id="link_columns"><title>Adding Linking Columns</title>
+ <p>Linking columns allow you to link to details pages
for individual
+ items in the data
+ set.</p>
+ <p>The <netui-data:anchorCell tag adds a linking
column to the
+ data grid.</p>
+ <p>The child <parameter> tag adds the string
<code>productId=[some_value]</code>
+ to the URL.</p>
+ <source><%@ page language="java"
contentType="text/html;charset=UTF-8"%>
+<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0";
prefix="netui-data"%>
+<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0";
prefix="netui"%>
+<link href="<%=request.getContextPath()%>/resources/css/style.css"
type="text/css" rel="stylesheet"/>
+
+<netui-data:declarePageInput name="products"
type="org.apache.beehive.samples.petstore.model.Product[]" required="false"/>
+
+<netui-data:dataGrid name="productsGrid" dataSource="pageInput.products"
styleClassPrefix="gridStyle">
+ <netui-data:configurePager pageSize="3" pagerFormat="prevNext"
pageAction="viewCategory.do"/>
+ <netui-data:header>
+ <netui-data:headerCell headerText="PetID"/>
+ <netui-data:headerCell headerText="Name"/>
+ <netui-data:headerCell headerText="Description"/>
+ </netui-data:header>
+ <netui-data:rows>
+ <strong><netui-data:anchorCell action="viewProduct"
value="${container.item.productId}">
+ <netui:parameter name="productId"
value="${container.item.productId}"/>
+ </netui-data:anchorCell></strong>
+ <netui-data:spanCell value="${container.item.name}" />
+ <netui-data:spanCell value="${container.item.description}"/>
+ </netui-data:rows>
+</netui-data:dataGrid></source>
+<p>Notice that the PetId column now appears as linking text. </p>
+<p><img alt="categoryGrid5" src="images/categoryGrid5.gif"/></p>
+ </section>
<section id="filtering">
<title>Filtering a Data Grid</title>
<p>[todo]</p>
@@ -214,6 +384,8 @@
<li>descending > no sort</li>
</ul>-->
</section>
+
+ </section>
<!-- <section id="sample_code">
<title>Sample Code</title>
Modified:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/site.xml
URL:
http://svn.apache.org/viewcvs/incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/site.xml?view=diff&r1=158966&r2=158967
==============================================================================
---
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/site.xml
(original)
+++
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/content/xdocs/site.xml
Thu Mar 24 15:31:41 2005
@@ -23,12 +23,13 @@
<pageflow_datagrid label="Using Data Grids"
href="pageflow/pageflow_datagrid.html"/>
<pageflow_sharedFlow label="Shared Flow"
href="pageflow/sharedFlow.html"/>
<pageflow_popups label="Popup Windows"
href="pageflow/popupWindows.html"/>
- <pageflow_programming label="Page Flow Programming"
href="pageflow/guide.html"/>
+ <!--<pageflow_programming label="Page Flow Programming"
href="pageflow/guide.html"/>-->
</pageflow>
<controls label="Controls">
<tutorial_control label="Tutorial"
href="controls/tutorial_controls.html"/>
<control_overview label="Controls Overview"
href="controls/controlsOverview.html"/>
<control_prog label="Control Programming"
href="controls/controlsProgramming.html"/>
+ <control_contain label="Controls Containment"
href="controls/controlsContainment.html"/>
</controls>
<wsm label="Web Services">
<tutorial_wsm label="Tutorial" href="wsm/tutorial_wsm.html"/>
Modified:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid3.gif
URL:
http://svn.apache.org/viewcvs/incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid3.gif?view=diff&r1=158966&r2=158967
==============================================================================
Binary files - no diff available.
Added:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid4.gif
URL:
http://svn.apache.org/viewcvs/incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid4.gif?view=auto&rev=158967
==============================================================================
Binary file - no diff available.
Propchange:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid4.gif
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid5.gif
URL:
http://svn.apache.org/viewcvs/incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid5.gif?view=auto&rev=158967
==============================================================================
Binary file - no diff available.
Propchange:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/resources/images/categoryGrid5.gif
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Modified:
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/skinconf.xml
URL:
http://svn.apache.org/viewcvs/incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/skinconf.xml?view=diff&r1=158966&r2=158967
==============================================================================
---
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/skinconf.xml
(original)
+++
incubator/beehive/branches/v1/beta/docs/forrest/src/documentation/skinconf.xml
Thu Mar 24 15:31:41 2005
@@ -147,6 +147,9 @@
font-weight: bold;
font-size: 99%;
}
+ p.filename {
+ margin-left: 2em;
+ }
</extra-css>
<colors>
<!-- These values are used for the generated CSS files. -->
