Использование SVG в GWT
Он в основном проверяет, содержат ли текущие свойства ресурса (то есть свойства компонента) fileRefernce, тогда он добавит тег изображения.
7 ответов
После проигрывания вокруг немного, я был самым успешным с использованием 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 или по крайней мере создаю обертки). Я должен все же серьезно изучить Google Visualization API, но я подозреваю, что он мог бы работать точно также, но я не уверен, достаточно ли это устойчиво для моих потребностей.
Важная вещь я полагаю, что отсутствовал, как указано на сайте Raphaël, была следующей:
Это означает каждый графический объект, который Вы создаете, также Объект DOM, таким образом, можно присоединить обработчики событий JavaScript или изменить их позже.
Вы могли бы stuble о HTML по сравнению с xhtml проблемой: встроенный SVG должен быть интерпретирован как XML/XHTML, но по крайней мере для меня, я не могу убедить GWT жить с applicaton/xhtml+xml как тип контента. Для локального теста Вы задаетесь вопросом о: попытайтесь сохранить файл как .xhtml и загрузить его в Firefox - затем он работает, потому что FF в этом случае интерпретирует его как XHTML.
См. http://wiki.svg.org/Inline_SVG для справочной информации.
При нахождении решения проблемы отправьте. С уважением, Аксель
Если Вы не видите свой SVG, это может быть, потому что Ваш браузер рассматривает Ваш документ как файл HTML, но НЕ как файл XHTML. Попытайтесь изменить расширение своего файла (.xhtml), проверить, что Ваш HTML хорошо формируется, добавьте HTML 'meta' тег и т.д.
К вашему сведению существует также модуль SVG для GWT: http://gwt-widget.sourceforge.net/
Pierre
Be warned that SVG will not work in current GWT Shell (Hosted mode) up to 1.6 inclusive, because:
1) on windows, it uses IE component
2) on Linux, it uses Firefox 1.0 or equal mozilla runtime, which has no support for SVG.
Compiled code works fine in non-IE browsers.
Also, it works regardless of HTML/XHTML in browsers, because in GWT you use createElementNS (you can code method yourself using JSNI). Also, your SVG tag may need width/height attributes (see SVG spec).
Интересно!
Я пытался использовать Рафаэля с помощью кода 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, я получаю свой круг на моей странице, Это тоже не работает:
public native void createRaphael()/*-{
$wnd.Raphael("some_div", 200,200);
}-*/;
Удивительно, но мне удается получить доступ к классам и функциям draw2d (openJacob draw2d) с помощью этого $ wnd , но не моих объектов Рафаэля ... Должно быть что-то, чего я не получил. ..
Я не совсем понимаю почему, но метод 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 man.
Мы только что открыли исходный код виджета GWT, который позволяет интегрировать GWT с Raphael: http://code.google .com / p / raphaelgwt /
Этот виджет был первоначально создан для Hydro4GE и упоминался в статье в официальном блоге GWT.