I have an mx accordian in my application like.
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Accordion id="accSubmenu" />
</mx:VBox>
Accordian has NavigatorContents as its elements..
<s:Group clipAndEnableScrolling="true">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Scroller id="scrlSubMenu"
horizontalScrollPolicy="off"
hasFocusableChildren="true">
<s:DataGroup id="lstSubMenu"
clipAndEnableScrolling="true"
hasFocusableChildren="true"
itemRenderer="renderers.SubmenuItmRndr">
<s:layout>
<s:TileLayout/>
</s:layout>
</s:DataGroup>
</s:Scroller>
itemRenderer is of HoverImage as below..
<s:ItemRenderer clipAndEnableScrolling="true"
autoDrawBackground="false" >
<s:layout>
<s:VerticalLayout/>
</s:layout>
<controls:HoverImage toolTip="{data.Name}" source="{'assets/' + data.IconFileName}"/>
</s:ItemRenderer>
I want keyboard navigation(Tab focus) on images inside itemRenderer..
Could anybody help me to get solution?
Related
I have a Spark form with horizontal layout and I would like to reduce the top and bottom vertical padding.
Neighter using the paddingBottom/paddingTop on the HorizontalLayout nor using the paragraphSpaceAfter/paragraphSpaceBefore of the FormItem reduces the vertical space before and after the form.
<s:Form width="100%" height="50%" fontSize="15">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" gap="3" paddingBottom="0" paddingTop="0">
</s:HorizontalLayout>
</s:layout>
<s:FormItem >
<mx:DateField id="selDateFrom" formatString="DD/MM/YYYY" selectedDate="{new Date()}">
</mx:DateField>
</s:FormItem>
<s:FormItem >
<mx:DateField id="selDateTo" formatString="DD/MM/YYYY" >
</mx:DateField>
</s:FormItem>
</s:Form>
Can someone help me?
Davide
I create a custom FormSkin like this one and it works:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
[...]
<s:Group id="contentGroup" showErrorSkin="true" showErrorTip="true"
left="0" right="0" top="0" bottom="0">
<s:layout>
<s:FormLayout gap="7"/>
</s:layout>
</s:Group>
</s:Skin>
Thanks
I have some DataGrids with pretty standard one-line itemrenderers, but need to use a custom two-line itemeditor for the whole row. I want to/must do this because I cannot edit each cell individually, but need to edit the whole object before I can save it.
I've run into two big problems so far:
How to place/display the itemeditor so that it actually works for the whole row?
How to force the DataGrid to change the rowheight on the edited entry so that the two-line itemeditor doesn't bleed into the row below?
Basically, what I want is this:
MyDataGrid:
<s:DataGrid id="myDataGrid" height="100%" width="100%" sortableColumns="false" editable="true" variableRowHeight="true">
<s:columns>
<s:ArrayCollection>
<s:GridColumn dataField="foo" itemEditor="myItemEditor"/>
<s:GridColumn dataField="bar" itemEditor="myItemEditor"/>
<s:GridColumn width="24" itemRenderer="myItemRenderer"/>
</s:ArrayCollection>
</s:columns>
</s:DataGrid>
MyItemEditor:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
override public function prepare():void {
itemLongname.text = this.data["longName"];
itemShortname.text = this.data["shortName"];
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:TextInput id="itemLongname"/>
<s:TextInput id="itemShortname"/>
</s:Group>
<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Rect width="100%"/>
<s:Button id="itemSaveButton" label="Save"/>
<s:Button id="itemCancelButton" label="Cancel"/>
</s:Group>
</s:GridItemEditor>
I think this helps you :)
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf2.html#WS2db454920e96a9e51e63e3d11c0bf65e9f-7fd4
Here is another option : http://blog.flexicious.com/post/Flexicious-30-Release-Grid-Edition.aspx (item number 5).
For my flex project I am making, I'm trying to change the background of my website change to the image I have clicked on. The background in my main page I have set like this:
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/background.png')" borderAlpha="0">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<mx:LinkBar styleName="mainnav" width="600" dataProvider="content" horizontalCenter="0" paddingLeft="20" paddingTop="125"/>
<s:Image top="5" bottom="5" horizontalCenter="50" source="assets/nav.png"/>
<mx:ViewStack id="content">
<mx:HBox id="home"
label="Home">
<component:home/>
</mx:HBox>
<mx:HBox id="bio"
label="Bio">
<component:bio/>
</mx:HBox>
<mx:HBox id="portfolio"
label="Portfolio">
<component:portfolio/>
</mx:HBox>
<mx:HBox id="contact"
label="Contact">
<component:contact/>
</mx:HBox>
</mx:ViewStack>
</s:BorderContainer>
Now from inside my component, I am trying to set the the background of the image you click on.
<fx:Script>
<![CDATA[
import mx.core.Application;
public function changeBackground(event:MouseEvent):void
{
Application.application.backgroundContainer.setStyle('backgroundImage', img1.source);
}
]]>
</fx:Script>
I call this function when you click on an image.
<mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>
But it doesn't work.
So I was wondering how this should be done?
Thank you,
Thomas
you can use BitmapFill and declare all your backgrounds first. Also, be sure your changeBackground function is public in your main application since it will be called from a component.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:component="component.*">
<fx:Script>
<![CDATA[
public function changeBackground(bitmapFillObj:BitmapFill):void
{
backgroundContainer.backgroundFill = bitmapFillObj;
}
]]>
</fx:Script>
<fx:Declarations>
<s:BitmapFill id="_bg1" source="#Embed('assets/bg1.jpg')"/>
<s:BitmapFill id="_bg2" source="#Embed('assets/bg2.jpg')"/>
</fx:Declarations>
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/bg1.jpg')" borderAlpha="0">
<component:home/>
</s:BorderContainer>
</s:WindowedApplication>
And now your component
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="click to show bg 1" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg1)"/>
<s:Button label="click to show bg 2" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg2)"/>
Your just have to adapt the code to your project, clicking on your images instead of buttons. Good luck!
I have a panel2 inside panel1.
When I rollover panel1, I want panel2 to be visible and when mouseOut, panel2 to be invisible.
This is simple with mouseOcer and MouseOut events
Of course trouble is when I rollover panel2 (inside panel1): it starts blinking.
My question is: how to simply correct it ? (of course I would like buttons inside panel2 to be active as well)
regards
Why this code won't work for you?
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Bindable]
private var isOver:Boolean;
]]>
</fx:Script>
<s:Panel horizontalCenter="0" id="panel1" mouseOut="isOver = false" mouseOver="isOver = true" title="Panel1"
verticalCenter="0">
<s:Panel bottom="10" id="panel2" left="10" right="10" title="Panel2" top="10" visible="{isOver}">
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10"
paddingTop="10" verticalAlign="middle" />
</s:layout>
<s:Label id="actionResult" />
<s:HGroup>
<s:Button click="actionResult.text = 'Button 1 clicked'" label="Button1" />
<s:Button click="actionResult.text = 'Button 2 clicked'" label="Button2" />
</s:HGroup>
</s:Panel>
</s:Panel>
</s:Application>
I am creating a vertical button bar with 3 buttons.
How do I force the same width for all three buttons so it doesn't look like crap?
<s:ButtonBar x="10" y="10" dataProvider="{viewstack1}" >
<s:layout>
<s:VerticalLayout gap="-1"/>
</s:layout>
</s:ButtonBar>
<mx:ViewStack id="viewstack1" left="115" paddingRight="0" right="0" bottom="0" top="0">
<s:NavigatorContent label="ABC Products" width="100%" height="100%"><custom:Banner width="100%" height="100%"/></s:NavigatorContent>
<s:NavigatorContent label="Btn Player" width="100%" height="100%"><custom:Player /></s:NavigatorContent>
<s:NavigatorContent label="Btn Cleaner" width="100%" height="100%"><custom:Cleaner width="100%"/></s:NavigatorContent>
</mx:ViewStack>
I had that problem too so I dropped s:VerticalLayout and used s:TileLayout with a fixed column width and it worked
<s:ButtonBar width="142" dataProvider="{almacen}" left="10" top="10">
<s:layout>
<s:TileLayout columnWidth="142"/>
</s:layout>
</s:ButtonBar>
Remember to define the gap, in order to avoid distance between the buttons
<s:layout>
<s:TileLayout verticalGap="-1" />
</s:layout>
Without forcing the width or setting the columnWidth in tile layout you can achieve the same result using horizontalAlign property of the vertical layout.
<s:ButtonBar id="btnBarVertical1" dataProvider="{menuData}" requireSelection="true" labelField="label">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
For icon based button bar apply the same property with iconPlacement to top like this...
<s:ButtonBar id="btnBarVertical2" dataProvider="{menuDataWithIcon}" requireSelection="true" labelField="label"
iconField="icon" iconPlacement="top">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
I hope this will help for dynamic text lengths...
Happy Flexing.