I've faced a similar problem in the past and the solution I finally
decided on was to either use the external api to fire off a new browser
tab using javascript or to use the popup manager to bring up a popup
window within your Flex application.
Using the external
interface would only really help you if you had external items that you
wanted to display, but the general format is like the following:
Code:
public static function gotoLocation(url:String):void
{
ExternalInterface.call("gotoLocation", url);
}
For
assets external to your Flex app (such as documents, pdf, and the like,
this approach works well cause you allow the browser to handle the
opening of the individual file types.
In this situation,
however, you have a contact form that is contained within your Flex
application. For this type of problem, I typically either have a
viewstate change (where the contact form replaces the current view
either via fade or slide, whatev) or I have the contact form display as
a popup.
Using the popup method is quite simple in Flex.
Whenever the user clicks your "contact me" button, you can have the
button dispatch an event that gets handled by the application to fire
the popup. Then you can create your form and add a "submit" button to
the form that dispatches an event containing the data and triggers an
event listener that closes the popup window. The benefit to this
approach is that one the data is received by the application event
handler for the "submit" event, you can display a message to the user
indicating success. Modify info in another area of the application,
whatev. If you are using a model locator like in Cairngorm, you can use
the event to update your model locator.
You can add effects at will and this won't be fancy, but it should give you an idea of how it would work.
I've used 3 files:
popupdemo.mxml (main application)
Popupevent.as (custom event)
contactform.mxml (my popup form)
PopupDemo.mxml
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="500"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
import com.triadfug.ContactForm;
import com.triadfug.event.PopupEvent;
import mx.managers.PopUpManager;
private var contactPop:ContactForm = new ContactForm();
public function initApp():void
{
}
public function popupSubmitHandler(event:PopupEvent):void
{
// Do whatever you want with the data here
// you can access the data directly from the event object
lblName.text = event.itemData.contactName as String;
lblEmail.text = event.itemData.contactEmail as String;
}
public function contactClickHandler(event:MouseEvent):void
{
contactPop = PopUpManager.createPopUp(this, ContactForm, true) as ContactForm;
contactPop.addEventListener(PopupEvent.POPUP_SUBMIT, popupSubmitHandler);
}
]]>
</mx:Script>
<mx:Button id="btnContact" label="Contact Us" bottom="10" horizontalCenter="0" click="contactClickHandler(event)"/>
<mx:Label x="10" y="10" width="100%" height="30" id="lblName"/>
<mx:Label x="10" y="36" width="100%" height="30" id="lblEmail"/>
</mx:Application>
PopupEvent.as
Code:
package com.triadfug.event
{
import flash.events.Event;
public class PopupEvent extends Event
{
public static var POPUP_SUBMIT:String = "PopupSubmit";
// If you only have a single use form, you can declare properties here and send them along
// with the event when you fire the event... to do this just replace itemData in the
// event call with the specific properties. Although it is not considered good practice
// to declare properties as public, in the case of events, doing so will allow your event handler
// to access the values of the properties directly.
public var itemData:Object = new Object();
public function PopupEvent(type:String, itemData:Object=null, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.itemData = itemData;
}
override public function clone():Event
{
return new PopupEvent(type, itemData, bubbles, cancelable);
}
}
}
ContactForm.mxml
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import com.triadfug.event.PopupEvent;
import mx.managers.PopUpManager
public function clickHandler(event:MouseEvent):void
{
var item:Object = new Object();
item.contactName = txtName.text;
item.contactEmail = txtEmail.text;
var submitEvent:PopupEvent = new PopupEvent(PopupEvent.POPUP_SUBMIT, item);
this.dispatchEvent(submitEvent);
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Form left="0" right="0" top="0" bottom="40">
<mx:FormItem label="Name" required="true" errorString="Name is required.">
<mx:TextInput id="txtName"/>
</mx:FormItem>
<mx:FormItem label="Email" required="true" errorString="Email is required.">
<mx:TextInput id="txtEmail"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="btnSubmit" x="157" y="228" label="Submit" click="clickHandler(event)" />
</mx:Panel>
Using
this approach isn't the only way, but it is quick, easy and reusable.
For other popup events, just add new static const for each event type
you want to support.