Announcement

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

    After compile to JS smartgwt component style is missing!!

    Hi, I am using smartgwt menu component. Everything is OK, but when I compile to JS and running at host mode it looks not as expected and just ugly. I think that css style is missing for this component... What can be the cause? Am I missing some row in gwt.xml?
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <module rename-to='treemenu'>
                       
      <inherits name='com.google.gwt.user.User'/>
      <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> 
      <inherits name='com.google.gwt.user.theme.standard.Standard'/>
      <inherits name='com.smartgwt.SmartGwt'/> 
      <entry-point class='com.treemenu.client.Treemenu'/>
              
      <source path='client'/>
      <source path='shared'/>
    </module>
    Thanks!

    #2
    Just now understood that this are images, that makes the look of components and they are not found! After compile the folder /sc/skins/standrat is not located at its place, only folder Enterprise with lot of images. Is it compiler issue? Why does create so many unnecessary stuff?

    Comment


      #3
      Also the URL for images is created wrong. I am using spring and when JS creates components images URL it takes dispatcher servlet url-pattern. Is this somehow can be changed in the code or some compile options? Seems compiled JS contains something like getHostPageBaseURL() instead getModuleBaseURL() when creating url for images? For example URL for button image is http://localhost:8080/web-shop/app/t...button_end.png
      but should be http://localhost:8080/web-shop/js/tr...button_end.png
      With just GWT there where no such problems. How to configure this stuff?
      (p.s. I am using eclipse and smartgwt 2.2)
      Last edited by M.; 20 Sep 2010, 06:02.

      Comment


        #4
        Please read the FAQ sticky post and then closely examine the Hello World example provided in the Smart GWT distribution.

        Comment


          #5
          smartgwt.dev, thanks for advise.
          But there I didn't find the answer.There is similar issue http://code.google.com/p/smartgwt/issues/detail?id=36 but there is no solution. Only thing I found is to set isomorphicDir, but this doesn't solve the problem. Resources are still loaded relative to the context URL!

          Comment


            #6
            The issue you point to has been resolved. Again, try comparing your sample to the simple Hello World sample distributed with Smart GWT which clearly works.

            The FAQ also mentions not to inherit the Standard GWT theme modules but that does not appear to be the primary cause here.

            If you still cannot figure it out, post your host html file contents as well.

            Sanjiv

            Comment


              #7
              Originally posted by sjivan
              ..try comparing your sample to the simple Hello World sample distributed with Smart GWT which clearly works..
              Sanjiv
              Everything works perfect until I add all this compiled stuff to my webapp, so I found nothing new in HelloWorld project..
              Once again, this damn resource URLs are wrong :((((
              hosted.html (although I have no idea about this file purpose :) )
              Code:
              <html>
              <head><script>
              var $wnd = parent;
              var $doc = $wnd.document;
              var $moduleName, $moduleBase, $entry
              ,$stats = $wnd.__gwtStatsEvent ? function(a) {return $wnd.__gwtStatsEvent(a);} : null
              ,$sessionId = $wnd.__gwtStatsSessionId ? $wnd.__gwtStatsSessionId : null;
              // Lightweight metrics
              if ($stats) {
                var moduleFuncName = location.search.substr(1);
                var moduleFunc = $wnd[moduleFuncName];
                var moduleName = moduleFunc ? moduleFunc.moduleName : "unknown";
                $stats({moduleName:moduleName,sessionId:$sessionId,subSystem:'startup',evtGroup:'moduleStartup',millis:(new Date()).getTime(),type:'moduleEvalStart'});
              }
              var $hostedHtmlVersion="2.0";
              
              var gwtOnLoad;
              var $hosted = "localhost:9997";
              
              function loadIframe(url) {
                var topDoc = window.top.document;
              
                // create an iframe
                var iframeDiv = topDoc.createElement("div");
                iframeDiv.innerHTML = "<iframe scrolling=no frameborder=0 src='" + url + "'>";
                var iframe = iframeDiv.firstChild;
                
                // mess with the iframe style a little
                var iframeStyle = iframe.style;
                iframeStyle.position = "absolute";
                iframeStyle.borderWidth = "0";
                iframeStyle.left = "0";
                iframeStyle.top = "0";
                iframeStyle.width = "100%";
                iframeStyle.backgroundColor = "#ffffff";
                iframeStyle.zIndex = "1";
                iframeStyle.height = "100%";
              
                // update the top window's document's body's style
                var hostBodyStyle = window.top.document.body.style; 
                hostBodyStyle.margin = "0";
                hostBodyStyle.height = iframeStyle.height;
                hostBodyStyle.overflow = "hidden";
              
                // insert the iframe
                topDoc.body.insertBefore(iframe, topDoc.body.firstChild);
              }
              
              var ua = navigator.userAgent.toLowerCase();
              if (ua.indexOf("gecko") != -1) {
                // install eval wrapper on FF to avoid EvalError problem
                var __eval = window.eval;
                window.eval = function(s) {
                  return __eval(s);
                }
              }
              if (ua.indexOf("chrome") != -1) {
                // work around __gwt_ObjectId appearing in JS objects
                var hop = Object.prototype.hasOwnProperty;
                Object.prototype.hasOwnProperty = function(prop) {
                  return prop != "__gwt_ObjectId" && hop.call(this, prop);
                };
              }
              
              // wrapper to call JS methods, which we need both to be able to supply a
              // different this for method lookup and to get the exception back
              function __gwt_jsInvoke(thisObj, methodName) {
                try {
                  var args = Array.prototype.slice.call(arguments, 2);
                  return [0, window[methodName].apply(thisObj, args)];
                } catch (e) {
                  return [1, e];
                }
              }
              
              var __gwt_javaInvokes = [];
              function __gwt_makeJavaInvoke(argCount) {
                return __gwt_javaInvokes[argCount] || __gwt_doMakeJavaInvoke(argCount);
              }
              
              function __gwt_doMakeJavaInvoke(argCount) {
                // IE6 won't eval() anonymous functions except as r-values
                var argList = "";
                for (var i = 0; i < argCount; i++) {
                  argList += ",p" + i;
                }
                var argListNoComma = argList.substring(1);
              
                return eval(
                  "__gwt_javaInvokes[" + argCount + "] =\n" +
                  "  function(thisObj, dispId" + argList + ") {\n" +
                  "    var result = __static(dispId, thisObj" + argList + ");\n" +
                  "    if (result[0]) {\n" +
                  "      throw result[1];\n" +
                  "    } else {\n" +
                  "      return result[1];\n" +
                  "    }\n" +
                  "  }\n"
                ); 
              }
              
              /*
               * This is used to create tear-offs of Java methods.  Each function corresponds
               * to exactly one dispId, and also embeds the argument count.  We get the "this"
               * value from the context in which the function is being executed.
               * Function-object identity is preserved by caching in a sparse array.
               */
              var __gwt_tearOffs = [];
              var __gwt_tearOffGenerators = [];
              function __gwt_makeTearOff(proxy, dispId, argCount) {
                return __gwt_tearOffs[dispId] || __gwt_doMakeTearOff(dispId, argCount);
              }
              
              function __gwt_doMakeTearOff(dispId, argCount) {
                return __gwt_tearOffs[dispId] = 
                    (__gwt_tearOffGenerators[argCount] || __gwt_doMakeTearOffGenerator(argCount))(dispId);
              }
              
              function __gwt_doMakeTearOffGenerator(argCount) {
                // IE6 won't eval() anonymous functions except as r-values
                var argList = "";
                for (var i = 0; i < argCount; i++) {
                  argList += ",p" + i;
                }
                var argListNoComma = argList.substring(1);
              
                return eval(
                  "__gwt_tearOffGenerators[" + argCount + "] =\n" +
                  "  function(dispId) {\n" +
                  "    return function(" + argListNoComma + ") {\n" +
                  "      var result = __static(dispId, this" + argList + ");\n" +
                  "      if (result[0]) {\n" +
                  "        throw result[1];\n" +
                  "      } else {\n" +
                  "        return result[1];\n" +
                  "      }\n" +
                  "    }\n" +
                  "  }\n"
                ); 
              }
              
              function __gwt_makeResult(isException, result) {
                return [isException, result];
              }
              
              function __gwt_disconnected() {
                // Prevent double-invocation.
                window.__gwt_disconnected = new Function();
                // Do it in a timeout so we can be sure we have a clean stack.
                window.setTimeout(__gwt_disconnected_impl, 1);
              }
              
              function __gwt_disconnected_impl() {
                var topWin = window.top;
                var topDoc = topWin.document;
                var outer = topDoc.createElement("div");
                // Do not insert whitespace or outer.firstChild will get a text node.
                outer.innerHTML = 
                  '<div style="position:absolute;z-index:2147483646;left:0px;top:0px;right:0px;bottom:0px;filter:alpha(opacity=75);opacity:0.75;background-color:#000000;"></div>' +
                  '<div style="position:absolute;z-index:2147483647;left:50px;top:50px;width:600px;color:#FFFFFF;font-family:verdana;">' +
                    '<div style="font-size:30px;font-weight:bold;">GWT Code Server Disconnected</div>' +
                    '<p style="font-size:15px;"> Most likely, you closed GWT development mode. Or you might have lost network connectivity. To fix this, try restarting GWT Development Mode and <a style="color: #FFFFFF; font-weight: bold;" href="javascript:location.reload()">REFRESH</a> this page.</p>' +
                  '</div>'
                ;
                topDoc.body.appendChild(outer);
                var glass = outer.firstChild;
                var glassStyle = glass.style;
              
                // Scroll to the top and remove scrollbars.
                topWin.scrollTo(0, 0);
                if (topDoc.compatMode == "BackCompat") {
                  topDoc.body.style["overflow"] = "hidden";
                } else {
                  topDoc.documentElement.style["overflow"] = "hidden";
                }
              
                // Steal focus.
                glass.focus();
              
                if ((navigator.userAgent.indexOf("MSIE") >= 0) && (topDoc.compatMode == "BackCompat")) {
                  // IE quirks mode doesn't support right/bottom, but does support this.
                  glassStyle.width = "125%";
                  glassStyle.height = "100%";
                } else if (navigator.userAgent.indexOf("MSIE 6") >= 0) {
                  // IE6 doesn't have a real standards mode, so we have to use hacks.
                  glassStyle.width = "125%"; // Get past scroll bar area.
                  // Nasty CSS; onresize would be better but the outer window won't let us add a listener IE.
                  glassStyle.setExpression("height", "document.documentElement.clientHeight");
                }
              }
              
              function findPluginObject() {
                try {
                  return document.getElementById('pluginObject');
                } catch (e) {
                  return null;
                }
              }
              
              function findPluginEmbed() {
                try {
                  return document.getElementById('pluginEmbed')
                } catch (e) {
                  return null;
                }
              }
              
              function findPluginXPCOM() {
                try {
                  return __gwt_HostedModePlugin;
                } catch (e) {
                  return null;
                }
              }
              
              gwtOnLoad = function(errFn, modName, modBase){
                $moduleName = modName;
                $moduleBase = modBase;
              
                // Note that the order is important
                var pluginFinders = [
                  findPluginXPCOM,
                  findPluginObject,
                  findPluginEmbed,
                ];
                var topWin = window.top;
                var url = topWin.location.href;
                if (!topWin.__gwt_SessionID) {
                  var ASCII_EXCLAMATION = 33;
                  var ASCII_TILDE = 126;
                  var chars = [];
                  for (var i = 0; i < 16; ++i) {
                    chars.push(Math.floor(ASCII_EXCLAMATION
                        + Math.random() * (ASCII_TILDE - ASCII_EXCLAMATION + 1)));
                  }
                  topWin.__gwt_SessionID = String.fromCharCode.apply(null, chars);
                }
                var plugin = null;
                for (var i = 0; i < pluginFinders.length; ++i) {
                  try {
                    var maybePlugin = pluginFinders[i]();
                    if (maybePlugin != null && maybePlugin.init(window)) {
                      plugin = maybePlugin;
                      break;
                    }
                  } catch (e) {
                  }
                }
                if (!plugin) {
                  // try searching for a v1 plugin for backwards compatibility
                  var found = false;
                  for (var i = 0; i < pluginFinders.length; ++i) {
                    try {
                      plugin = pluginFinders[i]();
                      if (plugin != null && plugin.connect($hosted, $moduleName, window)) {
                        return;
                      }
                    } catch (e) {
                    }
                  }
                  loadIframe("http://gwt.google.com/missing-plugin");
                } else {
                  if (plugin.connect(url, topWin.__gwt_SessionID, $hosted, $moduleName,
                      $hostedHtmlVersion)) {
                    window.onUnload = function() {
                      try {
                        // wrap in try/catch since plugins are not required to supply this
                        plugin.disconnect();
                      } catch (e) {
                      }
                    };
                  } else {
                    if (errFn) {
                      errFn(modName);
                    } else {
                      alert("Plugin failed to connect to hosted mode server at " + $hosted);
                      loadIframe("http://code.google.com/p/google-web-toolkit/wiki/TroubleshootingOOPHM");
                    }
                  }
                }
              }
              
              window.onunload = function() {
              };
              
              // Lightweight metrics
              window.fireOnModuleLoadStart = function(className) {
                $stats && $stats({moduleName:$moduleName, sessionId:$sessionId, subSystem:'startup', evtGroup:'moduleStartup', millis:(new Date()).getTime(), type:'onModuleLoadStart', className:className});
              };
              
              window.__gwt_module_id = 0;
              </script></head>
              <body>
              <font face='arial' size='-1'>This html file is for hosted mode support.</font>
              <script><!--
              // Lightweight metrics
              $stats && $stats({moduleName:$moduleName, sessionId:$sessionId, subSystem:'startup', evtGroup:'moduleStartup', millis:(new Date()).getTime(), type:'moduleEvalEnd'});
              
              // OOPHM currently only supports IFrameLinker
              var query = parent.location.search;
              if (!findPluginXPCOM()) {
                document.write('<embed id="pluginEmbed" type="application/x-gwt-hosted-mode" width="10" height="10">');
                document.write('</embed>');
                document.write('<object id="pluginObject" CLASSID="CLSID:1D6156B6-002B-49E7-B5CA-C138FB843B4E">');
                document.write('</object>');
              }
              
              // look for the old query parameter if we don't find the new one
              var idx = query.indexOf("gwt.codesvr=");
              if (idx >= 0) {
                idx += 12;  // "gwt.codesvr=".length() == 12
              } else {
                idx = query.indexOf("gwt.hosted=");
                if (idx >= 0) {
                  idx += 11;  // "gwt.hosted=".length() == 11
                }
              }
              if (idx >= 0) {
                var amp = query.indexOf("&", idx);
                if (amp >= 0) {
                  $hosted = query.substring(idx, amp);
                } else {
                  $hosted = query.substring(idx);
                }
              
                // According to RFC 3986, some of this component's characters (e.g., ':')
                // are reserved and *may* be escaped.
                $hosted = decodeURIComponent($hosted);
              }
              
              query = window.location.search.substring(1);
              if (query && $wnd[query]) setTimeout($wnd[query].onScriptLoad, 1);
              --></script></body></html>

              Comment


                #8
                Really, no idea? I am stuck here :( , what point of widgets without appearance )) !

                Comment


                  #9
                  host html is your applications .html file, not hosted.html

                  The Hello World sample comes with an ant build file that has a "war" target to generate a war file. Compare the structure of this war with your deployment. Everyone else has gotten Smart GWT to display fine. If you still cannot figure it out, then consider purchasing support.

                  Comment

                  Working...
                  X