Flex user defined runtime settings Part 2

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.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"> <mx:Script> <![CDATA[ import org.vega.util.ConfigManagerEvent; import org.vega.util.ConfigManager; [Bindable] private var _title:String; private var cm:ConfigManager; private function init():void { cm = new ConfigManager("config/settings.xml"); cm.loadConfig(); _title = cm.getValue("PanelTitle"); } ]]> </mx:Script> <mx:Panel id="myPanel" title="{_title}" width="400" height="200"> </mx:Panel> </mx:Application>

[More]

Flex user defined runtime settings Part 1

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.

<?xml version="1.0" encoding="utf-8"?> <settings> <basedir>C:\Program Files\Apache\http\htdocs\abc\</basedir> </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.

<mx:XML id="myXML" source="config/settings.xml"/> <mx:TextArea text="{myXML.toString()}" width="100%" height="500"> </mx:TextArea>

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.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"> <mx:Script> <![CDATA[ private function init():void { // READ IN XML FILE }</p><p> ]]> </mx:Script> </mx:Application>

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.

CFMU 2 quick updates

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

private function onBrowse(event:MouseEvent):void { _fileRef = new FileReferenceList(); _fileRef.addEventListener(Event.SELECT, onSelectFile); _fileRef.browse(_filters); }

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.

private function onSelectFile(event:Event):void { for (var i:uint = 0; i < event.currentTarget.fileList.length; i ++){ // before we add it to the collection, check the file size restrictions if(_maxFileSize == 0) { _files.addItem(event.currentTarget.fileList[i]); } else if(event.currentTarget.fileList[i].size > _maxFileSize){ Alert.show("The file " + event.currentTarget.fileList[i].name + " exceeds the max file size of " + _maxFileSize, "File Size Error") } } }

The second update was to allow for removing of multiple files which I covered in the  last post

Removing items from a Data Grid

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.

private function onRemove(event:MouseEvent):void { _files.removeItemAt(dgFiles.selectedIndex); }

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.

<mx:DataGrid id="dgFiles" width="100%" height="100%" dataProvider="{_files}" allowMultipleSelection="true"> <mx:columns> <mx:DataGridColumn headerText="File Name" dataField="name" width="{_nameColumnWidth}"/> <mx:DataGridColumn headerText="File Type" dataField="type"/> <mx:DataGridColumn headerText="File Size" dataField="size" labelFunction="bytesToKilobytes"/> </mx:columns> </mx:DataGrid>

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.

private function onRemove(event:MouseEvent):void { var selected:Array = dgFiles.selectedIndices; for each(var i:uint in selected){ _files.removeItemAt(i); } }

CFMU File Filters

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.

private function onBrowse(event:MouseEvent):void { var ff:FileFilter = new FileFilter("Images (*.jpg;*.gif;*.png)","*.jpg;*.gif;*.png"); _fileRef = new FileReferenceList(); _fileRef.addEventListener(Event.SELECT, onSelectFile); _fileRef.browse([ff]); }

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.

<filters> <filter> <description>Images (*.jpg;*.png;*.gif;*.jpeg)</description> <extensions>*.jpg;*.png;*.gif;*.jpeg</extensions> </filter> <filter> <description>ColdFusion (*.cfm;*.cfc;)</description> <extensions>*.cfm;*.cfc;</extensions> </filter> <filter> <description>Text (*.txt;*.doc;*.docx)</description> <extensions>*.txt;*.doc;*.docx</extensions> </filter> </filters>

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.

public function getFilters():Array { var filters:Array = new Array(); for each( var filter:XML in _xml.filters.filter){ filters.push(new FileFilter(filter.description,filter.extensions)); } return filters; }

Here is a quick screen shot of multiple file filters from my xml above.