Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
New Developer
alexperri7
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: saving form (text input) to show in other state

Wow. Its one thing after the next today. After I fixed the code, I get this error now:

 

 

TypeError: Error #1009: Cannot access a property or method of a null object reference.
	at views::test2Home/onCreationComplete()[/Users/AP_Photography/Documents/Adobe Flash Builder Burrito Preview/test2/src/views/test2Home.mxml:41]
	at views::test2Home/___test2Home_View1_creationComplete()[/Users/AP_Photography/Documents/Adobe Flash Builder Burrito Preview/test2/src/views/test2Home.mxml:5]
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at mx.core::UIComponent/dispatchEvent()[E:\dev\hero_private_beta\frameworks\projects\framework\src\mx\core\UIComponent.as:12977]
	at mx.core::UIComponent/set initialized()[E:\dev\hero_private_beta\frameworks\projects\framework\src\mx\core\UIComponent.as:1757]
	at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\hero_private_beta\frameworks\projects\framework\src\mx\managers\LayoutManager.as:819]
	at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\hero_private_beta\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1157]

 

I'm still able to run it but the state with the checkboxes in it doesn't actually save.

 

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: saving form (text input) to show in other state

hey alex,

 

assuming that this is still your onCreationComplete method's code:

 

 

			protected function onCreationComplete(event:FlexEvent):void
			{
				/** 
				 * here we set the text area's text property to the string stored 
				 * in the textAreaData field
				 * 
				 * Note that you can name it anything you want, just stay consistent
				 */
				textArea.text = p.getProperty("textAreaData") as String;
				textArea1.text = p.getProperty("textAreaData1") as String;
				textArea2.text = p.getProperty("textAreaData2") as String;
				textArea4.text = p.getProperty("textAreaData4") as String;
				textArea5.text = p.getProperty("textAreaData5") as String;
				textArea6.text = p.getProperty("textAreaData6") as String;
				checkBox.selected = p.getProperty("checkBoxData") as Boolean;
				checkBox2.selected = p.getProperty("checkBoxData2") as Boolean;
				checkBox3.selected = p.getProperty("checkBoxData3") as Boolean;
				checkBox4.selected = p.getProperty("checkBoxData4") as Boolean;
				checkBox5.selected = p.getProperty("checkBoxData5") as Boolean;
				checkBox6.selected = p.getProperty("checkBoxData6") as Boolean;
				checkBox7.selected = p.getProperty("checkBoxData7") as Boolean;
				checkBox8.selected = p.getProperty("checkBoxData8") as Boolean;
				checkBox9.selected = p.getProperty("checkBoxData9") as Boolean;
				checkBox10.selected = p.getProperty("checkBoxData10") as Boolean;
				checkBox11.selected = p.getProperty("checkBoxData11") as Boolean;
				checkBox12.selected = p.getProperty("checkBoxData12") as Boolean;
				checkBox13.selected = p.getProperty("checkBoxData13") as Boolean;
				checkBox14.selected = p.getProperty("checkBoxData14") as Boolean;
				checkBox15.selected = p.getProperty("checkBoxData15") as Boolean;
				checkBox16.selected = p.getProperty("checkBoxData16") as Boolean;
				checkBox17.selected = p.getProperty("checkBoxData17") as Boolean;
				checkBox18.selected = p.getProperty("checkBoxData18") as Boolean;
				
			}

 

seems that there might be an object ID issue. check to see if all your checkboxes and textareas are named properly. also whats on line 41? thats where the error is coming from. good luck!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
alexperri7
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: saving form (text input) to show in other state

 

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
actionBarVisible="false" contentBackgroundAlpha="1.0"
creationComplete="onCreationComplete(event)" tabBarVisible="false" title="Portfolio">
<!--
make sure to set up your creationComplete attribute to the function you
initially want to run
!-->
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;

import spark.core.managers.PersistenceManager;

/**
* set the persistance manager object outside of any functions
* so it is accessible by any functions in your application
*/
private var p:PersistenceManager = new PersistenceManager();


/**
* set up your initial items using the creation complete event dispatched when
* your app is loaded
*/
protected function onCreationComplete(event:FlexEvent):void
{
/**
* here we set the text area's text property to the string stored
* in the textAreaData field
*
* Note that you can name it anything you want, just stay consistent
*/
textArea.text = p.getProperty("textAreaData") as String;
textArea1.text = p.getProperty("textAreaData1") as String;
textArea2.text = p.getProperty("textAreaData2") as String;
textArea4.text = p.getProperty("textAreaData4") as String;
textArea5.text = p.getProperty("textAreaData5") as String;
textArea6.text = p.getProperty("textAreaData6") as String;
checkBox.selected = p.getProperty("checkBoxData") as Boolean;
checkBox2.selected = p.getProperty("checkBoxData2") as Boolean;
checkBox3.selected = p.getProperty("checkBoxData3") as Boolean;
checkBox4.selected = p.getProperty("checkBoxData4") as Boolean;
checkBox5.selected = p.getProperty("checkBoxData5") as Boolean;
checkBox6.selected = p.getProperty("checkBoxData6") as Boolean;
checkBox7.selected = p.getProperty("checkBoxData7") as Boolean;
checkBox8.selected = p.getProperty("checkBoxData8") as Boolean;
checkBox9.selected = p.getProperty("checkBoxData9") as Boolean;
checkBox10.selected = p.getProperty("checkBoxData10") as Boolean;
checkBox11.selected = p.getProperty("checkBoxData11") as Boolean;
checkBox12.selected = p.getProperty("checkBoxData12") as Boolean;
checkBox13.selected = p.getProperty("checkBoxData13") as Boolean;
checkBox14.selected = p.getProperty("checkBoxData14") as Boolean;
checkBox15.selected = p.getProperty("checkBoxData15") as Boolean;
checkBox16.selected = p.getProperty("checkBoxData16") as Boolean;
checkBox17.selected = p.getProperty("checkBoxData17") as Boolean;
checkBox18.selected = p.getProperty("checkBoxData18") as Boolean;

}


/**
* When the user hits the save button this function is performed
*/
protected function saveBtn_clickHandler(event:MouseEvent):void

{
/**
* set the textAreaData key to the value of the text area object below
*/
p.setProperty("textAreaData", textArea.text);
p.setProperty("textAreaData1", textArea1.text);
p.setProperty("textAreaData2", textArea2.text);
p.setProperty("textAreaData4", textArea4.text);
p.setProperty("textAreaData5", textArea5.text);
p.setProperty("textAreaData6", textArea6.text);


/** save the data to the disk */
p.flush();


}


/**
* When the user hits the save button this function is performed
*/
protected function saveBtn2_clickHandler(event:MouseEvent):void

{
/**
* set the textAreaData key to the value of the text area object below
*/
p.setProperty("checkBoxData", checkBox.selected);
p.setProperty("checkBoxData2", checkBox2.selected);
p.setProperty("checkBoxData3", checkBox3.selected);
p.setProperty("checkBoxData4", checkBox4.selected);
p.setProperty("checkBoxData5", checkBox5.selected);
p.setProperty("checkBoxData6", checkBox6.selected);
p.setProperty("checkBoxData7", checkBox7.selected);
p.setProperty("checkBoxData8", checkBox8.selected);
p.setProperty("checkBoxData9", checkBox9.selected);
p.setProperty("checkBoxData10", checkBox10.selected);
p.setProperty("checkBoxData11", checkBox11.selected);
p.setProperty("checkBoxData12", checkBox12.selected);
p.setProperty("checkBoxData13", checkBox13.selected);
p.setProperty("checkBoxData14", checkBox14.selected);
p.setProperty("checkBoxData15", checkBox15.selected);
p.setProperty("checkBoxData16", checkBox16.selected);
p.setProperty("checkBoxData17", checkBox17.selected);
p.setProperty("checkBoxData18", checkBox18.selected);


/** save the data to the disk */
p.flush();


}

]]>
</fx:Script>
<s:states>
<s:State name="State1"/>
<s:State name="Portfolio"/>
<s:State name="CheckList"/>
<s:State name="Expenses"/>
<s:State name="Agenda"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Image includeIn="State1" x="0" y="0" width="100%" height="100%" source="profile_bg.png"/>
<s:TextArea id="textArea" includeIn="State1" x="18" y="74" width="985" height="40"
color="#C8C8C8" contentBackgroundAlpha="0.38" contentBackgroundColor="#000000"
fontSize="16" text="Name:"/>
<s:TextArea id="textArea1" includeIn="State1" x="18" y="118" width="985" height="40"
color="#C8C8C8" contentBackgroundAlpha="0.38" contentBackgroundColor="#000000"
fontSize="16" text="Email:"/>
<s:TextArea id="textArea2" includeIn="State1" x="18" y="163" width="985" height="40"
color="#C8C8C8" contentBackgroundAlpha="0.38" contentBackgroundColor="#000000"
fontSize="16" text="Website:"/>
<s:TextArea id="textArea4" includeIn="State1" x="104" y="210" width="899" height="108"
color="#C8C8C8" contentBackgroundAlpha="0.38" contentBackgroundColor="#000000"
fontSize="16"/>
<s:TextArea id="textArea5" includeIn="State1" x="149" y="334" width="854" height="108"
color="#C8C8C8" contentBackgroundAlpha="0.38" contentBackgroundColor="#000000"
fontSize="16"/>
<s:TextArea id="textArea6" includeIn="State1" x="159" y="464" width="844" height="108"
color="#C8C8C8" contentBackgroundAlpha="0.38" contentBackgroundColor="#000000"
fontSize="16"/>

<s:Button id="saveBtn" includeIn="State1" x="850.7" y="16" width="150" height="39" label="Save"
chromeColor="#1B1B1B" click="saveBtn_clickHandler(event)" color="#ABABAB"/>

<!--
make sure to set up your event handler for the click via the click attribute
!-->

<s:Image includeIn="Portfolio" x="0" y="0" source="portfolio_bg.png"/>
<s:Scroller includeIn="Portfolio" x="0" y="0" width="100%" height="100%">
<s:Group x="379" y="186" width="100%" height="100%">
<s:Image x="155" y="58" width="700" height="500" source="Portfolio/port1.jpg"/>
<s:Image x="875" y="58" width="700" height="500" source="Portfolio/port2.jpg"/>
<s:Image x="1595" y="58" width="700" height="500" source="Portfolio/port3.jpg"/>
<s:Image x="2315" y="58" width="700" height="500" source="Portfolio/port4.jpg"/>
<s:Image x="3035" y="58" width="700" height="500" source="Portfolio/port5.jpg"/>
<s:Image x="3755" y="58" width="700" height="500" source="Portfolio/port6.jpg"/>
<s:Image x="4475" y="58" width="700" height="500" source="Portfolio/port7.jpg"/>
<s:Image x="5195" y="58" width="700" height="500" source="Portfolio/port8.jpg"/>
<s:Image x="5915" y="58" width="700" height="500" source="Portfolio/port9.jpg"/>
<s:Image x="6635" y="58" width="700" height="500" source="Portfolio/port10.jpg"/>
<s:Image x="7355" y="58" width="700" height="500" source="Portfolio/port11.jpg"/>
<s:Image x="8075" y="58" width="700" height="500" source="Portfolio/port12.jpg"/>
<s:Image x="8795" y="58" width="700" height="500" source="Portfolio/port13.jpg"/>
<s:Image x="9515" y="58" width="700" height="500" source="Portfolio/port14.jpg"/>
<s:Image x="10235" y="58" width="700" height="500" source="Portfolio/port15.jpg"/>
<s:Image x="11675" y="58" width="700" height="500" source="Portfolio/port16.jpg"/>
<s:Image x="12395" y="58" width="700" height="500" source="Portfolio/port17.jpg"/>
<s:Image x="13115" y="58" width="700" height="500" source="Portfolio/port18.jpg"/>
<s:Image x="13835" y="58" width="700" height="500" source="Portfolio/port19.jpg"/>
<s:Image x="14555" y="58" width="700" height="500" source="Portfolio/port20.jpg"/>
<s:Image x="15275" y="58" width="700" height="500" source="Portfolio/port21.jpg"/>
<s:Image x="15995" y="58" width="700" height="500" source="Portfolio/port22.jpg"/>
</s:Group>
</s:Scroller>

<s:Image includeIn="CheckList" x="0" y="0" source="checklist_bg.png"/>
<s:Group includeIn="CheckList" x="0" y="0" width="100%" height="100%">
<s:CheckBox id="checkBox" x="103" y="104"/>
<s:CheckBox id="checkBox2" x="389.35" y="103.35"/>
<s:CheckBox id="checkBox3" x="389.35" y="188.35"/>
<s:CheckBox id="checkBox4" x="389.35" y="276.35"/>
<s:CheckBox id="checkBox5" x="389.35" y="359.35"/>
<s:CheckBox id="checkBox6" x="389.35" y="440.35"/>
<s:CheckBox id="checkBox7" x="389.35" y="525.35"/>
<s:CheckBox id="checkBox8" x="748" y="104"/>
<s:CheckBox id="checkBox9" x="748" y="189"/>
<s:CheckBox id="checkBox10" x="748" y="277"/>
<s:CheckBox id="checkBox11" x="748" y="360"/>
<s:CheckBox id="checkBox12" x="748" y="441"/>
<s:CheckBox id="checkBox13" x="748" y="526"/>
<s:CheckBox id="checkBox14" x="103" y="189"/>
<s:CheckBox id="checkBox15" x="103" y="277"/>
<s:CheckBox id="checkBox16" x="103" y="360"/>
<s:CheckBox id="checkBox17" x="103" y="441"/>
<s:CheckBox id="checkBox18" x="103" y="526"/>
</s:Group>

<s:Button id="saveBtn2" includeIn="CheckList" x="850.7" y="16" width="150" height="39" label="Save"
chromeColor="#1B1B1B" click="saveBtn2_clickHandler(event)" color="#ABABAB"/>

</s:View>

 

The line that is bolded is line 41. Before I run it, in the Problems tab near the bottom of my screen, there are no errors. When I click run is when I get that error. If I click continue, my app will run but only the first state with the text areas in it will save when I click the save button. When I got to the second state with the check boxes and click the second save button, it doesn't save.

 

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: saving form (text input) to show in other state

[ Edited ]

hey alex,

 

found the problem. basically because you are using states and the initial state the checkboxes arent visible, they are also inaccessible by the applicaiton when you are in "State1". so what you have to do is put in a check to see what state you are in before using any objects. so for instance, this is how your onCreationComplete method should look:

 

 

			protected function onCreationComplete(event:FlexEvent):void
{
/**
* here we set the text area's text property to the string stored
* in the textAreaData field
*
* Note that you can name it anything you want, just stay consistent
*/
textArea.text = p.getProperty("textAreaData") as String;
textArea1.text = p.getProperty("textAreaData1") as String;
textArea2.text = p.getProperty("textAreaData2") as String;
textArea4.text = p.getProperty("textAreaData4") as String;
textArea5.text = p.getProperty("textAreaData5") as String;
textArea6.text = p.getProperty("textAreaData6") as String;

this.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, onStateChange);
}

 

 

notice two things, the checkboxes are no longer being preset here since they arent in the initial state. second thing, we are adding an event listener for the state change. this way, whenever the state changes, the method onStateChange (we will define that next) will be called and the appropriate actions will be taken.

 

Next we need to add a method called onStateChange that will be triggered wheenver the currentState of your application chnages:

 

 

protected function onStateChange(e:StateChangeEvent):void
{
if (currentState == "CheckList")
{
checkBox.selected = p.getProperty("checkBoxData") as Boolean;
checkBox2.selected = p.getProperty("checkBoxData2") as Boolean;
checkBox3.selected = p.getProperty("checkBoxData3") as Boolean;
checkBox4.selected = p.getProperty("checkBoxData4") as Boolean;
checkBox5.selected = p.getProperty("checkBoxData5") as Boolean;
checkBox6.selected = p.getProperty("checkBoxData6") as Boolean;
checkBox7.selected = p.getProperty("checkBoxData7") as Boolean;
checkBox8.selected = p.getProperty("checkBoxData8") as Boolean;
checkBox9.selected = p.getProperty("checkBoxData9") as Boolean;
checkBox10.selected = p.getProperty("checkBoxData10") as Boolean;
checkBox11.selected = p.getProperty("checkBoxData11") as Boolean;
checkBox12.selected = p.getProperty("checkBoxData12") as Boolean;
checkBox13.selected = p.getProperty("checkBoxData13") as Boolean;
checkBox14.selected = p.getProperty("checkBoxData14") as Boolean;
checkBox15.selected = p.getProperty("checkBoxData15") as Boolean;
checkBox16.selected = p.getProperty("checkBoxData16") as Boolean;
checkBox17.selected = p.getProperty("checkBoxData17") as Boolean;
checkBox18.selected = p.getProperty("checkBoxData18") as Boolean;
}
else if (currentState == "State1")
{

textArea.text = p.getProperty("textAreaData") as String;
textArea1.text = p.getProperty("textAreaData1") as String;
textArea2.text = p.getProperty("textAreaData2") as String;
textArea4.text = p.getProperty("textAreaData4") as String;
textArea5.text = p.getProperty("textAreaData5") as String;
textArea6.text = p.getProperty("textAreaData6") as String;
}

}

 

Here we check for what the currentState is. based on that we set the appropriate objects to their respective values from the persistent manager.

 

I also added a line to your first save button to change states to show how this will fit together:

 

 

protected function saveBtn_clickHandler(event:MouseEvent):void

{
/**
* set the textAreaData key to the value of the text area object below
*/
p.setProperty("textAreaData", textArea.text);
p.setProperty("textAreaData1", textArea1.text);
p.setProperty("textAreaData2", textArea2.text);
p.setProperty("textAreaData4", textArea4.text);
p.setProperty("textAreaData5", textArea5.text);
p.setProperty("textAreaData6", textArea6.text);


/** save the data to the disk */
p.flush();

currentState = "CheckList";
}

 

That should do the trick. so remember objects are only accessible based on what state you are in. then you should be golden. good luck!

 

EDIT: Also i forgot to mention since we are adding a new listener, make sure to import the event class:

 

 

import mx.events.StateChangeEvent;

 

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
killerspaz
Posts: 199
Registered: ‎12-29-2010
My Device: Not Specified

Re: saving form (text input) to show in other state

this is one of the many explicit reasons you should never depend on CREATION_COMPLETE to do any logic.

Please use plain text.
New Developer
alexperri7
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: saving form (text input) to show in other state

@JRab,

 

So basically, I have to keep doing this if I use a bunch of states? The way I have it now, for each "page" or "screen" of my app, I'm using another state all within one mxml file. Would it be easier to use seperate mxml files for each page? In total, I will have 4 pages or screens that will require user input in text areas and checkboxes.

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Please use plain text.
New Developer
killerspaz
Posts: 199
Registered: ‎12-29-2010
My Device: Not Specified

Re: saving form (text input) to show in other state

No, the solution is to understand how to develop properly in Flex:

 

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

 

Even though this references Flex 3, this still holds true for Flex 4. You can ignore Flex 4 skinning architecture for the time being since you're most likely not needing to create reusable components.

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: saving form (text input) to show in other state

its up to you what you want to do. by using states all your different psuedo-vlews are there and you have all your objects and variables accessible. But after a while the amount of code that you need to keep it together will become larger and larger and things will start geting cluttered. but if four views is all ur gonna have and you dont mind the if else statements, it is probably safe to stay this route.

 

the next option as you state is creating seperate .mxml. I usually create whole different view whenever the one view gets to be too large and the information between states become very different and they dont belong on the same page. even if the user doesnt see it, i see it and it doesnt mesh well with me lol.

 

so to summarize, if you dont ahve many states and they are all somehow related, then keep them on one view. but if your "states" are numerous and the size of that one view is getting to be too large and u start seeing differences and room to seperate, then creating an additional view (mxml) file is probably the best route.

 

I also want to make note that if you do decide to take the mutiple and seperate view route, things will start to look more organized for you. thats the route i usually go. and also once u do that you will see that you want to "share" data between your seperate views. when it comes to that, you will need to look into singleton classes. but i think since u are using the persistence manager, it will not be needed. id have to double check.

 

good luck on ur decision!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
alexperri7
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: saving form (text input) to show in other state

So I have decided to explore the different views method for now. Basically, I will need a seperate view mxml file for each screen I want to have (4 with user input, 5 in total). Now, to get from one view to the next with a button, how would you go about doing that? I've been searching around but I'm not finding what I'm looking for.

 

So, instead of having click="currentState='CheckList'" for the button, what to I do to go to another view instead of state?

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: saving form (text input) to show in other state

hey alex,

 

sorry had to step out for a bit, to change Views instead, you simply do this in the function:

 

 

navigator.pushView([view class name],[any data you want to send]);

(...)

navigator.popView(); //gets rid of current view

 

 

so you basically think of it like a stack of paper. the push puts the view you want at the top and the pop gets ride of the top most view. here is more detail on it and some examples:

 

http://www.unitedmindset.com/jonbcampos/2010/10/25/flex-4-5-mobile-development-post-burrito/

 

hope that helps. good luck!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.