1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    59
    Vote Rating
    0
    jamone is on a distinguished road

      0  

    Default Unanswered: UiBinding

    Unanswered: UiBinding


    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

  2. #2
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    140
    Vote Rating
    1
    Answers
    2
    PhiLho is on a distinguished road

      0  

    Default


    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...

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Answers
    109
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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

Thread Participants: 2