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
Related
I opened up flash builder, made a new Flex project, and then inserted that label into the mxml file.
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
<s:Label id="label" text="myLabel"/>
</s:Application>
Now I run this (Using either Internet Explorer or Google Chrome) and I see a simple white screen with nothing on it (http://i101.photobucket.com/albums/m59/plinios/Untitled-4_zps1ef1127d.png).
Is it just me being silly? I've looked everywhere and I could not find a solution. This seems to be a very very simple problem. Why is the label not showing up?
EDIT:
I restarted my PC and re-installed Flash builder. I then tried the simple code above and it still displayed a white screen for Chrome and IE. Interestingly enough, I put a panel for the label to rest on and it displayed in IE, but not in Chrome.
<s:Panel x="41" y="36" width="250" height="200">
<s:Label id="label" x="10" y="-20" text="myLabel"/>
</s:Panel>
EDIT:
When right-clicking the screen, I get a flash menu, not an HTML menu.
Would using the Windows 8 operating system affect this in anyway? I don't see any other reason as to why it wouldn't be showing up normally.
I have solved this issue. The first thing to realize is that only IE will display this correctly. When you start coding, you need to wrap everything in a Spark Group. That's it!
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.
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'm having a very odd issue where I am trying to use a text area to display some text on a mobile AIR app. It works fine whenever I am using the phone emulator on my desktop to debug, however whenever I put the app on my phone, the text displays, then disappears. I've also noticed that if I lock the screen and unlock, the text will display just fine when I come back.
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Program Overview">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
private var text:String = "Hey how are ya";
]]>
</fx:Script>
<s:TextArea text="{text}" editable="false" />
</s:View>
One other interesting thing to note is that it only happens on certain Views, and only on Views in the first ViewNavigator tab. This leads me to believe that there isn't really anything wrong with my use of the TextArea, but something else happening at a higher level in the application. Any ideas on what I should look for?
I think than the problem can be solved if you add the skinClass:
this is for TextArea:
<s:TextArea id="text1" skinClass="spark.skins.mobile.TextAreaSkin" text="{myVar}"/>
this is fot TextInput:
<s:TextInput id="text2" skinClass="spark.skins.mobile.TextInputSkin" text="{myVar}"/>
I hope this help you!
I ended up replacing all of my TextArea's with StyleableTextFields as #Al_Birdy suggested and that took care of the issue. Because you can only use them in AS it made layout and styling a little bit more difficult but it was definitely worth the fix.
I need hand cursor to appear on roll over spark Label. I've tried useHandCursor + buttonMode properties, but no result. And is there anything like htmlText property for spark Label (I need underline)? Any alternative solutions are welcome. Thanks.
Does this code suites your needs?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label buttonMode="true" horizontalCenter="0" text="Test" textDecoration="underline" verticalCenter="0" />
</s:Application>
If you want to have ability to mix styles together you can use the following:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:RichText buttonMode="true" horizontalCenter="0" verticalCenter="0">
<s:content>Hello, <s:span textDecoration="underline">World</s:span>!</s:content>
</s:RichText>
</s:Application>
According to documentation:
The Spark architecture provides three
text "primitives" -- Label, RichText,
and RichEditableText -- as part of its
pay-only-for-what-you-need philosophy.
Label is the fastest and most
lightweight, but is limited in its
capabilities: no complex formatting,
no scrolling, no selection, no
editing, and no hyperlinks. RichText
and RichEditableText are built on the
Text Layout Framework (TLF) library,
rather than on FTE. RichText adds the
ability to render rich HTML-like text
with complex formatting, but is still
completely non-interactive.
RichEditableText is the slowest and
heaviest, but can do it all: it
supports scrolling with virtualized
TextLines, selection, editing,
hyperlinks, and images loaded from
URLs. You should use the fastest one
that meets your needs.