Использование SVG в GWT

Ответ 1

Немного поиграв, мне было очень приятно использовать Raphaël (который поддерживает кросс-браузерную совместимость), хотя я подозреваю что-либо по этим линиям будет работать нормально. В основном я делаю следующее в JavaScript:

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

Тогда я сделал бы следующее в 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);
}-*/;

Я тоже читал, и кажется, что перенос Raphaël в GWT (эта статья является хорошим чтением) не только увеличит (в соответствии с некоторыми сообщениями, которые я читал в Google Groups, но не могу найти в данный момент - они упомянули, что компилятор выполняет довольно много работы), но также облегчает кодирование и отладку.

Итак, я достиг своей цели - напрямую управлять SVG (несколько до тех пор, пока я не порчу Raphaël в Java или, по крайней мере, не создаю обертки). Мне еще предстоит серьезно взглянуть на API визуализации Google, но я подозреваю, что это может сработать так же хорошо, но я не уверен, насколько он достаточно прочен для моих нужд.

Важная вещь, которую я считаю отсутствующей, как указано на сайте Рафаэля, была следующей:

Это означает, что каждый графический объект, который вы create также является объектом DOM, поэтому вы могут присоединять обработчики событий JavaScript или изменить их позже.

Ответ 2

Я не совсем понимаю, почему, но метод createElementNS JavaScript позволяет вам создавать и правильно форматировать xhtml внутри html.

Поскольку в проводнике нет эквивалента, GWT не реализует createElementNS, но вы можете использовать быстрый собственный метод:

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

Имеет смысл включить это в класс SVGPanel.

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);
    }
}

Это должно привести к простому SVG при добавлении в вашу программу. Поздравления! Теперь вы прикрепляете его к человеку xhtml.

Ответ 3

Ого. Этот вопрос остался один на некоторое время. - Была выпущена фантастическая (окончательная?) Библиотека GWT SVG! см. lib-gwt-svg. Нет ничего такого, что было бы хорошо. Автор (Lukas Laag) очень отзывчивый и прилагает все усилия, чтобы библиотека обновлялась и находилась в отличной форме. Вышеупомянутая ссылка приведет вас к некоторым впечатляющим демонстрациям, и вы всегда можете участвовать в форуме lib-gwt-svg.

Ответ 4

Мы просто открываем виджет GWT, который позволяет вам интегрировать GWT с Raphael: http://code.google.com/p/raphaelgwt/

Этот виджет был первоначально создан для Hydro4GE и упоминался в статье об официальном блоге GWT.

Ответ 5

Возможно, вы столкнулись с проблемой html vs xhtml: встроенный SVG должен интерпретироваться как XML/XHTML, но, по крайней мере, для меня, я не могу убедить GWT жить с applaton/xhtml + xml в качестве типа контента. Для локального теста вы задаетесь вопросом: попытайтесь сохранить файл как .xhtml и загрузить его в Firefox - тогда он работает, потому что FF в этом случае интерпретирует его как XHTML.

Смотрите справочную информацию http://wiki.svg.org/Inline_SVG.

Если вы нашли решение проблемы, отправьте сообщение. С Уважением, Axel

Ответ 6

Если вы не видите свой SVG, это может быть из-за того, что ваш браузер видит ваш документ в виде HTML файла, но НЕ как файл XHTML. Попробуйте изменить расширение вашего файла (.xhtml), проверьте, что ваш html хорошо сформирован, добавьте тег html 'meta' и т.д.

FYI. Также есть модуль SVG для GWT: http://gwt-widget.sourceforge.net/

Пьер

Ответ 7

Следует предупредить, что SVG не будет работать в текущей оболочке GWT (режим Hosted) до 1,6 включительно, потому что:

1) на окнах, он использует компонент IE

2) в Linux, он использует Firefox 1.0 или равную среду исполнения Mozilla, которая не поддерживает SVG.

Скомпилированный код отлично работает в браузерах, отличных от IE.

Кроме того, он работает независимо от HTML/XHTML в браузерах, потому что в GWT вы используете createElementNS (вы можете самостоятельно кодировать метод с использованием JSNI). Кроме того, вашему тегу SVG могут понадобиться атрибуты width/height (см. Спецификацию SVG).

Ответ 8

Интересно!

Я пытался использовать Raphael через GWT/Java-код, но я не могу использовать трюк.

У меня есть следующий блок на моей странице HTML:

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

Когда я компилирую/просматриваю страницу в Firefox, я получаю свой круг на своей странице, без проблем.

Затем я добавлю следующий родной java к модулю entrypoint и вызову его:

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

Отладка показывает, что возвращаемый объект всегда null...

Кроме того, я не понимаю, почему я не мог просто сделать следующее в своем Java-коде:

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

GWT продолжает говорить мне, что Рафаэль не существует, хотя, как я вижу через firebug, библиотека прекрасно включена. Это также не работает:

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

Сюрпризно мне удается получить доступ к классам и функциям draw2d (openJacob draw2d) с помощью этого $wnd, но не моих объектов Рафаэля... Должно быть, что-то я не получил...