4 Replies Latest reply on Jul 20, 2007 2:56 AM by dkane

    drawing a rectangle over a4j:mediaOutput

    dkane

      Hello.

      I am using a4j:mediaOutput tag to display a dynamically created image.

      Now I need to let the mouse to select a rectangular area from this image.

      The rectangular frame must become visible when left mouse button is down, then resize according to mouse movement and become invisible when buton is up - standard interface.

      With GWT, I have done that in the following way : created second, transparent image with visible margins, made the original image parent of this overlaying one and show/hide/resize it. As a result of transparency, only margins were visible - a rectangle, as I need.

      Now I want to port this solution from GWT to Ajax4Jsf. Any ideas/examples ?

        • 1. Re: drawing a rectangle over a4j:mediaOutput

          If I were you I will use the border color style attribute to manipulate the rectangle on hover. It is much easy. Anyway, I do not see the reason why this might be a part of component behavior. It is pure application level task.

          • 2. Re: drawing a rectangle over a4j:mediaOutput
            dkane

            Thank you for the quick answer .

            I did not mean that solution should be encapsulated in mediaOutput. But so far I even can't realize how to put another image over mediaOutput at given coords, or e.g. draw a line using Ajax4Jsf.

            I don't know JavaScript at all but have a Java background. That's why I were using GWT and felt pretty comfortable developing complex AJAX application without a line of raw JS.

            Now the requirement is porting to Ajax4Jsf. I am new to this technology, but guess that at least one goal among others was to provide independency of raw JS , similar to GWT .

            • 3. Re: drawing a rectangle over a4j:mediaOutput

              I am not a big fun of javascript either. However, I disagree with you that framework must do tones of extra work to replace 40 symbols:

              <div style="border:1px solid white"
               onmouseover="this.style.borderColor='black'"
               onmouseout="this.style.borderColor='white'">
               However here.
              </div>


              P.S. Also, I am not a big fun of GWT that produces very heavy javascript applications under the slogan "No Javascript"

              • 4. Re: drawing a rectangle over a4j:mediaOutput
                dkane

                Unfortunately lack of JS knowledge does not let me to understand, how use provided code for drawing the rectalnle of given coordinates and size within already displayed a4j:mediaOutput.

                When user clicks to some point on image and moves the mouse, the rectangular frame should appear and resize accordingly. I.e. should act as standard area selection function in graphic editors.

                Thanks anyway,
                JS study seems inevitable in this case.