Scrivere e salvare un file in Flex
di Marcello Ruta
Tool utilizzati: Flex 3
Requisiti: Cononoscenze di Actionscript 3.0
Assets Finali: WritingXMLFile.mxml
Flex SDK: 3.5
Flash Player 10
Premessa
Con questo articoletto vedremo come scrivere e salvare un file XML in locale. Resta però da valutare l’utilità di questo approccio, perché il procedimento più logico sarebbe quello di salvare i dati in un database. Lo spunto per scrivere questo breve tutorial è stato preso da qualche post, sul forum della community. Quindi l’obiettivo finale del tutorial è quello di vedere come fare a scrivere un file fisicamente sul nostro hard disk.
Interfaccia:
L’interfaccia di immissione dei dati è abbastanza semplice, infatti è composta da:
- due TextInput,
- una TextArea
- e tre Button
 |
Ecco il codice MXML dell’interfaccia:
<mx:VBox x = "20" y = "30"> <mx:HBox> <mx:Label text = "Titolo" /> <mx:Spacer width = "18" /> <mx:TextInput id = "title_txt" width = "250" /> </mx:HBox> <mx:HBox> <mx:Label text = "Data news" /> <mx:TextInput id = "data_txt" width = "250" /> </mx:HBox> <mx:HBox> <mx:Label text = "Testo" /> <mx:Spacer width = "18" /> <mx:TextArea id = "news_ta" width = "250" height = "150" /> </mx:HBox> <mx:HBox> <mx:Button id = "btn_0" label = "Genera XML" click = "saveFile(event)" /> <mx:Button label = "Add Node" click = "addNode(event)" /> <mx:Button label = "Clear Fields" click = "clearAllFields(event)" /> </mx:HBox> </mx:VBox>
Analizzando il codice, possiamo notare che abbiamo un wrapper principale costituito da un componente VBox a da una serie di Hbox che contengono: componenti Label, TextInput, Spacer per migliorare l’impaginazione ed infine dei componenti Button ai quali, come potete vedere dal codice, sono già stati assegnati dei comportamenti.
Codice Actionscript:
Adesso focalizziamo la nostra attenzione nella scrittura del codice necessario per dare le funzionalità al nostro editor.
Apriamo un blocco <mx:Script>, all’interno di esso eseguiamo l’import di alcune classi necessarie per lo svolgimento dell’esercizio, nella fattispecie importiamo la Classe XMLListCollection e la Classe Alert per la notifica degli errori. Dopodiché creiamo un blocco di variabili di tipo private, quindi aggiungeremo dei metodi getter per il recupero dei dati dai nostri campi di testo ed infine scriveremo le nostre funzioni per dare funzionalità al nostro editor.
Ma ecco tutto il codice actionscript dell’applicazione con i commenti:
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Alert;
private var xmlNode:XML;
private var xmlListCollections:XMLListCollection;
private var xmlStr:String;
private var byteArr:ByteArray;
private var fileRef:FileReference;
private var fieldsIsFilled:Boolean;
/**
*
* Inizializziamo l'application
*
* */
private function init():void {
xmlListCollections = new XMLListCollection();
}
/**
*
* recuperiamo con dei getter il valore dei campi
*
**/
public function get getTitle():String {
return title_txt.text;
}
public function get getData():String {
return data_txt.text;
}
public function get getNewsTxt():String {
return news_ta.text;
}
/**
*
* controllo sui campi di testo
* se sono vuoti
*
* */
private function checkAllFields():void {
if (!getTitle.length)
fieldsIsFilled = true;
if (!getData.length)
fieldsIsFilled = true;
if (!getNewsTxt.length)
fieldsIsFilled = true;
if (fieldsIsFilled) {
Alert.show("I campi non sono riempiti correttamente!");
}
}
/**
*
* costruiamo l'xml e controlliamo che i campi
* siano riempiti correttamente
*
* */
private function addNode(e:MouseEvent):void {
checkAllFields();
xmlStr = "";
xmlStr += "<items>";
xmlStr += "<newsTitle>" + getTitle + "</newsTitle>";
xmlStr += "<newsData>" + getData + "</newsData>";
xmlStr += "<newsText>" + getNewsTxt + "</newsText>";
xmlStr += "</items>";
xmlListCollections.addItem(XML(xmlStr));
}
/**
*
* Svuotiamo i campi
*
**/
private function clearAllFields(e:MouseEvent):void {
title_txt.text = "";
data_txt.text = "";
news_ta.text = "";
}
/**
*
* salviamo il file
*
* */
private function saveFile(e:MouseEvent):void {
xmlNode = <news>
</news>;
for each (var xml:XML in xmlListCollections) {
xmlNode.appendChild(xml);
}
trace(xmlNode.toXMLString());
if (xmlListCollections.length) {
byteArr = new ByteArray();
byteArr.writeUTFBytes(xmlNode.toXMLString());
fileRef = new FileReference();
fileRef.save(byteArr, "myxml.xml");
} else {
Alert.show("non esiste nessun nodo!");
}
}
]]>
</mx:Script>
Per la scrittura del file sull’HD abbiamo scomodato la Classe FileReference e la Classe ByteArray.
Ecco il link sulla documentazione del ByteArray: http://livedocs.adobe.com/flash/9.0_it/ActionScriptLangRefV3/flash/utils/ByteArray.html
Ecco il link sulla documentazione del FileReference: http://livedocs.adobe.com/flash/9.0_it/ActionScriptLangRefV3/flash/net/FileReference.html
Ecco il link sulla documentazione della Classe XMLListCollection: http://livedocs.adobe.com/flex/3/langref/mx/collections/XMLListCollection.html
Abbiamo finito, al prossimo articolo!