I have long been a fan of Lynda.com. This site offers some very good video training from highly respected instructors. Since the first Flex 3 series came out I have been really interested in the beyond the basics series and today my wait has come to end. I got the newsletter today telling me it was out. I encourage all of you interested in Flex development to check out all of the Flex resources on Lynda.
I saw this over at http://www.coldfusioncommunity.org and just had to re post it. If you ever needed a reason Ben Forta provides a real reason why you would not want to use it.
In the 1st part of this series we looked at the thought process of using dynamic settings in Flex. In part 2 I want to focus on the implementation of reading in an XML file. While you can find many articles out there about reading XML files this article will focus on the problems of web minded thinking. When I first started this project I that prompted this post I thought, reading a settings file and using the values, that's easy enough. Before we look at a solution we need to take a quick look at the wrong solution. Coming from a web background my mind is very top down procedure driven so I figured this would work. I would create a creation complete event, read in the settings file and use the values. In this example I want to read my settings file and use the panel title setting in my application.
If you are looking to start developing Flex applications and you are coming from the web world you will hear the following statement many times. It takes time to get your head around the event model versus a traditional web request. This is so true and it can't be stressed enough, stop thinking to yourself how would I do this in (insert you preference here). So that kind of ties in to what I wanted to talk about. After you get a few smaller applications under your belt you start to realize that you need to a way get preferences / settings that a user can set. These are called runtime variables because you don't have to recompile the Flex application when these values change. There are two ways (that I know of) about going about this. You can read in a file such as an XML file or you could use flash vars.
This article is going to focus on reading in a XML file but I hope to follow it up with a how to on flash vars because they can be very useful as well. For this tutorial we are going to create a config directory under our src folder. In the config directory we will create a simple XML file that contains some application settings.
The first thing most new developers will do is to read in the XML file using the Flex XML tag. If you were to run the example it would work just fine with 1 small problem. This tag is actually a compile time tag which means that when you compile the application the XML is included. You will not be able to change the file after it has been compiled. This obviously will not work as we need the ability for users to change settings without having to recompile the application. So that leaves us with actually reading in the XML file.
This is actually the solution we are looking for but its a little more than just reading the file. Coming from the web world and writing creation Complete events for all of my small applications I thought this would be easy as Sunday morning. The following is pretty basic code that we have all written at one time or another. The problem with this is we can read in our file but if we go to get the actual values right after that line they may not be ready yet. This all goes back to the idea that you need stop thinking of top down programming. We actually need to read in the settings file and than dispatch an event that the configuration file has been loaded. We can then then listen for that event and get our settings when its ready.
In part 2 of this article we will go through the actual code that consists of a custom class and a custom event class. Any thoughts or comments please let me know.
I got some good suggestions as far as additions go and thought I would throw in 2 quick ones in today. The first is being able to set a max file size in the settings file. By default the max file size is 0 and if you don't change it then its up to the flash player to set the limit. If the user tries to upload a file that is greater than the max file size (measured in bytes) they will get an alert telling them they have exceeded the limit. So once you set a file limit how do we implement it? First off we need to look at how the browse process works.
1.) User clicks browse button 2.) onBrowse Event handler method is called 3.) Create a file reference list 4.) Add a Select event listener 5.) Call the file reference list browse method
Once the browse method is called the OS opens the open dialog box. Once a user selects a file or files the onSelectFile method is called. Now we have to loop through a list of files, if the user only selects one file then we will only do 1 loop. For each iteration we check check to see if the max file size is 0 (default) if so we just add the file to the array collection. If its not we check to see if the size exceeds our limit. If it does we display a friendly error message letting the user know what happened.
The second update was to allow for removing of multiple files which I covered in the last post
You may see many posts like this coming from me and to anyone who does Flex development will probably not get much out of them. With that being said for those of us still learning here is a quick tip for removing data from a data grid. In my latest project CFMU the browse button allows you to select a single file or multiple files to be uploaded. At the time I released the project the data grid did not allow multiple selections so if you wanted to remove an item before uploading you had to do it one at a time. This was pretty because all you had to do was reference the selectedIndex of the data grid. When the user selects a file the remove button is enabled and when the remove button is clicked the onRemove method is called.
This worked great but a user suggested that he should be able to remove multiple items at once. I agree and this actually a pretty easy fix. The first thing we need to do is allow a user to select multiple files once they are added to the data grid. The data grid tag has an attribute allowMultipleSelection that accepts a boolean.
Now that the user can select multiple files we need to update our remove method to delete multiple files. We know that calling selectedIndex will tell us what item is selected but the dg also has a property called selectedIndicies. As you can expect this will return an array of selected indexes. To update our remove method all we need to do is loop over that array remove each item.
After a quick release this morning of my new multiple file upload component Todd Sharp pointed out that I should allow for custom file filters. I knew this would be an easy addition but I wanted to get out a alpha release this morning. When I got home I came up with a pretty quick but effective solution. So if your not familiar with what a file filter is I will give you a quick explanation. When you open a native file chooser on your OS you can control what types of files there are allowed to browse for.
In Action Script these are defined by using the FileFilter class. Here is a quick example of how you would do it, this was browse method before the change. The first argument is the description that is displayed to the user and the 2nd argument is an actual list of extensions using a semi colon delimiter that they can choose from. The important thing to notice is that the browse method takes an array of filters. If you have 1 its a single element if you had 0 it could be an empty array.
Now that you know what they are and how they work I can show you how I made them dynamic. With the uploader component there is a xml settings file. In the settings file I added a filters attribute that looked this.
Then I wrote a simple parser method to build the file filters array and return it back to my main application. The great thing here is that we are creating an empty array and returning that no matter what. This means if the user has no filters it will return an empty array and an empty array is basically attaching NO restrictions, the user can select what ever they want.
Here is a quick screen shot of multiple file filters from my xml above.
When Flex 2 came out there was a lot of buzz on how programmer friendly it was. At the time I thought it sounds great but what current problems of mine would it solve. I then came across an article by Ryan Favro titled Multiple file upload with Flex and ColdFusion. I saw a real problem being solved by Flex and I thought it was a fantastic program. The big problem is at the time I did not know how to use Flex so I could not really customize the component. Fast forward a couple years and I becoming pretty handy with Flex.
The first thing I have decided to release is a mutliple file uploader. The uploader component which I am calling cfmu (I know really original) for the time being should be available in the next couple days. In the meantime I could really use a couple people to test it so drop me a note if you can. The first version of this component will be customizable via a xml settings file. After I get this up and working I plan to build in some runtime css so you can style the whole component via stylesheet. The cool thing for cfers out there not really into Flex you can just drop the cfmu folder in your project root and use the following code.
Here is a quick screen shot of the index test page that comes in the download. I have learned so much creating a bunch of small components like this and the first series will walk you through this component so you can understand how I created it. Also if you have not read the article by Ryan that I linked to above you should really check it out.
I know most of you might of already saw this but I wanted to make sure everyone knew about it. Adobe has released Flex in a week video training over at devnet. This is a course where as the title states will help you get up and running in less than a week. There are some other great video products out there but there is 1 thing that really stands out with this series. When ever you are trying to learn a new product you really need examples to apply your new knowledge to. The series comes with a bunch of exercises where you will have to apply what you just learned to a real world example. This is a perfect way to pick up a new subject.
I have been writing a ton of Flex lately and plan on releasing a bunch of articles in the future. Those who are interested in Flex should definitely pick this up, and why not it's FREE! Even if you are an intermediate developer I still think this program can benefit you. As a ColdFusion developer you really need to get the basics down first. Once you have those down your next question will be how do I get my data in to my Flex application. That answer is a pretty easy one to find but if you are struggling please feel free to drop me an email.
Dan Wilson recently recorded an interview with John Wilker for CFConversations. John Wilker is a Flex & ColdFusion developer and also happens to help run 360 Flex Conference. Dan is pretty knowledgeable on both subjects and I think it really showed in the interview. He had some great questions for John for those wondering where Flex can fit in for them. I was actually not familiar with John before this interview but I really enjoyed the interview and plan on keeping track going forward. Again I think this was a great interview and really think you should check it out!
Update: I have listened to many episodes of The Flex Show so it turns out I knew who John was, I just did not know that was him! Keep up the great work.
