I have have successfully set up a list that pulls users from a database and displays them in a list. I'm currently customising the list with an itemrenderer and it's going well. I can pull a user's profile picture, then to the right of it I'll display their name and underneath is their age. The problem is that I can only fit 4 results into the list and I can see the top of the 5th, but there's no scroll bar. I would show a print screen but I populated my database with real info about my friends and their facebook details, so i'd rather not.
In my main mxml programme I have the following code:
<s:List id="resultList" includeIn="loggedin" x="120" y="246"
width="100%" itemRenderer="userList">
<s:layout>
<s:VerticalLayout useVirtualLayout="true" requestedMinRowCount="1"/>
</s:layout>
<s:AsyncListView list="{getUserResult.lastResult}"/>
</s:List>
In userList.mxml I have the following code:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Image id="fbImg" source="http://graph.facebook.com/{data.facebookid}/picture?type=normal" x="0" y="0"/>
<s:Label id="usernameLbl" x="120" y="0" fontFamily="Calibri" fontSize="25" fontWeight="bold" text="{data.firstname} {data.lastname}"/>
<s:Label id="ageLbl" text="{data.dob}" x="120" y="40" />
</s:ItemRenderer>
Does anybody know why I cannot scroll all of my results? I'm sure it's something very simple that I do not know about.
EDIT: I'm so sorry for the horrible formatting. I can't seem to get my code to display nicely.
Assign a height to your list and all will be right in the world. If you don't, it assumes it can extend past the bottom of your page to show all the data even if you cant see it.
<s:List id="resultList" includeIn="loggedin" x="120" y="246"
width="100%" height="100%" itemRenderer="userList">
<s:layout>
<s:VerticalLayout useVirtualLayout="true" requestedMinRowCount="1"/>
</s:layout>
<s:AsyncListView list="{getUserResult.lastResult}"/>
P.S. Great question with lots of detail and perfect amount of code.
I had a problem with List seeing the percent height (height="100%"). So, I had to set it using something like height="{myContainer.height}" and it worked.
Related
I am a beginner for flex. Now i am trying samples using the layout.
See the following scenario,
<s:VGroup horizontalAlign="center">
<s:Label text="VGroup Container"/>
<s:Button label="One"/>
<s:Button label="Two"/>
<s:Button label="Three"/>
</s:VGroup>
<s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<s:Label text="Group with VerticalLayout"/>
<s:Button label="One"/>
<s:Button label="Two"/>
<s:Button label="Three"/>
</s:Group>
Is it having any differences? If it's having, please share it with me. Otherwise tell me which one is better or which one is correct?
Thanks in advance.
The two are equivalent, mostly...
In general if I know the group layout orientation I'll use VGroup/HGroup rather than Group and layout, but that's just my preference, I don't think there's a significant performance difference.
I have places where I need to change orientation, so I'll use Group and change the layout based on the orientation state. VGroup/HGroup won't let you change the layout associated with them.
I have an item renderer tied to an mx:DataGrid column. The renderer used to be inline with the column, but I've moved it out to its own file so I can reuse it across multiple tables.
The problem is that now the renderer doesn't resize (grow/shrink) when the column is resized. So if the user makes the column very small, the contents displayed by the renderer just eat up space and show up over top other columns Any ideas how to make this work?
Code for Item Renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<mx:HBox verticalScrollPolicy="auto" horizontalScrollPolicy="off" width="100%">
<mx:Spacer top="0" bottom="0" width="4" />
<mx:Image id="typeIcon" buttonMode="false" source="{data.type}" />
</mx:HBox>
</s:MXDataGridItemRenderer>
Code for column using that renderer:
<mx:DataGridColumn headerText="Type" dataField="type" itemRenderer="com.myCompany.myProject.TypeRenderer" />
Edit
Adding width=100% to the MXDataGridItemRender didn't work.
I posted my question on Adobe's flex forum -- the solution was to remove the outer s:MXDataGridItemRenderer and to just let the mx:HBox be the root control (no other changes were necessary.)
Strange that he Flex Builder app doesn't give you the option of defining the outermost control, it just plops an s:MXDataGridItemRenderer on top...
I have written a custom skin in Flex 4.5, which shows a custom image. I want this to my background image, so how can I set this skin to the application container?
Thanks
You skin the application like any other component, the skinClass attribute of course! :)
How?
Here is my app.mxml :
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
skinClass="MyAppSkin">
</s:Application>
Now, here I make a simple skin with a background image stretched to fit!
Full source of my MyAppSkin.mxml file here (too big to post here): http://pastebin.com/Hwu9tc1Y
Here is the important part (only part really customized - rest is standard) :
<s:Group id="backgroundRect">
<s:BitmapImage source="#Embed('beach.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/>
</s:Group>
What happens when you apply a skin is that it searches for certain elements by id (backgroundRect being the one we're interested in) and applying them. To customize, simply change the parts of the skin you want. I replaced the standard background solid color fill with this group with an image.
Piece of cake sir!
Make sense?
How about this:
<s:BitmapImage source="#Embed('paper1.jpg')"
left="0" right="0"
width="100%" height="100%"
/>
Set background image and add components
<mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<s:List>
<s:ArrayCollection>
<fx:String>One</fx:String>
<fx:String>Two</fx:String>
<fx:String>Three</fx:String>
<fx:String>Four</fx:String>
<fx:String>Five</fx:String>
</s:ArrayCollection>
</s:List>
</mx:VBox>
</s:Group>
Apologies for all the simple questions but they are born of my sudden and unplanned migration from flex 3 to flex 4.
Ok I have a combo box which I would like to show a list of selectable check boxes.
<s:ComboBox x="181" y="-7" width="233" id="dropISLIST" itemRenderer="IsListFilterCheckBox" dataProvider="{GetIsList.lastResult.ReportFilterList.ReportFilter}" color="#000000"/>
To this end I have built the following item renderer.
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="142" height="22">
<s:CheckBox x="0" y="2" label="{data}" color="#000000"/>
</s:ItemRenderer>
Now that all works fine, how ever, I can not "Check" a box, what I would like to be able to do is have the user be able to select a number of check boxes. And then also figure out what they have checked.
Any help in this regard would be greatly apreciated thank you so much in advance.
Regards
Craig
Try this component. It should do everything you are needing
http://www.carballares.es/en/arcadio/?page_id=352
I have a list that displays photos like them:
<s:List id="thumnPhotosList"
dataProvider="{_model.photoAlbumToCreate.photos}"
height="450"
itemRenderer="PhotoRenderer" >
<s:layout>
<s:TileLayout orientation="columns"
requestedRowCount="4"
requestedColumnCount="3" />
</s:layout>
</s:List>
and PhotoRenderer has a code like this:
......
<mx:Image source="{_model.url + theAlbumPhoto.thumbPhotoURL}"
visible="{theAlbumPhoto.ready}"
maintainAspectRatio="true"
maxWidth="{Constants.DEFAULT_ALBUM_PHOTO_WIDTH}" maxHeight="{Constants.DEFAULT_ALBUM_PHOTO_HEIGHT}" />
........
Which works fine except when the number of photos get high and the scroll bar appears it starts behaving weirdly: it start showing photos different than the ones it supposed to and if I scroll back to beginning and scroll again to new photos other ones appears sometimes the correct ones and sometime not. Not sure how to resolve this, any ideas? you can also recommend different way than using s:List if that makes it easier.
I had the same problem with text List, i think its padding issue, organize the pading for all components it may help.
As I couldn't figure out what the problem was and couldn't reproduce it on stand alone application. I came up with the following code that solved the issue:
<s:Scroller id="photoScroller"
width="100%"
visible="{_model.photoAlbumToCreateOrUpdate.photos.length > 0}"
horizontalScrollPolicy="off" verticalScrollPolicy="auto"
skinClass="com.lal.skins.PhotoAlbumScrollerSkin"
top="50" bottom="0">
<s:DataGroup id="thumnPhotosList"
dataProvider="{_model.photoAlbumToCreateOrUpdate.photos}"
itemRenderer="AlbumPhotoThumbRenderer" >
<s:layout>
<s:TileLayout orientation="rows"
requestedRowCount="4"
requestedColumnCount="4" />
</s:layout>
</s:DataGroup>
</s:Scroller>
I had this same issue with an Image component in a custom item renderer I was using in a TileList. I fixed it without really knowing how, but the problem was the source property of the Image component in the item renderer.
The idea with item renderers is to use the data variable to access the item feeding the renderer. What do the _model and theAlbumPhoto variables refer to in your renderer? What I ended up doing was changing the source property to something more like data.image_path, and it decided to start working.
If you're happy with your solution, hopefully this can at least be of help to someone else.