2013-12-07 4 views
1

Мне нужно сделать 2D-чертеж на стороне клиента в моем приложении GWT (ничего необычного, просто нарисуйте кучу базовых 2D-фигур - круги, прямоугольники и т. Д.).Может ли GWT использовать Raphael через JSNI?

Я не верю, что GWT имеет/рисования рамки графики, и поэтому мне было интересно, есть ли способ использовать JSNI каким-то образом подключиться к известной Raphael библиотеки JS и вызывать Рафаэль внутри GWT.

Если это невозможно, может кто-нибудь объяснить, почему и какими могут быть мои варианты?

И если это возможно, то рассмотрим следующий Raphael код, который рисует квадрат:

paper = new Raphael(0,0,500,500); 
var rect = paper.rect(x,y,width,height).attr({"fill":"white","stroke":"red"}); 

Я хочу, что JS код выше, чтобы выполнить, когда пользователь нажимает на кнопку. Вот мой GWT нажмите обработчик:

@UiHandler("signInButton") 
void onClickSignInButton(final ClickEvent clickEvent) { 
    // ???? 
} 

Как подключить два?

+1

Есть уже некоторые проекты, которые обертывают Raphael, https://code.google.com/p/raphael4gwt/ и https://code.google.com/p/raphaelgwt/ (я их еще не пробовал) –

+0

Если вы хотите сравнить другие библиотеки gwt draw, у GXT есть библиотека рисования (используемая для поддержки пакета диаграмм), которая поддерживает как SVG, так и VML (и Canvas на этом пути), Emitrom имеет Lienzo (только холст, поэтому IE8, но должен быть быстрым), и есть, по крайней мере, одна или две D3-обертки для GWT (опять же, без IE8). –

ответ

1

Оберните класс Рафаэля в классе JSObject.

public final RaphaelJSO { 
    protected RaphaelJSO(){} 

    public static RaphaelJSO getNew(float a, float b, float c, float d){ 
     return getNewInner(a,b,c,d); 
    } 

    private native static RaphaelJSO getNewInner(float a, float b, float c, float d)/*-{ 
     return new Raphael(a, b, c, d); 
    }-*/; 

    public JSObject circle(int a,int b, int c){ 
     return circle(this,a,b,c); 
    } 

    private native JSObject circle(RaphaelJSO o, int a, int b, int c)/*-{ 
     return o.circle(a,b,c); 
    }-*/; 

} 

Как мудрый, вы можете обернуть другие классы и/или предоставить методы на них.

Затем назовите этот код Java так же, как и в противном случае.

+0

Awesome - thanks @amity (+1) - как насчет каких-либо конфигураций в дескрипторе 'gwt.xml' моего модуля или в моем ui.xml UiBinder? Любые другие конфигурации, которые мне нужно сделать, чтобы соединить эти два? Где я могу разместить Raphael.js? Еще раз спасибо! – IAmYourFaja

+0

вы можете поместить ссылку на Raphael.js как для любого нормального файла javascript на вашей странице html через тег