TIPS COM: KirSizer Flex AIR Image Sizer app Part 5

Saturday, January 17, 2015

KirSizer Flex AIR Image Sizer app Part 5

In this tutorial we will add the ability to choose, whether to select subfolders when selecting a folder, and the ability to remove items from the selection.

Go to the folderSelected() function and use the Alert class to ask the user if they want to select subfolders or not. Give two answer choices - YES or NO. Add a listener which checks the answers and calls doFolder, setting the second parameter to true if the answer was "yes" and to false if it was "no":

private function folderSelected(evt:Event):void {
var file:File = evt.currentTarget as File;
Alert.show("Do you want to select subfolders too?", "Recursive selection?", Alert.YES | Alert.NO, null, warningClose);

function warningClose(ev:CloseEvent):void {
if (ev.detail == Alert.YES) {
doFolder(file, true);
}
if (ev.detail == Alert.NO) {
doFolder(file, false);
}
}
}

In the doFolder() function, add a second parameter - a boolean called isRecursive. Check for its value when youre checking if the child file is a folder in the first loop:

private function doFolder(file:File, isRecursive:Boolean):void {
var picturesInFolder:int = 0;
var childFiles:Array = file.getDirectoryListing();
for (var i:int = 0; i < childFiles.length; i++) {
if (childFiles[i].extension == "png" || childFiles[i].extension == "jpg" || childFiles[i].extension == "jpeg") {
picturesInFolder++;
}
if (childFiles[i].isDirectory && isRecursive) {
doFolder(childFiles[i], true);
}
}
if (picturesInFolder > 0) {
var alreadySelected:Boolean = false;
for (var a:int = 0; a < selectedFiles.length; a++) {
if (selectedFiles[a].type == 1 && selectedFiles[a].path == file.nativePath) {
alreadySelected = true;
}
}
if (!alreadySelected) selectedFiles.addItem( { type:1, path:file.nativePath, name:file.name, num:picturesInFolder } );
updateTotalFiles();
}
}

Now, the removing functionality.

Go to the first NavigatorContent and do 2 things: set TileLists selectionColor and rollOverColor property values to red and pink colors (to make sure they stand out), set its allowMultipleSelection value to true, and add a button which will be responsible for removing items.

Set its label to be dynamic and follow the pattern: "Remove <num> items" where <num> is the number of currently selected items (using mouse). Make it enabled only if there are any selected items, and set its click event handler to removeSelected():

<s:NavigatorContent width="100%" height="100%" hideEffect="fadeOut" showEffect="fadeIn">
<s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10">
<s:Label id="labelSelected">0 files selected</s:Label>
<mx:TileList id="tileList" width="282" height="100%" dataProvider="{selectedFiles}" itemRenderer="TileRenderer" columnWidth="60" rowHeight="60" columnCount="4" allowMultipleSelection="true" selectionColor="0xff0000" rollOverColor="0xff8888" />
<s:Button label="Add folder" width="100%" click="addFolder();" />
<s:Button label="Add files" width="100%" click="addFiles();" />
<s:Button label="{Remove  + tileList.selectedItems.length +  items}" width="100%" enabled="{tileList.selectedItems.length>0}" click="removeSelected();" />
<s:Button label="Continue" width="100%" click="contentStack.selectedIndex = 1;" />
</s:VGroup>
</s:NavigatorContent>

In the removeSelected() function we loop through all selectedItems of tileList using a while loop, and remove the items one by one using selectedIndices property of tileList. Then we update the total file count:

private function removeSelected():void {
while (tileList.selectedItems.length > 0) {
selectedFiles.removeItemAt(tileList.selectedIndices[0]);
}
updateTotalFiles();
}

Thanks for reading!

TIPS COM

Saturday, January 17, 2015

KirSizer Flex AIR Image Sizer app Part 5

No comments:

Post a Comment