CODEWITHSUNDEEP
apache-flexairadobedesktop-application
Marius Nel
Marius Nel

Reputation: 17

adobe air with flex, file new, open and save for Desktop software program

I already have a headache from all the searching. I cannot believe this to be such a confusing topic as every software program we create must be able to save user input, right.

Here is the problem: Novel writing software program Main window has tabnavigator with four navigatorcontent pages 1. characters, 2. worlds, 3. objects, 4. Editor

Each navigatorcontent page has user input fields in the form of textinput component, textarea component, richtexteditor component, etc.

problem 1: The user needs to be able to open a new project and give it a name and state where it must be saved. All user input in the Novel writing software program must be attached to the file name the user specified - cannot give sample code cause I don't even know where to start looking anymore.

Problem 2: If the user has now defined a new project name, all his input from the different input components has to be compiled into a single file that can be saved. (Dan Pichelman gave me a satisfactory answer on using the file.borwseforsave function.) That makes sense, but I first need to get all the user input into that single file. I was convinced that it must be an xml file and that there would be a guide on how to do this but...

Problem 3: This brings me to another problem. All the pages I've researched so far tell me how to load data from an xml file into a component, but not how to write the text from the component into the xml file. And this xml file cannot be the prefs file in the storage directory, it has to be named by the user and then after filling in all his text in the different tabs of the software, must be saved in this xml file and saved where the user chooses.

Problem 4: now that the user put in his text and it is written to an xml file that he has named and set the path to, he goes on vacation and in two weeks opens his saved file to work on his project again. All the data that was stored in the xml must now be written back into the different user input components so he can continue working on his project, truth be told, there are some samles and tutorials on this subject, but again from only a single page perspective not a multiple tab perspective.

Problem 5: Now the user has deleted and/or changed some text he put in when he started, he wrote some more text in the textareas and texteditor and he clicks the file - save button. The xml file or whatever needs to be used must be updated and saved with all the changes overwriting the old file.

Problem 6: The data entered by the user will end up being a book of say 400 pages. This data will obviously be mostly in the richtexteditor component, so whatever method of saving is used, database or xml or whatever, needs to be able to contain all this data.

Thought, if you are working with for instance, microsoft powerpoint, it has multiple pages all containing different user inputs and when you click file - save, it saves all that input into one file. When I as a user opens that saved file it loads all that content back into its place and I can change and manipulate the input and save it again. I would have thought this would be one of the first things adobe or any other software would teach as this is what software programs are all about. But alas, the tutorials on this subject for adobe air for Desktop application is extreeeeemely rare.

My promise is, if someone can help me with this or there is a tutorial out there that covers this properly I will write a tutorial on this for other newbies as I progress step by step.

Upvotes: 0

Views: 634

Answers (1)

RIAstar
RIAstar

Reputation: 11912

I believe the main issue you're facing is the translation from UI input to XML data (and back). This is more of an architectural issue rather than a purely technical one, which may explain why you're having such a hard time finding information.

Presentation Model

There are many approaches to solve your use case, but the bottom line is you need a Presentation Model. This is a model class that is used in concurrence with a specific view. You can translate back and forth between the various Presentation Models and the real data model (in this particular case represented as an XML data structure). This is all a bit abstract, but I'll roughly try to talk you through it. Do realize that what I'm going to show you, is just one of many possible approaches. I believe this is the easiest approach to convey the idea.

PM classes

First we need to create a presentation model per view, i.e. 1. characters, 2. worlds, 3. objects, 4. editor. We will name them so that we know these are models and put them in their own package; e.g.

  • my.app.pm.CharactersModel
  • my.app.pm.WorldsModel
  • my.app.pm.ObjectsModel
  • my.app.pm.EditorModel

('pm' means Presentation Model here)
Each of these classes then recieves properties that match the inputs and/or displays in your view. These can be simple or complex. For instance, suppose the 'characters' view has a 'title' textinput and a list of selectable characters, you'd get a class like this:

public class CharactersModel {
    [Bindable] public var title:String;
    [Bindable] public var characters:IList; //list of Character model instances
    [Bindable] public var selectedCharacter:Character;
}

and each character in that IList is an instance of:

public class Character {
    [Bindable] public var firstname:String;
    [Bindable] public var lastname:String;
}

Notice how the properties are marked Bindable: we'll see why in the next paragraph.

View classes

You could now create a view class that looks somewhat like this:

<fx:declarations>
    <pm:CharactersModel id="pm" />
</fx:declarations>

<s:FormItem label="Title">
    <s:TextInput text="@{pm.title}" />
</s:FormItem>

<s:FormItem label="Edit character">
    <s:DropdownList dataProvider="{pm.characters}" 
                    selectedItem="@{pm.selectedCharacter}" />
</s:FormItem>

<s:FormItem label="First name">
    <s:TextInput text="@{pm.selectedCharacter.firstName}" />
</s:FormItem>

<s:FormItem label="Last name">
    <s:TextInput text="@{pm.selectedCharacter.lastName}" />
</s:FormItem>

(Warning: this is pseudo-code; I wrote that of the top of my head)
See how we use two-way binding to read and write the values of the UI into the Presentation Model?

Conversion

Now all that is left to do is to write a class that will convert your PM's into your XML data structure and the other way around. This is a technical issue, so I'm sure you can find inforamtion about that, but basically

when the user hits the 'save' button you should be able to call something like 

var xmlToSave:XML = Convertor.pmToXml(
    charactersView.pm, worldsView.pm, objectsView.pm, editorsView.pm
);

when the user hits the 'load' button: 

charactersView.pm = Convertor.xmlToCharactersPm(loadedXML);
worldsView.pm     = Convertor.xmlToWorldsPm(loadedXML);
objectsView.pm    = Convertor.xmlToObjectsPm(loadedXML);
editorView.pm     = Convertor.xmlToEditorPm(loadedXML);

Writing to disk

Read this answer I wrote earlier:
Storing/Saving XML in local asset folder in AIR

Upvotes: 1

Related Questions