I'm trying to add a cancel icon to my TabBarButtons in Flex 4.0 (Spark), and I've gotten close, but now I'm stuck on getting the icon to be "clickable"
I have seen other approaches, like FlexWiz Blog (http://flexwiz.amosl.com/flex/spark-tabs-with-close-button/), but was hoping to figure out something cleaner.
Using the similar approach found in the Tour de Flex sample on Tabbed Navigation, here is what I have in my skin so far:
<s:HGroup top="5" right="5" left="5" verticalAlign="middle">
<s:Label id="labelDisplay"
textAlign="left"
maxDisplayedLines="1"
top="10"
width="100%">
</s:Label>
<s:Graphic x="16" y="16"
buttonMode="true"
mouseEnabledWhereTransparent="false"
useHandCursor="true"
click="closeEmployeeButtonClicked()"
color="0x00FF00">
<s:BitmapImage source="#Embed('assets/images/icons/close.png')"
height="16" width="16" fillMode="scale"/>
</s:Graphic>
</s:HGroup>
The icon appears in the tab, however, I can't click it. I also tried a button and it's almost like the parent button container does not allow the child to be clickable. I did play with some parent properties (like super.mouseChildren), but couldn't get it to work.
Any thoughts!
Kind regards,
=Dave
I see that the post is pretty old, but I just came along the same issue.
In order for button to be clickable, you need to enable mouseChildren at a TabBarButtonSkin. You can do it as follows:
override protected function commitProperties():void
{
super.commitProperties();
hostComponent.mouseChildren = true;
}
Now your button should be clickable. At least it worked for me.
It's already done in flexlib library. You can find some examples here:
http://flexlib.googlecode.com/svn/trunk/examples/SuperTabNavigator_Sample.swf
and here is its project home page:
http://code.google.com/p/flexlib/
Here's a Flex 4 based tab control that appears to be very well done, full source included:
http://saturnboy.com/2010/08/terrifictabbar-custom-component/
Related
I'm trying to hide Year2017 when the mxml page loads up. I'm using visible and includeInLayout attributes but it doesn't seems to be working.
Could somebody help me on this?
Some code written on -
Year2017.mxml,
Year2016.mxml,
Year2015.mxml
MainScreen.mxml
<mx:HBox
<component:PopupOpenerViewStack
id="payeVS"
borderStyle="none"
width="100%"
height="100%"
componentToFocusOn="{controlBar.overviewBut}"
selectedIndex="{ this.mainModel.navigator.selectedIndex }" >
<view1:Year2017
width="100%"
height="100%"
visible="{isVisible}"
includeInLayout="{isVisible}" />
<view1:Year2016
width="100%"
height="100%"/>
<view1:Year2015
width="100%"
height="100%"/>
</component:PopupOpenerViewStack>
</mx:HBox>
The way viewstacks work is they display a child based on index. In this case it will be opened in an Popup. I'd need the internals of the PopupOpener to give an more accurate answer.
Instead of setting the isVisble, can't you change the this.mainModel.navigator.selectedIndex?
It also depends on desired behaviour. What needs to happen if you have the popup open and you change it to visible?
I guess what you want is that Year2007 is not included in the stack, would not that be invisible. Have you tried to use states for it?
Thanks for all your inputs.The issue is resolved.
As Robin mentioned the visible or includeInLayout properties wont work with PopupOpenerViewStack. So I had to read the index values of each item in the viewStack and did payeVS.removeChildAt(0) whenever I wanted to hide an element.
Thanks,
Varatha
I have a checkbox that does not render as a checkbox and would be displayed as something similar to a button. However, it behaves like a checkbox where I can select it and the handler works with the firing event.
Here is my checkbox. I also tried it outside the or , but it has the same behavior. There is no CSS related to checkbox or the part that I am working on. I am using Flex 4.5 though.
1- Has anybody encounter such a problem?
2- Is there any way to enforce the layout inside a container and item renderer?
<mx:HBox>
<mx:CheckBox id="Test"
label="Label"
fontWeight="bold"
change="Test_changeHandler(event)"/>
</mx:HBox>
If you're using Flex 4.5, why are you using Flex 3 components? Change this to spark components and everything should be much better:
<s:HGroup>
<s:CheckBox id="Test"
label="Label"
fontWeight="bold"
change="Test_changeHandler(event)"/>
</s:HGroup>
mx:CheckBox extends mx:Button, so if you put added css that skinned mx:Button, mx:CheckBox would also get it. It's a shortcoming of flex 3 skinning. You can workaround by explicitly setting the mx:CheckBox skin.
Edit: try this
<mx:HBox>
<mx:CheckBox id="Test"
label="Label"
fontWeight="bold"
skin="{mx.skins.spark.CheckBoxSkin}"
change="Test_changeHandler(event)"
/>
</mx:HBox>
This happend to me also. Fix was to use a mx:Container as parent instead of FlexGlobals.application on the popup component.
for the second question:
I had exactly the same problem and i forced it to take the "original" skin with:
var skinClass:Class = mx.skins.spark.CheckBoxSkin;
theCheckBoxInstance.setStyle("skin", skinClass);
Because in my case the CheckBox was an ItemRenderer for a DataGrid, I've put it in the overridden createChildren methode right after the super call..
I have no explication why this happens. I encountered it in an old monster project where I was charged to make some changes...
Can anyone tell me how can we create a wobbling effect using flex 3?
I need something like the effect which is show in ubuntu when we see an alert or move a folder.
Thank you.
Not sure if there is anything specifically built in Flex to handle the "wobble" effect specifically, but you can combine the Flex Move and bounce effects to create a kind of "wobble":
<?xml version="1.0"?>
<fx:Declarations>
<s:Bounce id="bounceEasing"/>
<s:Elastic id="elasticEasing"/>
<s:Move id="moveRight"
target="{myImage}"
xBy="500"
duration="2000"
easer="{elasticEasing}"/>
<s:Move id="moveLeft"
target="{myImage}"
xBy="-500"
duration="2000"
easer="{bounceEasing}"/>
</fx:Declarations>
<s:Image id="myImage"
source="#Embed(source='assets/logo.jpg')"/>
<s:Button label="Move Right"
x="0" y="100"
click="moveRight.end();moveRight.play();"/>
<s:Button label="Move Left"
x="0" y="125"
click="moveLeft.end();moveLeft.play();"/>
Customize the code above to make smaller movements and link the left and right moves, and you have a wobble. You might also decide to add an event listener for the MouseEvent.ROLL_OVER to play the wobble effect when the mouse rolls over the component.
I have a list that displays photos like them:
<s:List id="thumnPhotosList"
dataProvider="{_model.photoAlbumToCreate.photos}"
height="450"
itemRenderer="PhotoRenderer" >
<s:layout>
<s:TileLayout orientation="columns"
requestedRowCount="4"
requestedColumnCount="3" />
</s:layout>
</s:List>
and PhotoRenderer has a code like this:
......
<mx:Image source="{_model.url + theAlbumPhoto.thumbPhotoURL}"
visible="{theAlbumPhoto.ready}"
maintainAspectRatio="true"
maxWidth="{Constants.DEFAULT_ALBUM_PHOTO_WIDTH}" maxHeight="{Constants.DEFAULT_ALBUM_PHOTO_HEIGHT}" />
........
Which works fine except when the number of photos get high and the scroll bar appears it starts behaving weirdly: it start showing photos different than the ones it supposed to and if I scroll back to beginning and scroll again to new photos other ones appears sometimes the correct ones and sometime not. Not sure how to resolve this, any ideas? you can also recommend different way than using s:List if that makes it easier.
I had the same problem with text List, i think its padding issue, organize the pading for all components it may help.
As I couldn't figure out what the problem was and couldn't reproduce it on stand alone application. I came up with the following code that solved the issue:
<s:Scroller id="photoScroller"
width="100%"
visible="{_model.photoAlbumToCreateOrUpdate.photos.length > 0}"
horizontalScrollPolicy="off" verticalScrollPolicy="auto"
skinClass="com.lal.skins.PhotoAlbumScrollerSkin"
top="50" bottom="0">
<s:DataGroup id="thumnPhotosList"
dataProvider="{_model.photoAlbumToCreateOrUpdate.photos}"
itemRenderer="AlbumPhotoThumbRenderer" >
<s:layout>
<s:TileLayout orientation="rows"
requestedRowCount="4"
requestedColumnCount="4" />
</s:layout>
</s:DataGroup>
</s:Scroller>
I had this same issue with an Image component in a custom item renderer I was using in a TileList. I fixed it without really knowing how, but the problem was the source property of the Image component in the item renderer.
The idea with item renderers is to use the data variable to access the item feeding the renderer. What do the _model and theAlbumPhoto variables refer to in your renderer? What I ended up doing was changing the source property to something more like data.image_path, and it decided to start working.
If you're happy with your solution, hopefully this can at least be of help to someone else.
I'm a beginner at Flex, and having the hardest time, working with Effects.
Right now I'm dealing with the problems faced when dealing with competing effects.
Please look at the following code. I have basically created a short reproducible tests sample which shows the problem I'm facing:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">
<mx:Script>
<![CDATA[
private function showmenu():void
{Menu.visible= true;
}
private function hidemenu():void
{Menu.visible= false;
}
]]>
</mx:Script>
<mx:WipeDown id="wipedown" duration="900"/>
<mx:WipeUp id="wipeUp" duration="900" />
<mx:Canvas id="main" width="400" height="400"
rollOver="showmenu();" rollOut="hidemenu();">
<mx:Button label="Show Menu"
x="100" y="20">
</mx:Button>
<mx:Canvas id="Menu" visible="false"
width="100" height="200"
backgroundColor="#B8B8B8" x="96" y="35"
showEffect="{wipedown}" hideEffect="{wipeUp}">
</mx:Canvas>
</mx:Canvas>
</mx:Application>
This basically shows a Button, and when you roll over on the button, another canvas, which is going to be a sort of menu, will be displayed. When you roll out, the Menu disappears.
The menu also has some effects, and if you try to start one effect before another is over, it gets into an infinite loop.
To reproduce what I am talking about, rollover the button, and then rollout and then quickly rollover again. You will see that the menu effects get stuck in a loop.
How do I code around this?
If you're having problems with events playing when they shouldn't, just add EffectEvent.EFFECT_START listeners to your events and use it to stop any playing events. e.g,
function _handleEffectStart(e:EffectEvent):void {
if(e.target == wipedown) {
wipeup.stop();
} else {
wipedown.stop();
}
}
Or something similar.
I cannot reproduce your problem. No matter where/when I move my mouse in or out, it never goes into a loop. Note that I'm using Flex 3.2. Maybe it depends on which version your using?
Btw, your code doesn't completely match your description: You have the rollOver and rollOut events on the canvas that also contains the canvas that you are showing and hiding. Just a guess, but I can imagine that the effect itself actually causes your mouse to be over or not over the canvas anymore, triggering the rollOver/rollOut, which then again cause the mouse to move in/out... Is that the infinite loop you're experiencing?