I have a LinkBar which is linked to a viewstack. However, as I change the fontsize of my LinkBar, when I run it, the font size does not change at all! I've tried changing the font using CSS and it doesnt change the font size! Any ideas? Here is the code:
<mx:Canvas x="0" y="0" width="30%" height="100%">
<mx:Label x="10" y="10" text="Help" fontSize="20"/>
<mx:LinkBar x="10" y="49" dataProvider="viewstack1"
direction="vertical" width="175" height="276"
selectedIndex="0"
fontSize="30">
</mx:LinkBar>
</mx:Canvas>
How can I change the font size?! This is driving me crazy.
Either you can change the fontSize in a CSS class, and add that class as the value for the "linkButtonStyleName" style, or you can iterate through all the LinkButtons that have been created in the LinkBar and set the style manually (e.g., in AS3 code).
That being said, fontSize is supposed to be inherited so I'm not sure why your code doesn't work. Just providing some options.
Related
I am using 2 mx:html controls, one of them is hidden an it's used by the application to load external data from a page. When it's done loading the application will scrape the information from this hidden html control.
The hidden control does not have to take up any space but setting the width and height to 1 will break the page for some reason.
In the example below I set the hidHTML visible property to false yet it keeps taking up space in the main window.
Is there a way for hidHTML to have a width and height but not take up any space and not be visible?
<mx:HTML id="gui" location="main.html" enabled="true"
complete="mainComplete(event)"
paddingLeft="0" paddingRight="0" width="100%" height="100%" />
<mx:HTML visible="false" x="1" y="1"
location="http://externalinfo.com"
id="hidHTML"
width="250"
height="100"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
enabled="true"
paddingLeft="0"
paddingRight="0"
/>
You need to also set includeInLayput="false" and then the control will then take up no space.
I'm using several custom MXML components in my Flex 4.5 application.
They all use absolute coordinates to place Image, Label, Line, etc. components and are currently based on a spark.components.BorderContainer:
<?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="160" height="140" borderWeight="0"
creationComplete="init(event)">
<s:layout>
<s:BasicLayout />
</s:layout>
<s:Image id="_avatar" x="0" y="0" width="160" height="120" />
<s:Label id="_username" x="1" y="122" width="80" />
<s:Label id="_bid" x="80" y="122" width="40" textAlign="center" />
<s:Label id="_trix" x="120" y="122" width="36" textAlign="right" />
.... and so on: Images, Labels, Paths, Lines, Rects ....
</s:BorderContainer>
Then I've realized, that I probably don't have to use BorderContainer, because I don't draw/need any borders around my custom components.
But I don't know, what to take instead of it.
I've tried taking <mx:UIComponent> (and removing <s:Layout> tag above), but then I get the error:
'Image' declaration must be contained within the <Declarations> tag since it does not implement 'mx.core.IUIComponent'.
'Label' declaration must be contained within the <Declarations> tag since it does not implement 'mx.core.IUIComponent'.
Any suggestions please? Is there some simplest possible spark "container"? And do I need a "container" at all if I use (and want to use) absolute coordinates?
I recommend you to use s:Group. And you can omit layout declaration as far as BasicLayout is default layout.
UIComponent isn't container so it hasn't default placeholder for children to add them with MXML.
I have a simple Form containing two input boxes. as shown in the code below :
<s:Form>
<s:FormItem width="242" label="Name:">
<s:TextInput x="1" y="0"/>
</s:FormItem>
<s:FormItem width="242" label="Evaluate at:">
<s:TextInput/>
</s:FormItem>
</s:Form>
the problem is the input boxes are y distances apart and i want to bring them a little bit closer. if i had used the <s:VGroup/> or <s:HGroup/>, there is the gap property to close up the gap but that property is not in the Form tag.
How can I close the gaps using the Form tag?
The way I did it was to create a skin for all my forms. Then in CSS I set the skin I created to be the default form skin.
Copy FormSkin create YourFormSkin.mxml
Copy FormItemSkin create YourFormItemSkin
Modify the gap in YourFormSkin.mxml
Modify contentGroup LEFT property in FormItemSkin.mxml, change contentCol:0 would be the least gap. The numbers are relative to the columns setup by the form layout.
Create or edit your CSS file to include:
s|Form{
skinClass:ClassReference("your.project.view.skins.YourFormSkin");
}
s|FormItem{
skinClass: ClassReference("your.project.view.skins.YourFormItemSkin");
}
Now you can customize every form in your application by just editing your two skin files.
You can do Flextras' way of doing it (I don't like it because I'm not a fan of AS code for layout stuff), or you can do this:
<s:Form>
<s:layout>
<s:FormLayout gap="0" />
</s:layout>
<s:FormItem width="242" label="Name:" height="25">
<s:TextInput x="1" y="0"/>
</s:FormItem>
<s:FormItem width="242" label="Evaluate at:" height="25">
<s:TextInput/>
</s:FormItem>
</s:Form>
FormItem is a container, and extends SkinnableContainer. As such, it uses a layout class; and the gap property is usually set on the layout class.
So, assuming you're using one of the layouts that support the gap property, you can do something like this:
myFormItem.layout.gap = myNewGap;
How can I have two labels on a Flex button, one label on top and another on the bottom?
With a Spark architecture button, you should just be able to create a custom button skin.
If you're using the Halo/MX architecture, then you'll have to extend the component. IF you google for multilabel button, a bunch of solutions come up.
You can make custom skin for your button. In that skin's Label, set the maxDisplayedLines attribute to as many lines as you need.
<mx:VBox verticalGap="0" x="60" y="107">
<mx:Canvas cornerRadius="5" backgroundColor="0xff0000" backgroundAlpha=".5" borderStyle="solid">
<mx:Label text="Step 1" fontSize="20" fontStyle="italic" fontWeight="bold" width="171" />
</mx:Canvas>
<mx:Canvas cornerRadius="5" backgroundColor="0xff0000" backgroundAlpha=".5" borderStyle="solid">
<mx:Label text="Initial Request" fontSize="20" fontStyle="italic" fontWeight="bold" width="100%" />
</mx:Canvas>
</mx:VBox>
This is not the correct solution, but you can make a Canvas feel like button if you want. Flexlib has a component where they provide solution for Multiline Label.
I'm pretty new in Flex development. Now I'm learning layouts in Flex. I try to make the following layout.
alt text http://get2know.it/wp-content/uploads/2010/04/2010-04-23_232857.png
The red arrow means when enlarge the window, the red arrow widget will become large too. Can anyone implement this layout in Flex? Thanks in advance.
Here goes Yousui good luck:
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label text="Name:" left="9.8" top="16.4" width="38" height="12"/>
<s:Label text="Description:" left="9.75" top="45.85"/>
<s:Label text="Pattern:" left="9.5" top="76"/>
<s:TextInput left="85" top="10" right="353"/>
<s:TextInput left="85.5" top="40" right="10.5"/>
<s:TextArea left="86" top="70" right="7" bottom="34"/>
<s:Button label="Insert Variable" bottom="6" left="86"/>
<s:Label text="Context:" width="45" top="16" right="300"/>
<s:ComboBox width="150" top="10" right="143"/>
<s:CheckBox label="Automatically insert" top="11" right="10.700012"/>
<s:Button label="Cancel" right="7" bottom="6.450012"/>
<s:Button label="OK" right="84.599976" bottom="6.799988"/>
If you are using Flash Builder Mac or Win version you have the Design view available (Linux Flash Builder doesn't have), this design would be easy to do.
But i guess that you probably aren't used to the way that Flash Builder handles control positioning, if thats the case:
Paste this code in the MXML file you have
Go to Design view and select one of these controls.
You will see in the Properties Panel in the Size and Position section, a sub section named Constrains, there is were you can lock (right, left, top and bottom) the corners of your control in a way that you would get the desired effect that you needed.
Case your Properties panel isn't visible. Go to Window > Show View > Properties.
Hope this helps.
EDIT:
If you have the MinWidth and MinHeight properties specified in your Application tag, beware that when shrinking your Flash App, the layout will adjust your layout to a minimum specified in those properties.
You could do something like this:
<VBox>
<HBox>
... // Name, context...
</HBox>
<HBox>
... // Description...
</HBox>
<HBox>
<Label text="Pattern: "/>
<VBox>
... // text and insert variable
</VBox>
</HBox>
</VBox>
For your scaling, just set your expanding controls to have width and/or heights of "100%" in the MXML.