The topic of setting modal styles came up again today so I thought I’d re-share this tip (I previously covered controlling modal styles for the Alert control in an earlier post, “Changing a modal Alert control’s blur, transparency and transparency color”).
The following example shows how you can set the various modal styles (modalTransparencyBlur, modalTransparency, modalTransparencyColor, and modalTransparencyDuration) on the global selector so it propogates to both the Alert control and pop-ups created using the PopUpManager.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/globally-setting-modal-styles-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
global {
modalTransparencyBlur: 0;
modalTransparency: 0.8;
modalTransparencyColor: black;
modalTransparencyDuration: 500;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
private function showAlert():void {
Alert.show("hello", "world");
}
private function showContactForm():void {
var contactForm:ContactForm = new ContactForm();
PopUpManager.addPopUp(contactForm, this, true);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Alert" click="showAlert();" />
<mx:Button label="ContactForm" click="showContactForm();" />
</mx:ApplicationControlBar>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/globally-setting-modal-styles-in-a-flex-application/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
width="320"
height="240"
showCloseButton="true"
close="titleWindow_close();"
creationComplete="titleWindow_creationComplete();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
private function titleWindow_close():void {
PopUpManager.removePopUp(this);
}
private function titleWindow_creationComplete():void {
PopUpManager.centerPopUp(this);
}
private function sendButton_click():void {
Alert.show("Thanks for the feedback");
titleWindow_close();
}
]]>
</mx:Script>
<mx:Form styleName="plain" width="100%" height="100%">
<mx:FormHeading label="Contact Us" />
<mx:FormItem label="Name:" width="100%">
<mx:TextInput id="feedbackName" width="100%" />
</mx:FormItem>
<mx:FormItem label="Email:" width="100%">
<mx:TextInput id="feedbackEmail" width="100%" />
</mx:FormItem>
<mx:FormItem label="Comments:" width="100%" height="100%">
<mx:TextArea id="feedbackComments" width="100%" height="100%" />
</mx:FormItem>
</mx:Form>
<mx:ControlBar horizontalAlign="right">
<mx:Button id="sendButton"
label="Send"
click="sendButton_click();" />
</mx:ControlBar>
</mx:TitleWindow>
View source is enabled in the following example.
Bruno asks if you can change the modalTransparencyColor and other modalTransparency* styles at runtime. The short answer? “Yes”. The following example shows how you can change the modalTransparencyColor style on-the-fly at runtime using the following code: StyleManager.getStyleDeclaration("global").setStyle("modalTransparencyColor", "haloBlue");
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/globally-setting-modal-styles-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
global {
modalTransparencyBlur: 0;
modalTransparency: 0.8;
modalTransparencyColor: black;
modalTransparencyDuration: 500;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.styles.StyleManager;
private function showAlert():void {
Alert.show("hello", "world");
}
private function setModelTransparencyColorStyle(color:Object):void {
StyleManager.getStyleDeclaration("global").setStyle("modalTransparencyColor", color);
showAlert();
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button label="red"
fillColors="[red,red]"
click="setModelTransparencyColorStyle(0xFF0000);" />
<mx:Button label="haloGreen"
fillColors="[haloGreen,haloGreen]"
click="setModelTransparencyColorStyle('haloGreen');" />
<mx:Button label="haloBlue"
fillColors="[haloBlue,haloBlue]"
click="setModelTransparencyColorStyle('haloBlue');" />
<mx:Button label="haloSilver"
fillColors="[haloSilver,haloSilver]"
click="setModelTransparencyColorStyle('haloSilver');" />
</mx:ApplicationControlBar>
</mx:Application>
View source is enabled in the following example.
Greate, Thanks
Can we change those in runtime?
Something like Application.application.modalTransparency = 0;
We need a single popup situation to have a different overlay from others.
Thanks!
Bruno,
Sure can. Try using something like the following snippet:
StyleManager.getStyleDeclaration("global").setStyle("modalTransparencyColor", "haloBlue");Or, you could set the
modelTransparencyColorstyle on the Alert style instead of the global style:private function showRedAlert():void { StyleManager.getStyleDeclaration("Alert").setStyle("modalTransparencyColor", "red"); Alert.show("hello", "world"); }In fact, I’ll update the entry above and add a full example, and an embedded SWF file w/ view-source enabled.
Hope that helps, sit tight!
Peter
Hello -
I was curious on how you would actually send mail via your ContactForm.mxml app?
- Zsolt
zsolt,
I’m not sure which application you’re talking about, but as for sending mail w/ Flex, there are two possible approaches you could probably take:
1) Redirect the browser to a “mailto:name@address.com” URL and hope that the user’s computer opens an email client like Outlook, Outlook Express, Thunderbird, Gmail, etc.
2) Call a server-side script (could be ColdFusion, PHP, Java, ASP, Ruby, whatever) that takes some form variables and sends the mail via an SMTP type server. This would allow you to create your feedback form in Flex, but obviously requires a little bit more work.
Hope that helps,
Peter
Thanks Peter!
I also posted the same question to the Adobe Flex SDK group and got a similar answer. I have been looking for some example code to post to an ASP or ASPX page (found one in PHP) but I’m not having much luck. If you know of any Flex/ASP or ASPX examples, I would much appreciate your help.
Thank You!
Zsolt
zsolt,
I don’t know ASP (I’m a ColdFusion guy), but this came up as the first result from Google:
http://www.developer.com/net/asp/article.php/3096831
Also, you can try checking out “Invoking .NET objects using the Flex RemoteObject API”, and you can find many more examples of Flex and .NET on Adobe’s Flex Developer Center and on the Flex.org: Flex for .NET Developers section.
Hope that helps,
Peter
Hey peterd,
I couldn’t get back to this before.
Thanks a lot for the explanation and for the example! These will be greatly useful.
Keep up the great work!
Bruno
Thanks Peterd -
I looked at the links you posted. Unfortunatly none were very helpful to me (I’m OK on the .aspx part of it) I was not interested in installing another runtime/framework (WebORB) on my server and the “Invoking .NET objects using the Flex RemoteObject API” was more about calling webservices. I’m looking for a solution in aspx like the one Augie Marcello posted at http://augiemarcello.com/flex-2-basic-email-form/
-Zsolt
Peterd –
I have another question (unrelated to the above) that is probably “Basic” Flex Coding to you. I’m trying to pass variables between to mxml apps.
mxml-1 has two text fields (name/phone). I like to pass the text that is typed into these two fields to mxml-2’s (name/phone) fields when I click the submit button on mxml-1.
Thanks
zsolt,
I haven’t tried it yet w/ Flex apps, but you probably want to try using the LocalConnection class (see http://livedocs.adobe.com/labs/flex3/langref/flash/net/LocalConnection.html).
Peter
I just wanted to say this is definitely the best site for anyone using Flex to get help or advice.
TNX for that.
;)
where could I find a list of the CSSStyleDeclation properties for the Alert class?
for example I know you can setStyle(”ModalTransparancyColor”,green)
But what else is available in place of “ModalTransparencyColor”
creamcheese,
You can find all the supported styles for the Alert control in the Flex 3 documentation (or Flex 2 documentation):
http://livedocs.adobe.com/flex/3/langref/mx/controls/Alert.html#styleSummary
Peter
Maybe it’s just me, but I noticed that setting “modaleTransparencyDuration: 0;” seems to set modalTransparencyBlur to 0. Is anyone else observing this?
Nate,
Good catch! I filed a bug in the public Flex bugbase at http://bugs.adobe.com/jira/browse/SDK-16248 . To get around the issue, it looks like you can set the
modalTransparencyDurationstyle to 1 millisecond.Thanks,
Peter
peter - great stuff thanks for all the posts.
Wondering if you know of any way to control the area of the blur/dim behind a modal.
I have an air app which has custom window border styles which are irregular. SO the app looks nice overlaid on other apps, that is until a modal creates the dim in its standard rectangular shape which extends beyond my window borders in some areas.
Any ideas?
Thanks! –bp
Hi,
is it possible to use modal-transparency-color for just a specific part of application? i mean think about the second example here…when we click on a button alert(or pop-up) will appear with it’s background but panel with buttons will stay untouched.
thanks,
Atakan
Hi Peter, first off all this is a Great Site :)
I have a question on this modal stuff:
The user have a popup that already have a modal state, everytingh is ok, but then the user do something fatal and I want to use a red modalTransparencyColor, I have tryed to alter the modalTransparencyColor but it seams it’s not updating to the red color. But changes after the popup is closed and reopend..
I did som poking in the frameWork…. here you can change the color in modal state. have fun with it trow in a timer and you can make a panick modal hehe..
“<”?xml version=”1.0″ encoding=”utf-8″?”>”
“<”mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
verticalAlign=”middle”
backgroundColor=”white”">”
“<”mx:Style”>”
global {
modalTransparencyBlur: 0;
modalTransparency: 0.8;
modalTransparencyColor: black;
modalTransparencyDuration: 500;
}
“<”/mx:Style”>”
“<”mx:Script”>”
“<”![CDATA[
import mx.core.FlexSprite;
import mx.utils.ObjectUtil;
import mx.managers.SystemManager;
import mx.events.StyleEvent;
import mx.controls.Button;
import mx.managers.PopUpManager;
import mx.events.CloseEvent;
import mx.containers.TitleWindow;
import mx.controls.Alert;
import mx.styles.StyleManager;
private function showAlert():void {
Alert.show(”hello”, “world”);
}
private var popUp:TitleWindow = null;
private function opnePopUp():void
{
popUp = new TitleWindow();
popUp.showCloseButton = true;
popUp.width = 100;
popUp.height = 100;
popUp.title = ‘test popup’;
var but:Button = new Button();
but.label = “red”;
but.addEventListener(MouseEvent.CLICK, setModelTransparencyColorStyleOnOpenPopUp);
popUp.addChild(but);
PopUpManager.addPopUp(popUp,this,true);
PopUpManager.centerPopUp(popUp);
popUp.addEventListener(CloseEvent.CLOSE, onPopUpClose);
}
private function onPopUpClose(event:CloseEvent):void
{
PopUpManager.removePopUp(popUp);
}
private function setModelTransparencyColorStyleOnOpenPopUp(event:MouseEvent):void {
var obj:FlexSprite = systemManager.getChildByName(”modalWindow”) as FlexSprite;
var colorInfo:ColorTransform = obj.transform.colorTransform;
colorInfo.color = 0xFF0000;
obj.transform.colorTransform = colorInfo;
}
private function setModelTransparencyColorStyle(color:Object):void {
StyleManager.getStyleDeclaration(”global”).setStyle(”modalTransparencyColor”, color);
opnePopUp();
}
]]”>”
“<”/mx:Script”>”
“<”mx:ApplicationControlBar dock=”true”">”
“<”mx:Button label=”red”
fillColors=”[0xFF0000,0xFF0000]”
click=”setModelTransparencyColorStyle(0xFF0000);” /”>”
“<”mx:Button label=”haloGreen”
fillColors=”[haloGreen,haloGreen]”
click=”setModelTransparencyColorStyle(’haloGreen’);” /”>”
“<”mx:Button label=”haloBlue”
fillColors=”[haloBlue,haloBlue]”
click=”setModelTransparencyColorStyle(’haloBlue’);” /”>”
“<”mx:Button label=”haloSilver”
fillColors=”[haloSilver,haloSilver]”
click=”setModelTransparencyColorStyle(’haloSilver’);” /”>”
“<”/mx:ApplicationControlBar”>”
“<”/mx:Application”>”
Hi Atakan if you grab the modalWindow like I have you can set the x and y on the FlexSprite!and move it down
Hi,
In the example code, the lines:
Alert.show(”Thanks for the feedback”);
titleWindow_close();
The form actually closes before the Alert box appears, which makes for a choppy transition. It would be good if the form still shows in background. Then, when user clicks “Okay” in Alert box, they both close together.
Obviously this is a problem with Alert being async. Is there a way around this?
Thank you in advance.
Martin,
You could probably try calling titleWindow_close() when the Alert is closed. In the ContactForm component, try something like the following:
<mx:Script> <![CDATA[ import mx.controls.Alert; import mx.managers.PopUpManager; private function titleWindow_close():void { PopUpManager.removePopUp(this); } private function titleWindow_creationComplete():void { PopUpManager.centerPopUp(this); } private function sendButton_click():void { Alert.show("Thanks for the feedback", "title", Alert.OK, null, alert_close); } private function alert_close(evt:Event):void { titleWindow_close(); } ]]> </mx:Script>Peter
Hi Peter,
Thanks for this tip. The obvious is just sometimes too obvious ;).
Martin