You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2020/04/22 13:31:17 UTC
[myfaces-tobago] branch master updated: update demo for grid layout
and split layout
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new 409fd89 update demo for grid layout and split layout
409fd89 is described below
commit 409fd8963214a97f02ea59b669dfb70bd4e4b1ad
Author: Jasmin Kroeger <ja...@irian.eu>
AuthorDate: Mon Apr 20 20:12:23 2020 +0200
update demo for grid layout and split layout
* add code snippets
* changed order in Split_Layout
---
.../30-concept/16-layout/50-grid/Grid_Layout.xhtml | 266 ++++++++++++++-------
.../16-layout/60-split/Split_Layout.xhtml | 147 +++++++-----
2 files changed, 271 insertions(+), 142 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/Grid_Layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/Grid_Layout.xhtml
index 120904f..45e22ba 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/Grid_Layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/Grid_Layout.xhtml
@@ -39,92 +39,182 @@
and usable with all modern browsers and the Internet Explorer 11.
</p>
- <tc:box label="Personal Information">
- <tc:gridLayout columns="100px 1fr 100px 2fr" rows="auto auto auto auto auto 1fr">
- <tc:style minHeight="600px"/>
-
- <tc:selectOneChoice label="Salutation" labelLayout="gridLeft">
- <f:selectItem itemLabel="none"/>
- <f:selectItem itemLabel="Mr."/>
- <f:selectItem itemLabel="Mrs."/>
- </tc:selectOneChoice>
- <tc:panel>
- <tc:gridLayoutConstraint columnSpan="2"/>
- </tc:panel>
-
- <tc:in label="First Name" labelLayout="gridLeft"/>
- <tc:in label="Last Name" labelLayout="gridLeft"/>
-
- <tc:in label="c/o" labelLayout="gridLeft">
- <tc:gridLayoutConstraint columnSpan="4"/>
- </tc:in>
-
- <tc:in label="Street" labelLayout="gridLeft"/>
- <tc:in label="No" labelLayout="gridLeft"/>
-
- <tc:in label="ZIP" labelLayout="gridLeft"/>
- <tc:in label="City" labelLayout="gridLeft"/>
-
- <tc:textarea label="Note" labelLayout="gridLeft">
- <tc:gridLayoutConstraint columnSpan="4"/>
- </tc:textarea>
- </tc:gridLayout>
- </tc:box>
-
- <tc:box label="2-dimensional layout">
- <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
- <tc:style minHeight="600px"/>
-
- <tc:box label="#1">
- columnSpan=2
- <tc:gridLayoutConstraint columnSpan="2"/>
- </tc:box>
-
- <tc:box label="#2">
- rowSpan=2
- <tc:gridLayoutConstraint rowSpan="2"/>
- </tc:box>
-
- <tc:box label="#3">
- rowSpan=2
- <tc:gridLayoutConstraint rowSpan="2"/>
- </tc:box>
-
- <tc:box label="#4"/>
-
- <tc:box label="#5">
- columnSpan=2
- <tc:gridLayoutConstraint columnSpan="2"/>
- </tc:box>
- </tc:gridLayout>
- </tc:box>
-
- <tc:box label="ordering/positioning of the components">
- <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
- <tc:style minHeight="600px"/>
-
- <tc:box label="#1">
- columnSpan=2 gridColumn=1 gridRow=3
- <tc:gridLayoutConstraint columnSpan="2" gridColumn="1" gridRow="3"/>
- </tc:box>
-
- <tc:box label="#2">
- rowSpan=2 gridColumn=3 gridRow=2
- <tc:gridLayoutConstraint rowSpan="2" gridColumn="3" gridRow="2"/>
- </tc:box>
-
- <tc:box label="#3">
- rowSpan=2 gridColumn=1 gridRow=1
- <tc:gridLayoutConstraint rowSpan="2" gridColumn="1" gridRow="1"/>
- </tc:box>
-
- <tc:box label="#4"/>
-
- <tc:box label="#5">
- columnSpan=2 gridColumn=2 gridRow=1
- <tc:gridLayoutConstraint columnSpan="2" gridColumn="2" gridRow="1"/>
- </tc:box>
- </tc:gridLayout>
- </tc:box>
-
+ <tc:section>
+ <pre><code class="language-markup"><tc:box label="Personal Information">
+ <tc:gridLayout columns="100px 1fr 100px 2fr" rows="auto auto auto auto auto 1fr">
+ <tc:style minHeight="600px"/>
+
+ <tc:selectOneChoice label="Salutation" labelLayout="gridLeft">
+ <f:selectItem itemLabel="none"/>
+ <f:selectItem itemLabel="Mr."/>
+ <f:selectItem itemLabel="Mrs."/>
+ </tc:selectOneChoice>
+ <tc:panel>
+ <tc:gridLayoutConstraint columnSpan="2"/>
+ </tc:panel>
+
+ <tc:in label="First Name" labelLayout="gridLeft"/>
+ <tc:in label="Last Name" labelLayout="gridLeft"/>
+
+ <tc:in label="c/o" labelLayout="gridLeft">
+ <tc:gridLayoutConstraint columnSpan="4"/>
+ </tc:in>
+
+ <tc:in label="Street" labelLayout="gridLeft"/>
+ <tc:in label="No" labelLayout="gridLeft"/>
+
+ <tc:in label="ZIP" labelLayout="gridLeft"/>
+ <tc:in label="City" labelLayout="gridLeft"/>
+
+ <tc:textarea label="Note" labelLayout="gridLeft">
+ <tc:gridLayoutConstraint columnSpan="4"/>
+ </tc:textarea>
+ </tc:gridLayout>
+</tc:box></code></pre>
+ <tc:box label="Personal Information">
+ <tc:gridLayout columns="100px 1fr 100px 2fr" rows="auto auto auto auto auto 1fr">
+ <tc:style minHeight="600px"/>
+
+ <tc:selectOneChoice label="Salutation" labelLayout="gridLeft">
+ <f:selectItem itemLabel="none"/>
+ <f:selectItem itemLabel="Mr."/>
+ <f:selectItem itemLabel="Mrs."/>
+ </tc:selectOneChoice>
+ <tc:panel>
+ <tc:gridLayoutConstraint columnSpan="2"/>
+ </tc:panel>
+
+ <tc:in label="First Name" labelLayout="gridLeft"/>
+ <tc:in label="Last Name" labelLayout="gridLeft"/>
+
+ <tc:in label="c/o" labelLayout="gridLeft">
+ <tc:gridLayoutConstraint columnSpan="4"/>
+ </tc:in>
+
+ <tc:in label="Street" labelLayout="gridLeft"/>
+ <tc:in label="No" labelLayout="gridLeft"/>
+
+ <tc:in label="ZIP" labelLayout="gridLeft"/>
+ <tc:in label="City" labelLayout="gridLeft"/>
+
+ <tc:textarea label="Note" labelLayout="gridLeft">
+ <tc:gridLayoutConstraint columnSpan="4"/>
+ </tc:textarea>
+ </tc:gridLayout>
+ </tc:box>
+ </tc:section>
+
+ <tc:section>
+ <pre><code class="language-markup"><tc:box label="2-dimensional layout">
+<tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
+ <tc:style minHeight="600px"/>
+
+ <tc:box label="#1">
+ columnSpan=2
+ <tc:gridLayoutConstraint columnSpan="2"/>
+ </tc:box>
+
+ <tc:box label="#2">
+ rowSpan=2
+ <tc:gridLayoutConstraint rowSpan="2"/>
+ </tc:box>
+
+ <tc:box label="#3">
+ rowSpan=2
+ <tc:gridLayoutConstraint rowSpan="2"/>
+ </tc:box>
+
+ <tc:box label="#4"/>
+
+ <tc:box label="#5">
+ columnSpan=2
+ <tc:gridLayoutConstraint columnSpan="2"/>
+ </tc:box>
+ </tc:gridLayout>
+</tc:box></code></pre>
+ <tc:box label="2-dimensional layout">
+ <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
+ <tc:style minHeight="600px"/>
+
+ <tc:box label="#1">
+ columnSpan=2
+ <tc:gridLayoutConstraint columnSpan="2"/>
+ </tc:box>
+
+ <tc:box label="#2">
+ rowSpan=2
+ <tc:gridLayoutConstraint rowSpan="2"/>
+ </tc:box>
+
+ <tc:box label="#3">
+ rowSpan=2
+ <tc:gridLayoutConstraint rowSpan="2"/>
+ </tc:box>
+
+ <tc:box label="#4"/>
+
+ <tc:box label="#5">
+ columnSpan=2
+ <tc:gridLayoutConstraint columnSpan="2"/>
+ </tc:box>
+ </tc:gridLayout>
+ </tc:box>
+ </tc:section>
+
+ <tc:section>
+ <pre><code class="language-markup"><tc:box label="ordering/positioning of the components">
+<tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
+ <tc:style minHeight="600px"/>
+
+ <tc:box label="#1">
+ columnSpan=2 gridColumn=1 gridRow=3
+ <tc:gridLayoutConstraint columnSpan="2" gridColumn="1" gridRow="3"/>
+ </tc:box>
+
+ <tc:box label="#2">
+ rowSpan=2 gridColumn=3 gridRow=2
+ <tc:gridLayoutConstraint rowSpan="2" gridColumn="3" gridRow="2"/>
+ </tc:box>
+
+ <tc:box label="#3">
+ rowSpan=2 gridColumn=1 gridRow=1
+ <tc:gridLayoutConstraint rowSpan="2" gridColumn="1" gridRow="1"/>
+ </tc:box>
+
+ <tc:box label="#4"/>
+
+ <tc:box label="#5">
+ columnSpan=2 gridColumn=2 gridRow=1
+ <tc:gridLayoutConstraint columnSpan="2" gridColumn="2" gridRow="1"/>
+ </tc:box>
+ </tc:gridLayout>
+</tc:box></code></pre>
+ <tc:box label="ordering/positioning of the components">
+ <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
+ <tc:style minHeight="600px"/>
+
+ <tc:box label="#1">
+ columnSpan=2 gridColumn=1 gridRow=3
+ <tc:gridLayoutConstraint columnSpan="2" gridColumn="1" gridRow="3"/>
+ </tc:box>
+
+ <tc:box label="#2">
+ rowSpan=2 gridColumn=3 gridRow=2
+ <tc:gridLayoutConstraint rowSpan="2" gridColumn="3" gridRow="2"/>
+ </tc:box>
+
+ <tc:box label="#3">
+ rowSpan=2 gridColumn=1 gridRow=1
+ <tc:gridLayoutConstraint rowSpan="2" gridColumn="1" gridRow="1"/>
+ </tc:box>
+
+ <tc:box label="#4"/>
+
+ <tc:box label="#5">
+ columnSpan=2 gridColumn=2 gridRow=1
+ <tc:gridLayoutConstraint columnSpan="2" gridColumn="2" gridRow="1"/>
+ </tc:box>
+ </tc:gridLayout>
+ </tc:box>
+ </tc:section>
</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/Split_Layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/Split_Layout.xhtml
index d8f7a2a..4ed27a9 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/Split_Layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/Split_Layout.xhtml
@@ -18,7 +18,6 @@
-->
<ui:composition template="/main.xhtml"
- xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:demo="http://myfaces.apache.org/tobago/example/demo">
@@ -26,67 +25,107 @@
<ui:param name="title" value="SplitLayout Example"/>
<p><span class="#{demo:bootstrapClass('BADGE')} #{demo:bootstrapClass('BADGE_DANGER')}">Warning!</span>
- Preliminary implementation, work in progress!</p>
+ Preliminary implementation, work in progress!</p>
- <tc:splitLayout columns="2fr 1fr 1fr">
- <tc:panel>
- <tc:style minWidth="150px"/>
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
- et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
- Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
- consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
- sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
- takimata sanctus est Lorem ipsum dolor sit amet.</p>
- </tc:panel>
- <tc:textarea value="Text 1" labelLayout="none">
- <tc:style minWidth="150px"/>
- </tc:textarea>
- <tc:textarea value="Text 2" labelLayout="none">
- <tc:style minWidth="150px"/>
- </tc:textarea>
- </tc:splitLayout>
-
- <tc:splitLayout columns="1fr 4fr 1fr">
- <tc:button label="A"/>
- <tc:button label="B"/>
- <!--<tc:button label="C"/>-->
- </tc:splitLayout>
-
- <tc:flexLayout rows="auto 1fr">
-
- <p>
+ <p>
The SplitLayout implements a two component layout with a divider between
the components to adjust the space between the components.
- </p>
- <p>
+ </p>
+ <p>
Drag the divder between the boxes to see the effect</p>
- <tc:splitLayout columns="#{splitLayoutController.verticalLayout}">
+ <tc:section>
+ <pre><code class="language-markup"><tc:splitLayout columns="2fr 1fr 1fr">
+ <tc:panel>
+ <tc:style minWidth="150px"/>
+ <p>...</p>
+ </tc:panel>
+ <tc:textarea value="Text 1" labelLayout="none">
+ <tc:style minWidth="150px"/>
+ </tc:textarea>
+ <tc:textarea value="Text 2" labelLayout="none">
+ <tc:style minWidth="150px"/>
+ </tc:textarea>
+</tc:splitLayout></code></pre>
+ <tc:splitLayout columns="2fr 1fr 1fr">
+ <tc:panel>
+ <tc:style minWidth="150px"/>
+ <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+ et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+ takimata sanctus est Lorem ipsum dolor sit amet.</p>
+ </tc:panel>
+ <tc:textarea value="Text 1" labelLayout="none">
+ <tc:style minWidth="150px"/>
+ </tc:textarea>
+ <tc:textarea value="Text 2" labelLayout="none">
+ <tc:style minWidth="150px"/>
+ </tc:textarea>
+ </tc:splitLayout>
+ </tc:section>
- <tc:splitLayout rows="#{splitLayoutController.horizontalLayout}">
- <tc:box label="Top left box">
- <tc:style minWidth="150px"/>
- <tc:out
- value="Current vertical layout first value: #{splitLayoutController.verticalLayoutFirstToken}"/>
- <tc:out
- value="Current horizontal layout first value: #{splitLayoutController.horizontalLayoutFirstToken}"/>
- </tc:box>
- <tc:box label="Top right box">
+ <tc:section>
+ <pre><code class="language-markup"><tc:splitLayout columns="1fr 4fr 1fr">
+ <tc:button label="A"/>
+ <tc:button label="B"/>
+</tc:splitLayout></code></pre>
+ <tc:splitLayout columns="1fr 4fr 1fr">
+ <tc:button label="A"/>
+ <tc:button label="B"/>
+ <!--<tc:button label="C"/>-->
+ </tc:splitLayout>
+ </tc:section>
+
+ <tc:section>
+ <pre><code class="language-markup"><tc:splitLayout columns="\#{splitLayoutController.verticalLayout}">
+ <tc:splitLayout rows="\#{splitLayoutController.horizontalLayout}">
+ <tc:box label="Top left box">
+ <tc:style minWidth="150px"/>
+ <tc:out
+ value="Current vertical layout first value: \#{splitLayoutController.verticalLayoutFirstToken}"/>
+ <tc:out
+ value="Current horizontal layout first value: \#{splitLayoutController.horizontalLayoutFirstToken}"/>
+ </tc:box>
+ <tc:box label="Top right box">
+ <tc:style minWidth="150px"/>
+ <tc:out
+ value="Current vertical layout first value: \#{splitLayoutController.verticalLayoutFirstToken}"/>
+ <tc:out
+ value="Current horizontal layout second value: \#{splitLayoutController.horizontalLayoutSecondToken}"/>
+ </tc:box>
+ </tc:splitLayout>
+ <tc:box label="Bottom box">
+ <tc:style minWidth="150px"/>
+ <tc:out
+ value="Current vertical layout second value: \#{splitLayoutController.verticalLayoutSecondToken}"/>
+ </tc:box>
+</tc:splitLayout></code></pre>
+ <tc:flexLayout rows="auto 1fr">
+ <tc:splitLayout columns="#{splitLayoutController.verticalLayout}">
+ <tc:splitLayout rows="#{splitLayoutController.horizontalLayout}">
+ <tc:box label="Top left box">
+ <tc:style minWidth="150px"/>
+ <tc:out
+ value="Current vertical layout first value: #{splitLayoutController.verticalLayoutFirstToken}"/>
+ <tc:out
+ value="Current horizontal layout first value: #{splitLayoutController.horizontalLayoutFirstToken}"/>
+ </tc:box>
+ <tc:box label="Top right box">
+ <tc:style minWidth="150px"/>
+ <tc:out
+ value="Current vertical layout first value: #{splitLayoutController.verticalLayoutFirstToken}"/>
+ <tc:out
+ value="Current horizontal layout second value: #{splitLayoutController.horizontalLayoutSecondToken}"/>
+ </tc:box>
+ </tc:splitLayout>
+ <tc:box label="Bottom box">
<tc:style minWidth="150px"/>
<tc:out
- value="Current vertical layout first value: #{splitLayoutController.verticalLayoutFirstToken}"/>
- <tc:out
- value="Current horizontal layout second value: #{splitLayoutController.horizontalLayoutSecondToken}"/>
+ value="Current vertical layout second value: #{splitLayoutController.verticalLayoutSecondToken}"/>
</tc:box>
</tc:splitLayout>
- <tc:box label="Bottom box">
- <tc:style minWidth="150px"/>
- <tc:out
- value="Current vertical layout second value: #{splitLayoutController.verticalLayoutSecondToken}"/>
- </tc:box>
-
- </tc:splitLayout>
-
- </tc:flexLayout>
-
+ </tc:flexLayout>
+ </tc:section>
</ui:composition>