Can we create widgets/composites from html content?

GWT Designer allows you to quickly create the modules, composites, panels, remote services and other elements that comprise Google Web Tookit applications.

Moderators: Konstantin.Scheglov, gnebling, Alexander.Mitin, jwren, Eric Clayberg

Can we create widgets/composites from html content?

Postby peterblazejewicz » Sun Apr 06, 2008 12:35 pm

hi all,

Is that possible to create Composite/Widget in GWTD using existing html page content? (assuming for a moment basic requirement as to get something drawn in design view):

HTML Page:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta name='gwt:module' content= 'com.mycompany.project.TestingWidgets'>
        <link type="text/css" rel='stylesheet' href= 'TestingWidgets.css'>
        <title></title>
    </head>
    <body>
        <!-- element on page -->
        <div id="front">
        </div>
        <!-- gwt script -->
        <script type="text/javascript" language="javascript" src= "com.mycompany.project.TestingWidgets.nocache.js">
        </script>
    </body>
</html>


so there is:
Code: Select all
<div id="front"></div>


.css:
Code: Select all
body {
    margin: 0;
}

#front {
    width: 200px;
    height: 200px;
    background-color: red;
}


composite:
Code: Select all
package com.mycompany.project.client.ui;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class Front extends Composite {
   public static class WidgetWrapper extends Widget {
      public WidgetWrapper(Element element) {
         setElement(element);
      }
   }

   /**
    * @wbp.factory
    */
   public static final Widget getFront() {
      return new Front.WidgetWrapper(DOM.getElementById("front"));
   }

   public Front() {
      final Widget front = Front.getFront();
      initWidget(front);
   }

}


this throws errors in Design view (very lengthy ones):
eclipse.buildId=I20080207-1530
java.version=1.5.0_13
java.vendor=Apple Inc.
BootLoader constants: OS=macosx, ARCH=x86, WS=carbon, NL=en_US
Framework arguments: -keyring /Users/kacper/.eclipse_keyring -showlocation
Command-line arguments: -os macosx -ws carbon -arch x86 -keyring /Users/kacper/.eclipse_keyring -consoleLog -showlocation


Error
Sun Apr 06 22:37:33 CEST 2008
Designer [6.6.0.200804041016]: com.swtdesigner.properties.PropertyException: java.lang.reflect.InvocationTargetException

Product: GWT Designer Subscription
Version: 4.0.0.200804040904
Expected: Eclipse 3.3
Actual: Eclipse 3.4.0.v20080201
Actual Eclipse Build Name:
Actual Eclipse Build ID: I20080207-1530
IDE Actual Name: Eclipse
IDE Actual Version: 3.3.100.I20080204-0800
IDE Actual NL: en_US
Serial Number: ########
Activation Key: ########
Physical Address: #############, HardwareAddress[##########], HardwareAddress[#######]
Code Gen: Flat Mode, Use Existing, First Assignment, Make Final
Events: Anonymous Class
GWT Home: /Users/kacper/gwt-mac-1.4.61
Platform Product: Eclipse
Platform Version: 3.3.100.I20080204-0800
OS Name: Mac OS X
OS Architecture: i386
OS Version: 10.5.2


org.apache.commons.lang.exception.NestableError: com.swtdesigner.properties.PropertyException: java.lang.reflect.InvocationTargetException
at com.swtdesigner.model.swing.properties.custom.DesignTimeHelper.execute(DesignTimeHelper.java:56)
at com.swtdesigner.model.JavaInfo.notifyPropertyChanged(JavaInfo.java:5605)
at com.swtdesigner.model.JavaInfo.notifyPropertyChanged(JavaInfo.java:5586)
at com.swtdesigner.gef.common.property.DesignerEditorPropertyComposite.handleRootNodeSelected(DesignerEditorPropertyComposite.java:665)
at com.swtdesigner.gef.common.property.DesignerEditorPropertyComposite.updatePropertyComposite(DesignerEditorPropertyComposite.java:872)
at com.swtdesigner.gef.DesignerEditor.parseCompilationUnit(DesignerEditor.java:1202)
at com.swtdesigner.gef.DesignerEditor.refreshDesignView(DesignerEditor.java:1258)
at com.swtdesigner.gef.DesignerEditor$14.widgetSelected(DesignerEditor.java:984)
at org.eclipse.swt.widgets.TypedListener.handleEvent(TypedListener.java:227)
at org.eclipse.swt.widgets.EventTable.sendEvent(EventTable.java:84)
at org.eclipse.swt.widgets.Widget.sendEvent(Widget.java:1553)
at org.eclipse.swt.widgets.Widget.sendEvent(Widget.java:1577)
at org.eclipse.swt.widgets.Widget.sendEvent(Widget.java:1562)
at org.eclipse.swt.widgets.Widget.notifyListeners(Widget.java:1353)
at org.eclipse.swt.widgets.Display.runDeferredEvents(Display.java:3409)
at org.eclipse.swt.widgets.Display.readAndDispatch(Display.java:3007)
at org.eclipse.ui.internal.Workbench.runEventLoop(Workbench.java:2392)
at org.eclipse.ui.internal.Workbench.runUI(Workbench.java:2356)
at org.eclipse.ui.internal.Workbench.access$4(Workbench.java:2222)
at org.eclipse.ui.internal.Workbench$4.run(Workbench.java:474)
at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:288)
at org.eclipse.ui.internal.Workbench.createAndRunWorkbench(Workbench.java:469)
at org.eclipse.ui.PlatformUI.createAndRunWorkbench(PlatformUI.java:149)
at org.eclipse.ui.internal.ide.application.IDEApplication.start(IDEApplication.java:106)
at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:193)
at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:106)
at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:76)
at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:362)
at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:175)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:585)
at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:564)
at org.eclipse.equinox.launcher.Main.basicRun(Main.java:504)
at org.eclipse.equinox.launcher.Main.run(Main.java:1251)
Caused by: com.swtdesigner.properties.PropertyException: java.lang.reflect.InvocationTargetException
at com.swtdesigner.gwt.model.widgets.panel.ThisCompositeInfo.createGUIComponent(ThisCompositeInfo.java:206)
at com.swtdesigner.model.JavaInfo$18.execute(JavaInfo.java:5610)
at com.swtdesigner.model.swing.properties.custom.DesignTimeHelper.execute(DesignTimeHelper.java:54)
... 35 more
Caused by: java.lang.reflect.InvocationTargetException
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:585)
at com.swtdesigner.gwt.model.widgets.support.GWTState.call_AbsolutePanel_add(GWTState.java:1047)
at com.swtdesigner.gwt.model.widgets.panel.ThisCompositeInfo.setupCompositeBounds(ThisCompositeInfo.java:253)
at com.swtdesigner.gwt.model.widgets.panel.ThisCompositeInfo.onWidgetSet(ThisCompositeInfo.java:243)
at com.swtdesigner.gwt.model.widgets.panel.support.ThisCompositeSupport.applyWidgetProperties(ThisCompositeSupport.java:33)
at com.swtdesigner.gwt.model.widgets.panel.AbstractContainerInfo.widget_applyProperties(AbstractContainerInfo.java:98)
at com.swtdesigner.gwt.model.widgets.WidgetInfo.createWidget(WidgetInfo.java:184)
at com.swtdesigner.gwt.model.widgets.panel.AbstractContainerInfo.createChildrenWidgets(AbstractContainerInfo.java:202)
at com.swtdesigner.gwt.model.widgets.panel.AbstractContainerInfo.createWidget(AbstractContainerInfo.java:183)
at com.swtdesigner.gwt.model.widgets.panel.ThisCompositeInfo.createWidget(ThisCompositeInfo.java:211)
at com.swtdesigner.gwt.model.widgets.panel.ThisCompositeInfo.createGUIComponent(ThisCompositeInfo.java:203)
... 37 more
Caused by: java.lang.RuntimeException: com.google.gwt.core.client.JavaScriptException: JavaScript TypeError exception: Null value
at com.swtdesigner.gwt.support.host.ModuleSpace.invokeNative(ModuleSpace.java:154)
at com.swtdesigner.gwt.support.host.ModuleSpace.invokeNativeVoid(ModuleSpace.java:111)
at com.swtdesigner.gwt.support.host.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:81)
at com.google.gwt.user.client.impl.DOMImpl.setStyleAttribute(DOMImpl.java)
at com.google.gwt.user.client.DOM.setStyleAttribute(DOM.java:1153)
at com.google.gwt.user.client.ui.AbsolutePanel.setWidgetPositionImpl(AbsolutePanel.java:156)
at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:86)
... 51 more
Caused by: com.google.gwt.core.client.JavaScriptException: JavaScript TypeError exception: Null value
at com.swtdesigner.gwt.support.host.ModuleSpace.invokeNative(ModuleSpace.java:152)
... 57 more


however if I change existing div element from html page to non-attached one:
Code: Select all
package com.mycompany.project.client.ui;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class Front extends Composite {
   public static class WidgetWrapper extends Widget {
      public WidgetWrapper(Element element) {
         setElement(element);
      }
   }

   /**
    * @wbp.factory
    */
   public static final Widget getFront() {
      return new Front.WidgetWrapper(DOM.createDiv());
   }

   public Front() {
      final Widget front = Front.getFront();
      initWidget(front);
   }

}


then it works fine in GWTD design view of that composite,

I'm asking because I'm trying to reuse 3rd application generated html content. I can easily reuse .CSS and recreate generated html using custom widgets, however reusing attached html tags would be easier and better (of course it would require some patching to GWT toolkit uiobject/widget/panel/complex panel classes).

regards,
peter
Peter Blazejewicz
GWT groups profile
peterblazejewicz
 
Posts: 153
Joined: Fri Jul 27, 2007 7:09 pm
Location: Europe/Poland/Warsaw

Re: Can we create widgets/composites from html content?

Postby peterblazejewicz » Sun Apr 06, 2008 1:37 pm

hi,

just in case: that way of sniffing widget is perfectly legal (though it requires some fine-tuning later by patching gwt classes) and can be tested that way:
CSS code:
Code: Select all
body {
    margin: 0;
}

#front {
    width: 200px;
    height: 200px;
    background-color: red;
}
#front.attached {
   background-color: green;
}


and entry point class:
Code: Select all
package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.mycompany.project.client.ui.Front;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class TestingWidgets implements EntryPoint {
   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();

      final Front front = new Front();
      front.setStyleName("attached");
      rootPanel.add(front);

   }
}

now div element should be rendered green instead of red,
hosted mode screnshot:
inHostedMode.png
inHostedMode.png (32.07 KiB) Viewed 755 times


regards,
Peter
Peter Blazejewicz
GWT groups profile
peterblazejewicz
 
Posts: 153
Joined: Fri Jul 27, 2007 7:09 pm
Location: Europe/Poland/Warsaw

Re: Can we create widgets/composites from html content?

Postby Eric Clayberg » Mon Apr 07, 2008 5:14 am

This is not something we plan to support with GWT Designer.

We essentially only use the GWT module HTML to extract CSS information.
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA

Re: Can we create widgets/composites from html content?

Postby peterblazejewicz » Mon Apr 07, 2008 7:56 am

hi Eric,
thanks for reply. That is something I expected remembering what you guys write about how widgets are build in GWTD for design authoring,
if possible put that into long-term wish-list for development plans,
thanks,
Peter
Peter Blazejewicz
GWT groups profile
peterblazejewicz
 
Posts: 153
Joined: Fri Jul 27, 2007 7:09 pm
Location: Europe/Poland/Warsaw

Re: Can we create widgets/composites from html content?

Postby Eric Clayberg » Mon Apr 07, 2008 6:51 pm

peterblazejewicz wrote:thanks for reply. That is something I expected remembering what you guys write about how widgets are build in GWTD for design authoring,
if possible put that into long-term wish-list for development plans

I'll keep it on our long term development list. ;-)
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA


Return to GWT Designer

Who is online

Users browsing this forum: No registered users and 3 guests