Creating Web Page and Email Links In A Flex Application
I had to dig to figure out how to create and display web page and email links in Flex. Part of the challenge also was the actual links are pulled from a database and provided to the Flex application by calling a CFC method. The application (see here for a demo, right click to view source) shows a list of programs in a data grid. When the user clicks on a specific program in the data grid, the details for that program are shown in the right hand panel. The details include an email link to a contact person and a web page link to the program's web page.
The first step is to use the URLRequest class to create a URLRequest object that represents the web page URL or email address. After creating the URLRequest object, you can use the navigateToURL method of package Flash.net to tell the Flex application to open the URL in a new web page (or if its an email address to open a new email with the to line filled in with the email address). As a side note, in ActionScript 3, packages can include methods that are not inside a class (which coming from Java to ActionScript takes some getting used to).
I used a LinkButton component to display the email and web page links. When the user clicks on the LinkButton, Flex passes the selected web page or email address to a function that uses the above steps to either open a new browser window or email.
<mx:FormItem label="Email" fontFamily="Verdana" fontWeight="bold" fontSize="12" >
<mx:LinkButton label="{dg.selectedItem.contactEmail}" id="contactEmailInput" width="350"
click="goToEmail(dg.selectedItem.contactEmail)" textAlign="left" rollOverColor="#ffff66"
textDecoration="underline"/>
</mx:FormItem>
<mx:FormItem label="Web Page" fontFamily="Verdana" fontWeight="bold" fontSize="12">
<mx:LinkButton label="{dg.selectedItem.url}" width="350" click="goToURL(dg.selectedItem.url)"
textAlign="left" rollOverColor="#ffff66" textDecoration="underline"/>
</mx:FormItem>
If you want your links to be underlined, you can use the textDecoration attribute.
Inside the goToEmail and goToURL functions, I use the String passed to the function to create the URLRequest object. I then use the navigateToURL function to open the new browser window with the web page address or open a new email with the email address.
//open URL passed to this method in a new web page
public function goToURL(urlStr:String):void {
//see http://livedocs.macromedia.com/flex/2/langref/flash/net/URLRequest.html
var webPageURL:URLRequest = new URLRequest( urlStr );
//see: http://livedocs.macromedia.com/flex/2/langref/flash/net/package.html#navigateToURL()
navigateToURL(webPageURL, '_blank')
}//end function goToURL
//open new email form in user's email program with emailStr in the to address
public function goToEmail(emailStr:String):void {
//see http://livedocs.macromedia.com/flex/2/langref/flash/net/URLRequest.html
var emailURL:URLRequest = new URLRequest("mailto:" + emailStr );
//see: http://livedocs.macromedia.com/flex/2/langref/flash/net/package.html#navigateToURL()
navigateToURL(emailURL)
}//end goToEmail
Note that when I create the URLRequest object for the email address, I have to add "mailto:" to the front of the emailStr.
As I stated earlier, I really could not find a good example of how to place email and web page links in a Flex application, so I may not even be doing this correctly (though it works in my testing). If you've got a better way, know of some good documentation, or know of some better examples, please post a comment.
UPDATED: Read Max's comment below about how to avoid a problem with IE 7.
Please try again.
That's how i do links - in AS2 it was getURL - but as far as i know navigateToURL is the proper way to do it in AS3
Quick question. Just as in regular HTML if I have two pages in same directory say page1.html and page2.html. On page 1, I have a link that says
<a href="page2.html" target="_self">Details</a>, would link to page2. How do I do this here? Do we have to use "navigateURL" method only? Can't we just say
<mx:LinkButton x="174" y="34" label="Details" click="Page2.mxml" id="aRef" enabled="true"/>
Many thanks,
J
See my blog entry on changing an Application's view in Flex:
http://www.brucephillips.name/blog/index.cfm/2007/...
hope I've answered your question.
Thanks for the info. I have looked at the viewstate example. I can understand this, but still want to clear this confusion. So if I have 2 mxml files, and on one of them I have linkbutton, how do I connect the two mxmls? BTW, the example link is very useful.
thanks again,
JB
You may want to investigate using modules (introduced in Flex 2.0.1) which are a way of creating separate MXML files, compiling them into SWFs and then loading the SWFs are runtime. See:
http://www.brucephillips.name/blog/index.cfm/2007/...
Internet Explorer 7 behaves "internetExplorerly" with this method. It either:
1) opens a new window, writes in "navigaiton canceled" and then opens a mail message or;
2) does not do anything if we use _self, _parent or _top in the navigateToURL function.
Here is the fix:
In your HTML page, set both object and embed parameters to allowScriptAccess="always".
The mail message will then display correctly on Windows.
ref.: http://livedocs.adobe.com/flex/2/langref/flash/net...() (see "Throws" section)
Adding the _self target to the email link till prevent it from opening another blank browser window when you click it
http://blog.dyingstar.com/blog/index.cfm/2007/6/6/...
Added you to my google reader, I'm also new-ish to Flex :)
I am looking for a example, where after submitting a form, we need to display a new page with the new set of data.
Thanks,