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

Question

Мне было интересно, можно ли включить содержимое SVG внутри панели (или что-то еще, что будет работать в GWT), иметь возможность добавлять больше в SVG (например, добавить круг или кривую) программно и обрабатывать события мыши ( это будет в SVG или GWT?). Я пытался создать объект HTML, добавив что-то вроде:

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

Это не сработало (ничего не видно в выводе), но я не уверен, было ли это потому, что я сделал это неправильно или не разрешено.

Мне удалось сделать простой пример в GWT с помощью LineChart Google Visualization, но я бы хотел отойти от Google Visualization и иметь возможность самостоятельно генерировать SVG и настраивать его. Я посмотрел вокруг, и многие ресурсы указывают на использование Canvas, но я не уверен, что это лучший маршрут.

Я также немного озадачен примером здесь . Я попытался просто скопировать его, чтобы попробовать локально, и, похоже, это не сработало вообще. Однако я смог получить другой пример, работающий только с HTM (встроенный с src, указывающим на файл SVG) L + отдельный файл SVG, но я не смог получить к нему доступ, используя GWT, используя RootPanel.get (...).

EDIT: Я читал о том, что SVG не работает с Hosted Browser, и его компиляция работает, но я не уверен, как ссылаться на SVG (который я поместил в HTML через). Если я могу получить к нему доступ, то, вероятно, я могу добавить к его innerHTML. Я пытался в RootPanel.get ("привет"). GetElement (). SetInnerHTML ("..."), но это, кажется, не работает, или я испортил? Полагаю, цель состоит в том, чтобы иметь возможность манипулировать SVG-файлом, с которым я каким-либо образом связался (в GWT или HTML), и иметь возможность изменять его в зависимости от ввода пользователя.

2-е РЕДАКТИРОВАНИЕ До сих пор я программировал функциональность внутри самого файла SVG. В нашей настройке наш SVG является внедренным объектом, и мы передали «документ» во встроенный SVG. Передача информации из встроенного объекта в и из HTML вполне осуществима, поскольку у HTML есть доступ к нашим функциям SVG, а у SVG есть доступ к «документу».

Есть более прозрачные способы сделать это (Rapahel), когда FireBug мог видеть SVG напрямую, что приятно, но теперь не совсем необходимо. До сих пор я не думаю, что какие-либо решения, на которые я смотрел, были IFrames, но я могу ошибаться. Небольшое предупреждение, SVG иногда может быть довольно медленным.

Я бы сказал, что моя проблема решена (вроде?), Но в данный момент я не использую Raphael, jQuery или GWT, но метод, который я описал в своем ответе, все равно должен работать, если я хочу использовать GWT.

Answer 1

Я не совсем понимаю, почему, но метод JavaScript createElementNS позволяет вам создавать и корректно форматировать 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.

Answer 2

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

Answer 3

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

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

Answer 4

Немного поиграв, я наиболее успешно использовал 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 (эта статья 1014 * - хорошее чтение) не только увеличит производительность (как в некоторых постах, которые я читаю в группах Google, но могу на данный момент не могу найти - они упомянули, что компилятор выполняет довольно много работы), но также облегчают кодирование и отладку.

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

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

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

Answer 5

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

См. http://wiki.svg.org/Inline_SVG для справочной информации.

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

Answer 6

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

К вашему сведению, есть также модуль SVG для GWT: http://gwt -widget.sourceforge.net /

Пьер

Answer 7

Интересно!

Я пытался использовать Рафаэля через код 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 в метод точки входа моего модуля и вызываю его:

 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, но не с моими объектами Raphael ... Должно быть что-то, чего я не получил ...

Answer 8

Имейте в виду, что SVG не будет работать в текущей оболочке GWT (режим размещения) до 1.6 включительно, потому что:

1) в Windows используется компонент IE

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

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

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