« Updating DataService Manged Data with non-Flex Clients | Main | Document-Literal Web Services and Flex »
February 19, 2006
Adding notes.....
I've been thinking about collaborative work spaces a lot lately. One common collaboration need is for a group of people to add notes as they view an application. The sample below is an extremely basic example of adding a note taking functionality to a basic Flex UI.
You can go a lot of places with this kind of sample. For example, you could have notes be saved 'off-line' in a database using messaging and then have them populate every time the application is opened. Moreover, you can use DataServices to keep all note objects synchronized. This is sample is very basic, but I'll come back to it in a few days (or weeks) when I have some more time to work on it -- unless you guys build something before then.
Enjoy!
NoteTakingSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="horizontal" >
<mx:Script>
<![CDATA[
import Note;
public function addNote(event:Event) {
var myNote:Note = new Note();
myNote.x=event.target.x+50;
myNote.y=event.target.y+50;
myCanvas.addChild(myNote);
}
public function deleteNote(note:Note) {
myCanvas.removeChild(note);
}
]]>
</mx:Script>
<mx:Model id="myEmployee">
<employee employeeId="5">
<firstName>John</firstName>
<lastName>Smith</lastName>
<phone>617-219-3345</phone>
</employee>
</mx:Model>
<mx:HBox id="myCanvas">
<mx:Panel id="myPanel" width="100%" height="100%" click="addNote(event)">
<mx:Label id="empid" text="{myEmployee.employee.employeeId}"/>
<mx:Label id="fname" text="{myEmployee.employee.firstName}"/>
<mx:Label id="lname" text="{myEmployee.employee.lastName}"/>
<mx:Label id="phone" text="{myEmployee.employee.phone}"/>
</mx:Panel>
</mx:HBox>
</mx:Application>
Note.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" backgroundColor="yellow" width="150" borderStyle="outset" height="150">
<mx:Script>
<![CDATA[
public function minSize() {
this.height=20;
this.width=20;
}
public function maxSize() {
this.height=150;
this.width=150;
}
]]>
</mx:Script>
<mx:VBox>
<mx:TextArea backgroundColor="yellow" width="100%" id="myTextArea" click="maxSize()"/>
<mx:HBox>
<mx:Button click="Application.application.deleteNote(this)" label="Delete"/>
<mx:Button click="minSize()" label="Save" />
</mx:HBox>
</mx:VBox>
</mx:Canvas>
Posted by eanderson at February 19, 2006 12:40 PM