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
Related
I have to display a lot of controls in my application. And I have done it using Group .
<s:Group clipAndEnableScrolling="true" >
<s:Scroller horizontalScrollPolicy="auto" verticalScrollPolicy="auto" top="0" bottom="0" right="0" left="0">
<s:Group clipAndEnableScrolling="true" >
<s:layout>
<s:VerticalLayout paddingTop="30" paddingLeft="20" paddingRight="20"/>
</s:layout>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:Button id="clearButton" label="Clear"/>
<s:Button id="addEmployee" label="Add"/>
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:Label id="mainLabel" text="Employee Details"/>
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
// some more components
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:DataGrid id="grid">
// Grid column
</s:DataGrid>
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:DataGrid id="dataGrid">
// Grid column
</s:DataGrid>
</s:HGroup>
</s:Group>
</s:Scroller>
</s:Group>
For this code, there is no scrollbar for both Grop and DataGrid. I don't have any idea about this scroller. How to add scrollbar in it? or How can I arrange my components?
First, you have to set height and width property for the Group container scroller. Than you have to set
verticalScrollPolicy="on" horizontalScrollPolicy="on"
for both DataGrid
And here, there is no need of Group before the scroller.
It seems like your group doesn't have a width or height set, but instead the top, right, bottom and left. I'd assume its not triggering the scroller to be necessary based on the contents.
Restrict the dimensions of the scroller component (width and height) and make sure the group's contents are larger than the scroller.
also, you can specify "viewport" on the scroller and pass in the id of the group inside.
the default value for viewport is null.
reference: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Scroller.html
-AJ
I know I have done this before but every time I work with scrollers and group it doesn't work for me and kills my 2 days.
<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
<s:Group clipAndEnableScrolling="true">...... ..... </s:Group></s:Scroller>
This is what I have. I have components inside my group with is more than enough to bring scrollers even on a big monitor. But I am not getting any scrollbars.
Kindly tell me what is that I am doing wrong here. because everytime I fix it and I struggle for the next time.
Thanks.
Try with this
Your scroller parent container need to set non-percentage height/width.
<s:BorderContainer width="120" height="100" backgroundColor="#FFFFFF">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
clipAndEnableScrolling="true" />
</s:layout>
<s:Button label="button (1)" />
<s:Button label="button (2)" />
<s:Button label="button (3)" />
<s:Button label="button (4)" />
<s:Button label="button (5)" />
<s:Button label="button (6)" />
</s:Group>
</s:Scroller>
</s:BorderContainer>
Thank you for all your responses. After setting the minHeight it now works. I am able to achieve the scrollbars as expected (make it look like browser's scroll bar). Below is the code snippet
<s:Scroller width="100%" maxHeight="{this.height}">
<s:VGroup width="100%" minHeight="1000" height="100%" paddingLeft="40" paddingRight="40" paddingTop="0" >
..</s:VGroup></s:Scroller>
Kindly let me know if there is a better approach.
The Same code given by "Raja Jaganathan" itself will work with small modification on scroll parent height and width
Capabilities.screenResolutionX, Capabilities.screenResolutionY will give you the browser width and height respectively.
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 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.
i have an HGroup that contains a DataGroup with an ArrayCollection for a dataProvider.
the DataGroup has a VScrollBar attached to it.
how can i make sure that whenever new rows are added to the ArrayCollection, the dataGroup will scroll down ?
this window is gonna be used for a chat application so whenever new rows are added i need to see the new rows.
i know that i can perform the following command to scroll down: chatScrollBar.value=chatScrollbar.maximum
but what event do i need to attach to in order to run this command whenever a new row is visible ?
<s:HGroup width="100%">
<s:DataGroup id="vertView"
clipAndEnableScrolling="true" width="100%" height="60"
dataProvider="{chatMessages}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="8">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
</s:states>
<s:RichText text="{ data }" textAlign="left" paddingLeft="2" color="black" color.hovered="blue"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:VerticalLayout useVirtualLayout="true"/>
</s:layout>
</s:DataGroup>
<s:VScrollBar id="chatScrollBar" viewport="{vertView}"
height="{vertView.height}" />
</s:HGroup>
You have to set the verticalScrollPosition. See here or here. Or try this for a Spark List:
<s:List id="list"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:VerticalLayout id="vLayout" requestedRowCount="4"
verticalScrollPosition="{vLayout.maxScrollPosition}" />
</s:layout>
</s:list>
Try using Scroller, I think it is as simple as:
<s:Scroller >
<s:HGroup>
...
</s:HGroup>
</s:Scroller>
You shouldn't need to hook up your own scrollbar.