UiBinding

**jamone** · 20 Feb 2012 11:45 PM

I have tried running the UiBinding example posted at: http://www.sencha.com/learn/ext-gwt-...with-uibinder/

The "Click Me" button example.

The code compiles with no errors, but when I try to run it I get the following:

18:56:52.572 [ERROR] [uisencha] Error while executing the JavaScript provider for property 'gxt.user.agent'
com.google.gwt.core.client.JavaScriptException: (TypeError): v[a] is not a function
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
at com.google.gwt.dev.shell.ModuleSpacePropertyOracle.computePropertyValue(ModuleSpacePropertyOracle.java:193)
at com.google.gwt.dev.shell.ModuleSpacePropertyOracle.getSelectionProperty(ModuleSpacePropertyOracle.java:130)
at com.google.gwt.dev.cfg.ConditionWhenPropertyIs.doEval(ConditionWhenPropertyIs.java:61)
at com.google.gwt.dev.cfg.Condition.isTrue(Condition.java:52)
at com.google.gwt.dev.cfg.ConditionAny.doEval(ConditionAny.java:36)
at com.google.gwt.dev.cfg.Condition.isTrue(Condition.java:52)
at com.google.gwt.dev.cfg.ConditionAll.doEval(ConditionAll.java:37)
at com.google.gwt.dev.cfg.Condition.isTrue(Condition.java:52)
at com.google.gwt.dev.shell.ModuleSpacePropertyOracle.computeActiveCondition(ModuleSpacePropertyOracle.java:151)
at com.google.gwt.dev.shell.ModuleSpacePropertyOracle.computePropertyValue(ModuleSpacePropertyOracle.java:182)
at com.google.gwt.dev.shell.ModuleSpacePropertyOracle.getSelectionProperty(ModuleSpacePropertyOracle.java:130)
at com.google.gwt.user.rebind.UserAgentGenerator.generate(UserAgentGenerator.java:76)
at com.google.gwt.core.ext.GeneratorExtWrapper.generate(GeneratorExtWrapper.java:48)
at com.google.gwt.core.ext.GeneratorExtWrapper.generateIncrementally(GeneratorExtWrapper.java:60)
at com.google.gwt.dev.javac.StandardGeneratorContext.runGeneratorIncrementally(StandardGeneratorContext.java:647)
at com.google.gwt.dev.cfg.RuleGenerateWith.realize(RuleGenerateWith.java:41)
at com.google.gwt.dev.shell.StandardRebindOracle$Rebinder.rebind(StandardRebindOracle.java:78)
at com.google.gwt.dev.shell.StandardRebindOracle.rebind(StandardRebindOracle.java:268)
at com.google.gwt.dev.shell.ShellModuleSpaceHost.rebind(ShellModuleSpaceHost.java:141)
at com.google.gwt.dev.shell.ModuleSpace.rebind(ModuleSpace.java:585)
at com.google.gwt.dev.shell.ModuleSpace.rebindAndCreate(ModuleSpace.java:455)
at com.google.gwt.dev.shell.GWTBridgeImpl.create(GWTBridgeImpl.java:49)
at com.google.gwt.core.client.GWT.create(GWT.java:97)
at com.google.gwt.user.client.UserAgentAsserter.onModuleLoad(UserAgentAsserter.java:44)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:601)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
at java.lang.Thread.run(Thread.java:722)

The code is as below:

The html file

HTML Code:

<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="UiSencha.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Sencha UiBinding Test</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="uisencha/uisencha.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
    
  </body>
</html>

The gwt.xml file:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='uisencha'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>
  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                      -->
  <inherits name='com.extjs.gxt.ui.GXT'/>
  <inherits name='com.sencha.gxt.ui.GXT'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.foobar.uisencha.client.UiSencha'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

The uibinder xml file:

Code:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui"
	xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
	xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button">
	
	<gxt:FramedPanel collapsible="true" headingText="Example" pixelSize="100, 80">
		<button:TextButton ui:field="exampleButton" text="Click Me"></button:TextButton>
	</gxt:FramedPanel>
</ui:UiBinder>

The java file:

Code:

package com.foobar.uisencha.client;

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

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class UiSencha implements EntryPoint {
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		UiBinderSencha uiBinder = new UiBinderSencha();
		RootPanel.get().add(uiBinder);
	}
}

The Binder java file:

Code:

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class UiBinderSencha extends Composite {

	private static UiBinderSenchaBinder uiBinder = GWT
			.create(UiBinderSenchaBinder.class);

	@UiTemplate("UiBinderSencha.ui.xml")
	interface UiBinderSenchaBinder extends UiBinder<Widget, UiBinderSencha> {
	}

	public UiBinderSencha() {
		initWidget(uiBinder.createAndBindUi(this));
	}
}

GXT files:
gxt-3.0.0-beta2.jar
gxt-chart-3.0.0-beta2.jar
gxt-legacy-3.0.0-beta3.jar
uibinder-bridge-2.4.0.jar
gxt-2.2.5-gwt22.jar

Eclipse 3.7
jdk1.7.0
GWT-2.4.0

Can anyone spot any problem with the code and suggest what to do to make this example work?

As an aside, in the future when such examples are published can the author also provide all the files necessary to make the example work, such as the html, css, xml and java.

Thanks in advance.
Cheers

**PhiLho** · 21 Feb 2012 1:30 AM

I don't know if it will solve the issue, but in such example, you don't need the gxt-legacy-3.0.0-beta3.jar and the gxt-2.2.5-gwt22.jar libraries, as they serve only as bridge between legacy GXT 2 and the new one.
Likewise, you thus want to remove the <inherits name='com.extjs.gxt.ui.GXT'/> line from the gwt.xml file. And generally, it is recommended to remove the <inherits name='com.google.gwt.user.theme.clean.Clean'/> line as well, as GXT provides its own theme out of the box.

Side note: Beta3 is out...

Mmm, looks like you already have it, you mixed files...

**Colin Alworth** · 22 Feb 2012 8:53 PM

The examples each have uibinder and java files - those java files implement EntryPoint, so with a simple module and html file (as described in the setup file) you should be able to get going - and those should be part of any working GWT project.

Create a GWT project, add the GXT 3 jar (and optionally the gxt 3 uibinder jar), add the GXT module to your .gwt.xml file, and reference the entrypoint. All other steps are the same steps as getting any GWT project going, which is already fairly well documented at http://code.google.com/webtoolkit/usingeclipse.html

UiBinding

Thread Tools

Search Thread

Display

Unanswered: UiBinding

Unanswered: UiBinding