You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@lenya.apache.org by an...@apache.org on 2007/04/03 16:24:46 UTC
svn commit: r525166 - in /lenya/docu/src/documentation/content/xdocs:
docs/modules/svg/ docs/modules/svg/roundedcorners.xml
images/live/svgmodule/ images/live/svgmodule/roundedcorners.png site.xml
Author: andreas
Date: Tue Apr 3 07:24:45 2007
New Revision: 525166
URL: http://svn.apache.org/viewvc?view=rev&rev=525166
Log:
Added docs how to create rounded corners with SVG module
Added:
lenya/docu/src/documentation/content/xdocs/docs/modules/svg/
lenya/docu/src/documentation/content/xdocs/docs/modules/svg/roundedcorners.xml
lenya/docu/src/documentation/content/xdocs/images/live/svgmodule/
lenya/docu/src/documentation/content/xdocs/images/live/svgmodule/roundedcorners.png (with props)
Modified:
lenya/docu/src/documentation/content/xdocs/site.xml
Added: lenya/docu/src/documentation/content/xdocs/docs/modules/svg/roundedcorners.xml
URL: http://svn.apache.org/viewvc/lenya/docu/src/documentation/content/xdocs/docs/modules/svg/roundedcorners.xml?view=auto&rev=525166
==============================================================================
--- lenya/docu/src/documentation/content/xdocs/docs/modules/svg/roundedcorners.xml (added)
+++ lenya/docu/src/documentation/content/xdocs/docs/modules/svg/roundedcorners.xml Tue Apr 3 07:24:45 2007
@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Copyright 1999-2006 The Apache Software Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<!-- $Id: index.xml 55543 2004-10-26 00:14:59Z thorsten $ -->
+
+<!DOCTYPE document PUBLIC "-//APACHE//DTD Documentation V2.0//EN" "http://forrest.apache.org/dtd/document-v20.dtd">
+
+<document>
+ <header>
+ <title>SVG Module: Rounded Corners</title>
+ </header>
+ <body>
+
+ <p> In this document we show an example how to use the SVG module to create rounded corners in a
+ convenient way. </p>
+ <p> The following screenshot shows a typical box with rounded corners: </p>
+ <figure src="site:modules-svg-roundedcorners-screenshot.img" alt="Rounded corners screenshot"/>
+
+ <p>
+ We want to allow dynamic scaling of the box in all directions. That's why we have to use
+ four separate images for the rounded corners. The images shall be referenced from a CSS.
+ </p>
+
+ <section>
+ <title>HTML</title>
+ <p>
+ The HTML of this box looks like this:
+ </p>
+<source xml:space="preserve"><![CDATA[<div id="news">
+ <div id="newsOuter">
+ <div id="newsInner">
+ <div class="rsslink">
+ <a href="/news.rss" type="application/rss+xml">RSS 2.0</a>
+ </div>
+ <h1>News</h1>
+ <h2>
+ <div class="newsDate">Mar 22, 2007 6:03:37 PM</div>
+ <a style="text-decoration: none" href="/news/lenyaRCvote.html"
+ >Lenya 1.4 RC1 in Voting Process</a>
+ </h2>
+ <p>Since Tuesday the vote for the Apache Lenya 1.4 release candidate 1 is open.</p>
+ </div>
+ </div>
+</div>]]></source>
+ <p>
+ We use four HTML containers to hold our corner images. Each left corner image is
+ quite wide (1500 pixels) to allow very large boxes. The right corner version is only
+ as wide as the radius of the corner. That's why the right corner image has to be
+ placed on top of the left corner image, i.e. the right corner container has to
+ be inside the left corner container.
+ </p>
+ <ul>
+ <li>
+ The <code><![CDATA[<div id="news"/>]]></code> will hold the top left corner.
+ </li>
+ <li>
+ The <code><![CDATA[<h1/>]]></code> will hold the top right corner.
+ </li>
+ <li>
+ The <code><![CDATA[<div id="newsOuter"/>]]></code> will hold the bottom left corner.
+ </li>
+ <li>
+ The <code><![CDATA[<div id="newsInner"/>]]></code> will hold the bottom right corner.
+ </li>
+ </ul>
+ <p>
+ To fill the space between the upper and lower corners, we will add a background
+ color and a border to our <code><![CDATA[<h2/>]]></code> and <code><![CDATA[<p/>]]></code>
+ elements which are located inside the box.
+ </p>
+ </section>
+
+ <section>
+ <title>Calling the SVG Module</title>
+
+ <p>
+ This is the anatomy of a call to a rounded corner image:
+ </p>
+ <source xml:space="preserve">/modules/svg/tab-{location}-{radius}-{background}-{border}.png</source>
+ <p>
+ An example:
+ </p>
+ <source xml:space="preserve">/modules/svg/tab-bottomLeft-7-FFF6E5-FFD580.png</source>
+ <ul>
+ <li><code>/modules/svg/</code> calls the SVG module.</li>
+ <li><code>-tab-</code> denotes that we want to generate a rounded corner image (which is
+ typically used for tabs).</li>
+ <li><code>-bottomLeft-</code> means that we want to generate the bottom left corner.</li>
+ <li><code>-7-</code> means that we want a corner radius of 7 pixels.</li>
+ <li><code>-FFF6E5-</code> is the background color.</li>
+ <li><code>-FFD580</code> is the border color. You can of course use the same color values
+ for background and border.</li>
+ </ul>
+ </section>
+
+ <section>
+ <title>CSS</title>
+ <p>
+ This is the important part of the CSS used for the box layout (fonts, colors etc.
+ have been omitted):
+ </p>
+ <source xml:space="preserve"><![CDATA[div.newsDate {
+ float: right;
+}
+
+
+div#news {
+ width: 180px;
+ margin: 0 0 0 20px;
+ background: url('/modules/svg/tab-topLeft-7-FFEECC-FFD580.png') left top no-repeat;
+}
+
+div#news h1 {
+ margin: 0;
+ padding: 7px 10px;
+ background: url('/modules/svg/tab-topRight-7-FFEECC-FFD580.png') right top no-repeat;
+}
+
+div#news div.newsDate {
+ padding-top: 10px;
+}
+
+div#newsOuter {
+ background: url('/modules/svg/tab-bottomLeft-7-FFF6E5-FFD580.png') left bottom no-repeat;
+}
+
+div#newsInner {
+ background: url('/modules/svg/tab-bottomRight-7-FFF6E5-FFD580.png') right bottom no-repeat;
+ padding-bottom: 10px;
+}
+
+div#news h2 {
+ padding: 0px 5px 0 5px;
+}
+
+div#news p {
+ padding-bottom: 10px;
+}
+
+div#news p, div#news h2 {
+ margin: 0;
+ padding-left: 10px;
+ padding-right: 10px;
+ border-left: 1px solid #FFD580;
+ border-right: 1px solid #FFD580;
+ background-color: #FFF6E5;
+}
+
+div.rsslink {
+ float: right;
+ padding: 7px 10px;
+}]]></source>
+ </section>
+ </body>
+</document>
Added: lenya/docu/src/documentation/content/xdocs/images/live/svgmodule/roundedcorners.png
URL: http://svn.apache.org/viewvc/lenya/docu/src/documentation/content/xdocs/images/live/svgmodule/roundedcorners.png?view=auto&rev=525166
==============================================================================
Binary file - no diff available.
Propchange: lenya/docu/src/documentation/content/xdocs/images/live/svgmodule/roundedcorners.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Modified: lenya/docu/src/documentation/content/xdocs/site.xml
URL: http://svn.apache.org/viewvc/lenya/docu/src/documentation/content/xdocs/site.xml?view=diff&rev=525166&r1=525165&r2=525166
==============================================================================
--- lenya/docu/src/documentation/content/xdocs/site.xml (original)
+++ lenya/docu/src/documentation/content/xdocs/site.xml Tue Apr 3 07:24:45 2007
@@ -214,6 +214,9 @@
</webdav>
<news_module href="news.html" label="News"/>
<notification href="notification.html" label="Notification"/>
+ <svg_module href="svg/" label="SVG">
+ <svg_roundedcorners href="roundedcorners.html" label="Rounded Corners"/>
+ </svg_module>
</modules>
<!--+
| Version 1.2 tab
@@ -397,6 +400,7 @@
<navigation.img href="navigation.png"/>
<usecase-framework-architecture.img href="usecase-framework-architecture.png"/>
<repositoryWorkspaces.img href="repositoryWorkspaces.png"/>
+ <modules-svg-roundedcorners-screenshot.img href="svgmodule/roundedcorners.png"/>
</live>
</images>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@lenya.apache.org
For additional commands, e-mail: commits-help@lenya.apache.org