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 2017/06/02 08:48:53 UTC
svn commit: r1797330 - in
/myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content:
10-intro/50-migration/96-migration/migration40.xhtml
20-component/050-container/60-bar/bar.xhtml
Author: hnoeth
Date: Fri Jun 2 08:48:53 2017
New Revision: 1797330
URL: http://svn.apache.org/viewvc?rev=1797330&view=rev
Log:
improve demo: update 4.0-migration and description of tc:bar
Modified:
myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
Modified: myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml?rev=1797330&r1=1797329&r2=1797330&view=diff
==============================================================================
--- myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml (original)
+++ myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml Fri Jun 2 08:48:53 2017
@@ -39,14 +39,27 @@
<tc:section label="Tag Library">
<tc:section label="<tc:bar>">
<p>
- The content of <code><tc:bar></code> needs to be checked.
+ The content of <code class="language-markup"><tc:bar></code> needs to be checked.
The layout inside of the bar has been changed by CSS.
</p>
-
- <p>
- Example: TODO (look the change in the Tobago demo header bar)
- <!-- todo -->
- </p>
+ <p>There is a new after-facet for right sided content. Old code which uses
+ <code class="language-markup"><tc:flowLayout align=right></code> probably doesn't work correctly.</p>
+ <p>Replace the following code...</p>
+ <pre><code class="language-markup"><tc:bar>
+ <tc:flowLayout textAlign="right">
+ // right sided content
+ </tc:flowLayout>
+</tc:bar></code></pre>
+ <p>... with this:</p>
+ <pre><code class="language-markup"><tc:bar>
+ <f:facet name="after">
+ <tc:flexLayout columns="*;auto">
+ // right sided content
+ </tc:flexLayout>
+ </f:facet>
+</tc:bar></code></pre>
+ <p>For more information have a look at
+ <tc:link label="tc:bar" link="/faces/content/20-component/050-container/60-bar/bar.xhtml"/></p>
</tc:section>
</tc:section>
Modified: myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml?rev=1797330&r1=1797329&r2=1797330&view=diff
==============================================================================
--- myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml (original)
+++ myfaces/tobago/trunk/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml Fri Jun 2 08:48:53 2017
@@ -33,53 +33,83 @@
link="#{demoBundle.tagDocUrl}/#{info.stableVersion}/tld/tc/bar.html"/>
<tc:section label="Example">
- <p>This example show a Bar with a 'brand' facet and several components.
- Buttons and links don't have any functionality.</p>
+ <p>This example show a Bar with a 'brand' facet, a menu and right sided content inside an 'after' facet.</p>
+ <pre><code class="language-markup"><tc:bar>
+ <f:facet name="brand">
+ <tc:link label="BRAND" link="/"/>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ <f:facet name="after">
+ <tc:flexLayout columns="*; auto">
+ <tc:in placeholder="Search" labelLayout="skip"/>
+ <tc:button label="Go"/>
+ </tc:flexLayout>
+ </f:facet>
+</tc:bar></code></pre>
<tc:bar>
<f:facet name="brand">
- <!-- label="Tobago Demo" contains a NO-BREAK SPACE character -->
- <tc:link id="brand" label="Tobago Demo" image="#{request.contextPath}/image/feather-leaf.png" link="/"/>
+ <tc:link label="BRAND" link="/"/>
</f:facet>
<tc:links>
- <tc:link label="Home"/>
- <tc:link label="Configuration" omit="true">
- <tc:link label="Theme" omit="true">
- <tc:link label="Standard Theme"/>
- <tc:link label="Scarborough"/>
- <tc:link label="Richmond"/>
- <tc:link label="Charlotteville"/>
- <tc:link label="Speyside"/>
- </tc:link>
- <tc:link image="fa-language" label="Language" omit="true">
- <tc:link label="English"/>
- <tc:link label="German"/>
- <tc:link label="Japanese"/>
- <tc:link label="Russian"/>
- <tc:link label="Spanish"/>
- </tc:link>
- <tc:link label="Reset"/>
- </tc:link>
- <tc:link image="fa-info" label="Help"/>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
</tc:links>
- <tc:flowLayout>
- <tc:style textAlign="right"/>
- <tc:in placeholder="Search"/>
- <tc:button label="Go"/>
- </tc:flowLayout>
+ <f:facet name="after">
+ <tc:flexLayout columns="*; auto">
+ <tc:in placeholder="Search" labelLayout="skip"/>
+ <tc:button label="Go"/>
+ </tc:flexLayout>
+ </f:facet>
</tc:bar>
+ </tc:section>
+ <tc:section label="Centered Menu Example">
+ <p>This example shows how to center content.</p>
+ <pre><code class="language-markup"><tc:bar>
+ <f:facet name="brand">
+ <tc:link label="BRAND" link="/"/>
+ </f:facet>
+ <div class="ml-auto">
+ // centered content
+ </div>
+ <f:facet name="after">
+ // right sided content
+ </f:facet>
+</tc:bar></code></pre>
+ <tc:bar>
+ <f:facet name="brand">
+ <tc:link label="BRAND" link="/"/>
+ </f:facet>
+ <div class="ml-auto">
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ </div>
+ <f:facet name="after">
+ <tc:flexLayout columns="*; auto">
+ <tc:button label="Button"/>
+ </tc:flexLayout>
+ </f:facet>
+ </tc:bar>
</tc:section>
- <tc:section label="TODO: radio: (also for tc:links)">
+ <tc:section label="Bar with dropdown">
+ <p>An example of a dropdown menu with radio entries.</p>
<tc:bar>
+ <f:facet name="brand">
+ <tc:link label="BRAND" link="/"/>
+ </f:facet>
<tc:link omit="true" label="Radio">
<tc:selectOneRadio value="#{demoController.radioValue}">
<tc:selectItems value="#{demoController.currencyItems}"
var="currency" itemValue="#{currency.currencyCode}" itemLabel="#{currency.displayName}"
- itemImage="#{request.contextPath}/data/#{currency.currencyCode}-14.png" />
+ itemImage="#{request.contextPath}/data/#{currency.currencyCode}-14.png"/>
</tc:selectOneRadio>
</tc:link>
</tc:bar>
</tc:section>
-
</ui:composition>