| <?xml version="1.0" encoding="UTF-8"?> |
| |
| <!-- |
| * 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. |
| --> |
| |
| <ui:composition template="/main.xhtml" |
| xmlns="http://www.w3.org/1999/xhtml" |
| xmlns:tc="http://myfaces.apache.org/tobago/component" |
| xmlns:ui="http://xmlns.jcp.org/jsf/facelets" |
| xmlns:f="http://xmlns.jcp.org/jsf/core"> |
| |
| <p>To convert numbers put a <code class="language-markup"><f:convertNumber/></code> tag in an component.</p> |
| <tc:section label="Example"> |
| <p>The following examples show the basic functions of the number converter. |
| The given number is in every example:</p> |
| <tc:label value="#{conversionController.amount}"/> |
| |
| <tc:section label="Default"> |
| <p>By default, grouping is activated and only three digits after the point are shown. |
| Also the value of <code>type</code> is 'number'.</p> |
| <demo-highlight language="markup"><tc:out label="Number" |
| markup="number" value="\#{conversionController.amount}"> |
| <f:convertNumber/> |
| </tc:out></demo-highlight> |
| <tc:out id="o1" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber/> |
| </tc:out> |
| </tc:section> |
| |
| <tc:section label="Grouping"> |
| <p>Grouping is deactivated.</p> |
| <demo-highlight language="markup"><f:convertNumber groupingUsed="false"/></demo-highlight> |
| <tc:out id="o2" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber groupingUsed="false"/> |
| </tc:out> |
| </tc:section> |
| |
| <tc:section label="Integer only"> |
| <p>Only integer values are shown.</p> |
| <demo-highlight language="markup"><f:convertNumber integerOnly="true"/></demo-highlight> |
| <tc:out id="o3" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber integerOnly="true"/> |
| </tc:out> |
| </tc:section> |
| |
| <tc:section label="Minimal Digits"> |
| <p>There are at minimum 10 integer digits and 5 digits after the point shown. |
| The given amount is not high enough in both ways. </p> |
| <demo-highlight language="markup"><f:convertNumber minIntegerDigits="10" minFractionDigits="5"/></demo-highlight> |
| <tc:out id="o4" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber minIntegerDigits="10" minFractionDigits="5"/> |
| </tc:out> |
| </tc:section> |
| |
| <tc:section label="Maximal Digits"> |
| <p>There are maximal 6 integer digits and 2 digits after the point shown. |
| Notice, that the second digit after the point is rounded up.</p> |
| <demo-highlight language="markup"><f:convertNumber maxIntegerDigits="6" maxFractionDigits="2"/></demo-highlight> |
| <tc:out id="o5" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber maxIntegerDigits="6" maxFractionDigits="2"/> |
| </tc:out> |
| </tc:section> |
| |
| <tc:section label="Type"> |
| <p>The <code>type</code> attribute can have the value 'number' (default), 'currency' and 'percent'. |
| If the type is set to 'currency', a code or a symbol must be set. Have a look at the following examples.</p> |
| |
| <tc:section label="Currency Code"> |
| <p>The currency code is set to 'EUR'. Also the type must set to 'currency', otherwise the |
| <code>currencyCode</code> attribute has no effect.</p> |
| <demo-highlight language="markup"><f:convertNumber type="currency" currencyCode="EUR"/></demo-highlight> |
| <tc:out id="i6" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber type="currency" currencyCode="EUR"/> |
| </tc:out> |
| </tc:section> |
| |
| <tc:section label="Currency Symbol"> |
| <p>The currency symbol is set to '€'. Also the type must set to 'currency', otherwise the |
| <code>currencyCode</code> attribute has no effect.</p> |
| <demo-highlight language="markup"><f:convertNumber type="currency" currencySymbol="€"/></demo-highlight> |
| <tc:out id="i7" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber type="currency" currencySymbol="€"/> |
| </tc:out> |
| </tc:section> |
| |
| <tc:section label="Percent"> |
| <p>The type is set to 'percent'.</p> |
| <demo-highlight language="markup"><f:convertNumber type="percent"/></demo-highlight> |
| <tc:out id="i8" label="Number" markup="number" value="#{conversionController.amount}"> |
| <f:convertNumber type="percent"/> |
| </tc:out> |
| </tc:section> |
| </tc:section> |
| </tc:section> |
| </ui:composition> |