Object Handles on TextArea ??

81 views
Skip to first unread message

Ethan Miller

unread,
Feb 7, 2008, 6:14:03 PM2/7/08
to Flex ObjectHandles
Greetings -

First off, great product, easy to use, works great, love it. One
question... has anyone found a way to use this with a Text Input or
Text Area? As far as I can tell the dragability of the handled objects
obscures your ability to insert a cursor into an editable text object
(wrapped in the ObjectHandle).

Any ideas?

cheers, ethan

Manasa K.N.

unread,
Feb 8, 2008, 2:23:55 AM2/8/08
to object...@googlegroups.com

Hi,

You can use the following code to create a rectangle and insert a TextField into it.  The user can type his data and the input can be captured as well.  The rectangle can be dragged and dropped too.

private

function
createRectangle():void

{

var
ap:AccessibilityProperties = new AccessibilityProperties();

ap.name =

"Rectangle";

var rect:Sprite = new Sprite();

rect.graphics.lineStyle(2, 0x990000, .75);

rect.graphics.drawRect(50,50,150,100);

rect.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) ;

rect.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

rect.accessibilityProperties = ap;

var myTextBox:TextField = new TextField();

var myText:String = "Hello world and welcome to the show. It's really nice to meet you. Take your coat off and stay a while. OK, show is over. Hope you had fun. ";

var wVal:Number = 130;

var hVal:Number = 80;

myTextBox.type = TextFieldType.INPUT;

myTextBox.background =

true;

myTextBox.border =

true;

myTextBox.width = wVal;

myTextBox.height = hVal;

myTextBox.borderColor = 0xFFFFFF;

myTextBox.x = 60;

myTextBox.y = 60;

myTextBox.wordWrap =

true;

myTextBox.multiline =

true;

if (Capabilities.hasAccessibility) {

Accessibility.updateProperties();

}

var

format:TextFormat = new TextFormat();

format.font =

"Verdana";

format.color = 0xFF0000;

format.size = 10;

myTextBox.defaultTextFormat = format;

myTextBox.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownScroll);

myTextBox.addEventListener(TextEvent.TEXT_INPUT, textInputCapture);

function mouseDownScroll(event:MouseEvent):void{myTextBox.scrollV++;}

rect.addChild(myTextBox);

myTextBox.text = myText;

function textInputCapture(event:TextEvent):void{var str:String = myTextBox.text;}

var

uiComp: UIComponent = new UIComponent();

uiComp.addChild(rect);

targetPanel.addChild(uiComp);

function mouseDown(event:MouseEvent):void {rect.startDrag();}

function mouseReleased(event:MouseEvent):void {rect.stopDrag();}

}

Regards,
Manasa K.N.

 

Desslock

unread,
Feb 8, 2008, 11:55:12 AM2/8/08
to Flex ObjectHandles
Ethan, this might work for you. Enable the doubleclick event for the
OH:
doubleClick="toggleEditDrag();" doubleClickEnabled="true"



// Toggle ObjectHandle editing or drag&drop (via Double-Click event).
private function toggleEditDrag():void {
if(ObjectHandlesInstance.allowHMove == true) {
// Turn on text editing.
ObjectHandlesInstance.allowHMove = false;
ObjectHandlesInstance.allowVMove = false;
ObjectHandlesInstance.mouseChildren = true;
SomeTextArea.setFocus();
}
else {
// Turn on drag/resize.
ObjectHandlesInstance.allowHMove = true;
ObjectHandlesInstance.allowVMove = true;
ObjectHandlesInstance.mouseChildren = false;
SomeTextArea.setFocus();
}
}


Hope that helps.

Regards, Bill
http://billreddy.wordpress.com

Desslock

unread,
Feb 8, 2008, 11:57:25 AM2/8/08
to Flex ObjectHandles
One mistake. The second SetFocus should be for the OH:


ObjectHandlesInstance.setFocus();


On Feb 8, 8:55 am, Desslock <billredd...@gmail.com> wrote:
> Ethan, this might work for you.  Enable the doubleclick event for the
> OH:
> doubleClick="toggleEditDrag();" doubleClickEnabled="true"
>
> // Toggle ObjectHandle editing or drag&drop (via Double-Click event).
> private function toggleEditDrag():void {
>                 if(ObjectHandlesInstance.allowHMove == true) {
>                         // Turn on text editing.
>                         ObjectHandlesInstance.allowHMove = false;
>                         ObjectHandlesInstance.allowVMove = false;
>                         ObjectHandlesInstance.mouseChildren = true;
>                         SomeTextArea.setFocus();
>                 }
>                 else {
>                         // Turn on drag/resize.
>                         ObjectHandlesInstance.allowHMove = true;
>                         ObjectHandlesInstance.allowVMove = true;
>                         ObjectHandlesInstance.mouseChildren = false;
>                         SomeTextArea.setFocus();
>                 }
>         }
>
> Hope that helps.
>
> Regards, Billhttp://billreddy.wordpress.com
>
> On Feb 7, 3:14 pm, Ethan Miller <djet...@gmail.com> wrote:
>
>
>
> > Greetings -
>
> > First off, great product, easy to use, works great, love it. One
> > question... has anyone found a way to use this with a Text Input or
> > Text Area? As far as I can tell the dragability of the handled objects
> > obscures your ability to insert a cursor into an editable text object
> > (wrapped in the ObjectHandle).
>
> > Any ideas?
>
> > cheers, ethan- Hide quoted text -
>
> - Show quoted text -

Ethan Miller

unread,
Feb 8, 2008, 3:46:12 PM2/8/08
to Flex ObjectHandles
Thanks, Bill. That worked great.

I revised a tad below to add some cursor management. Note also that I
have a boolean variable in my singleton EditorModel for whether I'm in
text editing mode, this gives my application event listeners for
delete key strokes for decide whether to delete a text character or
the entire object.

All the code is inside n object of type ObjectHandles, hence the
"this' keywords.

cheers, ethan

--

import com.nf.EditorModel;
import com.roguedevelopment.objecthandles.*;

private var defaultCursors:ObjectHandlesMouseCursors2 = new
ObjectHandlesMouseCursors2();

private function toggleEditDrag():void {

if (this.allowHMove == true) {
// Turn on text editing.
this.allowHMove = false;
this.allowVMove = false;
this.mouseChildren = true;
this.mouseCursors = null;
textarea.setFocus();
EditorModel.getInstance().editingText = true;
}

else {
// Turn on drag/resize.
this.allowHMove = true;
this.allowVMove = true;
this.mouseChildren = false;
this.mouseCursors = defaultCursors;
this.setFocus();
EditorModel.getInstance().editingText = false;
}
}

Cindy

unread,
Feb 26, 2008, 4:38:00 PM2/26/08
to Flex ObjectHandles
hi! i don't speak english very well , but i have a question... in the
answer of Desslock the objectHandleInstance is my objectHandle isn't?
so the function toggleEditDrag() refers to my objectHandle , but I
must define each object according to this example a function
differently?.

Only by understanding the example

thanks!
Reply all
Reply to author
Forward
0 new messages