I'm trying to create my own modal window (the built in popup manager won't work for this application) and get objects behind the window to be blurred. The code below is obviously wrong since it doesn't work but can someone point me in the right direction? Do I have to manually blur each object behind the window?
<s:Button label="Testing" left="512" top="300">
</s:Button>
<s:Rect width="1024" height="768" alpha=".5">
<s:fill>
<s:SolidColor color="#000000">
</s:SolidColor>
</s:fill>
<s:filters>
<s:BlurFilter>
</s:BlurFilter>
</s:filters>
</s:Rect>
Your code is obviously just going to blur that black rectangle and nothing else. The issue here is that you want to blur the entire application, except the modal window.
I can think of two solutions:
solution 1
Put your entire application in a separate class and apply the filter to that:
<s:Application>
<s:States>
<s:State name="normal" />
<s:State name="modal" />
</s:States>
<view:Main>
<view:filters.modal>
<s:BlurFilter>
</view:filters.modal>
</view:Main>
<s:Group includeIn="modal">
<view:ModalWindow />
</s:Group>
</s:Application>
(this is not a working code sample: its purpose is just to convey the idea)
Solution 2
Take a screenshot of your app (create a BitMap) before the window pops up. Place that image over your app and apply the blur filter to that image. Then place the modal window. You couldn't click on anything because of the image overlaying everything, but that's the behavior you want from a modal window.
Related
I have a flex list, nothing fancy:
<s:List id="list" left="0" right="0" top="0" bottom="0" borderVisible="false"
dataProvider="{data}" labelField="1" textAlign="left"
itemRenderer="MXML.ItemRenderers.ListItemRenderer" horizontalScrollPolicy="off">
<s:layout>
<s:VerticalLayout horizontalAlign="left"/>
</s:layout>
</s:List>
The following ActionScript code snippets are used to automatically scroll to the bottom of the list when the content does not fit in the visible area. Note that only 1 of these code snippets is used at any given time, but they both have the same effect.
Snippet 1:
list.validateNow();
list.ensureIndexIsVisible(data.length-1);
Snippet 2:
list.validateNow();
list.layout.verticalScrollPosition += list.layout.getVerticalScrollPositionDelta(NavigationUnit.END);
The problem is that these snippets do not scroll completely to the bottom of the list. To illustrate this, I have attached an image: the result on the list after the execution of the above snippets (they both give the same result).
Any help with this problem would be appreciated.
Scrolling to the bottom of a List can be tricky especially when renderers are of different heights, see this blog post for an example of how to accomplish this: http://flexponential.com/2011/02/13/scrolling-to-the-bottom-of-a-spark-list/
In a Flex Mobile project I have a simple itemRenderer where I'm trying to create an "bubble" texting effect, similar to ichat or iphone (just so you get what im going for). But if the text is longer than the screen it runs off, rather than just going down a line.
If I set Group thats holding the rectangle(to create the bubble effect) and the label to 100% it works and keeps it from exceeding the list containers bounds, BUT the group is always at 100% and looks bad, I'm trying to keep the "bubble" JUST AROUND the text.
Anyway so, at the top of my itemRenderer I tried specifying:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">
And here's my layout I figured since msg_container has a width of 100% I was hoping bubble_lable_group would just not exceed that but...it doesnt...it just runs off. I tried setting a max width but that does not allow you to input percents. And just to say it 1 more time. I know if i set bubble_lable_group width to 100% it works, and keeps it from going off the edge, but then the rectangle "bubble" stretches all the way across and just looks bad.
<s:VGroup id="main_container" horizontalAlign="left" paddingBottom="10" paddingTop="10"
verticalAlign="top" width="100%">
<s:VGroup id="name_container" width="100%">
<s:Label id="name_label" fontSize="20" fontWeight="bold" text="Name: " />
</s:VGroup>
<s:VGroup id="msg_container" width="100%" paddingLeft="20">
<s:Group id="bubble_lable_group">
<s:Rect id="the_bubble_shape" width="100%" height="100%" radiusX="15" radiusY="15" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="{grOne}"/>
<s:GradientEntry color="{grTwo}"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label id="msg_txt" width="100%" text="msg text here"
fontSize="18" color="#FFFFFF" paddingTop="15" paddingRight="15" paddingBottom="15" paddingLeft="15"/>
</s:Group>
</s:VGroup>
</s:VGroup>
Any Ideas or tricks I could pull to achieve the effect i'm going for and keep it all inside the parent List container? I'm stumped.
EDIT:
Here's some screenshots to help illustrate the issue:
Well, it looks like you want to set the maxWidth property. Only, you can only set that with pixels, not percents. I am guessing that since you are on mobile, you don't want to be setting absolute pixels. Soooo, what if you did something a bit tricky? Data bind the max width to be the width of the renderer minus the padding of your message container...
<s:Group id="bubble_lable_group" maxWidth="{width - msg_container.paddingLeft}" >
Feels like a hack, but it works for me :)
NOTE: Using the standard ItemRenderer class is quite inefficient in Mobile. It may not be an issue for you, but just be aware of it. See this presentation from 360Flex for more info on that: http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/
I was looking for a different question, but this might be helpful to clipAndEnableScrolling="true"
Newbie here,
I have a skinned button at x=47 y=126 which is later "covered" by a .png that loads dynamically. Once the .png loads, the button disappears. How can I tell Flash Builder 4 to place the .png behind the button so that it is always clickable. FYI: if I move the button away from the graphic, it works just fine, but, for design purposes, I really would like it to stay where it is.
Thanks,
Jason M.
You could also try giving the button a depth value of 1 or higher.
"Spark containers order their items based on their depth property, with the lowest depth in the back, and the higher in the front.Items with the same depth value appear in the order they are added to the container."
<s:Button x="47" y="126" depth="1" skin="customSkin"/>
Conversely you could add a smaller depth to the .png, or if you are drawing them in the same container change the order they are in there. (From the quote above on depth)
If you need to have an image as a background for your button you should place it behind button the following way:
<s:Group>
<s:BitmapImage />
<s:Button />
</s:Group>
I suppose your case is the following:
<s:Group>
<s:Button />
<s:BitmapImage />
</s:Group>
I have a title window based component in Flex 4 that has two states: A & B.
The title window is wider in state B.
I want the title window to animate when I switch states by using the Resize effect to widen the component.
What's the correct way to do this? Should define state specific width for the component or should I just run a transition effect that does this? The first option seems cleaner to me, but I can't figure out how to tell flex to use an effect and figure out by itself how much to resize the component..
Assaf, You can use tween, Parallel, Move and Resize properties for the same.
I implemented something similar to your request: I needed to add a transition effect, (Resize effect), between two states included in a TitleWindow component. This is how I did it:
My two states:
<s:states>
<s:State name="State1"/>
<s:State name="myInfoState"/>
</s:states>
My transition effect:
<s:transitions>
<s:Transition id="myTransition" fromState="*" toState="myInfoState">
<s:Parallel target="{this}">
<s:Resize duration="400"/>
</s:Parallel>
</s:Transition>
</s:transitions>
Note the {this} property. This is because my TitleWindow doesn't have an id.
Finally, you just need to call your currentState declaration as always:
<s:Button click="currentState = 'myInfoState'"/>
I guess that the keyword is {this} instead of the element's id.
Greetings from Pachuca, México!
In my Flex3 app I have some floating windows which contain variable amounts of text. The windows are meant to be user-resizable. Currently, while I can resize the windows OK, I can't get the text in a TextArea in the window to re-flow when the window is resized. I've come across blog postings that there's a size bug in TextArea that means that setting the text content does not re-size the TextArea properly, together with suggested workarounds. In my case, the content stays the same but the geometry of the container changes. What seems to be happening is that the TextArea adopts a fixed size when it is first rendered, and no amount of resizing the container changes that. Can anyone suggest a means of creating a fluid text area in Flex?
Ian
By binding the textArea's width to its container's with, you can manage to keep the margins and borders and don't have to deal with percentages.
Also, your textArea will be resized each time its parent changes in size.
i'm thinking of something like this:
<fx:Script>
<![CDATA[
import spark.layouts.supportClasses.LayoutBase;
protected function onButtonClicked(event:MouseEvent):void
{
currentState = (event.target.selected ? 'largeState' : 'smallState');
}
]]>
</fx:Script>
<s:TitleWindow id="window" width="300" height="200">
<s:TextArea width="{window.width - 10}" height="{window.height - 60}"
text="{IMyConsts.LOREMIPSUM}" borderVisible="false" />
<s:ToggleButton id="btnEffect" bottom="5" click="onButtonClicked(event)"
label="{btnEffect.selected ? 'Go smaller' : 'Go larger'}" />
</s:TitleWindow>
<s:states>
<s:State name="smallState" />
<s:State name="largeState" />
</s:states>
<s:transitions>
<s:Transition fromState="smallState" toState="*">
<s:Resize target="{window}" widthTo="400" heightTo="300" />
</s:Transition>
<s:Transition fromState="largeState" toState="*">
<s:Resize target="{window}" widthTo="300" heightTo="250" />
</s:Transition>
</s:transitions>
I found a great example of fluid windows please do visit it. They provide source code also so may be you would get better idea.
http://examples.adobe.com/flex3/devnet/dashboard/main.html
You could try Text Layout Framework from Adobe:
http://labs.adobe.com/technologies/textlayout/
I can take a whack at this... but don't laugh..
I am not sure if you need to use a particular container but in any event, set the width and height to 100% and use Grid > GridRow and GridItem to size and resize Text Control you can specify the width of the table or just use it just like an HTML table in Flex to manipulate the size of controls and containers....
hope that helps...