I have the following code (textinput).
<s:TextInput id="label"
text="just testing"
width="100%"
height="200"
contentBackgroundColor="#aaaaaa"
styleName="normalText">
</s:TextInput>
I am having a hard time finding how to align the text ("just testing") to the top.
I checked the Adobe documentation but it seems like there is no vertical alignment property available for this property.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/TextInput.html
I realize that there is a textarea component available but due to performance reasons, I need to use textinput.
topPadding seems to work for mx
<mx:TextInput
id="txt"
paddingTop="5"
text="I am Vertically aligned text"
textAlign="center"
width="250"
height="250">
</mx:TextInput>
Any tips would be greatly appreciated.
Thanks!
Quick version
If the font size never varies, it may suffice to just work with paddingBottom. Because by default the vertical alignment is set to middle, decreasing paddingTop alone will not suffice to move the text up sufficiently; it's set to 1px by default anyway. You'll have to increase paddingBottom too. I cannot give you exact numbers: it depends on the size of the font, so you'll have to play around with the values a bit.
<s:TextInput paddingBottom="6"/>
Reusable version
If you want your solution to be reusable with any kind of font, you'll have to create a custom skin for TextInput. Fortunately, that's not too hard:
Find the spark.skins.spark.TextInputSkin
Copy it and give it a new name, say my.skins.TopTextInputSkin
Find the RichEditableText tag with id textDisplay (it's at the bottom)
Set its verticalAlign property to top
Apply the new skin: <s:TextInput skinClass="my.skins.TopTextInputSkin"/>
Related
In my .mxml file, I am populating two side by side Labels with text data from a database.
Like this:
<s:Label x="10" y="37.5" width="100%" text="{data.city}"/>
<s:Label x="86" y="36.75" width="100%" text="{data.state}"/>
Sometimes, I will get a particularly long piece of text data and this will cause the 2 labels to overlap each other and become totally unreadable.
I think this is happening because I have the x and y set. Is there a way to make this more dynamic?
Thanks!
I would recommend exploring different Flex layout containers.
HGroup
<s:HGroup>
<s:Label text="{data.city}"/>
<s:Label text="{data.state}"/>
</s:HGroup>
This provides the kind of layout it sounds like you're looking for from your example. However, you may also want to look at a few other containers Flex offers.
Form
Flex forms align data in ways that are often useful for creating, well, forms. You may want to consider this for your UI, especially if you're allowing a user to give input that persists back to your DB.
<s:Form>
<s:FormItem label="City:">
<s:Label text="{data.city}"/>
</s:FormItem>
<s:FormItem label="State:">
<s:Label text="{data.state}"/>
</s:FormItem>
</s:Form>
You could do a couple of things:
If you have a function that gets called to set the values of each label, reposition the labels based on the contents in that function.
If the values for the labels are bound to data so that you don't necessarily get notified when the data is refreshed, then it's time to override the updateDisplayList() method of UIComponent, and have it reposition your labels there.
There is a lot of efficiency that can be gained (which will improve your performance) by understanding and using the life-cycle of a UIComponent. There's lots of good info on the subject out there if you just google "Flex component lifecycle"
Good luck!
if you have to display your labels in a limited width, then you can use maxWidth property of labels, this will display your text in label, and if text is long then it will show some text and remaining in ... format.
<s:Label text="{data.city}" maxWidth="150"/>
Try set X of second label with the width of the first label + space + x first label.
So: first label width + space + x of first label
I am trying to set the softKeyboardType to email but when ever i use skinClass="spark.skins.mobile.TextAreaSkin" it doesn't change it but when i take off skinClass="spark.skins.mobile.TextAreaSkin" it does work. The problem is i need the skinClass="spark.skins.mobile.TextAreaSkin" class to allow my application so scroll with out it the text does not stay with in the bounds of the text input boxes. Has anyone seen this problem or another fix the the scrolling problem?
Code examples
<s:TextInput softKeyboardType="email" id="id1" width="100%" skinClass="spark.skins.mobile.TextInputSkin" />
<s:TextArea softKeyboardType="email" id="id2" height="400" width="100%" skinClass="spark.skins.mobile.TextAreaSkin" />
Thank for the help,
Justin
I've checked mobiletheme default.css in flex 4.6 sdk
adobe is using different skins for TextInput and TextArea components
TextArea
{
...
skinClass: ClassReference("spark.skins.mobile.StageTextAreaSkin");
}
TextInput
{
...
skinClass: ClassReference("spark.skins.mobile.StageTextInputSkin");
}
so I think you should use StageTextAreaSkin or StageTextInputSkin as a skinClass for corresponding components
softKeyboardType will work in this case but text position problem will stay, I think you will need to change/fix StageTextAreaSkin or StageTextInputSkin sources for your scrolling
Confronted with this issue, I came up with a workaround which worked in my case.
Use default skin, set your softKeyboardType.
While doing layout for your screen, create a section which contains the uppermost part of your screen and which you can easily collaps or toggle its includeInLayout property, so when you do that, it will make your TextInput or TextArea to appear over the keyboard, bypassing the scroller for that purpose.
Then, when your field receives focus, in focusIn handler, you collaps or toggle this section. This does two good things: first, it lifts your field over the keyboard, and second, it removes focus from your field (at least in my case it did, not sure 100%, if it doesn't, then shift focus manually). This is good because when you set focus on your field once again (yourfield.setFocus()), the cursor will appear where you want it, within the bounds of your field.
Once done typing, you restore top section to its original state from focusOut or softKeyboardDeactivate handlers.
Hope this helps...
seems like it's flex 4.6 bug
http://forums.adobe.com/message/4122095
The answer to my question is possibly easy, yet I haven't found an example of solving it in the web, nor have I found a solution reading ActionScript reference.
My problem is the following: I have a big UIComponent derivate element inside a Scroller (spark.components.Scroller) window. The Scroller class is great because when my canvas element, that changes size dynamically, exceeds its boundaries, scrollbars appear automatically and handle scrolling of my UIComponent inside it.
However, I'd like not just to be able to Scroll using these automatically appeared scroll bars, but also by using a pan tool that I will myself implement (similar to the hand tool in Adobe software, for example). The thing is that I am not able to modify correctly the element's position inside the Scroller window.
I tried, as a first approach, accessing to my elements' 'x' and 'y' properties, however, when changing them, I dont get the resulkts wanted. The code for it is the following (in which, for symplifying reasons, I used a text label as my 'inside' element, and two buttons as an external scroll controller, instead of a hand tool)
Tests.mxml
<fx:Script>
<![CDATA[
protected function der_clickHandler(event:MouseEvent):void
{
text.x += 5;
}
protected function izq_clickHandler(event:MouseEvent):void
{
text.x -= 5;
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Scroller id="sc" x="50" y="50" width="200" height="100">
<s:Group width="100%" height="100%">
<s:Label id="text" width="400" height="10" x="50" y="50" text="blebleblebleblebleblebleblebleblebleblebleble"/>
</s:Group>
</s:Scroller>
<s:Button id="der" x="154" y="182" label="->" click="der_clickHandler(event)"/>
<s:Button id="izq" x="76" y="182" label="<-" click="izq_clickHandler(event)"/>
</s:Application>
And a link to a compiled version, to see what I'm speaking about:
http://megaswf.com/file/1135821
(press 'view fullscreen' if you can't see it)
Help would be really appreciated, as I've been stuck all afternoon with this, and really need it for my project :S
Anyway, many thanks in advance, and regards!
I managed to solve it! (This is the second time this week that I solve something just after posting it here :D).
The property that I had to change is sc.viewport.horizontalScrollPosition+=5; instead of the internal elements 'x' position. And the same for vertical pos.
I am doing this simple project using Flex 4 SDK and I got stuck with this simple problem: I have turned sortable property for AdvancedDataGridColumn to false, but the column header is still rendered as:
As You can see, my label for this header is "06", but the column header is divided and it keeps the place for sort arrow.
How can I change this? I would like my column header to contain only my label.
I know that most probably I need to do some magic with AdvancedDataGridHeaderRenderer but I just started learning Flex and would like to receive some help.
You can add the following property to the AdvancedDataGrid itself:
<mx:AdvancedDataGrid sortExpertMode="true"/>
That will get rid of the annoying extra space for the arrows. An arrow will still show up when you click a column header for sorting, but it will be smaller and less obtrusive. It won't reserve space for itself in the header.
<mx:AdvancedDataGrid sortExpertMode="true">
<mx:columns>
<mx:AdvancedDataGridColumn sortable="false" />
Flex Builder defaults some components to "fit to content" if you don't specify a set width or height. I'm trying to fill a mx:Tile component with Actionscript, but the layout has some strange spacing when I don't specify the width of a component I add to it. Is there a way to set the components to "fit to content" using Actionscript?
Do you still need the tiles to align in columns/rows, or do you want them all to be fit-to-content? If you want the former, good luck, and I hope someone else can answer for my benefit. If you want the latter, you could use FlowContainer (which I got from Appdivision).
// AS3 way
var c:UIComponent = <your component that should fit into parent's content>;
c.percentWidth = 100;
c.percentHeight = 100;
// MXML way
<mx:Canvas>
<mx:Button id="c" width="100%" height="100%"/>
</mx:Canvas>