I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.
Related
I'm trying to hide Year2017 when the mxml page loads up. I'm using visible and includeInLayout attributes but it doesn't seems to be working.
Could somebody help me on this?
Some code written on -
Year2017.mxml,
Year2016.mxml,
Year2015.mxml
MainScreen.mxml
<mx:HBox
<component:PopupOpenerViewStack
id="payeVS"
borderStyle="none"
width="100%"
height="100%"
componentToFocusOn="{controlBar.overviewBut}"
selectedIndex="{ this.mainModel.navigator.selectedIndex }" >
<view1:Year2017
width="100%"
height="100%"
visible="{isVisible}"
includeInLayout="{isVisible}" />
<view1:Year2016
width="100%"
height="100%"/>
<view1:Year2015
width="100%"
height="100%"/>
</component:PopupOpenerViewStack>
</mx:HBox>
The way viewstacks work is they display a child based on index. In this case it will be opened in an Popup. I'd need the internals of the PopupOpener to give an more accurate answer.
Instead of setting the isVisble, can't you change the this.mainModel.navigator.selectedIndex?
It also depends on desired behaviour. What needs to happen if you have the popup open and you change it to visible?
I guess what you want is that Year2007 is not included in the stack, would not that be invisible. Have you tried to use states for it?
Thanks for all your inputs.The issue is resolved.
As Robin mentioned the visible or includeInLayout properties wont work with PopupOpenerViewStack. So I had to read the index values of each item in the viewStack and did payeVS.removeChildAt(0) whenever I wanted to hide an element.
Thanks,
Varatha
I am trying to display HTML text inside the Label in my Adobe Air mobile application, so far
I realized that Label doesn't support HTML, I went through the few solutions I found so far on the web:
Instead of Label - User TextArea and then use:
StyleableTextField(message.textDisplay).htmlText = messageText;
and in the TextArea declaration - specify mobile skin
<s:TextArea editable="false" selectable="false" skinClass="spark.skins.mobile.TextAreaSkin" id="message" x="0" y="0" width="100%" height="100%" paddingLeft="5" paddingRight="5" textAlign="left"/>
First of all, HTML still doesn't work, instead of converted HTML it just shows me ..... garbage, but even if it would have worked - TextArea component looks different than Label and doesn't feet in the design I am implementing.
User RichText component - unfortunately it's not supported in mobile apps
Any other ideas?
Yes, HTML is not supported in the Label and TextArea components for Spark (it was supported in Halo, or the mx components).
The only Flex components that officially do support it are RichText and RichEditableText. The skins for these components are not mobile optimized, but they run on mobile just fine. You may run into some speed issues when using massive amounts of it, but you can still use them (as you can with most, if not all, other components that aren't mobile optimized).
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 used Flex 2/3 for a couple of years and have just come back to it, upgrading to Flex 4. I'm seeing some references to Halo and Spark themes but I never got into themes in my previous work so I'm a bit confused what's going on. Am I correct that Halo was the default theme, or is this all new?
Also, I took a simple Flex 3 MXML and tried to make it work in Flex4:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute" borderStyle="none" borderColor="#000000" cornerRadius="0"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #FF0000]"
width="800" height="600"
frameRate="20">
</mx:Application>
But I get errors, like "Error: The style 'backgroundGradientColors' is only supported by type 'mx.core.Application' with the theme(s) 'halo'."
I tried a few things but each one introduced its own errors.
Flex 4 introduced a new component architecture, called "Spark". "Halo" refers to the Flex 3 component architecture.
an overview of Spark vs Halo components
instructions to use Halo theme in a project (which is what you need to make your example compile)
I've got a problem with rotated buttons in Flex. They seem to contaminate other components' focus rectangles.
Take the following source code, which couldn't be much simpler:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox width="100%" height="100%">
<mx:Spacer height="100" />
<mx:Button rotation="10" />
<mx:TextArea rotation="0" />
</mx:VBox>
</mx:WindowedApplication>
Now execute it. Click in the text area, the focus rectangle is correct. Press tab twice, the focus rectangle aroung the TextArea is rotated!
Is there a fix for this, or should I avoid rotating buttons altogether?
I'm using Flex SDK 3.5.
Thanks,
Daniel
I as well recently stumbled upon this bug. Here's a link to suggested fix.
However, I was wondering if there's a more general solution rather then extending each and every component and overriding adjustFocusRect.
I came up with extending FocusManger and overriding the getter for focusPane as follows:
override public function get focusPane():Sprite
{
var fp:Sprite = super.focusPane;
if (fp && fp.numChildren != 0)
fp.getChildAt(0).rotation = 0;
return super.focusPane;
}
and set it as application's focus manager:
private function onPreinitialize():void
{
application.focusManager = new FocusManagerEx(this);
}
This seems to work, though would be nice if some expert could tell if there aren't any pitfalls I'm not aware of.
Seems like a bug in Flex SDK. I see next options:
disable focus rectangles with focusSkin="{null}"
implement your own skin and handle rotations correctly
move to Spark, since 3.5 is the (currently)
last SDK of third generation
try to fix it yourself (I feel it will be
tricky...)
Also, you may file a bug in Adobe's tracker, but they're deep into 4-th generation of Flex.
Update: 3.6 nightly build contains this bug, too.