Warning: include() [function.include]: Unable to access /var/www/html/rogue-development/blog2/wp-content/advanced-cache.php in /var/www/html/rogue-development/blog2/wp-settings.php on line 62

Warning: include(/var/www/html/rogue-development/blog2/wp-content/advanced-cache.php) [function.include]: failed to open stream: No such file or directory in /var/www/html/rogue-development/blog2/wp-settings.php on line 62

Warning: include() [function.include]: Failed opening '/var/www/html/rogue-development/blog2/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/share/pear:/usr/share/php') in /var/www/html/rogue-development/blog2/wp-settings.php on line 62

Notice: add_option was called with an argument that is deprecated since version 2.3 with no alternative available. in /var/www/html/rogue-development/blog2/wp-includes/functions.php on line 3468

Notice: register_sidebar_widget is deprecated since version 2.8! Use wp_register_sidebar_widget() instead. in /var/www/html/rogue-development/blog2/wp-includes/functions.php on line 3382

Notice: register_widget_control is deprecated since version 2.8! Use wp_register_widget_control() instead. in /var/www/html/rogue-development/blog2/wp-includes/functions.php on line 3382
Alternative “skin” for ObjectHandles « Marc’s Musings

Alternative “skin” for ObjectHandles

Published on April 3, 2010 in Uncategorized. 1 Comment

Today, I worked a bit on getting an alternative look for ObjectHandles working.  See the blue border in the screen shot?  Clicking the left, right, or bottom edge resizes, and the top bar moves it around.  The corners resize as expected as well.  This is s a decent compromise for when you want to have text inside a moveable object, and you still want to be able to select the text with the mouse.

Here’s how I did it.

First, I created some custom handle classes. I had three other versions, one for the corners, one for the bottom bar, and one for the vertical ones. (They probably could have been a single class with a bit of smarts to it)

Here’s the one for the top horizontal bar.

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.                  xmlns:s="library://ns.adobe.com/flex/spark"
  5.                  xmlns:mx="library://ns.adobe.com/flex/mx"
  6.                  implements="com.roguedevelopment.objecthandles.IHandle"
  7.                  width="{model.width + 8}" height="12"
  8.                  
  9.                  >
  10.         <fx:Script>
  11.                 <![CDATA[
  12.                         import com.roguedevelopment.objecthandles.HandleDescription;
  13.                         import com.roguedevelopment.objecthandles.IHandle;
  14.                         import com.roguedevelopment.todoboard.model.BoardObject;
  15.                        
  16.                         [Bindable] protected var hd:HandleDescription;
  17.                         [Bindable] protected var model:BoardObject;
  18.  
  19.                         public function get handleDescriptor():HandleDescription
  20.                         {
  21.                                 return hd;
  22.                         }
  23.  
  24.                         public function set handleDescriptor(value:HandleDescription):void
  25.                         {
  26.                                 hd = value;
  27.                         }
  28.  
  29.                         public function redraw():void
  30.                         {
  31.                                 invalidateDisplayList();
  32.                         }
  33.  
  34.                         public function get targetModel():Object
  35.                         {                              
  36.                                 return model;
  37.                         }
  38.  
  39.                         public function set targetModel(value:Object):void
  40.                         {
  41.                                 model = value as BoardObject;
  42.                         }
  43.  
  44.                 ]]>
  45.         </fx:Script>
  46.         <fx:Declarations>
  47.                 <!– Place non-visual elements (e.g., services, value objects) here –>
  48.         </fx:Declarations>
  49.         <s:Rect x="{-width/2}" y="{-height/2}" width="100%" height="100%" topLeftRadiusX="3" topLeftRadiusY="3" topRightRadiusX="3" topRightRadiusY="3">
  50.                 <s:fill>
  51.                         <s:SolidColor color="#0A96CA" />                               
  52.                 </s:fill>
  53.                 <s:stroke>
  54.                         <s:SolidColorStroke color="#077BA7" />
  55.                 </s:stroke>
  56.         </s:Rect>
  57. </s:Group>
  58.  
  59.  

The big difference between this and the normal handles, is that the size of the handles is dependent on the width/height of the model object, something I hadn’t tried before.

Next, I created a custom handle configuration to position them around the edges.

  1.  
  2. oh = new ObjectHandles( sprite , selectionManager);
  3.  
  4. oh.defaultHandles = [];
  5.  
  6. // Top border
  7. oh.defaultHandles.push( new HandleDescription( HandleRoles.MOVE,
  8. new Point(50,0) ,
  9. new Point(0,-2) , new ClassFactory( TopHorizontalGrabberHandle )) );
  10.  
  11. // Bottom border
  12. oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_DOWN,
  13. new Point(50,100) ,
  14. new Point(0,2) , new ClassFactory( HorizontalGrabberHandle )) );
  15.  
  16. // Left border
  17. oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_LEFT,
  18. new Point(0,50) ,
  19. new Point(-2,0) , new ClassFactory( VerticalGrabberHandle )) );
  20.  
  21. // Right border
  22. oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_RIGHT,
  23. new Point(100,50) ,
  24. new Point(2,0) , new ClassFactory( VerticalGrabberHandle )) );                 
  25.  
  26.  
  27. oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_LEFT,
  28. zero ,
  29. new Point(-2,-2) ,
  30. new ClassFactory(CornerGrabberHandle)                  
  31. ) );
  32.  
  33.  
  34. oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_RIGHT,
  35. new Point(100,0) ,
  36. new Point(2,-2) ,
  37. new ClassFactory(CornerGrabberHandle)) 
  38. );
  39.  
  40.  
  41.  
  42. oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_RIGHT,
  43. new Point(100,100) ,
  44. new Point(2,2) ,
  45. new ClassFactory(CornerGrabberHandle)));
  46.  
  47.  
  48.  
  49. oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_LEFT,
  50. new Point(0,100) ,
  51. new Point(-2,2) ,
  52. new ClassFactory(CornerGrabberHandle)   ) );
  53.  
  54.  
  55. oh.defaultHandles.push( new HandleDescription( HandleRoles.ROTATE,
  56. new Point(100,50) ,
  57. new Point(15,0) ));
  58.  

And unfortunately, at this point I realized the ObjectHandles didn’t correctly rotate it’s handles, so everything went wacky when I rotated. So a bit of tinkering around in the core library and I got that fixed.

End results:

New version of ObjectHandles posted:

http://code.google.com/p/flex-object-handles/downloads/list

Besides the rotating handles change, I’ve also made the examples build under flex 3 again, and added a submitted patch that allows you to have an isLocked attribute on your model objects. When set that, you can’t drag or resize that object.

1 Response to “Alternative “skin” for ObjectHandles”

Feed for this Entry
Comments are currently closed.