as3 tilelist with custom itemrender add to selectedIndices - actionscript-3

I create a TileList with custom renderer.
<s:BorderContainer
id="bcImage"
width="120"
height="99%"
borderVisible="true"
borderStyle="solid"
borderColor="#B3B3B3"
borderWeight="1"
cornerRadius="2"
backgroundAlpha=".8"
backgroundColor="#F8F8FF"
dropShadowVisible="true"
>
<mx:Canvas id="cvsImage" width="100%" click="cvsImage_clickHandler(event)">
<s:HGroup width="100%" paddingBottom="0" paddingTop="5" >
<s:CheckBox id="cbImgSelect"/>
<s:Label x="23" y="3" width="82" fontSize="11" fontWeight="normal" text="{data.imDate}"
textAlign="right" color="#000000"/>
</s:HGroup>
<mx:Image id="iconCanvas" x="10" y="20" width="99" height="99" horizontalAlign="center"
maintainAspectRatio="true" scaleContent="true"
verticalAlign="middle" mouseDown="iconCanvas_mouseDownHandler(event)"
>
</mx:Image>
</mx:Canvas>
<s:BorderContainer width="100%" y="124" height="25" bottom="1" left="3" right="3"
backgroundColor="#FFFFFF" id="bcTitre" borderAlpha="0" >
<s:VGroup width="100%" y="124" height="25" bottom="0" left="0" right="0"
paddingBottom="0" paddingTop="0" gap="0" click="iconCanvasLabel_mouseUp(event)">
<s:Label text="{data.imType}" height="50%" fontSize="10" paddingBottom="1" id="lType"
fontWeight="normal" width="99%" textAlign="center" toolTip="{data.imType}"/>
<s:Label text="{data.imStade}" fontSize="10" textAlign="center" paddingTop="1"
fontWeight="normal" width="99%" id="lStade" toolTip="{data.imStade}"/>
</s:VGroup>
</s:BorderContainer>
</s:BorderContainer>
My TileList has allowMultipleSelection enable.
I'd to check CheckBox when item is selected by click or by selection (continus or not) and if CheckBox.selected=true I'd like to show color selection around selected item.
Could you help me to do that ?
Best regards

It seems that you're trying to resolve the issue from opposite side, which is wrong
I suppose yo can consider following way:
set mouseEnabled to false for checkBox so that all the list item triggers click
alter default selection behaviour by intercepting changing event and doing something like
protected function lst_changingHandler(evt:IndexChangeEvent):void {
evt.preventDefault();
var ids:Vector.<int> = (evt.currentTarget as List).selectedIndices;
(evt.currentTarget as List).selectedIndices = ids.concat(new <int>[evt.newIndex]);
bind checkBox selected state to the renderer selected one

Related

how to get id of BorderContainer at runtime in Flex

I am getting error while attempting to get id of BorderContainer at runtime. I tried using getStyle but it is also failing.
<s:Panel id="colorPanel"
title="Dem display color"
width="500" height="500">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label id="label" y="4" horizontalCenter="0"/>
<s:BorderContainer id="Box1" x="70" y="70" height="50" width="50" backgroundColor="#0000ff">
</s:BorderContainer>
<s:BorderContainer id="Box2" x="90" y="90" height="51" width="50" backgroundColor="#00ff00">
</s:BorderContainer>
<s:BorderContainer id="Box3" x="50" y="50" height="52" width="50" backgroundColor="#ff0000">
</s:BorderContainer>
<s:Button label="Click" click="
colorPanel.setElementIndex(colorPanel.getElementAt(0),3);
label.text = ""+colorPanel.getElementAt(0).id ;
">
</s:Button>
</s:Panel>
Instead of casting to BorderContainer, it is safe to cast to UIComponent. In your example it crashes when the returned element is Label instead of BorderContainer. You can do as below:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
import mx.core.UIComponent;
]]></fx:Script>
<s:Panel id="colorPanel"
title="Dem display color"
width="500" height="500">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label id="label" text="Red" y="4" horizontalCenter="0"/>
<s:BorderContainer id="Blue" x="70" y="70" height="50" width="50" backgroundColor="#0000ff">
</s:BorderContainer>
<s:BorderContainer id="Green" x="90" y="90" height="51" width="50" backgroundColor="#00ff00">
</s:BorderContainer>
<s:BorderContainer id="Red" x="50" y="50" height="52" width="50" backgroundColor="#ff0000">
</s:BorderContainer>
<s:Button label="Click" click="{
colorPanel.setElementIndex(colorPanel.getElementAt(1),3);
label.text = UIComponent(colorPanel.getElementAt(3)).id;}"/>
</s:Panel>
</s:Application>
Solution I found seems like over rigidness on the part of Adobe. I was able to get value of Id the moment I casted the returned Element as BorderContainer. So we have to live with it till Adobe lowers it's compiler's expectations from us.
label.text = ""+ BorderContainer(colorPanel.getElementAt(0)).id ;

Dynamic variable for binding

I have a variable myVar which can take several values (1, 2, 3 etc...).
I have also many s:Group named G1, G2, G3 etc...
How can I define dynamic variable name in {} to make binding ?
Something like :
<s:Group id="anotherGroup" height="{Group(this['G' + myVar]).height}" />
Thanks for help
What you have done looks good to me. Here is an example of using variable as component id to access the property and use it for binding:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
[Bindable]
private var myVar:int = 1;
private function changeGroup_clickHandler(event:MouseEvent):void
{
if(++myVar > 3)
{
myVar = 1;
}
}
]]></fx:Script>
<s:VGroup height="500" width="1000">
<s:Group id="G1" height="25" width="100%" contentBackgroundColor="red">
<s:BorderContainer borderColor="red" height="100%" width="100%">
<s:Label text="Inside G1. Height: {G1.height}"/>
</s:BorderContainer>
</s:Group>
<s:Group id="G2" height="50" width="100%" >
<s:BorderContainer borderColor="blue" height="100%" width="100%">
<s:Label text="Inside G2. Height: {G2.height}"/>
</s:BorderContainer>
</s:Group>
<s:Group id="G3" height="75" width="100%">
<s:BorderContainer borderColor="green" height="100%" width="100%">
<s:Label text="Inside G3. Height: {G3.height}"/>
</s:BorderContainer>
</s:Group>
<s:Group id="anotherGroup" height="{(this['G'+myVar] as Group).height}" width="100%">
<s:BorderContainer borderColor="yellow" height="100%" width="100%">
<s:Label text="Inside anotherGroup. Height: {anotherGroup.height}"/>
</s:BorderContainer>
</s:Group>
<s:Button label="Change Group" click="changeGroup_clickHandler(event)"/>
</s:VGroup>
</s:Application>

flex4 add group with transition effect

How can i add a Group (with unknown size) to SkinnableContainer with a transformation effect?
Example
First, resize the SkinnableContainer smoothly to its final size and then fade in the Group.
Problem hereby
The Group-size is determined by adding it to the SkinnableContainer. Doing this, the SkinnableContainer gets the final size and the Group is shown, without playing the transition effect.
All examples i found are MXML- and State-based. But i need an Actionscript-only solution here.
<fx:Declarations>
<s:Parallel id="showEff">
<s:Rotate3D angleYFrom="-90" angleYTo="0" duration="7000"/>
<s:Fade alphaFrom="0.0" alphaTo="1.0" duration="7000" />
<mx1:WipeRight duration="9000"/>
</s:Parallel>
<s:Parallel id="hideEff">
<s:Rotate3D angleYFrom="0" angleYTo="-90" duration="4000" />
<s:Fade alphaFrom="1.0" alphaTo="0.0" duration="7000"/>
<mx1:WipeRight duration="5000"/>
</s:Parallel>
</fx:Declarations>
<s:Button id="btn"
label="Toggle Panel visibility"
click="skinnableContainerPanel.visible = !skinnableContainerPanel.visible;" />
<s:Panel id="skinnableContainerPanel" title="Using SkinnableContainer"
width="500" height="300" showEffect="{showEff}"
hideEffect="{hideEff}" >
<s:layout>
<s:VerticalLayout gap="10" verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:SkinnableContainer
skinClass="com.SkinnableContainerSkin"
width="50%" height="50%" horizontalCenter="0"
verticalCenter="0">
<s:HGroup horizontalCenter="0" verticalCenter="0" >
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
</s:HGroup>
</s:SkinnableContainer>
</s:Panel>

Accessing a tab navigator from child element

In my main application mxml I am using a tab navigator,I can access that tab navigator anywhere in the application by following code..
mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex=0;
Now my problem is I ihave used a toggle button bar in transactionUI which is a child element of tab navigator ,How can i access that element like above mentioned code??
My main mxml tab navigator ::
<mx:TabNavigator left="10" top="20" bottom="10" right="10" id="menuOption" >
<ui1:homeUI label="Home" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:transactionUI label="Transaction" width="100%" height="100%" backgroundColor="#373737" />
<ui1:calanderUI label="Employee service" width="100%" height="100%" horizontalCenter="0" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:ManagementUI label="Management" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:reportUI label="Reports" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:admin label="Admin" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
</mx:TabNavigator>
My toggle bar inside transactionUI ::
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:ui="com.colan.*" xmlns:ui1="com.colan.ui.*"
backgroundColor="#373737" chromeColor="#181818"
contentBackgroundColor="#181818" color="#FDFDFD">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.*;
import mx.core.*;
]]>
</fx:Script>
<mx:VBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="15%" >
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{viewStack}"
selectedButtonTextStyleName="mySelectedButtonTextStyleName"
/>
</mx:HBox>
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="85%" >
<mx:ViewStack id="viewStack"
visible="{toggleButtonBar.selectedIndex > -1}" width="100%" height="100%" >
<ui1:transaction label="Transaction"/>
<ui1:addClient label="Add Client"/>
<ui1:invoice label="Make invoice"/>
<ui1:workCatalogue label="Work catalogue"/>
<ui1:productCataloge label="Products Categories"/>
<ui1:suppliers label="Offers"/>
<ui1:calendarPlanUI label="Calendar"/>
</mx:ViewStack>
</mx:HBox>
</mx:VBox>
Please advice me...
FlexGlobals.topLevelApplication is meant to access the public variables/functions in your main application screen from any of its child screens.
For example..
If "transactionUI" NavigatorContent's ToggleButtonBar "calendarPlanUI" is for migrating to the main application "calanderUI" NavigatorContent.
Then you can straight away mention it then and there like
<ui1:calendarPlanUI label="Calendar" click="mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex = '2'"/>
But if by any chance you are trying for toggleButtonBar like this
mx.core.FlexGlobals.topLevelApplication.toggleButtonBar.selectedIndex = 1;
then I would like to mention that the main application's variables/functions/components can only be accessed using "topLevelApplication". Without creating an instance to transactionUI, you won't be able to use toggleButtonBar in other child screens/main app too.

Obtaining a HGroup subcomponent that it is in view of a Scroller container Adobe Flex 4.5

I have setup a Scroller container around an HGroup of labels. The Scroller is setup to only display a single label at a time. What I am trying to do is determine which label is in view of the Scroller when a button is clicked. I have scoured the reference material on Scrollers and HGroups, but cannot formulate a programmatic strategy to determine what element of the group is in view.
Scroller Code for reference:
<local:Scroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
bottom="356" depth="2">
<s:HGroup id="imageGroup" gap="0" width="100%" height="100%">
<s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
</s:HGroup>
</local:Scroller>
Eventually these Labels will be images, but using labels for proof of concept currently.
Any help would be greatly appreciated, and thank you for reading.
EDIT:
So after implementing an approach with lastIndexInView, I keep getting "TypeError: Error #1009: Cannot access a property or method of a null object reference." on the line "vehicleID.text = Label(lObj).text;". Below is the code involved:
Function:
protected function idSelect_clickHandler(event:MouseEvent):void
{
var hLay:HorizontalLayout = imageGroup.layout as HorizontalLayout;
var lIndex:int = hLay.lastIndexInView;
var lObj:Object = imageGroup.getElementAt(lIndex);
vehicleID.text = Label(lObj).text;
currentState="selectedState";
}
Components:
<local:SnapScroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
bottom="356" depth="2">
<s:HGroup id="imageGroup" gap="0" width="100%" height="100%">
<s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
</s:HGroup>
</local:SnapScroller>
<s:Button id="idSelect" includeIn="startState" x="367" y="608" width="290" height="67"
label="Select" click="idSelect_clickHandler(event)" color="#00008F" fontSize="24"/>
<s:Label id="vehicleID" includeIn="selectedState" x="425" y="453" color="#00008F" fontSize="24"
text="Vehicle ID: ____"/>
I think this should answer your question http://blog.flexexamples.com/2009/10/31/determining-how-much-of-an-item-is-visible-in-a-scrolling-vgroup-container-in-flex-4/
basically the layout has firstIndexInView and lastIndexInView property which will tell you which items are visible.
The second issue I was running into was due to the fact I was trying to access the vehicleID component before it had actually been initialized. In other words, I was trying to change an element that wasn't included in the current state, but in fact, was a member of the next state.
Solved it by changing the state first, then assigning the label.