10 Replies Latest reply on Nov 16, 2009 9:05 AM by kevinklin

    Spark TitleWindow resizing

    jdesko Level 2

      On the new Spark TitleWindow there is talk of Resizing capability and handle @ http://opensource.adobe.com/wiki/display/flexsdk/Spark+TitleWindow

      under B Features; as of SDK 11686 I don't see this.  Will resize be in code soon?  Or should we take the time to do our own?  Or does anyone have an example of doing this?

       

      Thanks,

      John

        • 1. Re: Spark TitleWindow resizing
          David_F57 Level 5

          Hi John,

           

          this is a simle way of doing a drag handle resizer for a titlewindow, I'm sure that you can make the dragbar pretty.

           

          add the red section to a titlewindow skin right at the end of the generated skin

           

                          <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="5" minWidth="0" minHeight="0">

                              <s:layout>

                                  <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />

                              </s:layout>

                          </s:Group>

                      </s:Group>

                  </s:Group>

          <s:Group id="sizer" bottom="-10" right="-10" width="20" height="20" mouseDown="sizer_mouseDownHandler(event)">

          <s:Rect top="0" left="0" bottom="0" right="0">

          <s:fill>

          <s:LinearGradient rotation="45">

          <s:GradientEntry color="0xEDEDED"/>

          <s:GradientEntry color="0xCDCDCD"/>

          </s:LinearGradient>

          </s:fill>

          </s:Rect>

          </s:Group>

             </s:Group>

          </s:SparkSkin>

           

          then add this to the script section

           

          private var OldX: Number;

          private var OldY: Number;

           

           

          protected function sizer_mouseDownHandler(event:MouseEvent):void

          {

          OldX=event.stageX;

          OldY=event.stageY;

          systemManager.addEventListener(MouseEvent.MOUSE_MOVE,startResize);

          systemManager.addEventListener(MouseEvent.MOUSE_UP,endResize);

          }

           

          protected function endResize(event:MouseEvent):void

          {

          systemManager.removeEventListener(MouseEvent.MOUSE_MOVE,startResize);

          systemManager.removeEventListener(MouseEvent.MOUSE_UP,endResize);

          }

           

          private function startResize(event:MouseEvent): void

          {

          hostComponent.width -= OldX-event.stageX;

          hostComponent.height -= OldY-event.stageY;

          OldX=event.stageX;

          OldY=event.stageY;

          }

           

          and now you have a resizable titlewindow....as usually its a David special 'quick and dirty' now the guru guys can step in with the elegant solution

           

          David

           

          1 person found this helpful
          • 2. Re: Spark TitleWindow resizing
            jdesko Level 2

            Hey David;

             

            Thanks again.  I'm hoping the 'guru guys' will reply if they will build this into the component per TitleWindow specs; but in the mean time I'll go with the David special.

             

            John

            • 3. Re: Spark TitleWindow resizing
              David_F57 Level 5

              Hi,

               

              having a drag/status bar for the title window is a good idea, its not that difficult to create a new component, but its always better that a feature like is standardised through the FB component library. Have you put a feature request in for this as the adobe page you refered to early mentioned this but gave no real indication that it was going to happen.

               

              At the moment quick solutions are ok as a base for experimentation, theres nothing  worse than sitting back to admire a masterpeice then update the sdk and watch your hardwork turning into a train wreck

               

              David

              • 4. Re: Spark TitleWindow resizing
                jdesko Level 2

                David;

                 

                Like I had mentioned, I'm hoping someone from Adobe responds to when resizing will be included in the component.  I didn't think I had to do a feature request since they have resize in their component description.  But, since I need this feature, I'll do what I can for the mean time.

                 

                John

                • 5. Re: Spark TitleWindow resizing
                  kevinklin Adobe Employee

                  Hi John,

                   

                  Thanks for your post. Sorry that I got to it so late. I'm sorry to say but the resize handle was cut from this release's feature schedule. However, I was able to prototype the feature during the time that I was working on TitleWindow.

                   

                  Big thanks to David for showing a quick and simple way to do this. Mine is a bit more elaborate, but hopefully, it'll serve your needs long term. What I've included is a rough sketch of how it would probably be done in a future release. Basically, I've extended TitleWindow and added a new optional skin part called "resizeHandle" which should be added to your new skin (basically in the same way David has done it. Just renamed and without the mouse handler code).

                   

                  In the subclass, I have a resizeHandle_mouseDownHandler that hooks up to the skin part during partAdded() and begins to track your mouse movement when the resizeHandle is clicked. The other handlers keep track of the mouse move and mouse up events to resize the TitleWindow appropriately. Let me know if you have any further questions or comments!

                   

                  Thanks,

                  -Kevin

                  • 6. Re: Spark TitleWindow resizing
                    David_F57 Level 5

                    Hi Kevin,

                     

                    Your example is what I envisaged the way it should be , out of curiosity the getsandboxroot() function is something I am not familiar with(unaware of till now would be more accurate) is this the preferred/standardized method for dealing with system manager events.

                     

                    And for my skin example a triangular drag handle

                     

                    <s:Group id="sizer" bottom="1" right="1" width="16" height="16" mouseDown="sizer_mouseDownHandler(event)" mouseEnabledWhereTransparent="false">

                    <s:Path data="M 0 16 L 16 16 L 16 0 L 0 16 z">

                    <s:fill>

                    <s:LinearGradient rotation="45">

                    <s:GradientEntry color="0xEDEDED"/>

                    <s:GradientEntry color="0xCDCDCD"/>

                    </s:LinearGradient>

                    </s:fill>

                    </s:Path>

                    </s:Group>

                    I was thinking that the borderskin would be a great place to have a resize state then you could add resize capabilities on any skinnable component without worrying about the code, thoughts ?

                    • 7. Re: Spark TitleWindow resizing
                      jdesko Level 2

                      Hello Kevin;

                       

                      Thank you very much for the reply and the code.  Works great! 

                       

                      One miniscule sidenote FB didn't like prevWidth and prevHeight = null in the mouse up handler.

                       

                      Thanks again - very much appreciated,

                      John

                      • 8. Re: Spark TitleWindow resizing
                        jdesko Level 2

                        Hey David;

                         

                        Thanks again for posting your code.

                         

                        John

                        • 9. Re: Spark TitleWindow resizing
                          kevinklin Adobe Employee

                          Hi David,

                           

                          For the getSandBoxRoot(), my understanding is that it is to ensure that you can listen for mouse events across application domains. Of course, my understanding is limited so check out this help page.

                           

                          As for putting resize in borderskin, it would be pretty awesome if you needed the functionality on every component, but perhaps a bit too much. I'd love to see some prototyped code.

                           

                          Thanks,

                          -Kevin

                          • 10. Re: Spark TitleWindow resizing
                            kevinklin Adobe Employee

                            ah, sorry about that. They're Numbers so it should just be prevWidth = NaN  and prevHeight = NaN to reset them.

                             

                            -Kevin