Sunday, April 4, 2010

Saveable List of User-Entered urls

I鈥檝e found the following code on the net that is a basic example of using the sharedObject method to allow users to save data, however I want to enhance this same example so that in the text area, the user can enter different urls and then when each url that the user has entered is clicked it will navigate to that specific page.

I know that allowing a user to merely enter a url into a single text box and then have it link to the relevant site once clicked is a simple process but I want to achieve this within the following example so that users can save their url list, reset their entire list back to blank or perhaps delete each link individually by clicking on it then clicking a delete button.

My main problem is that it seems the selectedItem.text property can鈥檛 be accessed within a text area's click command and it doesn't seem the itemClick function is available in a text area like it can in a TileList for example so I鈥檓 not sure how I can get it to navigate to the contained url of each item when each item is actually clicked. Would the text area need to be changed to another type of component to incorporate this?:-

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;

%26lt;mx:Application xmlns:mx=''http://www.adobe.com/2006/mxml''

聽聽聽聽聽 layout=''absolute''

聽聽聽聽聽 creationComplete=''initSharedObject()''%26gt;

聽聽聽聽聽 %26lt;mx:Script%26gt;

聽聽聽聽聽聽聽聽聽聽聽 %26lt;![CDATA[

聽聽聽聽聽聽聽聽聽聽聽 import flash.net.SharedObject;

聽聽聽聽聽聽聽聽聽聽聽 public var sharedObj:SharedObject;

聽聽聽聽聽 聽聽聽 private function initSharedObject():void{

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 sharedObj = SharedObject.getLocal(''myTasks'');

聽聽聽聽聽聽聽聽聽聽聽 聽聽聽 if (sharedObj.size %26gt; 0)

聽聽聽聽聽聽聽聽聽聽聽 聽聽聽 聽 textareaTasks.text=sharedObj.data.tasks;

聽聽聽聽聽聽聽聽聽聽聽 }

聽聽聽聽聽 聽聽聽 public function localconnectionHandler(msg:String):void {

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 textareaTasks.text= textareaTasks.text + msg + ''\n'';

聽聽聽聽聽 聽 聽 }

聽聽聽聽聽 聽 聽 private function clearTasks(event:MouseEvent):void {

聽聽聽聽聽 聽聽聽聽聽聽聽 textareaTasks.text='''';

聽聽聽聽聽 聽 聽 }

聽聽聽聽聽 聽 聽 private function saveTasks(event:MouseEvent):void {

聽聽聽聽聽 聽聽聽聽聽聽聽 sharedObj.data.tasks = textareaTasks.text;

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 sharedObj.flush();

聽聽聽聽聽 聽 聽 }

聽聽聽聽聽聽聽聽聽聽聽 private function deleteSavedTasks(event:MouseEvent):void {

聽聽聽聽聽聽聽聽聽聽聽 聽聽聽 sharedObj.clear();

聽聽聽聽聽聽聽聽聽聽聽 }

聽聽聽聽聽聽聽聽聽聽聽 ]]%26gt;

聽聽聽聽聽 %26lt;/mx:Script%26gt;

聽聽聽聽聽 %26lt;mx:Panel聽 horizontalCenter=''0'' verticalCenter=''0.5'' verticalGap=''15''

聽聽聽聽聽 聽聽聽聽聽 paddingLeft=''20'' paddingRight=''20'' paddingBottom=''20'' paddingTop=''20''

聽聽聽聽聽聽聽聽聽聽聽 聽 height=''300''%26gt;

聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Label text=''Your tasks are...''/%26gt;

聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:TextArea id=''textareaTasks''

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 top=''20'' left=''20'' right=''20'' bottom=''20''

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 width=''100%'' height=''100%''/%26gt;

聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:HBox%26gt;

聽聽聽聽聽聽聽聽聽聽聽 聽聽聽聽聽 %26lt;mx:Button id=''btnClearTasks'' click=''clearTasks(event)''

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 label=''Clear Tasks''/%26gt;

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Button id=''btnSaveTasks'' click=''saveTasks(event)''

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 label=''Save Tasks to Shared Object''/%26gt;

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Button id=''btnDeleteSavedTasks'' click=''deleteSavedTasks(event)''

聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 聽聽聽聽聽 label=''Delete Saved Shared Object Tasks''/%26gt;

聽聽聽聽聽聽聽聽聽聽聽 %26lt;/mx:HBox%26gt;

聽聽聽聽聽 %26lt;/mx:Panel%26gt;

%26lt;/mx:Application%26gt;

Saveable List of User-Entered urls

If this post answers your question or helps, please mark it as such.

You should use a List instead of a TextArea. I've created a custom component to get the URL from the user, and the URLs are displayed in the main app are launchable, and deletable.

I still have to get loading the SharedObject working right, but here is the code so far:

------- AddURL.mxml -----------

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:TitleWindow xmlns:mx=''http://www.adobe.com/2006/mxml''
聽 creationComplete=''PopUpManager.centerPopUp(this);''
聽 title=''Add a URL'' width=''700'' verticalGap=''20''
聽 paddingTop=''15'' paddingBottom=''10''%26gt;
聽 %26lt;mx:Script%26gt;
聽聽聽 %26lt;![CDATA[
聽聽聽聽聽 import mx.core.Application;
聽聽聽聽聽 import mx.controls.Alert;
聽聽聽聽聽 import mx.managers.PopUpManager;
聽聽聽聽聽
聽聽聽聽聽 [Bindable] private var dataValid:Boolean = false;
聽聽聽聽聽
聽聽聽聽聽 private function validateData():void{
聽聽聽聽聽聽聽 dataValid = url.text != '''' ? true : false;
聽聽聽聽聽 }
聽聽聽聽聽
聽聽聽聽聽 private function addURL():void{
聽聽聽聽聽聽聽 mx.core.Application.application.addURL(url.text);
聽聽聽聽聽聽聽 PopUpManager.removePopUp(this);
聽聽聽聽聽 }
聽聽聽 ]]%26gt;
聽 %26lt;/mx:Script%26gt;
聽 %26lt;mx:TextInput id=''url'' width=''100%'' change=''validateData();''/%26gt;
聽 %26lt;mx:Button label=''Add URL'' click=''addURL();'' enabled=''{dataValid}''/%26gt;聽
%26lt;/mx:TitleWindow%26gt;


------ MainApp.mxml --------

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:Application xmlns:mx=''http://www.adobe.com/2006/mxml''
聽 layout=''absolute'' creationComplete=''initSharedObject();''%26gt;
聽 %26lt;mx:Script%26gt;
聽聽聽 %26lt;![CDATA[
聽聽聽聽聽 import mx.events.ListEvent;
聽聽聽聽聽 import mx.collections.ArrayCollection;
聽聽聽聽聽 import flash.net.SharedObject;
聽聽聽聽聽 import mx.managers.PopUpManager;
聽聽聽聽聽 import AddURL;

聽聽聽聽聽 private var sharedObj:SharedObject;
聽聽聽聽聽 [Bindable] public var urls:ArrayCollection;
聽聽聽聽聽
聽聽聽聽聽 private function initList():void{
聽聽聽聽聽聽聽 urls = new ArrayCollection();
聽聽聽聽聽 }

聽聽聽聽聽 private function initSharedObject():void{
聽聽聽聽聽聽聽 initList();
聽聽聽聽聽聽聽 sharedObj = SharedObject.getLocal(''urls'');
聽聽聽聽聽聽聽 if (sharedObj.size %26gt; 0){
聽聽聽聽聽聽聽聽聽 var urlList:Array = sharedObj.data.urls.split('','');
聽聽聽聽聽聽聽聽聽 urls = new ArrayCollection();
聽聽聽聽聽聽聽聽聽 for each(var url:String in urlList){
聽聽聽聽聽聽聽聽聽聽聽 urls.addItem({url: url});
聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽 }
聽聽聽聽聽 }

聽聽聽聽聽 private function saveUrls(event:MouseEvent):void {
聽聽聽聽聽聽聽 var urlList:String = '''';
聽聽聽聽聽聽聽 for each(var obj:Object in urls){
聽聽聽聽聽聽聽聽聽 urlList += obj.toString() + '','';
聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽 sharedObj.data.urls = urlList;
聽聽聽聽聽聽聽 sharedObj.flush();
聽聽聽聽聽 }

聽聽聽聽聽 private function deleteSavedUrls(event:MouseEvent):void {
聽聽聽聽聽聽聽 sharedObj.clear();
聽聽聽聽聽聽聽 initList();
聽聽聽聽聽 }

聽聽聽聽聽 public function gotoURL(evt:MouseEvent):void{
聽聽聽聽聽聽聽 navigateToURL(new URLRequest(urlList.selectedItem.url), '_blank');
聽聽聽聽聽 }
聽聽聽聽聽
聽聽聽聽聽 private function addURLDialog():void{
聽聽聽聽聽聽聽 PopUpManager.createPopUp(this, AddURL, true);
聽聽聽聽聽 }
聽聽聽聽聽
聽聽聽聽聽 public function addURL(url:String):void{
聽聽聽聽聽聽聽 urls.addItemAt({url: url},0);
聽聽聽聽聽 }
聽聽聽 ]]%26gt;
聽 %26lt;/mx:Script%26gt;
聽 %26lt;mx:Panel聽 horizontalCenter=''0'' verticalCenter=''0.5'' verticalGap=''15''
聽聽聽 paddingLeft=''20'' paddingRight=''20'' paddingBottom=''20'' paddingTop=''20''
聽聽聽 height=''500''%26gt;
聽聽聽 %26lt;mx:HBox%26gt;
聽聽聽聽聽 %26lt;mx:Label text=''Your URLs:'' fontWeight=''bold'' fontSize=''14''/%26gt;
聽聽聽聽聽 %26lt;mx:Button label=''Add URL'' click=''addURLDialog();''/%26gt;聽聽聽聽聽
聽聽聽 %26lt;/mx:HBox%26gt;
聽聽聽 %26lt;mx:List id=''urlList'' top=''20'' left=''20'' right=''20''聽
聽聽聽聽聽 bottom=''20'' width=''100%'' height=''100%'' dataProvider=''{urls}''
聽聽聽聽聽 alternatingItemColors=''[0xcee7f6, 0xf4d5f7]''%26gt;
聽聽聽聽聽 %26lt;mx:itemRenderer%26gt;
聽聽聽聽聽聽聽 %26lt;mx:Component%26gt;
聽聽聽聽聽聽聽聽聽 %26lt;mx:HBox%26gt;
聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Button label=''GO'' toolTip=''Go to URL''
聽聽聽聽聽聽聽聽聽聽聽聽聽 click=''outerDocument.gotoURL(event);''/%26gt;
聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Text name=''urlText'' text=''{data.url}'' width=''100%''/%26gt;
聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Button label=''X'' toolTip=''Delete URL''
聽聽聽聽聽聽聽聽聽聽聽聽聽 click=''{outerDocument.urls.removeItemAt(outerDocument.urlList.selectedIndex)}''/ %26gt;
聽聽聽聽聽聽聽聽聽 %26lt;/mx:HBox%26gt;
聽聽聽聽聽聽聽 %26lt;/mx:Component%26gt;
聽聽聽聽聽 %26lt;/mx:itemRenderer%26gt;
聽聽聽 %26lt;/mx:List%26gt;
聽聽聽 %26lt;mx:HBox%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnClearUrls'' click=''initList()''
聽聽聽聽聽聽聽 label=''Clear URLs''/%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnSaveUrls'' click=''saveUrls(event)''
聽聽聽聽聽聽聽 label=''Save URLs to Shared Object''/%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnDeleteSavedUrls'' click=''deleteSavedUrls(event)''
聽聽聽聽聽聽聽 label=''Delete Saved Shared Object URLs''/%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnReloadSavedUrls'' click=''initSharedObject()''
聽聽聽聽聽聽聽 label=''Reload Saved Shared Object URLs''/%26gt;
聽聽聽 %26lt;/mx:HBox%26gt;
聽 %26lt;/mx:Panel%26gt;
%26lt;/mx:Application%26gt;

Saveable List of User-Entered urls

If this post answers your question or helps, please mark it as such.

Okay. The shared object works correctly now.Only the main app file had to change. The AddURL component above is fine as is:

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:Application xmlns:mx=''http://www.adobe.com/2006/mxml''
聽 layout=''absolute'' creationComplete=''initSharedObject();''%26gt;
聽 %26lt;mx:Script%26gt;
聽聽聽 %26lt;![CDATA[
聽聽聽聽聽 import mx.events.ListEvent;
聽聽聽聽聽 import mx.collections.ArrayCollection;
聽聽聽聽聽 import flash.net.SharedObject;
聽聽聽聽聽 import mx.managers.PopUpManager;
聽聽聽聽聽 import AddURL;

聽聽聽聽聽 private var sharedObj:SharedObject;
聽聽聽聽聽 [Bindable] public var urls:ArrayCollection;
聽聽聽聽聽
聽聽聽聽聽 private function initList():void{
聽聽聽聽聽聽聽 urls = new ArrayCollection();
聽聽聽聽聽 }

聽聽聽聽聽 private function initSharedObject():void{
聽聽聽聽聽聽聽 initList();
聽聽聽聽聽聽聽 sharedObj = SharedObject.getLocal(''urls'');
聽聽聽聽聽聽聽 if (sharedObj.size %26gt; 0){
聽聽聽聽聽聽聽聽聽 var urlList:Array = sharedObj.data.urls.split('','');
聽聽聽聽聽聽聽聽聽 urls = new ArrayCollection();
聽聽聽聽聽聽聽聽聽 for each(var url:String in urlList){
聽聽聽聽聽聽聽聽聽聽聽 if(url != ''''){
聽聽聽聽聽聽聽聽聽聽聽聽聽 var urlObj:Object = {url: url};
聽聽聽聽聽聽聽聽聽聽聽聽聽 urls.addItem(urlObj);聽聽聽聽聽聽聽聽聽聽聽聽
聽聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽 }
聽聽聽聽聽 }

聽聽聽聽聽 private function saveUrls(event:MouseEvent):void {
聽聽聽聽聽聽聽 var urlList:String = '''';
聽聽聽聽聽聽聽 for each(var obj:Object in urls){
聽聽聽聽聽聽聽聽聽 urlList += obj.url + '','';
聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽 sharedObj.data.urls = urlList;
聽聽聽聽聽聽聽 sharedObj.flush();
聽聽聽聽聽 }

聽聽聽聽聽 private function deleteSavedUrls(event:MouseEvent):void {
聽聽聽聽聽聽聽 sharedObj.clear();
聽聽聽聽聽聽聽 initList();
聽聽聽聽聽 }

聽聽聽聽聽 public function gotoURL(evt:MouseEvent):void{
聽聽聽聽聽聽聽 navigateToURL(new URLRequest(urlList.selectedItem.url), '_blank');
聽聽聽聽聽 }
聽聽聽聽聽
聽聽聽聽聽 private function addURLDialog():void{
聽聽聽聽聽聽聽 PopUpManager.createPopUp(this, AddURL, true);
聽聽聽聽聽 }
聽聽聽聽聽
聽聽聽聽聽 public function addURL(url:String):void{
聽聽聽聽聽聽聽 urls.addItemAt({url: url},0);
聽聽聽聽聽 }
聽聽聽 ]]%26gt;
聽 %26lt;/mx:Script%26gt;
聽 %26lt;mx:Panel聽 horizontalCenter=''0'' verticalCenter=''0.5'' verticalGap=''15''
聽聽聽 paddingLeft=''20'' paddingRight=''20'' paddingBottom=''20'' paddingTop=''20''
聽聽聽 height=''500''%26gt;
聽聽聽 %26lt;mx:HBox%26gt;
聽聽聽聽聽 %26lt;mx:Label text=''Your URLs:'' fontWeight=''bold'' fontSize=''14''/%26gt;
聽聽聽聽聽 %26lt;mx:Button label=''Add URL'' click=''addURLDialog();''/%26gt;聽聽聽聽聽
聽聽聽 %26lt;/mx:HBox%26gt;
聽聽聽 %26lt;mx:List id=''urlList'' top=''20'' left=''20'' right=''20''聽
聽聽聽聽聽 bottom=''20'' width=''100%'' height=''100%'' dataProvider=''{urls}''
聽聽聽聽聽 alternatingItemColors=''[0xcee7f6, 0xf4d5f7]'' rowHeight=''30''%26gt;
聽聽聽聽聽 %26lt;mx:itemRenderer%26gt;
聽聽聽聽聽聽聽 %26lt;mx:Component%26gt;
聽聽聽聽聽聽聽聽聽 %26lt;mx:HBox verticalAlign=''middle''%26gt;
聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Button label=''GO'' toolTip=''Go to URL''
聽聽聽聽聽聽聽聽聽聽聽聽聽 click=''outerDocument.gotoURL(event);''/%26gt;
聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Text name=''urlText'' text=''{data.url}'' width=''100%''/%26gt;
聽聽聽聽聽聽聽聽聽聽聽 %26lt;mx:Button label=''X'' toolTip=''Delete URL''
聽聽聽聽聽聽聽聽聽聽聽聽聽 click=''{outerDocument.urls.removeItemAt(outerDocument.urlList.selectedIndex)}''/ %26gt;
聽聽聽聽聽聽聽聽聽 %26lt;/mx:HBox%26gt;
聽聽聽聽聽聽聽 %26lt;/mx:Component%26gt;
聽聽聽聽聽 %26lt;/mx:itemRenderer%26gt;
聽聽聽 %26lt;/mx:List%26gt;
聽聽聽 %26lt;mx:HBox%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnClearUrls'' click=''initList()''
聽聽聽聽聽聽聽 label=''Clear URLs''/%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnSaveUrls'' click=''saveUrls(event)''
聽聽聽聽聽聽聽 label=''Save URLs to Shared Object''/%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnDeleteSavedUrls'' click=''deleteSavedUrls(event)''
聽聽聽聽聽聽聽 label=''Delete Saved Shared Object URLs''/%26gt;
聽聽聽聽聽 %26lt;mx:Button id=''btnReloadSavedUrls'' click=''initSharedObject()''
聽聽聽聽聽聽聽 label=''Reload Saved Shared Object URLs''/%26gt;
聽聽聽 %26lt;/mx:HBox%26gt;
聽 %26lt;/mx:Panel%26gt;
%26lt;/mx:Application%26gt;

Excellent. That's even better than I thought.

I tried for hours to get it done myself but it works great now. Thanks a lot.

I have a strange problem after I've changed this application into an AIR application. When I run it and click the 'Go' button on any of the added urls the site doesn't open. Internet Explorer doesn't even open at all.

The strange thing is this works fine if it's ran as an Flex application so I just can't figure out why it would'nt as an AIR app

I can't look at this right now, but you might want to consider using the HTML control as a popup.

It's ok no worries. I've managed to get it fixed by changing the gotoURL function to:-

public function gotoURL(evt:MouseEvent):void{

{navigateToURL(new URLRequest('http://' + urlList.selectedItem.url))};

}

Works fine now. Cheers.

No comments:

Post a Comment