Good evening geeks,
Last week I figured out how to import V-cards into your web application using flex. And I like to share that with you.
For this example I used a trial of flash builder 4, this is important to know before you start reading this!
What do you need to finish this tutorial with succes?
Intermediate Actionscript 3 skills
AS3corelib
Flash builder 4
First we create a new flex project and assign an creationcomplete event when the application is loaded.
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="init(event)"
To select the approperiate V-card we need a Filereference object, so the next step is to create a private instance of the filereference type:
Next, we assign a function to this event. Create a function called init as shown below:
{
// TODO Auto-generated method stub
fileref = new FileReference();
// assign eventlisteners to
fileref.addEventListener(Event.SELECT,vcardSelected);//this event fires when a vcard is selected
fileref.addEventListener(Event.COMPLETE,vcardDataLoaded);//this event fires when the vcard is loaded succesfully
}
Allright now that is done we are going to add a button to the stage which will interact with the fileref.
To do this just go to design view and drag a button component on the stage, and link this to a click event listener.
You can generate a click handler manually or let flash builder do the work, that choise is up to you.
This illustration shows you how to automaticly generate an event handler for the button.
now we are going to handle the event. When the button is, the user must be able to select a vcard which will be imported afterwards. So we need the filereference.browse() method. By default this gives you all the filetypes available in a certain folder, personally I only like to show the Vcard format types into a folder. This can be done by applying a filefilter to the filereference.
{
// TODO Auto-generated method stub
var vcardFilter:FileFilter = new FileFilter("Vcard (*.vcf)","*.vcf");
fileref.browse(new Array(vcardFilter));
}
Allright we are almost there! Now the fun part can begin! We now have the vcard filereference, we have the event listeners binded to the fileref instance. All we need to do next is to load the vcard data and convert it to a Vcard instance.
When the vcard is selected into the openfiledialog or filereference the vcardSelected
will be fired. Inside this function we are going to call the load function of the filereference. For this feature you need flash player 10! In earlier version of flex or flash player you will not be able to load files locally!
//load the vcard locally
fileref.load();
}
We are almost on the finish line right now! But now you need to be carefull! This is the tricky part! When the file is loaded succesfully the complete function will be fired:
BUT before we can parse the vcard we need to import the AS3Corelib library! Without this library we cannot read this data as a vcard. You can alternativly pass the data as an xml file. But then you need to parse all the data with E4X syntax
Because we are programmers and as they say programmers are lazy… we choose for the easy way.
- First download the AS3corelib
- Extract the “lib” folder to the folder where your flex application is located.
- Import the library as shown below:
var file:FileReference = evt.target as FileReference;//parse the evt.target as a filerefence instance
var data:ByteArray=file["data"];
var vc:Object = VCardParser.parse(data.toString()); //use the Vcardparser included in the AS3corelib to parse the bytearray to an object
var vcard:VCard = vc[0]; //select the first element which contains the Vcard
//show the fullname of the loaded vcard data
Alert.show(vcard.fullName);
}
Allright! isn’t that cool? Now you can import your outlook contacts into your flex application.
Use it to create your own contact manager, email application, newsletter manager etc.
Vcards are an excellent way to share contact information arround the web. So why woudn’t you use it on your website or application?
I really hope you learned somehting reading this tutorial.
If you have any questions. Do not hesitate to reply on this post.
Enjoy the geekness!
You can found a sampleapplication right here, view source is enabled!
Lode
Lode is a Creative-Geek with passion for Graphic design , he is also into the web programming "stuff" like Adobe Flash,air and Flex . Lode loves to learn and loves to share knowledge with others.Follow Lode on http://twitter.com/stealfish
Hi Lode
This is really helpful thanks!
One quick question, I have ported all this code over to Flash and got it working successfully. One thing I am struggling to understand is how to access the email address from the parsed data?
I will look it up for you when I have time, I’m glad you liked the article!
Lode