I am building a flash player application (Flex 4) in IntelliJ IDEA. A button is positioned on top of a VideoDisplay area and the visibility is set to false. It becomes visible when the mouse is over the VideoDisplay area.
The problem is that the button blinks rapidly when the mouse is over it (it does not blink, when the mouse is over the VideoDispaly area, and not right over the button, though).
in .mxml:
<mx:VideoDisplay id="videoDisplay" visible="true" width="237" height="188" click="simplePlay()"
mouseOver="videoOnHover()" mouseOut="videoHoverOut()"
playheadUpdate="videoDisplay_playheadUpdate()"
ready="videoDisplay_ready()"
rewind="videoDisplay.play()"
autoPlay="false"
live="true"
source="rtmp://cp114761.live.edgefcs.net:443/live/tpc-live_1#44263"/>
<mx:Button id="pauseButton" name="pause" visible="false" verticalCenter="0" horizontalCenter="0" click="simplePause()"
overSkin="#Embed(source='img/pause-hover.png')"
upSkin="#Embed(source='img/pause.png')"
downSkin="#Embed(source='img/pause-hover.png')" />
in CDATA[ section:
private function videoOnHover():void {
pauseButton.setVisible(true);
}
Would be very grateful for any advice!
Put VideoDisplay and Button in the group and handle rollOver rollOut on it.
<s:Group rollOver="videoOnHover()" rollOut="videoHoverOut()">
<mx:VideoDisplay id="videoDisplay" visible="true" width="237" height="188"
autoPlay="false"
live="true"/>
<mx:Button id="pauseButton" name="pause" visible="false"/>
</s:Group>
Related
I have an AdvancedDataGrid with two columns that have item renderers. Those item renderers are rendering link buttons in their respective columns. I want to be able to click on those link buttons without triggering the itemClick event of the AdvancedDataGrid. Any suggestions for how I could accomplish this?
I've never worked with an AdvancedDataGrid but I assume a few principles hold. The first being the behavior of event propagation. The event gets processed by the button before it gets processed by the grid. This means that we can catch and stop the event from ever reaching the DataGrid. Below is a code sample demonstrating how a DataGrid renderer can have a Button without triggering other behavior.
CustomerRenderer...
<fx:Script>
<![CDATA[
protected function watchButtonClickHandler(event:MouseEvent):void
{
//the line below stops the event from
//propagating through the rest of the display
//list
event.stopImmediatePropagation();
//handle button click logic here
}
]]>
</fx:Script>
<s:Group width="100%" id="buttonGroup">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"
paddingBottom="1" paddingLeft="1"
paddingRight="1" paddingTop="1" />
</s:layout>
<s:Button id="watchButton" width="98" label="{buttonLabel}"
click="watchButtonClickHandler(event)"/>
</s:Group>
....
I put a FormItem in a Form like below.
<mx:Form width="100%">
<mx:FormItem label="Context Aware" width="100%" backgroundColor="red">
<editorControls:CheckBox/>
</mx:FormItem>
</mx:Form>
There's gap between the actual content height and the form item boundary. Any idea on how to strictly fit the FormItem height to content?
This is Image:
The checkbox is actually a button with an image overlaid on it, as an icon. The icon is a box with some whitespace, as an image. You will have to create a new image which does not have whitespace, and replace the current icon. Remember that this applies to downstate and so on, so you will need a series of similar images. (cf., Adobe's Button docs example).
Of course, you will also have to set verticalGap and indicatorGap as well as paddingTop to 0, on the CheckBox, FormItem, and Form. (cf., Adobe's Flex help on Form, FormHeading, and FormItem layout containers, the section titled "Laying out forms").
Here is some sample code:
<mx:Form width="100%" backgroundColor="0x0000ff" verticalGap="0" paddingTop="0" indicatorGap="0">
<mx:FormItem label="Context Aware" width="100%" backgroundColor="0x00ff00" verticalGap="0" paddingTop="0" indicatorGap="0">
<mx:CheckBox verticalGap="0" paddingTop="0" icon="#Embed('cbIcon.gif')"/>
</mx:FormItem>
</mx:Form>
(If the answer is wrong, please let me know. If it is right, please check it as "correct".)
I want to add a button with a cross to the header of the accordion which can be clickable. that means i want to display a message when the some one click on that button. i go through many of the samples in the web but couldn't get it done. if any one who knows do this in flex4 it will very helpful.
I tried with also a CanvasButtonAccordionHeader, it shows the button but when i click it, it didn't give the message although i created the click event handler.
if somebody know how to resolve this please describe it with a simple source code.
thanx.
You can easily do that by customizing the header in CSS.
Add the header Style to you accordion.
<mx:Accordion id="accordion"
headerStyleName="accHeader"
width="100%" />
In your CSS
.accHeader {
fillColors: haloSilver, haloBlue;
fillAlphas: 1.0, 0.5;
selectedFillColors: black, black;
}
Or embed your image in here.
You can place that message in your ViewStack.
I use the CanvasButtonAccordionHeader in Flex 3, so not sure if this will work in Flex 4.
But.... in case it's of any use, I create my CanvasButtonAccordianHeader as a custom componant which dispatches an event when the button is clicked:
<CanvasButtonAccordionHeader xmlns="flexlib.containers.accordionClasses.*"
xmlns:mx="http://www.adobe.com/2006/mxml" mouseChildren="true"
<mx:Script>
<![CDATA[
[Bindable]
private var itemName:String;
public function init():void{
itemName=data.name;
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="homeButtonClicked")]
</mx:Metadata>
<mx:HBox width="100%" horizontalAlign="right" height="100%"
paddingRight="5"
verticalAlign="middle">
<mx:LinkButton label="<>"
click="dispatchEvent(new Event('homeButtonClicked'));"
/>
</mx:HBox>
</CanvasButtonAccordionHeader>
Then I instantiate the custom componant at the bottom of the Accordian as a Header Renderer:
............................................
<mx:headerRenderer>
<mx:Component>
<applicationLayout:AccordionNavHeaderRenderer
homeButtonClicked="outerDocument.dispatchEvent(new Event('homeClick'))"/>
</mx:Component>
</mx:headerRenderer>
</mx:Accordion>
Hope this is of use.
I have a HBox and I dynamically add Buttons into it. I want to distribute such buttons horizontally, however I would like to place there on more rows if there is not anymore horizontal space, instead of seeing the scrolling bar.
How can I do that?
<mx:HBox id="tagsPopup" visible="false" horizontalAlign="center" width="100">
<mx:LinkButton label="Tag1" />
<mx:LinkButton label="Tag2" />
<mx:LinkButton label="Tag3" />
<mx:LinkButton label="Tag4" />
</mx:HBox>
HBox renders only on one horizontal row. Use a Tile for what you want.
I have a custom component with textbox & a poup button
as
<mx:HBox>
<mx:Text id="source" height="100%" width="40%" data="my text" />
<mx:VBox backgroundAlpha="0" height="100%" borderThickness="0">
<mx:PopUpButton enabled="true" id="editButton" width="40" icon="#Embed('assets/images/Legends/editIcon.png')"
initialize="popUpButton_initialize()"
popUp="{actionMenuEdit}"
height="19" toolTip="Edit at segment"/>
</mx:VBox>
</mx:HBox>
I am using this custom component as the itemEditor for the datagrid
I have a problem with focus. I need to set focus to the text after popup buttton itemclick
The scenario is that I am typing text in the source text. If I go to popup button and click any item, the focus moves to the popup button, and I am unable to type in the text as the focus is lost.
I need to set the focus back to the source code after pop-up-button item-selection so that I can continue typing.
At the moment I need to click gain in the text and then I am able to type.
source.setFocus()
You will need to add a handler for the change event of the pop up button that sets the focus to your text box.
This will be something like this:
this.focusManager.setFocus(source);
or in your example:
<mx:HBox>
<mx:Text id="source" height="100%" width="40%" data="my text" />
<mx:VBox backgroundAlpha="0" height="100%" borderThickness="0">
<mx:PopUpButton enabled="true" id="editButton" width="40" icon="#Embed('assets/images/Legends/editIcon.png')"
initialize="popUpButton_initialize()"
popUp="{actionMenuEdit}"
change="{this.focusManager.setFocus(source)}"
height="19" toolTip="Edit at segment"/>
</mx:VBox>
</mx:HBox>
may b this help u
if (flexApplication != "undefined") flexApplication.focus();