3 Replies Latest reply on Jun 18, 2009 7:36 PM by flairjax

    Call out drawing over a spark container edges.

    flairjax Level 1

      Does anyone happen to know of a tutorial on how to draw a callout, like in Google maps when you open a map point, using Spark in F4?  I can't seem to get the line segments to draw over a components boundaries?

       

      <fx:Script>

      ............

      </fx:Script>
          <s:SkinnableContainer id="myContainer"
              height="300" width="350" top="-50" >
              <s:Path>
                   <s:segments>
                        <s:MoveSegment x="0" y="0"/>
                        <s:LineSegment x="0" y="{myContainer.height}"/>
                        <s:LineSegment x="{myContainer.width}" y="{myContainer.height}"/>
                        <s:LineSegment x="{myContainer.width}" y="0"/>
                        <s:LineSegment x="100" y="0"/>
                        <s:LineSegment x="75" y="-50"/>
                        <s:LineSegment x="50" y="0"/>
                        <s:LineSegment x="0" y="0"/>
                   </s:segments>
                   <s:stroke>
                      <s:Stroke color="0x888888"/>
                   </s:stroke>
                   <s:fill>
                       <s:SolidColor id="lightBlue" color="0xD5DDE7" />
                   </s:fill>
              </s:Path>

       

              <!--<s:Graphic>
                 <s:Rect height="250" width="350" radiusX="2" radiusY="2">                             
                       <s:stroke>
                            <s:Stroke color="0xCCCCCC" weight="1"/>
                       </s:stroke>
                       <s:fill>
                           <s:SolidColor id="lightBlue" color="0xD5DDE7" />
                       </s:fill>
                 </s:Rect>
              </s:Graphic>-->
          </s:SkinnableContainer>
          <mx:Canvas id="main">

             some buttons and such .............

          </mx:Canvas>

        • 1. Re: Call out drawing over a spark container edges.
          flairjax Level 1

          Ok, I got it but the issue now is the SkinnableContainer, which isn't visible to the eye, as the alpha is set to zero, blocks the mouse to items underneath it. So anything underneath the SkinnableContainer between the tip of the arrow and the base part which to eye looks like nothing is there blocks the mouse....man said that twice like George W.

           

          Anyway the reason is because I am not really drawing the arrow out of the bounds, but in a component and then shoving the component down (south) so it look correct to the eye. Anyone know how to fix this?

           

           

          <s:SkinnableContainer id="myContainer" mouseEnabled="false"
                  height="252" width="350">
                  <s:Path>
                       <s:segments>
                            <s:MoveSegment x="0" y="0"/>
                            <s:LineSegment x="0" y="{myContainer.height}"/>
                            <s:LineSegment x="{myContainer.width}" y="{myContainer.height}"/>
                            <s:LineSegment x="{myContainer.width}" y="0"/>
                            <s:LineSegment x="125" y="0"/>
                            <s:LineSegment x="100" y="-30"/>
                            <s:LineSegment x="75" y="0"/>
                            <s:LineSegment x="0" y="0"/>
                       </s:segments>
                       <s:stroke>
                          <s:Stroke color="0x888888"/>
                       </s:stroke>
                       <s:fill>
                           <s:SolidColor id="lightBlue" color="0xD5DDE7" />
                       </s:fill>
                  </s:Path>

           

              </s:SkinnableContainer>
              <mx:Canvas id="main" left="1" top="30">
                  <mx:LinkButton id="nameLabel"
                      styleName="callOutHeader"
                      maxWidth="270"
                      label="{ secondLevelData.name + '  ' + '(' +secondLevelData.ip + ')' }"
                      labelPlacement="left"
                      creationComplete="initLinkButton();"
                      left="0" top="2"
                      rollOver="{secondLevelData.device_id != null ? nameLabel.setStyle('textDecoration', 'underline') : nameLabel.setStyle('textDecoration', 'none')}"
                      rollOut="{nameLabel.setStyle('textDecoration', 'none')}"
                      />
                  <mx:Button
                      id="closeButton"
                      styleName="CalloutCloseButton"
                      right="5" top="4"
                      width="14" height="14"
                      click="{dispatchThenCloseNodeDetails( event )}"
                      />
                  <s:VGroup id="titleBar" top="22" width="100%">
                      <mx:Canvas id="detailsHolder"
                          borderStyle="none"
                          cornerRadius="0"
                          backgroundColor="0xFFFFFF" >
                              <mx:Canvas id="bigbox"
                                  width="349"
                                  height="230"
                                  >
                                      <components:MinBackboneSuperDetailViewComp
                                          id="minContent"
                                          width="100%" height="100%"
                                          sparklineEnabled="{sparkEnabled}"
                                          topFiveHistory="{_topFive}"
                                          errorText="{error}"
                                          dataPayLoad="{secondLevelData}"
                                           />
                              </mx:Canvas>
                      </mx:Canvas>
                  </s:VGroup>
              </mx:Canvas>

           

          SKIN ===============================

          <?xml version="1.0" encoding="utf-8"?>
          <!-- SparkSkinning/mySkins/DropShadowBorderSkin.mxml -->
          <s:SparkSkin
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:mx="library://ns.adobe.com/flex/halo"
              xmlns:s="library://ns.adobe.com/flex/spark"
              alpha.disabled="0.5

           

              <fx:Metadata>
                  [HostComponent("spark.components.SkinnableContainer")]
              </fx:Metadata>
             
              <s:states>
                  <s:State name="normal" />
                  <s:State name="disabled" />
              </s:states>

           

              <!-- drop shadow -->
              <s:Rect left="0" top="20" right="0" bottom="-25">
                  <s:filters>
                      <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
                  </s:filters>
                  <s:fill>
                      <s:SolidColor color="0" />
                  </s:fill>
              </s:Rect>
             
              <!-- layer 1: border -->
              <s:Rect left="0" right="0" top="0" bottom="0">
                  <s:stroke>
                      <s:SolidColorStroke color="0" alpha="0" weight="1" />
                  </s:stroke>
              </s:Rect>

           

              <!-- layer 2: background fill -->
              <s:Rect id="background" left="1" top="1" right="1" bottom="1">
                  <s:fill>
                      <s:SolidColor alpha="0" color="0xFF0000" id="bgFill"/>
                  </s:fill>
              </s:Rect>
             
              <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0">
                  <s:layout>
                      <s:VerticalLayout/>
                  </s:layout>
              </s:Group>

          </s:SparkSkin>

          • 2. Re: Call out drawing over a spark container edges.
            CoreyRLucier Adobe Employee

            Be happy to help you debug your issue but it would be much easier if you provided a fully self contained test case (that can be compiled by itself).

             

            Also, note, if you have multiple files or skins in your example, sometimes easier to read the thread if you attach them to your post instead of pasting lengthy code snippets.

             

            -C

            • 3. Re: Call out drawing over a spark container edges.
              flairjax Level 1

              Here is the code. You will need to replace the insides of the leaf callout mxml file with anything.