صنع فصل تراكب بسيط؟

Question

أرغب في جعل بعض فصول التراكب البسيطة حقًا في GWT لف بعض الأشياء SVG. أرغب بشكل أساسي في رسم مستطيل ، هكذا أفعل ذلك في JavaScript:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
document.body.appendChild(svg);

var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute("width","300");
rect.setAttribute("height","100");
svg.appendChild(rect);

والآن أواجه مشكلة في ترجمة ذلك إلى GWT. كنت آمل أن أتمكن من القيام بتراكب رفيع حقًا حول كل هذه المكالمات ، شيء من هذا القبيل:

public class SVGPanel extends JavaScriptObject {
    protected SVGPanel() {}

    public static native SVGPanel create(String width, String height) /*-{
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', width);
        svg.setAttribute('height', height);
        return svg;
    }-*/;
}

public MyProject implements EntryPoint {

    public void onModuleLoad() { 
        SVGPanel panel = SVGPanel.create("100%", "100%");
        Document.get().getBody().appendChild(panel);
    }
}

نعم ، لكن ليس لدي فهم على كيفية القفز من تمثيل JavaScript لأشياء SVG إلى فصول GWT Java. لأحدهم ، يمتد فئة SVGPanel JavaScriptObject ، لكن لا يمكنني ببساطة إضافته إلى فئة جسم المستندات لأنها تتوقع نوع عنصر. إذا تمكن شخص ما من الإشارة إلى الطريقة الصحيحة للقيام بهذا الجسر ، فيجب أن أكون قادرًا على الحصول على ذلك.

أيضًا ، لست متأكدًا مما إذا كانت هذه الطريقة المثلى لدمج بعض فئات SVG البسيطة ، هل يجب أن أقوم بنمذجةها باستخدام فئات DOM بدلاً من محاولة استخدام JSNI؟

شكرًا

Answer 1

تحتاج إلى إعطاء عنصر للتذييل. لذا ، فقط اجعل العنصر الذي يمتد فئة التراكب بدلاً من JavaScriptObject.

public class SVGPanel extends Element {

لاحظ أن العنصر هو فئة فرعية من JavaScriptObject.

Answer 2

أعتقد أنه يستحق التحقق GWT-SVG - في حين يبدو أنهم توقفوا عن التطور في حوالي عام 2007 ، فإن قاعدة الشفرة تبدو صلبة بما يكفي ، مما يوضح بشكل جيد ما تريد القيام به ، بالإضافة إلى أنه يحتوي على بعض اللمسات اللطيفة ، مثل التطبيقات الخاصة لـ (Evil) IE6. حتى إذا لم ينجح الكود في ذلك ، نأمل أن يمنحك فكرة أن تبدأ (وربما كنت ستصدر عملك مفتوح المصدر ، حتى يتمكن الآخرون من الاستفادة منه).

وهناك أيضا gwtcanvas - قد يكون ما تحاول تنفيذه :) إن لم يكن ، يجدر التحقق من واجهة برمجة التطبيقات الخاصة بهم على الأقل ، لمعرفة كيف تعاملوا مع الأشياء.

حظا طيبا وفقك الله!