You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@clerezza.apache.org by re...@apache.org on 2014/08/01 19:18:50 UTC
[35/42] Revert "CLEREZZA-926: removed modules not in release"
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/LICENSE
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/LICENSE b/platform.style.classic.webguiexamples/LICENSE
new file mode 100644
index 0000000..261eeb9
--- /dev/null
+++ b/platform.style.classic.webguiexamples/LICENSE
@@ -0,0 +1,201 @@
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ 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.
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/pom.xml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/pom.xml b/platform.style.classic.webguiexamples/pom.xml
new file mode 100644
index 0000000..7e2f0e8
--- /dev/null
+++ b/platform.style.classic.webguiexamples/pom.xml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+ <modelVersion>4.0.0</modelVersion>
+ <parent>
+ <groupId>org.apache.clerezza</groupId>
+ <artifactId>clerezza</artifactId>
+ <version>0.5-SNAPSHOT</version>
+ <relativePath>../parent</relativePath>
+ </parent>
+ <groupId>org.apache.clerezza</groupId>
+ <artifactId>platform.style.classic.webguiexamples</artifactId>
+ <packaging>bundle</packaging>
+ <version>0.3-SNAPSHOT</version>
+ <name>Clerezza - Web GUI Examples</name>
+ <description>GUI Examples for building wep apps on clerezza platform</description>
+ <dependencies>
+ <dependency>
+ <groupId>junit</groupId>
+ <artifactId>junit</artifactId>
+ <scope>test</scope>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.clerezza</groupId>
+ <artifactId>platform.typerendering.scalaserverpages</artifactId>
+ <version>0.4-SNAPSHOT</version>
+ </dependency>
+ <dependency>
+ <groupId>javax.ws.rs</groupId>
+ <artifactId>jsr311-api</artifactId>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.clerezza</groupId>
+ <artifactId>web.fileserver</artifactId>
+ <version>0.10-SNAPSHOT</version>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.felix</groupId>
+ <artifactId>org.apache.felix.scr.annotations</artifactId>
+ </dependency>
+ <dependency>
+ <groupId>org.osgi</groupId>
+ <artifactId>org.osgi.compendium</artifactId>
+ </dependency>
+ </dependencies>
+ <build>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.felix</groupId>
+ <artifactId>maven-bundle-plugin</artifactId>
+ <extensions>true</extensions>
+ <configuration>
+ <instructions>
+ <Require-Bundle>org.apache.clerezza.platform.style.classic, org.apache.clerezza.web.resources.jquery</Require-Bundle>
+ </instructions>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+</project>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml
new file mode 100644
index 0000000..a740c5d
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml
@@ -0,0 +1,99 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>alert message - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/>
+ <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" />
+ <script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
+ <script src="/yui/element/element-min.js" type="text/javascript"/>
+ <script src="/yui/container/container-min.js" type="text/javascript"/>
+ <script src="/scripts/alert-message.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function showAlert() {
+
+ }
+ </script>
+</head>
+
+<body>
+
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+ <div id="demo">
+ <h3>Description</h3>
+
+
+ <h3>Alert</h3>
+
+ <div>
+ <br/>
+ <br/>
+ <div style="display: none">
+ <div id="myOverlayBody">body</div>
+ </div>
+ <div>
+ <a href="#" onclick="AlertMessage.show(function(){alert('done');},
+ 'This is a test alert', 'Test Alert', 'Yes', 'No')">click here to show alert.</a> <br/>
+ </div>
+ <br/>
+ <br/>
+
+
+ The following css and scripts have to be included:
+ <pre>
+<link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/>
+<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" />
+<script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
+<script src="/yui/element/element-min.js" type="text/javascript"/>
+<script src="/yui/container/container-min.js" type="text/javascript"/>
+<script src="/scripts/alert-message.js" type="text/javascript"/>
+ </pre>
+ <br/>
+ <br/>
+ e.g.
+ <pre>
+...
+ <div>
+ <a href="#" onclick="AlertMessage.show(function(){alert('done');},
+ 'This is a test alert', 'Test Alert', 'Yes', 'No')">click here to add sho alert </a> <br/>
+ </div>
+...
+ </pre>
+ </div>
+
+ </div>
+</div>
+<!-- // content -->
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml
new file mode 100644
index 0000000..ae9e87a
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml
@@ -0,0 +1,201 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>buttons - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+
+</head>
+
+<body>
+
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+ <div id="demo">
+ <h3>Description</h3>
+
+
+ <h3>Available Buttons</h3>
+
+ <div>
+ <strong>Buttons</strong> are <a> with the class <strong>tx-button</strong>. Furthermore there are 4 different types of buttons :
+ <br/>
+ <br/>
+ remove actions have the additional class: <strong>tx-button-remove</strong><br/>
+ modifying or editing buttons have the additional class: <strong>tx-button-modify</strong><br/>
+ create actions have the additional class: <strong>tx-button-create</strong><br/>
+ create actions have the additional class: <strong>tx-button-generic</strong><br/>
+ <br/>
+
+ <ol>
+ <li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove">Remove</a></li>
+ <li><a href="#" title="tx-button-create" class="tx-button tx-button-create">Create</a></li>
+ <li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify">Modify</a></li>
+ <li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic">Generic</a></li>
+ </ol>
+ <br/>
+ <br/>
+ <br/>
+ e.g.
+ <pre><a class="tx-button tx-button-remove" href="#" >remove</a></pre>
+ <br/>Buttons have 2 visual states: inactive and active. Add the class <strong>tx-inactive</strong> to make a button visually inactive.
+ <br/>
+ <br/>
+
+ <ol>
+ <li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove tx-inactive">Remove</a></li>
+ <li><a href="#" title="tx-button-create" class="tx-button tx-button-create tx-inactive">Create</a></li>
+ <li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify tx-inactive">Modify</a></li>
+ <li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic tx-inactive">Generic</a></li>
+ </ol>
+ <br/>
+ <br/>
+ <br/>
+ e.g.
+ <pre><a class="tx-button tx-button-remove tx-inactive" href="#" >remove</a></pre>
+ </div>
+
+ <h3>Icons</h3>
+
+ <strong>Icons</strong> are <a> with the class <strong>tx-icon</strong>. e.g.There are 4 different type of icons. These icons have an active and inactive state (in case of toggles on/off)
+ <br/>
+ <br/>
+ <strong>active</strong>
+ <ol>
+ <li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete">Delete</a></li>
+ <li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok">Ok</a></li>
+ <li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search">Search</a></li>
+ <li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit">Edit</a></li>
+ <li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a></li>
+ </ol>
+ <br/>
+ <br/>
+ <br/>
+ e.g.<pre><a class="tx-icon tx-icon-delete" href="#">Delete</a></pre>
+ <strong>inactive</strong>
+ <ol>
+ <li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete tx-inactive">Delete</a></li>
+ <li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok tx-inactive">Ok</a></li>
+ <li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search tx-inactive">Search</a></li>
+ <li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit tx-inactive">Edit</a></li>
+ <li><a href="#" title="tx-icon-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a></li>
+ </ol>
+ <br/>
+ <br/>
+ <br/>
+ e.g.<pre><a class="tx-icon tx-icon-delete tx-inactive" href="#">Delete</a></pre>
+ <br/>
+ <br/>
+ The following paragraphs describes the available icons:
+ <br/>
+ <br/>
+ <h4>Remove</h4>
+ <ol>
+ <li><a href="#" class="tx-icon tx-icon-delete" title="tx-icon-delete">Delete</a> <pre><a class="tx-icon tx-icon-delete tx-inactive" href="#">delete</a></pre></li>
+ </ol>
+
+ <h4>Create</h4>
+ <ol>
+ <li><a href="#" class="tx-icon tx-icon-ok" title="tx-icon-ok">Ok</a> <pre><a class="tx-icon tx-icon-ok" href="#">ok</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-plus" title="tx-icon-plus">Plus</a> <pre><a class="tx-icon tx-icon-plus" href="#">plus</a></pre></li>
+ </ol>
+
+ <h4>Modify</h4>
+ <ol>
+ <li><a href="#" class="tx-icon tx-icon-modify" title="tx-icon-modify">Edit</a> <pre><a class="tx-icon tx-icon-modify" href="#">modify</a></pre></li>
+ </ol>
+
+ <h4>Generic</h4>
+ <ol>
+ <li><a href="#" class="tx-icon tx-icon-search" title="tx-icon-search">Search</a> <pre><a class="tx-icon tx-icon-search" href="#">search</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-sitechooser" title="tx-icon-sitechooser">Site chooser</a> <pre><a class="tx-icon tx-icon-sitechooser" href="#">sitechooser</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-user" title="tx-icon-user">User</a> <pre><a class="tx-icon tx-icon-user" href="#">user</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-close" title="tx-icon-close">Close</a> <pre><a class="tx-icon tx-icon-close" href="#">close</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-forward" title="tx-icon-forward">Forward</a> <pre><a class="tx-icon tx-icon-forward" href="#">forward</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-back" title="tx-icon-back">Back</a> <pre><a class="tx-icon tx-icon-back" href="#">back</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-zoomin" title="tx-icon-zoomin">Zoom in</a> <pre><a class="tx-icon tx-icon-zoomin" href="#">zoomin</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-zoomout" title="tx-icon-zoomout">Zoom out</a> <pre><a class="tx-icon tx-icon-zoomout" href="#">zoomout</a></pre></li>
+ </ol>
+
+ <h3>Available Toggle buttons</h3>
+
+ There are also <strong>toggles</strong> available, which are <a>. These buttons are defined by using the class <strong>tx-icon</strong>. Toggle buttons are switches between to states (on/off state). There are toggle buttons available for representing resources as lists, trees and thumbnails. Futhermore there are toggle buttons for choosing a size of a thumbnail.
+
+ <br/>
+ <br/>
+
+ <h4>On (clickable)</h4>
+ <ol>
+ <li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a> <pre><a class="tx-icon tx-icon-list-on" href="#">list-on</a></pre></li>
+ <li><a href="#" title="tx-toggle-thumbnail-on" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a> <pre><a class="tx-icon tx-icon-thumbnail-on" href="#">thumbnail-on</a></pre></li>
+ <li><a href="#" title="tx-toggle-tree-on" class="tx-icon tx-toggle-tree-on">Tree</a> <pre><a class="tx-icon tx-icon-tree-on" href="#">tree-on</a></pre></li>
+ <li><a href="#" title="tx-toggle-size1-on" class="tx-icon tx-toggle-size1-on">Size 1</a> <pre><a class="tx-icon tx-icon-size1-on" href="#">size1-on</a></pre></li>
+ <li><a href="#" title="tx-toggle-size2-on" class="tx-icon tx-toggle-size2-on">Size 2</a> <pre><a class="tx-icon tx-icon-size2-on" href="#">size2-on</a></pre></li>
+ <li><a href="#" title="tx-toggle-size3-on" class="tx-icon tx-toggle-size3-on">Size 3</a> <pre><a class="tx-icon tx-icon-size3-on" href="#">size3-on</a></pre></li>
+ </ol>
+ <br/>
+ <br/>
+ <br/>
+ <h4>Off (select)</h4>
+ <ol>
+ <li><a href="#" title="tx-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a> <pre><a class="tx-icon tx-toggle-list-off" href="#">list</a></pre></li>
+ <li><a href="#" title="tx-toggle-thumbnail-off" class="tx-icon tx-toggle-thumbnail-off">Thumbnail</a> <pre><a class="tx-icon tx-toggle-thumbnail-off" href="#">thumbnail</a></pre></li>
+ <li><a href="#" title="tx-toggle-tree-off" class="tx-icon tx-toggle-tree-off">Tree</a> <pre><a class="tx-icon tx-toggle-tree-off" href="#">tree</a></pre></li>
+ <li><a href="#" title="tx-toggle-size1-off" class="tx-icon tx-toggle-size1-off">Size 1</a> <pre><a class="tx-icon tx-toggle-size1-off" href="#">size1</a></pre></li>
+ <li><a href="#" title="tx-toggle-size2-off" class="tx-icon tx-toggle-size2-off">Size 2</a> <pre><a class="tx-icon tx-toggle-size2-off" href="#">size2</a></pre></li>
+ <li><a href="#" title="tx-toggle-size3-off" class="tx-icon tx-toggle-size3-off">Size 3</a> <pre><a class="tx-icon tx-toggle-size3-off" href="#">size3</a></pre></li>
+ </ol>
+ <br/>
+ <br/>
+ <br/>
+ <h3>Various icons / buttons</h3>
+
+ <ol>
+ <li><a href="#" class="tx-icon tx-icon-alert">Alert</a> <pre><a class="tx-icon tx-icon-alert" href="#">alert</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-drag">Drag Icon</a> <pre><a class="tx-icon tx-icon-drag" href="#">drag</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-down">Down</a> <pre><a class="tx-icon tx-icon-down" href="#">down</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-up">Up</a> <pre><a class="tx-icon tx-icon-up" href="#">up</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-right">Right</a> <pre><a class="tx-icon tx-icon-right" href="#">right</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-left">Left</a> <pre><a class="tx-icon tx-icon-left" href="#">left</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-down-inverse demo-bg">Down</a> <pre><a class="tx-icon tx-icon-down-inverse" href="#">downinverse</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-up-inverse demo-bg">Up</a> <pre><a class="tx-icon tx-icon-up-inverse" href="#">upinverse</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-right-inverse demo-bg">Right</a> <pre><a class="tx-icon tx-icon-right-inverse" href="#">rightinverse</a></pre></li>
+ <li><a href="#" class="tx-icon tx-icon-left-inverse demo-bg">Left</a> <pre><a class="tx-icon tx-icon-left-inverse" href="#">leftinverse</a></pre></li>
+ </ol>
+
+ </div>
+
+
+</div>
+<!-- // content -->
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml
new file mode 100644
index 0000000..8a25c79
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml
@@ -0,0 +1,164 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>edit - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+
+</head>
+
+<body>
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+ <!-- edit view -->
+ <div class="tx-edit">
+ <div class="tx-edit-content">
+ <form action="" method="post">
+ <fieldset>
+ <ol>
+ <li class="tx-line"><label>Original format</label>
+ <div>jpg</div></li>
+
+ <li class="tx-line"><label>Size</label>
+ <div>645 x 345 px (original size) <a href="">[view]</a><br />
+ 512 x 257 px <a href="">[view]</a></div>
+ </li>
+
+ <li class="tx-line"><label>Replace Image</label>
+ <input type="file" size="30" /></li>
+
+ <li><label>Credit</label>
+ <input size="30" type="text" value="" /></li>
+
+ <li><label>Licence type</label>
+ <select>
+ <option value="0">please select</option>
+ <option value="1" selected="selected">Royality Fee</option>
+ <option value="2">Open Photo</option>
+ <option value="3">Self made with natel</option>
+ </select></li>
+
+ <li class="tx-line"><label>Caption</label>
+ <input size="30" type="text" value="" /></li>
+
+ <li class="tx-line"><label>Alternative description</label>
+ <textarea cols="40" rows="3"></textarea></li>
+
+ <li><label>Radio</label>
+ <input type="radio" name="radio1" value="" /> Yes <input type="radio" name="radio1" value="" /> No <input type="radio" name="radio1" value="" /> Maybe</li>
+
+ <li><label>Checkbox</label>
+ <input type="checkbox" value="" /> Yes <input type="checkbox" value="" /> No <input type="checkbox" value="" /> Maybe</li>
+ </ol>
+ </fieldset>
+ </form>
+ </div>
+
+
+
+ <div id="demo">
+ <h3>Description</h3>
+
+ In the tx-content a <div> with class<b>tx-edit</b> is created. Within <strong>div.tx-edit</strong> a <strong>div.tx-edit-content</strong> is added.
+ <br/>
+ <br/>
+ <strong>li.tx-line</strong> draws a line under the <li> element.
+
+ <br/>
+ <br/>
+ The current example has no ids or names defined, if necessary they have to be defined contextually.
+ <br/>
+
+ <strong>div.tx-edit</strong> is the main container for the edit view. If no class is defined on the <strong>div.tx-edit</strong> element the edit view has 100% width.
+ <br/>
+ The classes <strong>.tx-show-panel</strong>, <strong>.tx-hide-panel</strong> and <strong>.tx-halfwidth-right</strong> define the position of the edit view.
+ <br/>
+ <br/>
+
+ <strong>.tx-show-panel</strong>: position with a panel on the left side.<br/>
+ <strong>.tx-hide-panel</strong>: position with a panel on the left side, hidden.<br/>
+ <strong>.tx-halfwidth-right</strong>: position on the right, 50% width.<br/>
+ <br/>
+ <br/>
+
+ <h3>Example code</h3>
+
+ <pre>
+<div class="tx-edit-content">
+ <form action="" method="post">
+ <fieldset>
+ <ol>
+ <li class="tx-line"><label>Original format</label>
+ <div>jpg</div></li>
+
+ <li class="tx-line"><label>Size</label>
+ <div>645 x 345 px (original size) <a href="">[view]</a><br />
+ 512 x 257 px <a href="">[view]</a></div>
+ </li>
+
+ <li class="tx-line"><label>Replace Image</label>
+ <input type="file" size="30" /></li>
+
+ <li><label>Credit</label>
+ <input size="30" type="text" value="" /></li>
+
+ <li><label>Licence type</label>
+ <select>
+ <option value="0">please select</option>
+ <option value="1" selected="selected">Royality Fee</option>
+ <option value="2">Open Photo</option>
+ <option value="3">Self made with natel</option>
+ </select></li>
+
+ <li class="tx-line"><label>Caption</label>
+ <input size="30" type="text" value="" /></li>
+
+ <li class="tx-line"><label>Alternative description</label>
+ <textarea cols="40" rows="3"></textarea></li>
+
+ <li><label>Radio</label>
+ <input type="radio" name="radio1" value="" /> Yes <input type="radio" name="radio1" value="" /> No <input type="radio" name="radio1" value="" /> Maybe</li>
+
+ <li><label>Checkbox</label>
+ <input type="checkbox" value="" /> Yes <input type="checkbox" value="" /> No <input type="checkbox" value="" /> Maybe</li>
+ </ol>
+ </fieldset>
+ </form>
+</div>
+ </pre>
+ </div>
+ </div>
+</div>
+<!-- // content -->
+
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml
new file mode 100644
index 0000000..86f406a
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml
@@ -0,0 +1,299 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>header - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+
+ <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+ <script src="/jquery/jquery.menu.js" type="text/javascript"></script>
+
+</head>
+
+<body>
+
+<!-- header -->
+<div id="tx-header">
+ <!-- system -->
+ <div id="tx-system">
+
+ <!-- global search -->
+ <div id="tx-globalsearch">
+ <form action="/globalsearch/">
+ <fieldset>
+ <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ </fieldset>
+ </form>
+ </div>
+
+ <!-- user information -->
+ <div id="tx-login">
+ <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span>
+ </div>
+
+ <div id="tx-logo"><a href=""></a></div>
+
+ <!-- main menu -->
+ <div id="tx-menu">
+ <ol>
+ <li><a href="">Dashboard</a></li>
+ <li><a href="">Modulgruppe 1</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ <li><a href="">Submenu 3</a></li>
+ <li><a href="">Submenu 4</a></li>
+ </ol>
+ </li>
+ <li><a href="">Modulgruppe 2</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ </ol>
+ </li>
+ <li><a href="">Help</a>
+ <ol>
+ <li><a href="">About</a></li>
+ <li><a href="">What</a></li>
+ <li><a href="">Where</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ </div>
+ <!-- //system -->
+
+ <!-- module -->
+ <div id="tx-module">
+ <!-- module title -->
+ <h1>header example</h1>
+
+ <!-- page editing actions -->
+ <div id="tx-page-actions">
+ <ol>
+ <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
+ <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Something</a></li>
+ </ol>
+ </div>
+
+ </div>
+ <!-- // module -->
+
+ <!-- moduletabs -->
+ <div id="tx-module-tabs">
+ <!-- moduletabs -->
+ <ol>
+ <li class="tx-active"><a href="#">Assets</a></li>
+ <li><a href="#">Image Sets</a></li>
+ <li><a href="#">My Lightboxes</a></li>
+ <li class="tx-active"><a href="#">My Something</a></li>
+ <li><a href="#">My Everything</a></li>
+ </ol>
+
+ <!-- -->
+ <div id="tx-contextual-buttons">
+ <ol>
+ <li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
+ <li><a href="#" class="tx-button tx-button-create">Create</a></li>
+ <li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
+ <li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
+ </ol>
+ </div>
+ </div>
+ <!-- // moduletabs -->
+
+ <!-- moduleoptions -->
+ <div id="tx-module-options">
+ <ol>
+ <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
+ <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
+
+ <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
+ </ol>
+
+ </div>
+ <!-- // moduleoptions -->
+</div>
+<!-- // header -->
+
+<!-- content -->
+<div id="tx-content">
+ <div id="demo">
+ <h3>Description</h3>
+ <div>The header is a <div> with id <strong>tx-header</strong> and is the first child of the <body>.</div>
+ <br/>
+
+ The <strong>div#tx-system</strong> contains the globalsearch, menu, logo and login.<br/>
+ The global search is a <div> with id <strong>tx-globalsearch</strong> and contains HTML.<br/>
+ The logo could be placed on the left top corner and is a <div> containing a <a> e.g. <div id="tx-logo"><a href="" /></div><br/>
+ The menu is a <div> with id <strong>tx-menu</strong>, which contains an ordered list.<br/>
+ <br/>
+ <br/>
+
+ The <strong>div#tx-module</strong> contains the title and the page actions.<br/>
+ The title of the module is a <h1>.
+ The page action buttons area is a <div> with id <strong>tx-page-actions</strong>, which contains an ordered list.<br/>
+ <br/>
+ <br/>
+
+
+ The tabs and contextual buttons are in a <div> with id <strong>tx-module-tabs</strong> which contains:<br/>
+ An ordered list <ol> for the module tabs.<br/>
+ A <div> with id <strong>tx-contextual-buttons</strong>, which contains an ordered list of contextual action buttons<br/>
+ <br/>
+ <br/>
+
+ The <strong>div#tx-module-options</strong> contains the toggle icons and paginator/select elements.<br/>
+ An ordered list <ol> for the module options, which contains the toggles and status icons.<br/>
+ <br/>
+ <br/>
+
+
+ <h3>Example code</h3>
+ <pre>
+<!-- header -->
+<div id="tx-header">
+ <!-- system -->
+ <div id="tx-system">
+
+ <!-- global search -->
+ <div id="tx-globalsearch">
+ <form action="/globalsearch/">
+ <fieldset>
+ <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ </fieldset>
+ </form>
+ </div>
+
+ <!-- user information -->
+ <div id="tx-login">
+ <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span>
+ </div>
+
+ <div id="tx-logo"><a href=""></a></div>
+
+ <!-- main menu -->
+ <div id="tx-menu">
+ <ol>
+ <li><a href="">Dashboard</a></li>
+ <li><a href="">Modulgruppe 1</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ <li><a href="">Submenu 3</a></li>
+ <li><a href="">Submenu 4</a></li>
+ </ol>
+ </li>
+ <li><a href="">Modulgruppe 2</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ </ol>
+ </li>
+ <li><a href="">Help</a>
+ <ol>
+ <li><a href="">About</a></li>
+ <li><a href="">What</a></li>
+ <li><a href="">Where</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ </div>
+ <!-- //system -->
+
+ <!-- module -->
+ <div id="tx-module">
+ <!-- module title -->
+ <h1>Example</h1>
+
+ <!-- page editing actions -->
+ <div id="tx-page-actions">
+ <ol>
+ <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
+ <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Something</a></li>
+ </ol>
+ </div>
+
+ </div>
+ <!-- // module -->
+
+ <!-- moduletabs -->
+ <div id="tx-module-tabs">
+ <!-- moduletabs -->
+ <ol>
+ <li class="tx-active"><a href="#">Assets</a></li>
+ <li><a href="#">Image Sets</a></li>
+ <li><a href="#">My Lightboxes</a></li>
+ <li class="tx-active"><a href="#">My Something</a></li>
+ <li><a href="#">My Everything</a></li>
+ </ol>
+
+ <!-- -->
+ <div id="tx-contextual-buttons">
+ <ol>
+ <li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
+ <li><a href="#" class="tx-button tx-button-create">Create</a></li>
+ <li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
+ <li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
+ </ol>
+ </div>
+ </div>
+ <!-- // moduletabs -->
+
+ <!-- moduleoptions -->
+ <div id="tx-module-options">
+ <ol>
+ <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
+ <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
+
+ <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
+ </ol>
+
+ </div>
+ <!-- // moduleoptions -->
+</div>
+<!-- // header -->
+ </pre>
+
+ </div>
+</div>
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml
new file mode 100644
index 0000000..3149ba6
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml
@@ -0,0 +1,108 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>overlay - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/>
+ <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"/>
+ <script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
+ <script src="/yui/element/element-min.js" type="text/javascript"/>
+ <script src="/yui/container/container-min.js" type="text/javascript"/>
+ <script src="/yui/resize/resize-min.js" type="text/javascript"/>
+ <script src="/yui/utilities/utilities.js" type="text/javascript"/>
+ <script src="/scripts/overlay.js" type="text/javascript"/>
+</head>
+
+<body>
+
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+ <div id="demo">
+ <h3>Description</h3>
+
+
+ <h3>Overlay</h3>
+
+ <div>
+ The Overlay behave similarly to an OS window. Unlike true browser popup windows,
+ the overlay is floating DHTML elements embedded directly within the page context.
+ The Overlay is positioned above the flow of a page and is draggable, resizable and has a close button.
+ The Overlay has a method show with arguments body, header, width and height, which renders the overlay.
+ The body and the header can be html elements or text.
+ The width (default value: 46em) and height (default value: 37em) can be defined absolutely or relatively.
+ Furthermore the Overlay has a method close to destroy the overlay.
+ <br/>
+ <br/>
+ <div style="display: none">
+ <div id="myOverlayBody">body</div>
+ </div>
+ <div>
+ <a href="#" onclick="Overlay.show($('#myOverlayBody'), 'header', '20em', '10em');">click here to add the overlay.</a> <br/>
+ </div>
+ <br/>
+ <br/>
+
+
+ The following css and scripts have to be included:
+ <pre>
+<link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/>
+<script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
+<script src="/yui/element/element-min.js" type="text/javascript"/>
+<script src="/yui/container/container-min.js" type="text/javascript"/>
+<script src="/yui/dragdrop/dragdrop-min.js" type="text/javascript"/>
+<script src="/yui/resize/resize-min.js" type="text/javascript"/>
+<script src="/yui/utilities/utilities.js" type="text/javascript"/>
+<script src="/scripts/overlay.js" type="text/javascript"/>
+ </pre>
+ <br/>
+ <br/>
+ e.g.
+ <pre>
+...
+ <body>
+ <div style="display: none">
+ <div id="myOverlayBody">body</div>
+ </div>
+ <div>
+ <a href="#" onclick="Overlay.show($('#myOverlayBody'), 'header', '20em', '10em');">click here to add the overlay </a> <br/>
+ </div>
+ </body>
+...
+ </pre>
+ </div>
+
+ </div>
+</div>
+<!-- // content -->
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml
new file mode 100644
index 0000000..05f2752
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml
@@ -0,0 +1,351 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>panel-thumbnail - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+
+ <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+ <script src="/jquery/jquery.menu.js" type="text/javascript"></script>
+ <script src="/jquery/jquery.panel.js" type="text/javascript"></script>
+
+</head>
+
+<body>
+
+<!-- header -->
+<div id="tx-header">
+ <!-- system -->
+ <div id="tx-system">
+
+ <!-- global search -->
+ <div id="tx-globalsearch">
+ <form action="/globalsearch/">
+ <fieldset>
+ <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ </fieldset>
+ </form>
+ </div>
+
+ <!-- user information -->
+ <div id="tx-login">
+ <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span>
+ </div>
+
+ <div id="tx-logo"><a href=""></a></div>
+
+ <!-- main menu -->
+ <div id="tx-menu">
+ <ol>
+ <li><a href="">Dashboard</a></li>
+ <li><a href="">Modulgruppe 1</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ <li><a href="">Submenu 3</a></li>
+ <li><a href="">Submenu 4</a></li>
+ </ol>
+ </li>
+ <li><a href="">Modulgruppe 2</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ </ol>
+ </li>
+ <li><a href="">Help</a>
+ <ol>
+ <li><a href="">About</a></li>
+ <li><a href="">What</a></li>
+ <li><a href="">Where</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ </div>
+ <!-- //system -->
+
+ <!-- module -->
+ <div id="tx-module">
+ <!-- module title -->
+ <h1>panel-thumbnail example</h1>
+
+ <!-- page editing actions -->
+ <div id="tx-page-actions">
+ <ol>
+ <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
+ <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Something</a></li>
+ </ol>
+ </div>
+
+ </div>
+ <!-- // module -->
+
+ <!-- moduletabs -->
+ <div id="tx-module-tabs">
+ <!-- moduletabs -->
+ <ol>
+ <li class="tx-active"><a href="#">Assets</a></li>
+ <li><a href="#">Image Sets</a></li>
+ <li><a href="#">My Lightboxes</a></li>
+ <li class="tx-active"><a href="#">My Something</a></li>
+ <li><a href="#">My Everything</a></li>
+ </ol>
+
+ <!-- -->
+ <div id="tx-contextual-buttons">
+ <ol>
+ <li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
+ <li><a href="#" class="tx-button tx-button-create">Create</a></li>
+ <li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
+ <li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
+ </ol>
+ </div>
+ </div>
+ <!-- // moduletabs -->
+
+ <!-- moduleoptions -->
+ <div id="tx-module-options">
+ <ol>
+ <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
+ <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
+
+ <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
+ </ol>
+
+ </div>
+ <!-- // moduleoptions -->
+</div>
+<!-- // header -->
+
+
+<!-- panel -->
+<div class="tx-panel">
+<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes -->
+ <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3>
+
+ <div class="tx-panel-window">
+ <!-- panel icons -->
+ <div class="tx-tab-buttons">
+
+ </div>
+
+ <div class="tx-panel-tabs">
+ <div>
+ <form action="" method="post">
+ <fieldset>
+ <label>
+ <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ <input type="text" value="search assets" />
+
+ </label>
+ </fieldset>
+ </form>
+ <!-- selected filter elements -->
+ <div class="tx-filter">
+
+ <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4>
+ <ol>
+ <!-- filter elements, tx-icon is floating right, must be at the first place -->
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li>
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li>
+ </ol>
+ </div>
+
+ <!-- results from filter -->
+ <div class="tx-result">
+ <!-- ul li contruct, only 2 levels supported -->
+ <ol>
+ <!-- main category-->
+ <li><a href="#">Type</a>
+ <ol>
+ <!-- sub category -->
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ <li><a href="#">Flash (45)</a></li>
+ <li><a href="#">Documents (234)</a></li>
+ <li><a href="#">Images (234)</a></li>
+ </ol>
+ </li>
+ <!-- tx-open, open element icon, arrow down-->
+ <li class="tx-open"><a href="#">Taxonomy</a>
+ <ol>
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ </ol>
+ </li>
+ <!-- li default shows an right arrow as background -->
+ <li><a href="#">Tags</a>
+ <ol>
+ <li><a href="#">Tiger (48)</a></li>
+ <li><a href="#">Animal (80)</a></li>
+ <li><a href="#">Africa (784)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Usage</a>
+ <ol>
+ <li><a href="#">Website (20)</a></li>
+ <li><a href="#">News (14)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Time</a>
+ <ol>
+ <li><a href="#">Yesterday (20)</a></li>
+ <li><a href="#">Last Week (14)</a></li>
+ <li><a href="#">Last Month (23)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Source</a>
+ <ol>
+ <li><a href="#">Flickr (14)</a></li>
+ <li><a href="#">Youtube (8)</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ <!-- // tx-result -->
+ </div>
+ </div>
+ <!-- // tx-panel-detail -->
+ </div>
+ <!-- // tx-panel-window -->
+</div>
+<!-- // panel -->
+<!-- content -->
+<div id="tx-content">
+
+ <!-- list / thumbnail -->
+ <!-- tx-show-panel, left padding with a panel (if panel is available) -->
+ <div class="tx-list tx-show-panel">
+
+ <form action="" method="post">
+ <fieldset>
+ <!-- tx-size1, tx-size2, tx-size3, different thumbnail sizes -->
+ <ol class="tx-size3">
+ <li>
+ <!-- img.tx-height, portrait thumbnail format -->
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ <li>
+ <!-- img.tx-width, landscape thumbnail format -->
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ <!-- custom defined icons, tx-right, global for "float: right" -->
+ <span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 19.08.2009"></span>
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ <span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 17.07.2009"></span>
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 24.06.2009"></span>
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 08.07.2009"></span>
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 12.08.2009"></span>
+ </div>
+ </li>
+ <li>
+ <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+ <div>
+ <input type="checkbox" value="" />
+ </div>
+ </li>
+ </ol>
+ </fieldset>
+ </form>
+
+ </div>
+ <!-- // list / thumbnail -->
+
+</div>
+<!-- // content -->
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml
new file mode 100644
index 0000000..ce4809d
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml
@@ -0,0 +1,324 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>panel-tree - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+
+ <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+ <script src="/jquery/jquery.menu.js" type="text/javascript"></script>
+ <script src="/jquery/jquery.panel.js" type="text/javascript"></script>
+
+ <style type="text/css">
+ .col1 {
+ width: 7em;
+ }
+
+ .col2 {
+ width: 6em;
+ }
+ </style>
+
+</head>
+
+<body>
+
+<!-- header -->
+<div id="tx-header">
+ <!-- system -->
+ <div id="tx-system">
+
+ <!-- global search -->
+ <div id="tx-globalsearch">
+ <form action="/globalsearch/">
+ <fieldset>
+ <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ </fieldset>
+ </form>
+ </div>
+
+ <!-- user information -->
+ <div id="tx-login">
+ <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span>
+ </div>
+
+ <div id="tx-logo"><a href=""></a></div>
+
+ <!-- main menu -->
+ <div id="tx-menu">
+ <ol>
+ <li><a href="">Dashboard</a></li>
+ <li><a href="">Modulgruppe 1</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ <li><a href="">Submenu 3</a></li>
+ <li><a href="">Submenu 4</a></li>
+ </ol>
+ </li>
+ <li><a href="">Modulgruppe 2</a>
+ <ol>
+ <li><a href="">Submenu 1</a></li>
+ <li><a href="">Submenu 2</a></li>
+ </ol>
+ </li>
+ <li><a href="">Help</a>
+ <ol>
+ <li><a href="">About</a></li>
+ <li><a href="">What</a></li>
+ <li><a href="">Where</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ </div>
+ <!-- //system -->
+
+ <!-- module -->
+ <div id="tx-module">
+ <!-- module title -->
+ <h1>panel-tree example</h1>
+
+ <!-- page editing actions -->
+ <div id="tx-page-actions">
+ <ol>
+ <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
+ <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
+ <li><a href="" class="tx-button tx-button-generic">Something</a></li>
+ </ol>
+ </div>
+
+ </div>
+ <!-- // module -->
+
+ <!-- moduletabs -->
+ <div id="tx-module-tabs">
+ <!-- moduletabs -->
+ <ol>
+ <li class="tx-active"><a href="#">Assets</a></li>
+ <li><a href="#">Image Sets</a></li>
+ <li><a href="#">My Lightboxes</a></li>
+ <li class="tx-active"><a href="#">My Something</a></li>
+ <li><a href="#">My Everything</a></li>
+ </ol>
+
+ <!-- -->
+ <div id="tx-contextual-buttons">
+ <ol>
+ <li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
+ <li><a href="#" class="tx-button tx-button-create">Create</a></li>
+ <li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
+ <li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
+ </ol>
+ </div>
+ </div>
+ <!-- // moduletabs -->
+
+ <!-- moduleoptions -->
+ <div id="tx-module-options">
+ <ol>
+ <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
+ <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
+
+ <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
+ <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
+ </ol>
+
+ </div>
+ <!-- // moduleoptions -->
+</div>
+<!-- // header -->
+
+<!-- panel -->
+<div class="tx-panel">
+<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes -->
+ <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3>
+
+ <div class="tx-panel-window">
+ <!-- panel icons -->
+ <div class="tx-tab-buttons">
+
+ </div>
+
+ <div class="tx-panel-tabs">
+ <div>
+ <form action="" method="post">
+ <fieldset>
+ <label>
+ <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ <input type="text" value="search assets" />
+
+ </label>
+ </fieldset>
+ </form>
+ <!-- selected filter elements -->
+ <div class="tx-filter">
+
+ <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4>
+ <ol>
+ <!-- filter elements, tx-icon is floating right, must be at the first place -->
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li>
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li>
+ </ol>
+ </div>
+
+ <!-- results from filter -->
+ <div class="tx-result">
+ <!-- ul li contruct, only 2 levels supported -->
+ <ol>
+ <!-- main category-->
+ <li><a href="#">Type</a>
+ <ol>
+ <!-- sub category -->
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ <li><a href="#">Flash (45)</a></li>
+ <li><a href="#">Documents (234)</a></li>
+ <li><a href="#">Images (234)</a></li>
+ </ol>
+ </li>
+ <!-- tx-open, open element icon, arrow down-->
+ <li class="tx-open"><a href="#">Taxonomy</a>
+ <ol>
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ </ol>
+ </li>
+ <!-- li default shows an right arrow as background -->
+ <li><a href="#">Tags</a>
+ <ol>
+ <li><a href="#">Tiger (48)</a></li>
+ <li><a href="#">Animal (80)</a></li>
+ <li><a href="#">Africa (784)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Usage</a>
+ <ol>
+ <li><a href="#">Website (20)</a></li>
+ <li><a href="#">News (14)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Time</a>
+ <ol>
+ <li><a href="#">Yesterday (20)</a></li>
+ <li><a href="#">Last Week (14)</a></li>
+ <li><a href="#">Last Month (23)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Source</a>
+ <ol>
+ <li><a href="#">Flickr (14)</a></li>
+ <li><a href="#">Youtube (8)</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ <!-- // tx-result -->
+ </div>
+ </div>
+ <!-- // tx-panel-detail -->
+ </div>
+ <!-- // tx-panel-window -->
+</div>
+<!-- // panel -->
+
+<!-- content -->
+<div id="tx-content">
+
+ <!-- tree view -->
+ <!-- aligned right -->
+ <div class="tx-tree tx-show-panel">
+
+ <!-- contains the tree -->
+ <div class="tx-tree-view">
+ <table class="tx-table">
+ <tr>
+ <th></th>
+ <th>Concepts</th>
+ <th class="col1">Tagged pages</th>
+ <th class="col2">In concepts</th>
+ </tr>
+ </table>
+ <!-- example folder structure -->
+ <ol>
+ <!-- tx-open, shows the arrow down on a "open" element -->
+ <li class="tx-open">
+ <!-- li content is wrapped inside a div to avoid some javascript event problems, eg. drag drop events can be assigned to the div instead -->
+ <div>
+ <!-- span class tx-info should be correspond with the table th widths -->
+ <span class="tx-info"><span class="col1">9</span><span class="col2">3</span></span>
+ <!-- drag icon -->
+ <div title=" Themes..." class="tx-icon tx-icon-drag">drag me</div>
+ <!-- checkbox -->
+ <input type="checkbox" /><!-- name --><a href=""></a><a href="">Themes...</a>
+ </div>
+ <!-- subelements of an li -->
+ <ol>
+ <li class="tx-open"><div>
+ <span class="tx-info"><span class="col1">29</span><span class="col2">2</span></span>
+ <div title=" Where" class="tx-icon tx-icon-drag">drag me</div>
+ <input type="checkbox" /><a href=""></a><a href=""> Where</a>
+ </div>
+ <ol>
+ <!-- li default shows an right arrow as background -->
+ <li><div>
+ <span class="tx-info"><span class="col1">51</span><span class="col2">5</span></span>
+ <div title="Africa" class="tx-icon tx-icon-drag">drag me</div>
+ <input type="checkbox" /><a href=""></a><a href="">Africa</a>
+ </div></li>
+ <li><div>
+ <span class="tx-info"><span class="col1">8</span><span class="col2">6</span></span>
+ <div title="Asia" class="tx-icon tx-icon-drag">drag me</div>
+ <input type="checkbox" /><a href=""></a><a href="">Asia</a>
+ </div></li>
+ <!-- tx-nobg, shows no arrow on a element, e.g. element has no subelements -->
+ <li class="tx-nobg"><div>
+ <span class="tx-info"><span class="col1">70</span><span class="col2">2</span></span>
+ <div title="Ecoregions" class="tx-icon tx-icon-drag">drag me</div>
+ <input type="checkbox" /><a href=""></a><a href="">Ecoregions</a>
+ </div></li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ <!-- // example folder structure-->
+ </div>
+ <!-- // tree view -->
+
+ </div>
+ <!-- // tree -->
+
+</div>
+<!-- // content -->
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml
new file mode 100644
index 0000000..2c762d3
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml
@@ -0,0 +1,235 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you 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.
+
+-->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>panel - example</title>
+
+ <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+
+ <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+ <script src="/jquery/jquery.panel.js" type="text/javascript"></script>
+
+</head>
+
+<body>
+
+<!-- panel -->
+<div class="tx-panel demo" id="tx-panel">
+<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes -->
+ <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3>
+
+ <div class="tx-panel-window">
+ <!-- panel icons -->
+ <div class="tx-tab-buttons">
+
+ </div>
+
+ <div class="tx-panel-tabs">
+ <div>
+ <form action="" method="post">
+ <fieldset>
+ <label>
+ <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ <input type="text" value="search assets" />
+
+ </label>
+ </fieldset>
+ </form>
+ <!-- selected filter elements -->
+ <div class="tx-filter">
+
+ <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4>
+ <ol>
+ <!-- filter elements, tx-icon is floating right, must be at the first place -->
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li>
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li>
+ </ol>
+ </div>
+
+ <!-- results from filter -->
+ <div class="tx-result">
+ <!-- ul li contruct, only 2 levels supported -->
+ <ol>
+ <!-- main category-->
+ <li><a href="#">Type</a>
+ <ol>
+ <!-- sub category -->
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ <li><a href="#">Flash (45)</a></li>
+ <li><a href="#">Documents (234)</a></li>
+ <li><a href="#">Images (234)</a></li>
+ </ol>
+ </li>
+ <!-- tx-open, open element icon, arrow down-->
+ <li class="tx-open"><a href="#">Taxonomy</a>
+ <ol>
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ </ol>
+ </li>
+ <!-- li default shows an right arrow as background -->
+ <li><a href="#">Tags</a>
+ <ol>
+ <li><a href="#">Tiger (48)</a></li>
+ <li><a href="#">Animal (80)</a></li>
+ <li><a href="#">Africa (784)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Usage</a>
+ <ol>
+ <li><a href="#">Website (20)</a></li>
+ <li><a href="#">News (14)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Time</a>
+ <ol>
+ <li><a href="#">Yesterday (20)</a></li>
+ <li><a href="#">Last Week (14)</a></li>
+ <li><a href="#">Last Month (23)</a></li>
+ </ol>
+ </li>
+ <li><a href="#">Source</a>
+ <ol>
+ <li><a href="#">Flickr (14)</a></li>
+ <li><a href="#">Youtube (8)</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ <!-- // tx-result -->
+ </div>
+ </div>
+ <!-- // tx-panel-detail -->
+ </div>
+ <!-- // tx-panel-window -->
+</div>
+<!-- // panel -->
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+ <div class="tx-edit tx-show-panel">
+
+
+ <h3>Description</h3>
+ The panel on the left side is a <div> with the class <strong>tx-panel</strong>.
+ <br/>
+ <br/>
+ The panel needs the jquery.panel.js, which defines the accordion effects.
+ <br/>
+ The show and hide functionality of the panel is currently only working on the <strong>div.tx-tree</strong>, <strong>div.tx-list</strong> and <strong>div.tx-edit</strong>.
+ <br/>
+ <br/>
+ <br/>
+
+ <h3>Example code</h3>
+
+ <pre>
+<!-- panel -->
+<div class="tx-panel">
+<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes -->
+ <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3>
+
+ <div class="tx-panel-window">
+ <!-- panel icons -->
+ <div class="tx-tab-buttons">
+
+ </div>
+
+ <div class="tx-panel-tabs">
+ <div>
+ <form action="" method="post">
+ <fieldset>
+ <label>
+ <input type="submit" value="" class="tx-icon tx-icon-search"/>
+ <input type="text" value="search assets" />
+
+ </label>
+ </fieldset>
+ </form>
+ <!-- selected filter elements -->
+ <div class="tx-filter">
+
+ <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4>
+ <ol>
+ <!-- filter elements, tx-icon is floating right, must be at the first place -->
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li>
+ <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li>
+ </ol>
+ </div>
+
+ <!-- results from filter -->
+ <div class="tx-result">
+ <!-- ul li contruct, only 2 levels supported -->
+ <ol>
+ <!-- main category-->
+ <li><a href="#">Type</a>
+ <ol>
+ <!-- sub category -->
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ <li><a href="#">Flash (45)</a></li>
+ <li><a href="#">Documents (234)</a></li>
+ <li><a href="#">Images (234)</a></li>
+ </ol>
+ </li>
+ <!-- tx-open, open element icon, arrow down-->
+ <li class="tx-open"><a href="#">Taxonomy</a>
+ <ol>
+ <li><a href="#">Images (234)</a></li>
+ <li><a href="#">Videos (20)</a></li>
+ </ol>
+ </li>
+ <!-- li default shows an right arrow as background -->
+ <li><a href="#">Tags</a>
+ <ol>
+ <li><a href="#">Tiger (48)</a></li>
+ <li><a href="#">Animal (80)</a></li>
+ <li><a href="#">Africa (784)</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ <!-- // tx-result -->
+ </div>
+ </div>
+ <!-- // tx-panel-detail -->
+ </div>
+ <!-- // tx-panel-window -->
+</div>
+<!-- // panel -->
+ </pre>
+
+ </div>
+
+</div>
+<!-- // content -->
+
+</body>
+</html>
+
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css
new file mode 100644
index 0000000..22c8bb7
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css
@@ -0,0 +1,64 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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.
+ *
+*/
+
+#demo {
+ padding-left: 1.5em;
+ padding-top: 1.5em;
+}
+
+#demo ol {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ clear: both;
+}
+
+#demo ol li {
+ float: left;
+ clear: right;
+ margin: 1em;
+}
+
+#demo h3 {
+ clear: both;
+ margin: 0;
+ padding: 1em 0em;
+
+}
+
+#demo h4 {
+ font-weight: normal;
+ clear: both;
+ margin: 0;
+ padding-left: 1em;
+}
+
+#demo .demo-bg {
+ background-color: #34C0DA;
+}
+
+#tx-content.demo {
+ top: 1em;
+}
+
+#tx-panel.demo {
+ top: 1em;
+}