In my application, I have a List that uses an item renderer.
The renderer has two controls inside a Grid. I want the user to be able to tab through the TextAreas. However, I noticed that I need to tab twice to move to the next TextArea. I think it may be tabbing to the Label. How do I exclude the Label from the tabbing?
The code is below:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
height="100%"
implements="mx.controls.listClasses.IDropInListItemRenderer"
width="100%">
<mx:GridItem height="100%"
colSpan="5"
width="100%">
<mx:VBox width="100%">
<mx:TextArea id="txtFeedback"
tabIndex="0"
wordWrap="true"
maxChars="4000"
fontWeight="bold"
width="100%"/>
<mx:Label fontSize="8" text="Thanks"/>
</mx:VBox>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
To exclude component from tab order set tabEnabled property to false
Just tell the focus to keep on keepin' on when it gets to the label:
<mx:Label fontSize="8" text="Thanks"
focusIn="{focusManager.moveFocus(mx.events.FocusRequestDirection.FORWARD)}"/>
Make sense? :)
Related
I have two tilelists in my mxml application. The items (image and a label) get rendered by an itemrenderer. The functionality I want to achieve: drag image from tilelist #1 and drop it on tilelist #2 (and then a httpservice with sql query will be launched).
How would I tackle this problem? (high level info would suffice).
The main issue I have is that I don't know how to call methods from the main to my itemrenderer. I would like to code the d&d functionality within the renderer but I have no clue how to access watchlist #2 from within the renderer.
Relevant code in main.mxml:
<s:Panel id="panel" width="100%" height="100%" title="Watchlist">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="20"
paddingRight="20" paddingTop="5"/>
</s:layout>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your watched movies"/>
<mx:TileList id="myWatchedList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360"/>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your to watch movies"/>
<mx:TileList id="myToWatchList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360" />
</s:Panel>
The itemrenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
borderVisible="false" horizontalAlign="center" verticalAlign="middle"
xmlns:components="components.*">
<mx:Image source="{data.poster_url}" />
<mx:Label text="{data.movie_title}" height="20" />
</mx:VBox>
You can access methods outside of your item renderer using the outerDocument object. Make sure they are (scope)public methods.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.edu.html
Alternative solution might be to use spark lists instead (with a TileLayout) - then you can easily use drag+drop between lists: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7cfd.html
..and launch service in response to 'drop' event (event will have reference to dropped image)
I'm trying to create a custom view (one that is not 100% listview, for example), mix and matching images and labels.
One issue is that when the label overflows greater than the screen height, the rest just gets off. I had assumed scrolling or touch-drag scrolling would be automatically enabled? How do you enable the touch-drag scrolling that happens naturally in list view?
I wrap all the visual elements of my View inside a Scroller - this will solve that problem
<s:Scroller id="scroller" left="10" right="10" top="10" bottom="10" >
<s:VGroup paddingTop="3" paddingLeft="5" paddingRight="5" paddingBottom="3" horizontalAlign="center">
<s:HGroup horizontalAlign="right" width="100%">
<s:Image scaleMode="letterbox" source="#Embed('images/small_background.GIF')"/>
</s:HGroup>
<s:TextInput id="txtUsername" prompt="Enter user name..." fontFamily="Arial"/>
<s:TextInput id="txtPassword" prompt="Enter password..." fontFamily="Arial"
displayAsPassword="true" />
<s:Button />
<s:Button />
</s:VGroup>
</s:Scroller>
In Flex 4.0, I have a project with a videodisplay, and below it some controls that I've created (play/pause button, HSlider for showing progress, some volume controls...)
The problem arises when the flash is displayed in a window that is too small to fit all controls at their desired width. What I see is that some controls are pushed to the right, out of sight. (Maybe it's because they are in a custom container that acts as a window, but that's needed functionality).
I want to designate the HSlider as having flexible width, so when the user creates a small window, the items in the control bar are still visible, and the HSlider is compressed enough to make that happen...
Cheers!
Edit: the code for my window (it's the VBox that I would like to have variable-sized):
<ns1:CollapsableTitleWindow x="294" y="36.65" backgroundColor="#000000" width="436" height="373" id="wnd" title="test" allowClose="false">
<mx:VideoDisplay width="100%" height="100%" id="vd" autoPlay="false" volume="1"/>
<mx:ControlBar id="ctrlbarLiveVideo1" width="100%">
<mx:Button width="30" height="22" id="btnPlay" click="{doplay();}" icon="{imgPlayButton}"/>
<mx:VBox verticalGap="1" horizontalAlign="right">
<mx:HSlider id="slider" width="100%" invertThumbDirection="true" maximum="{vd.totalTime}" minimum="0" tickInterval="{vd.totalTime/10}" value="{Number(vd.playheadTime)}" />
<mx:Label text="{sec2hms(Number(vd.playheadTime))} / {sec2hms(Number(slider.maximum))}"/>
</mx:VBox>
<mx:HBox id="box" horizontalGap="1" verticalAlign="middle">
<mx:Label id="lblVolume" text = "{String(Math.round(vd.volume*100))+'%'}"/>
<mx:Button label="-" id="btnless" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume -= 0.10}"/>
<mx:Button label="+" id="btnmore" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume += 0.10}"/>
</mx:HBox>
</mx:ControlBar>
</ns1:CollapsableTitleWindow>
Produces this screenshot:
Apparently the answer was: set the minWidth of the HSlider explicitly to 0:
<mx:HSlider minWidth="0" id="slider" width="100%" ... />
And also make the VBox width="100%": (thanks to code90)
<mx:VBox width="100%" verticalGap="1" horizontalAlign="right">
I'm trying to call a function and pass a couple of properties to it however it's complain the object i'm attempting to target is null. Can anyone see where I am going wrong?
<mx:ViewStack id="vs" width="100%" height="100%" y="53">
<mx:Canvas id="view1" label="Community" width="100%" height="100%" backgroundColor="#ff9900" showEffect="WipeDown" hideEffect="WipeUp">
<mx:Label text="Community"/>
</mx:Canvas>
<mx:Canvas id="view2" label="Apps" width="100%" height="100%" backgroundColor="green">
<mx:HTML id="myHTML" width="100%" height="100%"
visible="true"
paintsDefaultBackground="true"
htmlRender="browser_completeHandler(event)"
locationChange="browser_locationChangeHandler(event)"
complete="browser_completeHandler(event)" />
</mx:Canvas>
</mx:ViewStack>
<local:DockBar id="dockbar" horizontalCenter="0" bottom="0" width="100%" height="100" minSize="32" maxSize="80">
<mx:Label visible="false" id="menuLabel" text="Menu" bottom="0" horizontalCenter="0" fontSize="24" color="#ffffff" alpha=".75" />
<mx:Image click="gotoApp('Google','http://www.google.com/')" source="{icon1}" buttonMode="true" useHandCursor="true" toolTip="Nice red" rollOver="turnOn(event)" rollOut="turnOff(event)" />
<mx:Image click="gotoApp('Yahoo','http://www.yahoo.com/')" source="{icon2}" buttonMode="true" useHandCursor="true" toolTip="Cool orange" rollOver="turnOn(event)" rollOut="turnOff(event)" />
</mx:HBox>
</local:DockBar>
and the function looks like this:
private function gotoApp(id:String,url:String):void {
vs.selectedChild=view4;
trace(myHTML);
}
It's returning null the first time I click an image however subsequent attempts traces a value (I assume because it is set then, just not when the app loads). Any ideas how to recognize it when the app loads?
Cheers
Well "view4" isn't a child of your viewstack, so its going to throw a null pointer when it tries to shift its children.
The reason it doesn't throw it the second time is probably due to something like
public function set selectedChild( child : Object ) : void {
if ( child == _selectedChild ) return;
...
}
That's a pretty common pattern in setters.
Assuming "view4" is a typo and you meant "view2", you can set the creationPolicy on your ViewStack to "all". By default, ViewStacks only instantiate the first view when created, setting the creationPolicy to "all" will force all of the views in the stack to get instantiated.
The ViewStack will, by default, create its children lazily in document-order, so only the first child which will be visible on load (i.e view1) will not have a null id in your function. Subsequent clicks on the ViewStack will create the other views (view2, view3 and view4) which is why the error will no longer occur.
So you need to modify your code to include a creationPolicy="all" to fix this:
<mx:ViewStack id="vs" creationPolicy="all" width="100%" height="100%" y="53">
<mx:Canvas id="view1" label="Community" width="100%" height="100%">
...
</mx:Canvas>
...
<mx:Canvas id="view4" label="Apps" width="100%" height="100%">
...
</mx:Canvas>
</mx:ViewStack>
Try setting by using the selectedIndex property instead:
vs.selectedIndex = 1;
This way you're not losing out on the benefits of the deferred instantiation.
In flex UI, my <mx:list> can not be shown completely because of other component shelterring (for example: the refresh button shelter part of it ). How can I make the <mx:list> in front of all other UI component.
This is my code:
<s:HGroup verticalAlign="middle">
<s:Label text="Choose Log File"/>
<mx:ComboBox id ="logFileChooseCombo" dataProvider="{fileNameList}" width="150" color="0x000000"
close="changeLogFilesHandler(event);"/>
<mx:Spacer width="320" />
<s:Label text="Filter or HighLight:" />
<mx:ComboBox id ="filterChooseCombo" dataProvider="{filterOrHighlight}" width="150" color="0x000000"/>
<s:VGroup height="25">
<s:TextInput id="logContentInput" change="filterLogContent()"
enabled="true"
focusIn="clearMyTextInput()"
text="Filter/HightLight"
width="250" height="26"/>
**<mx:List id="searchMsgList"** x="65" y="35" width="200" height="200" fontSize="12"
change="itemChangEvent(event);" />
</s:VGroup>
</s:HGroup>
</mx:Canvas>
<s:HGroup verticalAlign="middle">
<s:Label text="Filter By Log Level:"/>
<mx:ComboBox id ="logLevelCombo" dataProvider="{logLevelsInt}" width="150" color="0x000000"
close="changeLogLevelHandler(event);"/>
<s:CheckBox id="showStack" click="showStackTrace(event)" selected="false"/>
<s:Label text="show stackTraces"/>
<mx:Spacer width="550" />
<s:Button id="test" label="refresh2">
</s:Button>
</s:HGroup>
You have a lot going on, with a mix of nested layouts and a mix of Halo and Spark containers. I'm not sure what layout you're trying to create.
That said, take a look at the swapChildren method. Something like this should work:
this.swapChildren(refresh2, searchMsgList);
But it will most likely hide your refresh button, which seems less than ideal.
A few things strike me:
Inside your first VGroup you have x and y values specified. I thought those values were ignored inide VGroups, which automatically position your children in a vertical line.
I see an closing </mx:Canvas> tag, but not an opening canvas tag. It is unusual to me to use a canvas among all the HGroups and VGroups.