Me preguntaba si es posible incluir contenido SVG dentro de un panel (o lo que en GWT), ser capaz de añadir más SVG (como agregar un círculo o una curva) mediante programación , y manejar eventos de ratón (sería en formato SVG o GWT?). He intentado crear un objeto HTML agregando algo a lo largo de las líneas de:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="30" />
</svg>

Que no funciona (no visible en la salida), pero no estoy seguro si fue porque lo hice mal o no se permite.

Yo era capaz de hacer un simple ejemplo en GWT con Google Visualización del LineChart pero me gustaría alejarse de Google Visualización y ser capaz de generar el SVG mí y para personalizarlo aún más. He mirado alrededor y muchos recursos de puntos para el uso de la Lona, pero no estoy seguro si esa es la mejor ruta todavía.

Yo también soy un poco desconcertado sobre el ejemplo aquí. Probé con un simple copiar-pegar de que se trate a nivel local y que parece no funcionar en absoluto. Yo era sin embargo capaz de conseguir otro ejemplo de trabajo con sólo HTM (embed con src apunta a un archivo SVG) L + separadas archivo SVG, pero no he sido capaz de acceder a él utilizando GWT utilizando RootPanel.get(…).

EDITAR:
He leído acerca de SVG no funciona con el Explorador Hospedado y la compilación se hace el trabajo, pero estoy seguro de cómo se refieren a la SVG (que he puesto en el código HTML a través de ). Si puedo acceder a él, a continuación, presumiblemente, me puede agregar a su innerHTML. Yo lo he probado en RootPanel.get(«hola»).getElement().setInnerHTML («…»), pero que parece que no funciona o no me lío? Supongo que el objetivo es ser capaz de manipular un archivo SVG que he ligado de alguna manera (ya sea en GWT o en HTML) y ser capaz de modificarlo basado en la entrada del usuario.

2ª EDICIÓN
Hasta ahora, he sido funcionalidad de programación dentro de la real archivo SVG. En nuestra configuración, nuestro SVG es un objeto incrustado y pasamos por «documento» a la incrustados SVG. El paso de la información de incrustar un objeto y de HTML es bastante factible, ya que el HTML, tiene acceso a nuestro SVG funciones y el SVG tiene acceso a la «documento».

Hay más transparente formas de hacerlo (Rapahel) donde FireBug podía ver el SVG directamente que es bonito, pero ahora no es totalmente necesario. Hasta ahora, no creo que ninguna de las soluciones que yo he mirado fueron IFrames, pero puedo estar equivocado. Una pequeña advertencia, SVG puede ser bastante lenta a veces.

Yo diría que mi problema está resuelto (una especie de?) pero yo no estoy usando Rafael, jQuery, ni GWT en el momento, pero el método que he descrito en mi respuesta aún debe funcionar si quiero usar GWT.

  • Por la salida, ¿quieres decir que en el explorador hospedado o ha hecho compilado de todo y no funciona? A mi entender es que la versión de Windows de GWT utiliza componentes de Internet Explorer y por lo tanto no representar SVG.
  • He leído acerca de SVG no funciona con el Explorador Hospedado y la compilación se hace el trabajo, pero estoy seguro de cómo se refieren a la SVG (que he puesto en el código HTML a través de <EMBED src=’hi.svg’ … />). Si puedo acceder a él, a continuación, presumiblemente, me puede agregar a su innerHTML. Voy a EDITAR la pregunta para aclarar.
  • Estoy buscando en un territorio similar, y hasta ahora, he recibido muestras para trabajar más fácilmente. Si los problemas siguen siendo, te gustaría describir exactamente qué está causando los problemas. Tengo la intención de hacer un SVG aplicación web, que podría quedar enmarcado dentro de HTML. Son tus problemas acerca de HTML/SVG lado del paso de mensajes, porque parece que estos dos son una especie de mundos separados.
  • Por favor, consulte mi 2ª EDICIÓN. El paso de mensajes es posible, sólo he hecho recientemente con el fin de mostrar algunos mensajes de depuración. También GWT como Félix Leong mencionado es justo «, es decir,» por lo que algunas cuestiones que pueden resolverse mediante la compilación.
InformationsquelleAutor nevets1219 | 2009-03-27

8 Comentarios

  1. 9

    Yo no terminaba de entender por qué, pero el createElementNS método JavaScript que permite crear y aplicar correctamente el formato xhtml dentro de html.

    Porque no hay equivalente en el explorador, GWT no implementar createElementNS, pero usted puede con un rápido método nativo :

    private static native Element createElementNS(final String ns, 
            final String name)/*-{
        return document.createElementNS(ns, name);
    }-*/;

    Tiene sentido poner esto en un SVGPanel clase.

    import com.google.gwt.user.client.Element;
    import com.google.gwt.user.client.ui.ComplexPanel;
    
    public class SVGPanel extends ComplexPanel{
    
        private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";
    
        public SVGPanel() {
            setElement(createElementNS(SVG_NAMESPACE, "svg"));
            showcaseSVG(); //Demonstrate that SVG works! Inexplicably!
        }
    
        private void showcaseSVG(){
            Element svgElement = createElementNS(SVG_NAMESPACE, "circle");
            svgElement.setAttribute("cx", "50");
            svgElement.setAttribute("cy", "50");
            svgElement.setAttribute("r", "30");
            getElement().appendChild(svgElement);
        }
    }

    Esto debe producir algunos simples SVG cuando se añade a su programa. Felicitaciones! Usted ahora está pegando con el xhtml hombre.

  2. 6

    Whoa. Esta pregunta ha sido dejado solo por un tiempo. – Un fantástico (definitivo?) GWT SVG biblioteca ha sido liberado! ver lib-gwt-svg. No hay nada ahí fuera tan bueno. El autor (Lukas Laag) ha sido muy sensible y ha estado trabajando duro para mantener la biblioteca actualizado y en forma. El enlace de arriba le llevará a algunos de los impresionantes demostraciones y siempre se puede participar en el lib-gwt-svg foro.

    • Sólo echó un vistazo a su demo y se ve bastante bien!
  3. 5

    Acabamos de código abierto, un GWT widget que te permite integrar GWT con Raphael:
    http://code.google.com/p/raphaelgwt/

    Este widget fue creado originalmente para Hydro4GE y fue mencionado en un artículo en la página oficial de GWT Blog.

    • comenzó a utilizar este… la integración es fácil.
  4. 3

    Podría stuble sobre el html vs xhtml problema: en línea SVG debe ser interpretado como XML/XHTML, pero al menos para mí, no puedo persuadir a GWT para vivir con aplicación/xhtml+xml como un tipo de contenido.
    Para la prueba local le pregunto acerca de: intente guardar el archivo como .xhtml y lo carga en Firefox – a continuación, funciona, porque FF en este caso se interpreta como el XHTML.

    Ver http://wiki.svg.org/Inline_SVG para obtener información de fondo.

    Si usted encuentra una solución al problema, por favor post.
    Saludos,
    Axel

    • Definitivamente, voy a echar un vistazo más de cerca a la línea de SVG poco como que puede ser la mejor manera de hacerlo, de lo contrario me gustaría tal vez tenga que usar JavaScript para agarrar el SVG para GWT. Voy a publicar cuando yo obtener algunos resultados!
  5. 3

    Después de jugar un poco, he tenido más éxito con el uso de Raphaël (el cual se encarga de la compatibilidad entre navegadores) aunque sospecho que nada a lo largo de esas líneas funcionaría muy bien. Básicamente hago lo siguiente en JavaScript:

    var r = Raphael("someID", WND_WIDTH, WND_HEIGHT);
    //additional configuration and setup if needed....

    Entonces yo haría lo siguiente en GWT:

    public native JavaScriptObject getRaphael() /*-{
      return $wnd.r;
    }-*/;
    
    //I now have access to the JavaScript object and could do the following:
    
    public native void drawCircle(JavaScriptObject obj, int x, int y, int r) /*-{
      obj.circle(x, y, r);
    }-*/;

    También he estado leyendo todo y parece que portar Raphaël en GWT (este artículo es una buena lectura) no sólo aumentar el rendimiento (como por algunos post que he leído en los Grupos de Google, pero no pueden encontrar en el momento se mencionó que el compilador hace un poco de trabajo), sino también facilitar la codificación & depuración.

    Por lo que he logrado mi objetivo de ser capaz de manipular el SVG directamente (algo hasta que me de puerto Raphaël en Java o al menos crear contenedores). Todavía tengo que mirar seriamente en el Google Visualization API pero sospecho que podría funcionar igual de bien, pero no estoy seguro de si es lo suficientemente robusta como para mis necesidades.

    Una cosa importante, creo que me estaba perdiendo como se indica en la de Raphael fue la siguiente:

    Esto significa que cada objeto gráfico que
    crear es también un objeto DOM, por lo que
    puede asociar controladores de eventos de JavaScript
    o modificar más adelante.

    • si usted está portando raphael en gwt, me interesaría saber!
    • No estoy de portarlo, pero en el momento, fue un detalle.
    • Estoy en proceso de portabilidad a gwt. Han hecho el 80% de la obra y ahora estoy en el proceso de publicación a github. Publicará cuando esté disponible.
    • Suena bien, estoy seguro de que mucha gente va a estar interesado en ver esto. El uso de SVG como que he encontrado es bastante CPU – al menos para lo que yo hice.
    • Hey Sten, cualquier éxito con la publicación de los JSO contenedores?
  6. 1

    Si usted no puede ver su SVG puede ser porque su navegador, consulte el documento como un archivo HTML, pero NO como un archivo XHTML. Pruebe a cambiar la extensión del archivo (.xhtml), comprobar el código html bien formado, agregar un html ‘meta’ de la etiqueta, etc..

    FYI , también Hay un SVG módulo de GWT: http://gwt-widget.sourceforge.net/

    Pierre

    • Esa fue una de las cosas que yo he mirado, pero por desgracia no se tratan. Creo que fue porque el SVG desarrollo estaba en suspenso y la compatibilidad entre navegadores requiere de un plugin (IE) – asunto trivial atm. También mis conocimientos sobre HTML & XHTML es limitado, así que no creo que de eso. Gracias!
  7. 0

    Ser advertidos de que el SVG no funcionará en el actual GWT Shell (Hosted mode) hasta 1,6 incluyente, porque:

    1) en windows, utiliza IE componente

    2) en Linux, utiliza Firefox 1.0 o igual mozilla tiempo de ejecución, que no tiene soporte para SVG.

    Código compilado funciona bien en navegadores no-IE.

    Además, funciona independientemente de HTML/XHTML en los navegadores, porque en GWT utilizar createElementNS (puede método de código usando JSNI). También, su SVG etiqueta puede necesitar anchura/altura de atributos (consulte la especificación SVG).

  8. 0

    Interesante!

    He intentado utilizar Rafael a través de GWT/código de Java pero me parece que no puede ser capaz de utilizar el truco.

    Tengo el siguiente bloque en mi página HTML :

    <script  type="text/javascript" language="javascript" ><br/>
         window.onload=function(){
         var rr = Raphael(20,20, 200,200);
         rr.circle(50,40,30);
         }
    </script>

    Al compilar/navegar por la página en Firefox, tengo mi círculo en mi página, no hay problema.

    A continuación, agregue el siguiente nativo de java para mi el módulo de punto de entrada del método y de la llamada es :

     private native JavaScriptObject returnRaphael() /*-{
                return $wnd.rr;
            }-*/;

    De depuración muestra que el objeto devuelto es siempre null

    Además, no entiendo por qué no podía simplemente hacer lo siguiente en mi código Java:

    public native void createRaphael()/*-{
        Raphael("some_div", 200,200);
    }-*/;

    GWT me dice que Rafael no existe, a pesar de que, como yo lo veo a través de firebug, la biblioteca está perfectamente incluido.
    Esto no funciona bien :

    public native void createRaphael()/*-{
        $wnd.Raphael("some_div", 200,200);
    }-*/;

    Surprinsingly, me las arreglo para el acceso draw2d (openJacob draw2d) clases y funciones con que $wnd, pero no es mi Raphael objetos… debe haber algo que yo no…

    • Creo que en el primer caso, la variable ‘rr’ es local a la función, se declare a nivel mundial y que debería estar bien (espero). Usted definitivamente podría declarar el Raphael de objeto dentro de GWT, pero yo creo que voy a necesitar decirle a GWT donde el JS de la biblioteca se encuentra. No creo que su inclusión en el archivo HTML será suficiente, pero tal vez alguien con más experiencia podría decir con certeza.
    • He encontrado que la GWTShell no soporta SVG y por lo tanto produce un error al cargar el módulo si invoco Rafael (a través de JSNI) en onModuleLoad(). Rafael ejecutado a través de una devolución de llamada o incluso un DeferredCommand no hace nada en la GWTShell, pero funciona bien después de una compilación/navegar en Firefox. Gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here