I'm building an item renderer in order to have a list of these.
In these item renderer there is a first part that is a text component that should have 2 rows of text and then truncate it, the second part is just a label.
I'm trying to find how to put the text component on two rows.
Can you help me?
thanks
Use a Vgroup. Inside it place two TextArea components.
Place this inside HGroup alongside a label
<s:HGroup left="10" right="10" top="10" bottom="10">
<s:VGroup left="10" right="10" top="10" bottom="10" gap="0">
<s:TextArea id="row1_text" width="400" height="100"/>
<s:TextArea id="row2_text" width="400" height="100"/>
</s:VGroup>
<s:Label id="myLabel"/>
</s:HGroup>
Related
I have a spark Window which contains a VGroup. Inside the VGroup are a couple of HGroups. What's happening is that, in the label whose styleName is "toastBody", if its text is too long then the 'x' closeButton gets pushed off the right edge of the component, and the text runs off the right edge as well. This even though I've set the VGroup's left, top, and right, and have set paddingRight to 10 on the label.
<s:VGroup minHeight="0"
left="16" top="12" right="4">
<s:HGroup width="100%" gap="45">
<s:Label styleName="toastTitle"
id="titleLabel" width="100%" />
<s:Button skinClass="skins.ToastCloseButtonSkin" id="closeButton"
buttonMode="true" useHandCursor="true"/>
</s:HGroup>
<s:HGroup>
<s:BitmapImage left="10" top="16"
source="assets/iconChatBubbleToastMsg.png" id="chatIcon"/>
<s:Label styleName="toastBody"
id="bodyLabel"
paddingRight="10"/>
</s:HGroup>
</s:VGroup>
How can I fix this?
You can set a maxWidth on that label to prevent it from pushing off the right edge, it will start to wordwrap though.
<s:Label styleName="toastBody"
id="bodyLabel"
paddingRight="10" maxWidth="800"/>
I have the following example of a <s:Group> component within Flex 4:
<s:Group left="10" top="10" right="10">
<s:layout>
<s:HorizontalLayout gap="20"/>
</s:layout>
<s:Image id="image" source="{data.imageURL}"/>
<s:Label right="0" styleName="description" text="{data.description}"/>
</s:Group>
Is there a way that I can wrap the <s:Label> component onto a new line if it becomes too long for both the width of the image and label within the group?
Thank you for your time.
To make the Label word wrap the text, it needs to have a width of some kind, so it knows where to start wrapping.
All of these labels have a width specified one way or another, and should word wrap if nec:
<s:Label id="fixedWidth" width="100"/>
<s:Label id="percentWidth" width="25%"/>
<s:Label id="constraintBasedWidth" left="0" right="0"/>
<s:Label id="maxWidth" maxWidth="100"/>
Perhaps you can try using maxWidth on the label. This should put it next to the image and let it wrap longer text.
There is also the maxDisplayedLines property, which you might find useful.
Sounds like you want TileLayout. That will arrange the components horizontally and wrap when it runs out of space.
I have the following 4 labels arranged on a page.
<s:Label id="lblName" x="10" y="13" text="{data.name}"/>
<s:Label id="lblComputer" x="10" y="37.5" text="{data.computer}"/>
<s:Label id="lblModel" x="45" y="37.5" text="{data.model}"/>
<s:Label id="lblCPU" x="43" y="63" text="{data.cpu}"/>
I'm trying to get the layout to look like this:
lblName
lblComputer lblModel
lblCPU
It works if lblComputer is a short name, but if it has a lot of characters, then lblComputer and lblModel run together and are totally unreadable.
Is there a way to change the x-value of lblModel dynamically to "make room" for lblComputer if lblComputer happens to be really long?
Thanks
You can put them in VGroup and HGroup and remove the x,y flex will handle the positioning;
<s:VGroup>
<s:Label id="lblName" text="{data.name}"/>
<s:HGroup>
<s:Label id="lblComputer" text="{data.computer}"/>
<s:Label id="lblModel" text="{data.model}"/>
</s:HGroup>
<s:Label id="lblCPU" text="{data.cpu}"/>
</s:VGroup>
I have a component with 2 states and I have added transitions for switching between the states, where 2 Move affects are applied to 2 different objects. This all works fine, however, after the transition from the first state to the second has completed the second state doesn not render correctly. It contains a TextInput control which is not visible, and a Button with a custom skin that is only sometimes visible and vanishes if you click on it. I have tried called invalidateDisplayList() and validateNow() after loading the second state but that has done nothing. I also have a VBox with a cornerRadius property set, strangely this does not seem to apply anymore and the corners are square, where they displayed correctly before I added the transition in. Does anyone have any ideas?
Thank you!
Here is the code for my states and their transitions:
<!-- different states of this component -->
<mx:states>
<s:State name="useForFree"
enterState="renderState()"/>
<s:State name="enterLicence"
enterState="renderState()"/>
</mx:states>
<!-- transitions between different states -->
<mx:transitions>
<!-- transition from useForFree to enterLicence state -->
<s:Transition id="toEnterLicence"
fromState="useForFree"
toState="enterLicence">
<s:Parallel id="p1"
targets="{[freeBtn, _enterLicenceMask]}">
<s:Move yFrom="250"
yTo="0"
duration="500"
targets="{[freeBtn]}"/>
<s:Move yFrom="289"
yTo="39"
duration="500"
targets="{[_enterLicenceMask]}"/>
</s:Parallel>
</s:Transition>
<!-- transition from enterLicence to useForFree state -->
<s:Transition id="toUseForFree"
fromState="enterLicence"
toState="useForFree">
<s:Parallel id="p2"
targets="{[enterLicenceBtn, _useForFreeMask]}">
<s:Move yFrom="0"
yTo="240"
duration="500"
targets="{[enterLicenceBtn]}"/>
<s:Move yFrom="-250"
yTo="0"
duration="500"
targets="{[_useForFreeMask]}"/>
</s:Parallel>
</s:Transition>
</mx:transitions>
and here is the code for my layout:
<mx:Canvas id="freeStateCanvas"
width="100%">
<mx:VBox width="100%"
horizontalAlign="center"
top="0"
mask="{_useForFreeMask}">
<mx:VBox id="freeBox"
includeIn="useForFree">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:Image source="image path"/>
<s:Spacer height="20"/>
<mx:Button id="connectBtn"/>
<s:Spacer height="10"/>
<mx:HBox >
<s:Label text="some text"/>/>
</mx:HBox>
</mx:VBox>
<s:Label text="some text"
includeIn="useForFree"/>
</mx:VBox>
<mx:Button id="enterLicenceBtn"
includeIn="useForFree"/>
</mx:Canvas>
<!-- enter licence state -->
<mx:Canvas id="enterLicenceStateCanvas"
width="100%">
<mx:VBox id="enterLicenceBox"
mask="{_enterLicenceMask}"
includeIn="enterLicence">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:TextInput id="licenceInput"
width="200"
height="30"/>
<s:Spacer height="20"/>
<mx:Button id="registerBtn"/>
<s:Spacer height="10"/>
<mx:HBox>
<s:Label text="some text"/>
<s:Label text="some more text"/>
</mx:HBox>
</mx:VBox>
<mx:Button id="freeBtn"
includeIn="enterLicence"/>
</mx:Canvas>
where the variables being set as masks are UIComponent instances where I have used their graphics property to draw a rectangle.
Okay, so I found what the problem was, but thanks for trying to help shaunhusain.
In my code you can see I have 2 VBox containers called "freeBox" and "enterLicenceBox" and these actually had a white background and rounded corners, and a DropShadowFilter applied to them (I removed these properties when putting up the code as I felt they were irrelevant, that was a mistake).
This DropShadowFilter was the cause of all my problems and on removing it, the transitions worked fine and all content was rendered correctly. I assume this is just a strange Flex bug, and I didn't find a workaround, I just used images as the box backgrounds for a quick fix.
I've written a flex (mobile) application, that ended up bigger than I expected.
I'm pretty happy with all my classes and everything on my AS files. However, the view turned out really big, as I'm using MXML to layout my app.
I was thinking about creating external components I could call on my view to make it more readable, but am not sure what's the best way to do, or if doing so is the best way at all.
As an example, I have in my view a v:Group with the following:
<s:VGroup width="100%" height="80%" includeIn="normal" horizontalAlign="center" top="70" id="imageGroup">
<s:Label id="lblFile" visible="false" width="98%" textAlign="center" includeInLayout="true" color="0xFFFFFF"/>
<s:BorderContainer id="framingBorder" borderColor="0xFFFFFF" borderWeight="15" cornerRadius="7">
<s:Image id="image" source="{IMAGE_SAMPLE}" horizontalCenter="0"/>
</s:BorderContainer>
<s:BorderContainer id="shareBorder" borderColor="0xFFFFFF" borderWeight="5" height="30" cornerRadius="7" width="{framingBorder.width}" visible="false" buttonMode="true" click="copyToClipboard(lblURL.text)">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="left" gap="3"/>
</s:layout>
<s:Label text="url:" styleName="copyURL" />
<s:BorderContainer borderColor="0xCDCDCD" borderWeight="1" width="{lblURL.width + 5}" height="{lblURL.height + 5}">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Label id="lblURL" text="" styleName="copyURL" />
</s:BorderContainer>
<s:Spacer width="100%" />
<s:HGroup>
<s:Label color="0xFF0000" text="copy" styleName="copyURL" />
<s:Image source="/assets/icons/page_copy_small.png" horizontalCenter="0" horizontalAlign="right"/>
</s:HGroup>
</s:BorderContainer>
</s:VGroup>
Could anyone point me to the right direction as to how I can move this out from the view to make it cleaner, and how to still have access to items inside this block of code (i.e. I would still like to be able to modify lblURL from my view as this is a dynamic value)
Thanks in advance,
You're on the right track, and the link Amy posted has a good example of how to lay it out. You might also be interested in cairngorm and parsely, which are frameworks/tools for a more complete solution.
But for now I think just separating parts of your view into components is a good start.
You can still modify your label in the main app (e.g.):
<views:myBox id="box" />
<s:Button click="{box.myLabel.text = 'changed'}" />
myBox.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<s:Label id="myLabel" text="this is my label" />
</s:BorderContainer>