Adobe AIR Development

[alexperri7]

Hi guys, I know there is another thread on something similar to this, but it is still different. I made a form for the user to fill out using textInput in mxml, and I want to make it so that when they click a save button, all the input information will show up in another specified state.

The state to show will be a sort of profile page on the user, with their name and some personal information that needs to be saved and would be able to be accessed anytime the app is loaded, and the previous state would be a setup screen for the user to input all their info. Below is the code for the setup screen with text input.

<s:Image includeIn="Setup" x="0" y="0" source="setup_bg.png"/>
    <s:TextInput id="username" includeIn="Setup" x="87.3" y="79.65" width="927" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="address" includeIn="Setup" x="126.3" y="104.65" width="888" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="phone" includeIn="Setup" x="97.3" y="130.6" width="917" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="email" includeIn="Setup" x="87.3" y="155.6" width="927" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="skills1" includeIn="Setup" x="97.3" y="206.6" width="917" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="skills2" includeIn="Setup" x="97.3" y="230.6" width="917" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="skills3" includeIn="Setup" x="97.3" y="253.6" width="917" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="skills4" includeIn="Setup" x="97.3" y="276.6" width="917" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="skills5" includeIn="Setup" x="97.3" y="299.6" width="917" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="education1" includeIn="Setup" x="135.3" y="333.6" width="879" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="education2" includeIn="Setup" x="135.3" y="356.6" width="879" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="education3" includeIn="Setup" x="135.3" y="379.6" width="879" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="education4" includeIn="Setup" x="135.3" y="402.6" width="879" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="education5" includeIn="Setup" x="135.3" y="425.6" width="879" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="experience1" includeIn="Setup" x="157.3" y="461.6" width="857" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="experience2" includeIn="Setup" x="157.3" y="484.6" width="857" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="experience3" includeIn="Setup" x="157.3" y="507.6" width="857" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="experience4" includeIn="Setup" x="157.3" y="530.6" width="857" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:TextInput id="experience5" includeIn="Setup" x="157.3" y="553.6" width="857" height="25"
                 contentBackgroundAlpha="0.38" contentBackgroundColor="#121212" fontSize="16"/>
    <s:Button includeIn="Setup" x="886.35" y="10.35" width="126" height="48" label="Save"
              chromeColor="#202020" fontSize="18"/>

How do I get that information to display in another state, and what do I have to do to the save button to allow it to save the information?

EDIT:

I just checked out the link and the video posted below. I think what will be easiest (and would make most sense) would be to have it all in one state and just have the state saved so that when you go to another state or close the app and go back to that screen, the information still shows.

So after the user inputs information into the textArea boxes, is there an easy way of allowing it to just remain there?

[jtegen]

You can create a class that has the same attribute names (as public) like "username".  That class can be instantiated in a places where all views have access to it (eg. a singleton global state class).  At save, set each attribute and then the other views would have access to the current information.  You can also use an "Object" which can hold unstructured/meta data and set the same types of attributes.  In either case, the data needs to be accessible to all views that care about it.  I typically will also dispatch an event to the singleton to possible let other views know that some state may have changed.

In terms of storing, the class you create can serialize the information in some form that can be saved to the applications storage directory (XML or other) or saved as a SharedObject.  The next time the application starts and the files exists, it can deserialize the information back to the object and then send out an event to lets views know that has "changed" so the views know to update themselves.

Have fun.

[alexperri7]

Thanks for the quick reply. That pretty much sounds like what I'm trying to do. The only problem is, I'm new to this kind of app development. I've never done anything where it requires input from the user, so I don't know how to go about implementing any of the things you mentioned. Are there any resources you know of that could help give me some kind of instruction on how to do those things?

[jtegen]

You are probably using the GUI builder, but you dont have to specify the height of the text input fields.

[alexperri7]

After playing around with it some more, I realized that the textArea does the same thing as textInput, except it has support for multiline input. Therefore, I wouldn't need to use all those textInputs.

Also, instead of having two different states, one for the setup, and one to display the information, would it be easier to have one state where the user would fill out the form, click save and the information would just remain there?

And you are right John, I am using the GUI builder so whenever I scale the text input boxes it adds a width and height to my code.

[jtegen]

In one of my posts here:

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/how-to-go-next-and-and-previous-p...

I uploaded a sample project that has the singleton class in it.  Basically, it is a class that events can be dispatched and listened to, as well as maintain state to any object/view that has a reference to it (instance).

In terms of serialization, there are several threads that discusses SharedObject and preference files. Give a search on that to see if you can find anything of interest.  If you have specific questions, please feel free to ask.

[JohnPinkerton]

Alex,

  Watch this clip, it helped me quite a bit. It's about using the local database functionality to save/display results.

http://tv.adobe.com/watch/adc-presents/using-the-local-database-functionality-in-adobe-air/

[alexperri7]

Thanks guys. Will check them both out now.

[alexperri7]

I just checked out the link and the video. I think what will be easiest (and would make most sense) would be to have it all in one state and just have the state saved so that when you go to another state or close the app and go back to that screen, the information still shows.

So after the user inputs information into the textArea boxes, is there an easy way of allowing it to just remain there?

[austin85251]

I used this Adobe page to get a handle on SharedObject:

http://livedocs.adobe.com/flex/3/html/help.html?content=lsos_3.html