Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • Disabled TextItem looking for image in wrong place

    I am using the Enterprise skin in SmartGWT 1.1.

    I have been experimenting with programmatically disabling items in a DynamicForm. When I set any TextItem fields to disabled in Internet Explorer 7, a small red cross appears over the item. It appears that it is looking for the file \sc\skins\standard\images\blank.gif.

    I have tried creating the required directories (standard and images) and copying the Enterprise blank.gif to the above location within my compiled webapp’s directory structure. That’s a work-around for the problem.

    Is this a bug in SmartGWT?

  • #2
    This kind of thing could happen if you are creating components before load_skin.js has loaded. Have you customized the .html output from GWT? Can you show your .html bootstrap file?

    Comment


    • #3
      We have modified the Host HTML file, I have reproduced it below.

      We use RootPanel.get().add() to add things to the page. The stuff we have in our Host HTML is just for while the application is loading. We hide it once have loaded and are adding things to the RootPanel.

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      
      
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      
      	<meta http-equiv="X-UA-Compatible" content="IE=7" />
      	<meta name="keywords" content="" />
      	<meta name="description" content="" />
      	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
      
      	<meta name="robots" content="all" />
      	<meta http-equiv="Content-Language" content="en-us" />
      	<meta name="copyright" content="[Company Name] - [Current Year]" />
      
      <title id="appTitle"></title>
      <link rel="icon" href="favicon.ico" type="image/x-icon">
      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
      
          <!--CSS for loading message at application Startup-->
          <style type="text/css" media="screen">	
      		@import "css/base.css";
      		@import "css/interface.css";
      		@import "css/tables.css";
      		@import "DatePicker.css";
          </style>
      
      <!--                                           -->
      <!-- 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="com.mycompany.myui.MyUiApp.nocache.js"></script>
      
      <script> var isomorphicDir = "com.mycompany.myui.MyUiApp/sc/"; </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 id="top">
      
      <!-- 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>
      
      <!--add loading indicator while the app is being loaded-->
      <div id=loadingEnvelope>
      	<!--Header-->
      	<div id="loadingHeader">
      		<h1 id="loadingLogo"><a href="#">mycompany, Ltd.</a></h1>						
      	</div><!--/div#loadingHeader-->
      	<div class="mainContentEnvelope">
      		<div class="mainContentInner">
      			<div class="tl"><div class="tr"></div></div>
      			<div class="mainContent">
      				<div id=loadingEnvelope1>
      					<div id="psy-LoadingMessage"><div>Loading Application ... please wait</div>
      					</div><!-- /psy-LoadingMessage -->
      				</div><!--  /div.loadingEnvelope1 -->
      			</div><!-- /div.mainContent -->
      		</div><!-- /div.mainContentInner -->
      	</div><!-- /div.mainContentEnvelope -->
      	<div id="loadingFooter">&copy; <a href="http://www.mycompany.com"
      		target="_blank">mycompany Ltd.</a> 2009</div>
      </div><!--  /div.loadingEnvelope -->
      
      <div id="popupForm" >
      </div>
      
      <div id="popupProgress" >
      </div>
      
      </body>
      </html>
      Our application's .gwt.xml file:

      Code:
      <module>
            <!-- Inherit the core Web Toolkit stuff.                        -->
      	<inherits name='com.google.gwt.user.User' />
      
            <!-- Inherit SmartGWT -->
      	<inherits name="com.smartgwt.SmartGwt" />
      
            <!-- 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.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.google.gwt.i18n.I18N" />
      
            <!--  <extend-property name="locale" values="fr"/> 			  -->
      
            <!-- Specify the app entry point class.                         -->
      	<entry-point class='com.mycompany.myui.client.MyUiApp' />
      	<servlet path="/myui" class="com.mycompany.myui.server.rpc.MyUiServiceImpl" />
      	
      
      
            <!-- Specify the application specific style sheet.              -->
      	<stylesheet src='MyUiApp.css' />
      </module>

      Comment


      • #4
        have you tried to switch:

        <script type="text/javascript" language="javascript"
        src="com.mycompany.myui.MyUiApp.nocache.js"></script>

        <script> var isomorphicDir = "com.mycompany.myui.MyUiApp/sc/"; </script>

        It seems it has more sence switched.

        Comment


        • #5
          Just checking in on this - the suggested change of setting isomorphicDir before loading SmartClient seems correct - did this resolve the issue for you?

          Comment


          • #6
            Hi,

            I am also experiencing the same problem, but setting isomorphic dir before loading SmartClient did not resolve the issue (it is setup like this from the start of the project).

            HTML:
            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
             
            <html>
              <head>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8">
               
                <title>Title</title>
                
                <!--  Needed for SmartGWT in GWT 1.6 -->
                <script>
            	var isomorphicDir = "myapp/sc/";
                </script>
                <script type="text/javascript" language="javascript" src="myapp/myapp.nocache.js"></script>
              </head>
                                                      
              <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>
              </body>	
            </html>

            Comment


            • #7
              @pedjacar get rid of your XHTML doctype and use an HTML one (if you declare one at all - it's not necessary and in some cases slower).

              @AW did your problem get resolved by the isomorphicDir setting?

              Comment


              • #8
                Removing the doctype helped - the img with false src attribute is no longer generated (span is generated instead).

                Comment


                • #9
                  Apologies for the delayed reply, I have been on holiday.

                  When I posted the example, we were using GWT 1.6.4. I have tried the suggested change of setting isomorphicDir before loading SmartClient in our GWT 1.6.4 branch. This did not resolve the problem, and in fact made things worse, as none of the SmartGWT images then appeared in my application.

                  While I was away, we upgraded to GWT 1.7.0. As part of this process we restructured our host HTML file. That included setting the isomorphic dir before the script line that points to the nocache.js file. We get the same behaviour as originally reported – images are found for most SmartGWT elements, but not the \sc\skins\standard\images\blank.gif. I don’t know why it is looking in skins\standard when we are using the Enterprise skin.

                  Comment


                  • #10
                    If setting isomorphicDir caused all the images to disappear in the older version, that just means the setting was wrong.

                    The problem with "blank.gif" indicates that some application code is calling image-related methods before load_skin.js has been loaded (load_skin.js is what actually sets the skin to Enterprise). However we have no been able to actually reproduce this yet. If you look at Firebug as your application loads, do you in fact see application code files arriving before load_skin.js?

                    Comment


                    • #11
                      Hi, Isomorphic!

                      I´m getting the same problem, as reported in http://forums.smartclient.com/showthread.php?p=33579. But this happens only on IE, firefox looks for the image in the correct path (enterprise/images)

                      I removed the DOCTYPE from my host HTML file, but still did not work. But after checking at firebug I saw that my App code is really been loaded before loadskin.js (see attachment).

                      I just tryed to revert this order, removing parts of my code, but my app code is been loaded before loadskin.js even when I have an empty onModuleLoad!

                      So, do you have any idea of why is this happening on IE? Does this load order really matters?

                      Actually I "solved" that by creating the standard/images directory and copying to it the blank.gif file. I hope anyone can guide me to achieve a better solution.

                      [],
                      Matheus

                      Comment


                      • #12
                        Hi mgbf,

                        There was no attachment, but if your application code loads and executes before load_skin.js, this problem would be expected. What does your host .html file and gwt.xml look like?

                        And can you share the Firebug trace you previously mentioned you were attaching?

                        Comment


                        • #13
                          Hi, Isomorphic! Thanks for the response.

                          I´m sending the missing attachment, and also my HTML, gwt.xml and java class files.

                          Please notice that on Firefox my app javascript file is been loaded before load_skin.js, but Firefox looks for the blank.gif in the right path (Enterprise). Just Internet Explorer points to this image in the non-existent 'stardard' directory

                          Code:
                          <?xml version="1.0" encoding="UTF-8"?>
                          <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
                          <module rename-to='EntregaProposicaoGabineteApp'>
                            
                             <!-- Heranças: GWT, SmartGWT e Developer Console -->
                            <inherits name='com.google.gwt.user.User'/>
                            <inherits name='com.smartgwt.SmartGwt'/>
                          
                            <!-- Caminhos para fontes usados no lado cliente  -->
                            <source path="multilayer"/>
                            <source path="client"/>
                            <source path="rp/modelo"/>
                            <source path="dp/modelo"/>
                            <source path="rc/modelo"/>
                            
                            <!-- Ponto de entrada da aplicação -->
                            <entry-point class='br.gov.almg.client.EntregaProposicaoGabineteApp'/>
                          
                          </module>
                          Code:
                          package br.gov.almg.client;
                          
                          import br.gov.almg.multilayer.dto.ListaDTOItemLista;
                          import br.gov.almg.multilayer.service.ServicoPlenario;
                          import br.gov.almg.multilayer.service.ServicoPlenarioAsync;
                          
                          import com.google.gwt.core.client.EntryPoint;
                          import com.google.gwt.core.client.GWT;
                          import com.google.gwt.user.client.Window;
                          import com.google.gwt.user.client.rpc.AsyncCallback;
                          import com.google.gwt.user.client.ui.RootPanel;
                          import com.smartgwt.client.widgets.IButton;
                          import com.smartgwt.client.widgets.events.ClickEvent;
                          import com.smartgwt.client.widgets.events.ClickHandler;
                          import com.smartgwt.client.widgets.form.DynamicForm;
                          import com.smartgwt.client.widgets.form.fields.TextItem;
                          
                          
                          /**
                           * Entry point classes define <code>onModuleLoad()</code>.
                           */
                          
                          public class EntregaProposicaoGabineteApp implements EntryPoint {
                          
                          	DynamicForm df;
                          	TextItem ti;
                          	IButton button;
                          	
                          	private final ServicoPlenarioAsync plenarioService = 
                          	GWT.create(ServicoPlenario.class);
                          
                          	@Override
                          	public void onModuleLoad() {
                          		df = new DynamicForm();
                          		ti = new TextItem("test", "test");
                          		ti.setDisabled(true);
                          		
                          		df.setFields(ti);
                          		
                          		button = new IButton("testButton");
                          		button.addClickHandler(new ClickHandler() {
                          			
                          			@Override
                          			public void onClick(ClickEvent event) {
                          				// TODO Auto-generated method stub
                          				plenarioService.GetListaAutoresPorTipo(1, new AsyncCallback<ListaDTOItemLista>() {
                          					
                          					@Override
                          					public void onSuccess(ListaDTOItemLista result) {
                          						// TODO Auto-generated method stub
                          						Window.alert("OK");
                          					}
                          					
                          					@Override
                          					public void onFailure(Throwable caught) {
                          						// TODO Auto-generated method stub
                          						Window.alert("Error");
                          					}
                          				});				
                          			}
                          		});
                          		
                          		RootPanel.get("painelCentral").add(df);
                          		RootPanel.get("painelCentral").add(button);
                          	}
                          }
                          Code:
                          <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="entrega_proposicao_gabinete.css">
                          
                              <!--                                           -->
                              <!-- Any title is fine                         -->
                              <!--                                           -->
                              <title>Entrega Eletrônica de Proposições</title>
                          <script>
                             var isomorphicDir = "EntregaProposicaoGabineteApp/sc/";
                          </script>
                          
                              <!--                                           -->
                              <!-- 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="EntregaProposicaoGabineteApp/EntregaProposicaoGabineteApp.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 class="xtheme-aero">
                            
                              <!-- 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>
                              <div id="painelCentral" style="align:center"></div>
                            </body>
                          </html>
                          Attached Files
                          Last edited by mgbf; 27th Nov 2009, 07:58.

                          Comment


                          • #14
                            Hello mgbf,

                            You can almost certainly fix this by inheriting SmartGwtNoScript instead and manually including each of the core SmartClient JS files you can see loading. We'll see if there's something we can do to make GWT load things in the proper order.

                            Comment


                            • #15
                              I'm experiencing the same problem.

                              I tried to mess about with SmartGwtNoScript and the order of the included script files, but in the end none of that worked.

                              I did find the following snippet in line 1008 of ISC_Core.js:
                              Code:
                              {this.$hk.SKIN=this.combineURLs(this.getAppDir(),_1!=null?_1:"[ISOMORPHIC]/skins/standard/");this.$hk.SKINIMG=this.$hk.SKIN+"images/";if(isc.Canvas)isc.Canvas.$ht=isc.Canvas.$hu=null}
                              Whatever it does, it definitely hardcodes "skins/standard" right there.

                              Comment

                              Working...
                              X