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>
Related
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>
I want to line up my text and combobox in a nice straight line, vertically-aligned to middle, with an HRule underneath it.
It works great until I add a combobox which seems to add some padding I can't get rid of. Meaning, I'm now a few pixels further away from the HRule.
Where does it come from and how can I get rid of it?
Here's my code:
<s:HGroup>
<mx:Image
visible="{meetingList_vs.selectedIndex==0}"
includeInLayout="{meetingList_vs.selectedIndex==0}"
source="{arrow}"
width="5"
height="10"/>
<s:Label
left="0"
text="{ 'In Progress and Upcoming ' + '(' + model.generalInfo.upcomingMeetingList.length + ')'}"
styleName="groupTitleLabel"
buttonMode="true"
click="{meetingList_vs.selectedIndex=0}"/>
<s:Label
left="0"
text="for"
styleName="groupTitleLabel"/>
<s:ComboBox
id="selectedUser"
width="125"
height="25"
borderVisible="false"/>
Thanks for any helpful tips.
Have you set the padding to 0 on the ComboBox? The default for the paddingBottom style is 3.
<s:ComboBox paddingBottom="0" />
<s:HGroup verticalAlign="middle">
or another appropriate setting for verticalAlign e.g. "baseline"
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 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>