Adding components to Flex 4 app makes screen go blank? - apache-flex

I've been adding some components to a Flex 4 app (it was originally Flex 3 but has been ported). Some of these components make the app go blank when it loads. I'm not even able to see the loading progress bar. Just white.
For example, adding
<s:controlBarContent>
<s:Button label="Admin" />
</s:controlBarContent>
To the root tag causes this. I also was able to make it happen when I tried setting a custom components skin from my style sheet instead of from the skinClass property.
Has anyone else run across this behavior?

Setting the creationPolicy for the navigation container to auto or all fixed it...

Related

Flex: cannot control size of scroll bar thumb when skinned

I have this problem where the scroll bar's thumb is too small when I apply a skin programmatically. There's no problem when I apply it in the CSS.
main.css:
.myscrolls {
thumbUpSkin: Embed(source="thumb-default.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");
The above looks fine, but if I try to change the thumb programmatically in the ActionScript later, the thumb is too small, which causes enormous margins between the thumb and the ends of the scroll bar.
ScrollbarColour.as:
[Embed(source="thumb-non-default.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7")]const cThumbNonDefault:Class;
The problem is most likely related to this warning that I get about the above line:
ScrollbarColour_cThumbNonDefault does not extend the 'DefineSprite' asset base class 'flash.display.Sprite'
But if I take away those scaleGrid* members from the ActionScript, the warning goes away.
I used the Flex 3.5 SDK.
However, I made all those Embeds on the stack. If I made them (static) members of ScrollbarColour, I was able to get those attributes to work. I really don't get this language.

Background Image in Flex

I'm using Flash Builder 4 to create an application. I need to set an background image for the app. I've pulled through the data from XML.
I am using an <mx:Image> for the background-image. But I need elements to then be added inside it. How do I achieve this? I considered using Layers, but dont know how you achieve this.
Any help appreciated.
Cheers
One approach: in our flex application, we have a canvas behind our primary container as in
<mx:Canvas id="bgImg" width="1280" height="800"
backgroundImage="assets/background.jpg" />
<containers:FlashContainer id="mainContainer">
<!-- HBoxs, VBoxes and loads of other components -->
</containers:FlashContainer>
So, the other elements you're looking to add would exist within the internal container with a stationary Canvas "behind" it, which holds your image.
To get this to work in Flex 4 you need to compile with the Halo theme (instead of Spark). We use flex builder and set the following flag under the project compiler preferences.
-theme=${flexlib}/themes/Halo/halo.swc
As in the following image:
In the Flex 3 Model, you can set a backgroundImage on the Application tag, which should, effectively, give your whole application a background image.
In the Flex 4 Model, you need to create a custom skin class for your Application tag. Set the skin using the skinClass style. Since s:Application extends SkinnableContainer, you should be able to use the default SkinnableContainer style as a guide for adding a background image. The default background, I believe, is just a Rect w/ a solid fill.
i m still working in flex3, so i would have used backgroundImage on the application tag, and also do set backgroundSize to 100%, these 2 properties r on the application tag,
may be some help 2 u
tc

How to add Scroller in Main application/Windows of Flex?

I am new to Flex. I am trying to add a scroller in my main application/windows.
Is that possible?
I found out it is possible to add scoller bars in DataGrid, like horizontalScrollPolicy="on".
How to implement it in containers like Group,Panel and etc?
Thanks
The answer differs between flex 4 (spark) components and flex 3 (halo) container components. For spark components such as Groups, you need to wrap your group in a Scroller component to get scrollbars to appear when all of the group's content cannot be viewed. Halo container components, such as Canvas, have built in support for scrollbars, meaning they should show up automatically when all of the canvas's content cannot be viewed. Hope that helps.
The Application tag also has horizontalScrollPolicy and verticalScrollPolicy properties.
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#horizontalScrollPolicy
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#verticalScrollPolicy
In the Spark architecture, you want to look at the Scroller class. This is a good tutorial:
http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling.html

Resizing contents in TabNavigator in flex3

Hi I am working on tabNavigator in flex 3.
I have tileList within it. Contents in the tab comes dynamically so I cannot provide explicitly fixed height and width.
I need to resize the tabs depending on the contents within it.
To resize the tabs I have enabled 'resizeToContent' property of tabNavigator.For some reason it is not resizing as expected.
Could anybody please suggest me the way out of it.
Thanks
Hey thanks Gregor for you reply,
'resizeToContent' works fine for other child items in tabNavigator but fails when I use tileList as child in tabNavigator that time tileList resizes to its default size(4 rows are only visible). So i was wondering if there any way so that I can force tileList to display all its items without putting scrollbars after its default size.
just by invalidating size on creationComplete ,will that resize all tabs for me. I am having n-number of tabs in tabNavigator as user can add tabs and content within it.
Could you please explain me, how can I achieve this.
I am new to flex so just getting confused with its behaviorand struggling with this issue from long time.
resizeToContent only works when the user changes tabs. If you want the tab to resize once the content has been added, you need to listen for the appropriate event (creationComplete probably) and invalidate the size of the TabNavigator. That will give it an opportunity to resize itself.

Can a modal-window-type blur be created for any Component in Flex?

I'm aware of PopUpManager and that custom modal windows can be created.
But let's say I have a simple Canvas(or any component) and when I show it the background needs to be blurred out like how PopUpManager does when a new pop-up is shown.
Is this possible?
Not without a lot of work. The PopupManager puts a blur on Application, and then puts the popup in front of the Application, but as a child of the SystemManager, so it's a sibling to the Application in the display list rather than a child. You could take a screen shot of the Application, run a blur filter over it, and place it as the last child of Application, and then place your component on top of that, but if you do that you might as well just use PopupManager in the first place.
I think the blurring has to do with how you set the alpha level on the component.

Resources