This is an automated email from the ASF dual-hosted git repository. hiedra pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 782bbf58518422540fcc05562aecc7efec329c88 Author: Maria José Esteve <[email protected]> AuthorDate: Wed Dec 8 23:34:08 2021 +0100 Added Jewel TriStateCheckBox example in TDJ --- .../src/main/resources/jewel-example-styles.css | 21 ++ .../TourDeJewel/src/main/royale/MainContent.mxml | 1 + .../main/royale/TriStateCheckBoxPlayGround.mxml | 307 +++++++++++++++++++++ .../src/main/royale/models/MainNavigationModel.as | 1 + 4 files changed, 330 insertions(+) diff --git a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css index a15a1cb..3d51629 100644 --- a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css +++ b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css @@ -132,3 +132,24 @@ j|IconButtonBar IItemRenderer: ClassReference("itemRenderers.NavigationGroupExampleItemRenderer"); } +.groupoptions { + background: white; + border-radius: 0.25rem; + border: 1px solid #d2dadf; + font-size: 1em; + font-weight: 400; + min-height: 52px; + min-width: 120px; + padding: 0; + position: relative; +} + +.groupoptions-header { + padding: 12px 20px; +} + +.groupoptions-content { + border-top: 1px solid #d2dadf; + margin-top: 0 !important; + padding: 12px 20px; +} \ No newline at end of file diff --git a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml index 1d19544..21c7d62 100644 --- a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml +++ b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml @@ -362,6 +362,7 @@ limitations under the License. <local:DateComponentsPlayGround name="datecomponents_panel"/> <local:ComboBoxPlayGround name="combobox_panel"/> <local:CheckBoxPlayGround name="checkbox_panel"/> + <local:TriStateCheckBoxPlayGround name="tristatecheckbox_panel"/> <local:MiscelaneaPlayGound name="miscelanea_panel"/> <local:HeadingsAndText name="text_panel"/> <local:LabelPlayGround name="label_panel"/> diff --git a/examples/jewel/TourDeJewel/src/main/royale/TriStateCheckBoxPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/TriStateCheckBoxPlayGround.mxml new file mode 100644 index 0000000..28e7ec6 --- /dev/null +++ b/examples/jewel/TourDeJewel/src/main/royale/TriStateCheckBoxPlayGround.mxml @@ -0,0 +1,307 @@ +<?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. + +--> +<c:ExampleAndSourceCodeTabbedSectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:j="library://ns.apache.org/royale/jewel" + xmlns:html="library://ns.apache.org/royale/html" + xmlns:js="library://ns.apache.org/royale/basic" + xmlns:c="components.*" sourceCodeUrl="TriStateCheckBoxPlayGround.mxml"> + + + <fx:Script> + <![CDATA[ + + [Bindable] + private var trcGroupText:String = "None"; + private function computeTrcGroup():void + { + var numcheck:int = 0; + + numcheck += trcOp1.selected?1:0; + numcheck += trcOp2.selected?1:0; + numcheck += trcOp3.selected?1:0; + + if(numcheck == 3) + { + trcGroup.selected = true; + trcGroupText = "All"; + } + else if(numcheck == 0) + { + trcGroup.selected = false; + trcGroupText = "None"; + } + else + { + trcGroup.indeterminate = true; + trcGroupText = "Some"; + } + + } + + ]]> + </fx:Script> + + <c:beads> + <js:ViewDataBinding/> + </c:beads> + + <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight"> + <j:beads> + <js:Paddings paddingTop="0" paddingLeft="50" paddingRight="50" paddingBottom="50"/> + </j:beads> + + <c:ExampleHeader title="Jewel TriStateCheckBox"> + <c:description> + <![CDATA[<strong>Jewel TriStateCheckBox</strong> examples.]]> + </c:description> + </c:ExampleHeader> + + <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <j:CardHeader> + <j:CardTitle text="States" className="primary-normal"/> + </j:CardHeader> + <j:CardPrimaryContent> + + <j:Label multiline="true"> + <j:html><![CDATA[<p>A <strong>TriStateCheckBox</strong> can have the following six states.</p>]]></j:html> + </j:Label> + + <j:TriStateCheckBox text="Not Checked (with ReadOnly bead)"/> + + <j:TriStateCheckBox text="Checked" selected="true"/> + + <j:TriStateCheckBox text="indeterminate" indeterminate="true"/> + + <j:TriStateCheckBox text="Disabled"> + <j:beads> + <j:Disabled/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox text="Checked And Disabled" selected="true"> + <j:beads> + <j:Disabled/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox text="indeterminate And Disabled" indeterminate="true"> + <j:beads> + <j:Disabled/> + </j:beads> + </j:TriStateCheckBox> + + </j:CardPrimaryContent> + </j:Card> + </j:GridCell> + + <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <j:CardHeader> + <j:CardTitle text="States - Rejected Version" className="primary-normal"/> + </j:CardHeader> + <j:CardPrimaryContent> + + <j:Label multiline="true"> + <j:html><![CDATA[<p>By setting the property <strong>"rejectedVersion=true"</strong> the indeterminate status symbol appears as a "minus sign".</p>]]></j:html> + </j:Label> + + <j:TriStateCheckBox rejectedVersion="true" text="Not Checked"/> + + <j:TriStateCheckBox rejectedVersion="true" text="Checked" selected="true"/> + + <j:TriStateCheckBox rejectedVersion="true" text="Rejected" indeterminate="true"/> + + <j:TriStateCheckBox rejectedVersion="true" text="Disabled"> + <j:beads> + <j:Disabled/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox rejectedVersion="true" text="Checked And Disabled" selected="true"> + <j:beads> + <j:Disabled/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox rejectedVersion="true" text="Rejected And Disabled" indeterminate="true"> + <j:beads> + <j:Disabled/> + </j:beads> + </j:TriStateCheckBox> + + </j:CardPrimaryContent> + </j:Card> + </j:GridCell> + + <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1"> + <j:Card> + + <j:CardHeader itemsVerticalAlign="itemsCenter" gap="10"> + <j:CardTitle text="Setting the state by code" className="primary-normal"/> + </j:CardHeader> + + <j:CardPrimaryContent> + + <j:Label multiline="true"> + <j:html><![CDATA[<p>Select one or more options.</p>]]></j:html> + </j:Label> + + <j:VGroup width="230" gap="5" className="groupoptions"> + + <j:HGroup itemsVerticalAlign="itemsCenter" percentWidth="100" className="groupoptions-header primary-normal"> + <j:TriStateCheckBox localId="trcGroup" text="{trcGroupText}" emphasis="secondary"> + <j:beads> + <j:ReadOnly /> + </j:beads> + </j:TriStateCheckBox> + </j:HGroup> + + <j:VGroup percentWidth="100" gap="5" className="groupoptions-content"> + <j:CheckBox localId="trcOp1" text="Op 1" change="computeTrcGroup()"/> + <j:CheckBox localId="trcOp2" text="Op 2" change="computeTrcGroup()"/> + <j:CheckBox localId="trcOp3" text="Op 3" change="computeTrcGroup()"/> + </j:VGroup> + </j:VGroup> + + <j:Label multiline="true"> + <j:html><![CDATA[<p>Set the desired state.</p>]]></j:html> + </j:Label> + + <j:HGroup percentWidth="100" gap="3"> + <j:Button text="Set unchecked" click="trcSetManual.selected=false;"/> + <j:Button text="Set checked" click="trcSetManual.selected=true;"/> + <j:Button text="Set rejected" click="trcSetManual.indeterminate=true;"/> + </j:HGroup> + + <j:TriStateCheckBox localId="trcSetManual" rejectedVersion="true"/> + + </j:CardPrimaryContent> + </j:Card> + </j:GridCell> + + <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <j:CardHeader> + <j:CardTitle text="Beads" className="primary-normal"/> + </j:CardHeader> + <j:CardPrimaryContent> + + <j:Label multiline="true"> + <j:html><![CDATA[<p>The <strong>TriStateCheckBoxLabelState</strong> bead allows us to display a different Text for each state.</p>]]></j:html> + </j:Label> + + <j:TriStateCheckBox indeterminate="true"> + <j:beads> + <j:TriStateCheckBoxLabelState checkedText="Checked..." uncheckedText="Unchecked..." indeterminateText="Indeterminate..."/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox rejectedVersion="true" indeterminate="true"> + <j:beads> + <j:TriStateCheckBoxLabelState checkedText="Checked..." uncheckedText="Unchecked..." indeterminateText="Rejected..."/> + </j:beads> + </j:TriStateCheckBox> + + <j:Label multiline="true"> + <j:html><![CDATA[<p>The <strong>TriStateCheckBoxStatesValues</strong> bead allows to set a custom value for each state. <p>By default, the "unchecked" state is assigned a value of "0", the "checked" state a value of "1" and the "indeterminate" state a value of "-1".</p>]]></j:html> + </j:Label> + + <j:HGroup percentWidth="100" itemsVerticalAlign="itemsCenter" gap="5"> + <j:Label text="Default: " width="100"/> + <j:TriStateCheckBox localId="trCh" text="{trCh.state}"/> + </j:HGroup> + <j:HGroup percentWidth="100" itemsVerticalAlign="itemsCenter" gap="5"> + <j:Label text="Custom: " width="100"/> + <j:TriStateCheckBox localId="trCh1" text="{trCh1.state}" > + <j:beads> + <j:TriStateCheckBoxStatesValues checkedValue="valChecked" uncheckedValue="valUnchecked" indeterminateValue="valIndeterminate"/> + </j:beads> + </j:TriStateCheckBox> + </j:HGroup> + + </j:CardPrimaryContent> + </j:Card> + </j:GridCell> + + <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <j:CardHeader> + <j:CardTitle text="InputButton Size" className="primary-normal"/> + </j:CardHeader> + <j:CardPrimaryContent> + + <j:Label multiline="true"> + <j:html><![CDATA[<p>The <strong>InputButtonSize</strong> bead allow to change dimensions of the check.</p><p>Left: Default version, Right: Reject version</p>]]></j:html> + </j:Label> + + <j:HGroup percentWidth="100" > + <j:VGroup percentWidth="50" gap="3"> + <j:TriStateCheckBox text="No size"/> + + <j:TriStateCheckBox text="width and height to 60"> + <j:beads> + <j:InputButtonSize width="60" height="60"/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox text="Only width to 45" selected="true"> + <j:beads> + <j:InputButtonSize width="45"/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox text="Only height to 35 and disabled" indeterminate="true"> + <j:beads> + <j:Disabled localId="opt3disable" disabled="true"/> + <j:InputButtonSize height="35"/> + </j:beads> + </j:TriStateCheckBox> + </j:VGroup> + + <j:VGroup percentWidth="50" gap="3"> + <j:TriStateCheckBox rejectedVersion="true" text="No size"/> + + <j:TriStateCheckBox rejectedVersion="true" text="width and height to 60"> + <j:beads> + <j:InputButtonSize width="60" height="60"/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox rejectedVersion="true" text="Only width to 45" selected="true"> + <j:beads> + <j:InputButtonSize width="45"/> + </j:beads> + </j:TriStateCheckBox> + + <j:TriStateCheckBox rejectedVersion="true" text="Only height to 35 and disabled" indeterminate="true"> + <j:beads> + <j:Disabled disabled="true"/> + <j:InputButtonSize height="35"/> + </j:beads> + </j:TriStateCheckBox> + </j:VGroup> + </j:HGroup> + </j:CardPrimaryContent> + </j:Card> + </j:GridCell> + </j:Grid> + +</c:ExampleAndSourceCodeTabbedSectionContent> diff --git a/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as b/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as index 58fee31..8db37d0 100644 --- a/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as +++ b/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as @@ -28,6 +28,7 @@ package models new NavigationLinkVO("Alert", "alert_panel", MaterialIconType.WEB_ASSET), new NavigationLinkVO("Button", "button_panel", MaterialIconType.CROP_7_5), new NavigationLinkVO("CheckBox", "checkbox_panel", MaterialIconType.CHECK_BOX), + new NavigationLinkVO("TriStateCheckBox", "tristatecheckbox_panel", MaterialIconType.INDETERMINATE_CHECK_BOX), new NavigationLinkVO("ComboBox", "combobox_panel", MaterialIconType.CREDIT_CARD), new NavigationLinkVO("Date Components", "datecomponents_panel", MaterialIconType.DATE_RANGE), new NavigationLinkVO("DropDownList", "dropdownlist_panel", MaterialIconType.CREDIT_CARD),
