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.
Related
I have a checkbox that does not render as a checkbox and would be displayed as something similar to a button. However, it behaves like a checkbox where I can select it and the handler works with the firing event.
Here is my checkbox. I also tried it outside the or , but it has the same behavior. There is no CSS related to checkbox or the part that I am working on. I am using Flex 4.5 though.
1- Has anybody encounter such a problem?
2- Is there any way to enforce the layout inside a container and item renderer?
<mx:HBox>
<mx:CheckBox id="Test"
label="Label"
fontWeight="bold"
change="Test_changeHandler(event)"/>
</mx:HBox>
If you're using Flex 4.5, why are you using Flex 3 components? Change this to spark components and everything should be much better:
<s:HGroup>
<s:CheckBox id="Test"
label="Label"
fontWeight="bold"
change="Test_changeHandler(event)"/>
</s:HGroup>
mx:CheckBox extends mx:Button, so if you put added css that skinned mx:Button, mx:CheckBox would also get it. It's a shortcoming of flex 3 skinning. You can workaround by explicitly setting the mx:CheckBox skin.
Edit: try this
<mx:HBox>
<mx:CheckBox id="Test"
label="Label"
fontWeight="bold"
skin="{mx.skins.spark.CheckBoxSkin}"
change="Test_changeHandler(event)"
/>
</mx:HBox>
This happend to me also. Fix was to use a mx:Container as parent instead of FlexGlobals.application on the popup component.
for the second question:
I had exactly the same problem and i forced it to take the "original" skin with:
var skinClass:Class = mx.skins.spark.CheckBoxSkin;
theCheckBoxInstance.setStyle("skin", skinClass);
Because in my case the CheckBox was an ItemRenderer for a DataGrid, I've put it in the overridden createChildren methode right after the super call..
I have no explication why this happens. I encountered it in an old monster project where I was charged to make some changes...
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;
Can anyone tell me how can we create a wobbling effect using flex 3?
I need something like the effect which is show in ubuntu when we see an alert or move a folder.
Thank you.
Not sure if there is anything specifically built in Flex to handle the "wobble" effect specifically, but you can combine the Flex Move and bounce effects to create a kind of "wobble":
<?xml version="1.0"?>
<fx:Declarations>
<s:Bounce id="bounceEasing"/>
<s:Elastic id="elasticEasing"/>
<s:Move id="moveRight"
target="{myImage}"
xBy="500"
duration="2000"
easer="{elasticEasing}"/>
<s:Move id="moveLeft"
target="{myImage}"
xBy="-500"
duration="2000"
easer="{bounceEasing}"/>
</fx:Declarations>
<s:Image id="myImage"
source="#Embed(source='assets/logo.jpg')"/>
<s:Button label="Move Right"
x="0" y="100"
click="moveRight.end();moveRight.play();"/>
<s:Button label="Move Left"
x="0" y="125"
click="moveLeft.end();moveLeft.play();"/>
Customize the code above to make smaller movements and link the left and right moves, and you have a wobble. You might also decide to add an event listener for the MouseEvent.ROLL_OVER to play the wobble effect when the mouse rolls over the component.
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 trying to add a cancel icon to my TabBarButtons in Flex 4.0 (Spark), and I've gotten close, but now I'm stuck on getting the icon to be "clickable"
I have seen other approaches, like FlexWiz Blog (http://flexwiz.amosl.com/flex/spark-tabs-with-close-button/), but was hoping to figure out something cleaner.
Using the similar approach found in the Tour de Flex sample on Tabbed Navigation, here is what I have in my skin so far:
<s:HGroup top="5" right="5" left="5" verticalAlign="middle">
<s:Label id="labelDisplay"
textAlign="left"
maxDisplayedLines="1"
top="10"
width="100%">
</s:Label>
<s:Graphic x="16" y="16"
buttonMode="true"
mouseEnabledWhereTransparent="false"
useHandCursor="true"
click="closeEmployeeButtonClicked()"
color="0x00FF00">
<s:BitmapImage source="#Embed('assets/images/icons/close.png')"
height="16" width="16" fillMode="scale"/>
</s:Graphic>
</s:HGroup>
The icon appears in the tab, however, I can't click it. I also tried a button and it's almost like the parent button container does not allow the child to be clickable. I did play with some parent properties (like super.mouseChildren), but couldn't get it to work.
Any thoughts!
Kind regards,
=Dave
I see that the post is pretty old, but I just came along the same issue.
In order for button to be clickable, you need to enable mouseChildren at a TabBarButtonSkin. You can do it as follows:
override protected function commitProperties():void
{
super.commitProperties();
hostComponent.mouseChildren = true;
}
Now your button should be clickable. At least it worked for me.
It's already done in flexlib library. You can find some examples here:
http://flexlib.googlecode.com/svn/trunk/examples/SuperTabNavigator_Sample.swf
and here is its project home page:
http://code.google.com/p/flexlib/
Here's a Flex 4 based tab control that appears to be very well done, full source included:
http://saturnboy.com/2010/08/terrifictabbar-custom-component/