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)
Related
I have a list component in my app which shows some tiles and one can navigate through them horizontally and i was wondering how can i add the swipe functionality in it to the left or to the right,is this supported by default when the app is on a touch device? the list is like:
<s:List id="list2" width="100%" height="100%" dataProvider="{ recordingsShown }"
preinitialize="list2_preinitializeHandler(event)"
selectedIndex="0" visible="false">
<s:layout>
<s:TileLayout id="tilelayout"
useVirtualLayout="true"
orientation="columns"
columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight"
requestedColumnCount="3"
requestedRowCount="2"
paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
verticalGap="10" horizontalGap="10" />
</s:layout>
</s:List>
any help?
Have you tried
list2.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe)
?
That should do the trick.
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? :)
I am creating an iPhone/iPad app using flex 4.5. I am pushing a view(consists of around 10 text inputs) to my view navigator and its taking too long. I tried using property destructionPolicy="never" but that is not going to help as it only works when popping to previous views and not pushView().
This is what my view looks like:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009">
<s:Scroller id="scroller" width="100%" height="100%" horizontalScrollPolicy="off">
<s:HGroup id="idHgroup" width="100%">
<s:Form id="idForm" >
<s:FormItem label="label 1">
<s:TextInput id="amount" />
</s:FormItem>
<s:FormItem /> * 10
</s:Form>
</s:HGroup>
</s:Scroller>
</s:View>
Any ideas how I can optimize this view?
Im very new to Adobe Flex/Actionscript and am trying to create a person search application. So far I have my results showing as a horizontal list, but Id like to include an image above each name as my wonderful paint skills show:
/* listOfPeople is a list of arrays with a["name"] a["sex"] a["dob"] and
a["image"] which is just a URI to the image */
<s:List width="100%" height="100%" id="results" dataProvider="{listOfPeople}" change="clickPerson(event)">
<s:itemRenderer>
<fx:Component>
<s:MobileIconItemRenderer
iconField="{data.image}"
iconHeight="100" iconWidth="100"
label="{data.name} - {data.sex}"
messageField="dob"/>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:HorizontalLayout paddingBottom="100" gap="6" paddingTop="100" paddingLeft="0"
paddingRight="0"
requestedColumnCount="-1"
variableColumnWidth="true"
verticalAlign="bottom"
/>
</s:layout>
</s:List>
Any ideas? The iconField doesn't seem to show at all... even when using the full path with correct backslashes
Cheers
Phil
EDIT:
The image displays fine on the PersonDetails screen, when the person is clicked upon:
<s:HGroup verticalAlign="middle" gap="12" paddingTop="10" paddingLeft="10">
<s:Image source="{data.image}" height="170" width="170"/>
<s:VGroup>
<s:Label text="{data.name}"/>
<s:Label text="{data.dOB}"/>
<s:Label text="{data.sex}"/>
<s:Label text="{data.birthplace}"/>
<s:Label text="{data.colour} {data.ethnicity}"/>
<s:Label text="{data.height}"/>
</s:VGroup>
</s:HGroup>
I think MobileIconItemRenderer displays all elements in a horizontal layout. If you want to display an image on top of the text, you have to create your own renderer or extends MobileIconItemRender and change the way it layouts its elements
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.