You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/01/11 18:29:55 UTC
[royale-asjs] branch develop updated: tour-de-jewel: improve
dropdownlist examples
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new d7ee57e tour-de-jewel: improve dropdownlist examples
d7ee57e is described below
commit d7ee57e9b4058726effb1634786918a82ff741d8
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jan 11 19:29:47 2020 +0100
tour-de-jewel: improve dropdownlist examples
---
.../src/main/royale/DropDownListPlayGround.mxml | 245 +++++++++------------
1 file changed, 105 insertions(+), 140 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
index 44d7468..83cb969 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
@@ -32,16 +32,16 @@ limitations under the License.
const intro:String = "<strong>DropDownList selectedItem:</strong> ";
var evaluated:String;
if (item is String) {
- evaluated = 'String value: \'' + item + '\'';
+ evaluated = "String value: '" + item + "'";
} else {
if (item === null || item === undefined) {
- evaluated = '[Nothing Selected]'
+ evaluated = "Nothing Selected";
}
else {
if (item is IconListVO) {
- evaluated = 'Object\'s label field: \'' + IconListVO(item).label + '\'';
+ evaluated = "Object's label field: '" + IconListVO(item).label + "'";
} else {
- evaluated = 'Object : ' + item;
+ evaluated = "Object : " + item;
}
}
}
@@ -56,229 +56,194 @@ limitations under the License.
</c:beads>
<c:model>
- <models:ListsModel id="listModel"/>
+ <models:ListsModel localId="listModel"/>
</c:model>
<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList (String Collection)"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:DropDownList id="watchmenDropDownList_noPrompt" dataProvider="{listModel.watchmen}"/>
- <j:Button text="deselect" click="watchmenDropDownList_noPrompt.selectedIndex = -1"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
- <j:Label text="Select Index: "/>
- <j:NumericStepper valueChange="watchmenDropDownList_noPrompt.selectedIndex = event.target.value" minimum="0" maximum="5"/>
- </j:HGroup>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Label id="watchmenDropDownListResult_noPrompt" html="{describeItem(watchmenDropDownList_noPrompt.selectedItem)}"/>
- </j:GridCell>
- </j:Grid>
+ <j:VGroup gap="3">
+ <j:HGroup gap="3">
+ <j:DropDownList localId="watchmenDropDownList_noPrompt" dataProvider="{listModel.watchmen}"/>
+ <j:Button text="deselect" click="watchmenDropDownList_noPrompt.selectedIndex = -1" emphasis="primary"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="watchmenDropDownList_noPrompt.selectedIndex = event.target.value" minimum="0" maximum="5"/>
+ </j:HGroup>
+ <j:Label multiline="true"localId="watchmenDropDownListResult_noPrompt" html="{describeItem(watchmenDropDownList_noPrompt.selectedItem)}"/>
+ </j:VGroup>
</j:Card>
-
</j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList (Object Collection)"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:DropDownList id="avengersDropDownList_noPrompt" labelField="label" dataProvider="{listModel.avengers}" />
- <j:Button text="deselect" click="avengersDropDownList_noPrompt.selectedIndex = -1"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
- <j:Label text="Select Index: "/>
- <j:NumericStepper valueChange="avengersDropDownList_noPrompt.selectedIndex = event.target.value" minimum="0" maximum="8"/>
- </j:HGroup>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Label id="avengersDropDownListResult_noPrompt" html="{describeItem(avengersDropDownList_noPrompt.selectedItem)}"/>
- </j:GridCell>
- </j:Grid>
+ <j:VGroup gap="3">
+ <j:HGroup gap="3">
+ <j:DropDownList localId="avengersDropDownList_noPrompt" labelField="label" dataProvider="{listModel.avengers}" />
+ <j:Button text="deselect" click="avengersDropDownList_noPrompt.selectedIndex = -1" emphasis="primary"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="avengersDropDownList_noPrompt.selectedIndex = event.target.value" minimum="0" maximum="8"/>
+ </j:HGroup>
+ <j:Label multiline="true"localId="avengersDropDownListResult_noPrompt" html="{describeItem(avengersDropDownList_noPrompt.selectedItem)}"/>
+ </j:VGroup>
</j:Card>
</j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList (String Collection) with Prompt"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:DropDownList id="watchmenDropDownList" dataProvider="{listModel.watchmen}">
+ <j:VGroup gap="3">
+ <j:HGroup gap="3">
+ <j:DropDownList localId="watchmenDropDownList" dataProvider="{listModel.watchmen}">
<j:beads>
<j:DropDownListTextPrompt prompt="Select Watchmen..."/>
</j:beads>
</j:DropDownList>
- <j:Button text="deselect" click="watchmenDropDownList.selectedIndex = -1"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
- <j:Label text="Select Index: "/>
- <j:NumericStepper valueChange="watchmenDropDownList.selectedIndex = event.target.value" minimum="0" maximum="5"/>
- </j:HGroup>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Label id="watchmenDropDownListResult" html="{describeItem(watchmenDropDownList.selectedItem)}"/>
- </j:GridCell>
- </j:Grid>
+ <j:Button text="deselect" click="watchmenDropDownList.selectedIndex = -1" emphasis="primary"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="watchmenDropDownList.selectedIndex = event.target.value" minimum="0" maximum="5"/>
+ </j:HGroup>
+ <j:Label multiline="true"localId="watchmenDropDownListResult" html="{describeItem(watchmenDropDownList.selectedItem)}"/>
+ </j:VGroup>
</j:Card>
-
</j:GridCell>
-
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList (Object Collection) with Prompt"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:DropDownList id="avengersDropDownList" labelField="label" dataProvider="{listModel.avengers}">
+ <j:VGroup gap="3">
+ <j:HGroup gap="3">
+ <j:DropDownList localId="avengersDropDownList" labelField="label" dataProvider="{listModel.avengers}">
<j:beads>
<j:DropDownListTextPrompt prompt="Select Avengers..."/>
</j:beads>
</j:DropDownList>
- <j:Button text="deselect" click="avengersDropDownList.selectedIndex = -1"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
- <j:Label text="Select Index: "/>
+ <j:Button text="deselect" click="avengersDropDownList.selectedIndex = -1" emphasis="primary"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
<j:NumericStepper valueChange="avengersDropDownList.selectedIndex = event.target.value" minimum="0" maximum="8"/>
- </j:HGroup>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Label id="avengersDropDownListResult" html="{describeItem(avengersDropDownList.selectedItem)}"/>
- </j:GridCell>
- </j:Grid>
+ </j:HGroup>
+ <j:Label multiline="true"localId="avengersDropDownListResult" html="{describeItem(avengersDropDownList.selectedItem)}"/>
+ </j:VGroup>
</j:Card>
</j:GridCell>
-
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList (String Collection) with SelectedIndex: {watchmenDropDownList_withSelectedIndex.selectedIndex}"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:DropDownList id="watchmenDropDownList_withSelectedIndex" selectedIndex="3" dataProvider="{listModel.watchmen}">
+ <j:VGroup gap="3">
+ <j:HGroup gap="3">
+ <j:DropDownList localId="watchmenDropDownList_withSelectedIndex" selectedIndex="3" dataProvider="{listModel.watchmen}">
<j:beads>
<j:DropDownListTextPrompt prompt="Select Watchmen..."/>
</j:beads>
</j:DropDownList>
- <j:Button text="deselect" click="watchmenDropDownList_withSelectedIndex.selectedIndex = -1"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
- <j:Label text="Select Index: "/>
- <j:NumericStepper valueChange="watchmenDropDownList_withSelectedIndex.selectedIndex = event.target.value" value="3" minimum="0" maximum="5"/>
- </j:HGroup>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Label id="watchmenDropDownListResult_withSelectedIndex" html="{describeItem(watchmenDropDownList_withSelectedIndex.selectedItem)}"/>
- </j:GridCell>
- </j:Grid>
+ <j:Button text="deselect" click="watchmenDropDownList_withSelectedIndex.selectedIndex = -1" emphasis="primary"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="watchmenDropDownList_withSelectedIndex.selectedIndex = event.target.value" value="3" minimum="0" maximum="5"/>
+ </j:HGroup>
+ <j:Label multiline="true"localId="watchmenDropDownListResult_withSelectedIndex" html="{describeItem(watchmenDropDownList_withSelectedIndex.selectedItem)}"/>
+ </j:VGroup>
</j:Card>
-
</j:GridCell>
-
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList (Object Collection) with SelectedIndex: {avengersDropDownList_withSelectedIndex.selectedIndex}"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:DropDownList id="avengersDropDownList_withSelectedIndex" selectedIndex="4" labelField="label" dataProvider="{listModel.avengers}">
+ <j:VGroup gap="3">
+ <j:HGroup gap="3">
+ <j:DropDownList localId="avengersDropDownList_withSelectedIndex" selectedIndex="4" labelField="label" dataProvider="{listModel.avengers}">
<j:beads>
<j:DropDownListTextPrompt prompt="Select Avengers..."/>
</j:beads>
</j:DropDownList>
- <j:Button text="deselect" click="avengersDropDownList_withSelectedIndex.selectedIndex = -1"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
- <j:Label text="Select Index: "/>
- <j:NumericStepper valueChange="avengersDropDownList_withSelectedIndex.selectedIndex = event.target.value" value="4" minimum="0" maximum="8"/>
- </j:HGroup>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Label id="avengersDropDownListResult_withSelectedIndex" html="{describeItem(avengersDropDownList_withSelectedIndex.selectedItem)}"/>
- </j:GridCell>
- </j:Grid>
+ <j:Button text="deselect" click="avengersDropDownList_withSelectedIndex.selectedIndex = -1" emphasis="primary"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="avengersDropDownList_withSelectedIndex.selectedIndex = event.target.value" value="4" minimum="0" maximum="8"/>
+ </j:HGroup>
+ <j:Label multiline="true"localId="avengersDropDownListResult_withSelectedIndex" html="{describeItem(avengersDropDownList_withSelectedIndex.selectedItem)}"/>
+ </j:VGroup>
</j:Card>
</j:GridCell>
-
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList (Object Collection) with SelectedItem"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:DropDownList id="avengersDropDownList_withSelectedItem" labelField="label" dataProvider="{listModel.avengers}" selectedItem="{listModel.avengers.getItemAt(4)}">
+ <j:VGroup gap="3">
+ <j:HGroup gap="3">
+ <j:DropDownList localId="avengersDropDownList_withSelectedItem" labelField="label" dataProvider="{listModel.avengers}" selectedItem="{listModel.avengers.getItemAt(4)}">
<j:beads>
<j:DropDownListTextPrompt prompt="Select Avengers..."/>
</j:beads>
</j:DropDownList>
- <j:Button text="deselect" click="avengersDropDownList_withSelectedItem.selectedIndex = -1"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
- <j:Label text="Select Index: "/>
- <j:NumericStepper valueChange="avengersDropDownList_withSelectedItem.selectedIndex = event.target.value" minimum="0" maximum="8"/>
- </j:HGroup>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Label id="avengersDropDownListResult_withSelectedItem" html="{describeItem(avengersDropDownList_withSelectedItem.selectedItem)}"/>
- </j:GridCell>
- </j:Grid>
+ <j:Button text="deselect" click="avengersDropDownList_withSelectedItem.selectedIndex = -1" emphasis="primary"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="avengersDropDownList_withSelectedItem.selectedIndex = event.target.value" minimum="0" maximum="8"/>
+ </j:HGroup>
+ <j:Label multiline="true"localId="avengersDropDownListResult_withSelectedItem" html="{describeItem(avengersDropDownList_withSelectedItem.selectedItem)}"/>
+ </j:VGroup>
</j:Card>
</j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList Disabled"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
+ <j:VGroup gap="3">
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
<j:DropDownList labelField="label" dataProvider="{listModel.avengers}">
<j:beads>
<j:Disabled disabled="{disable_ddl.selected}"/>
<j:DropDownListTextPrompt prompt="Disabled..."/>
</j:beads>
</j:DropDownList>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
<j:CheckBox localId="disable_ddl" text="Disable ComboBox?" selected="true"/>
- </j:GridCell>
- </j:Grid>
+ </j:HGroup>
+ </j:VGroup>
</j:Card>
</j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DropDownList requireSelection"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
+ <j:VGroup gap="3">
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
<j:DropDownList localId="rqddl" labelField="label" dataProvider="{listModel.avengers}" selectedIndex="2">
<j:beads>
<j:DropDownListTextPrompt prompt="Required Selection..."/>
<j:RequireSelection requireSelection="{requiredSelecion_ddl.selected}"/>
</j:beads>
</j:DropDownList>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
<j:CheckBox localId="requiredSelecion_ddl" text="Require Selection?"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:Button text="deselect" click="rqddl.selectedIndex = -1"/>
- </j:GridCell>
- </j:Grid>
+ </j:HGroup>
+ <j:Button text="deselect" click="rqddl.selectedIndex = -1" emphasis="primary"/>
+ </j:VGroup>
</j:Card>
</j:GridCell>
+
</j:Grid>
</c:ExampleAndSourceCodeTabbedSectionContent>