I have already asked such a question here but haven't got a reply which could work out. It is really important for me to resolve the problem. So, I try to develop an app using ExtGWT 2.3.0 / GWT 2.5.1 but faced the problem that widgets (both GWT and GXT) are not visible in browsers. I've been trying to solve this issue more than week but unfortunatelly I've failed. The stuff I have alredy tried:
using different libraries of GWT/GXT (using ExtGXT 3.x doesn't settle a problem);
creating project using Maven web-app / gxt3+ archetypes;
deploying project on Tomacat / lunching under GWT;
using different styles in GWT-module (like <inherits name='com.google.gwt.user.theme.standard.Standard'/>);
rewriting .css-file;
compiling project by Maven / GWT compiler;
cleaning up cache files in all relevant temp directories (as Windows' as well as Intellij IDEA's);
making Maven's clean install;
using different browsers of different versions (IE 8 and 11, Chrome, FF 24 and 36);
trying to lunch app in browsers with / without GWT developer plugin;
browsing internet to find solution (especially stackoverflow);
Maybe I left out smth but the list of actions is pretty much big.
By the way I logged actions and there were no any errors or exeptions thrown. If I declare border settings for the widgets in .css their borders become visible that testifies that widgets are on page. So, if anyone has experienced such a problem or just could suggest something please let me know. Frankly it is very important for me. Please take a look at screenshots of the folder structure / setting of the project. Thank you in advance.
EntryPoint - class
public class ProjectEntryPoint implements EntryPoint {
#Override
public void onModuleLoad() {
Viewport viewport = new Viewport();
final BorderLayout borderLayout = new BorderLayout();
BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 20);
northData.setSplit(false);
northData.setCollapsible(false);
BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
centerData.setCollapsible(false);
BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 200, 150, 300);
westData.setCollapsible(true);
westData.setSplit(true);
ContentPanel mainPanel = new ContentPanel();
mainPanel.setStyleName("mainPanel");
ContentPanel navPanel = new ContentPanel();
mainPanel.setStyleName("navPanel");
HTML headerHTML = new HTML();
headerHTML.setHTML("<h1>RSS Reader</h1>");
viewport.add(mainPanel, centerData);
viewport.add(navPanel, westData);
viewport.add(headerHTML, northData);
viewport.setLayout(borderLayout);
viewport.layout();
RootPanel.get().add(viewport);
}
}
module
<module rename-to='Project'>
<inherits name='com.google.gwt.user.User' />
<inherits name='com.extjs.gxt.ui.GXT' />
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<entry-point class='GXT3App.client.ProjectEntryPoint' />
<source path='client' />
<source path='shared' />
<add-linker name="xsiframe" />
</module>
.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="gxt-all.css">
<title>Project</title>
<script type="text/javascript" language="javascript" src="Project/Project.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>
.css
.mainPanel {
border: 1px solid black;
}
.navPanel {
border: 1px solid black;
}
It looks like a problem with missing styles - please double check that gxt-all.css is available from where you reference it in your host page. Use your browser's developer tools to see if it's not throwing a 404.
It seems that the missing resources are mentioned in Step 1 in the setup.txt file that is bundled with GXT 2.3:
Create a Google Web Application Project project within Eclipse.
Copy the contents of the /resources folder in the download to a {foldername} location within your war folder.
Substitute {foldername} with the name of the folder you've created for resources within your war folder.
Add the following stylesheet to your host page.
<link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-all.css" />
If you are using Charts, add the following script to your host page.
Add the following entry to you projects module xml file.
<inherits name='com.extjs.gxt.ui.GXT'/>
Eclipse Setup (should be similar for other development environments). These instructions assume you have a existing project and launch configuration.
Add gxt.jar to the project.
Add GXT jar to launch configuration.
This surely can't be the answer, but you have a typo in your code :
ContentPanel mainPanel = new ContentPanel();
mainPanel.setStyleName("mainPanel");
ContentPanel navPanel = new ContentPanel();
mainPanel.setStyleName("navPanel");
where the last line (I think) should be
navPanel.setStyleName("navPanel");
I solved the issue. I wouldn't say that it is an elegant solution but it works.
As discussed above the problem was in absence of .css-file which defined selectors that described widgets' styles (gxt-all.css). When creating project be sure that the following folders with relevant files are presented in project's webapp-directory (in the case you use Maven's web-app-archetype):
chart
css (contains gxt-all.css and gxt-grey.css)
desktop
flash
images
themes
All that stuff you can find in GXT installation archive in the folder resources. To use it just put all that folders in your project and define path to gxt-all.css in your host-html. It works for GXT 2.x.
Related
I installed the codesnippet plugin by copying the files in the plugins folder
I added codesnippet to the extra plugins line in include.php:
$ckeditor->config['extraPlugins'] = 'codesnippet,droplets,pagelink,shybutton,justify,colorbutton';
The plugin icon shows up in the editor, but when I click it the darkened background of the plugins dialogue appears only for a blink, than nothing happens.
As supposed in the ckeditor forum I even added the lines
<link rel="stylesheet" type="text/css" href="/modules/ckeditor/ckeditor/plugins/codesnippet/lib/highlight/styles/googlecode.css" />
<script src="/modules/ckeditor/ckeditor/ckeditor.js"></script>
<script src="/modules/ckeditor/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
to the header of my theme and checked the paths, which are ok, but nothing helps.
Does anynone have an idea what could be missing?
Just found out the folder /dialogs/ in my plugins/codesnippet folder was missing. Now everything works fine.
I'm using Bootstrap 3 together with Zend Framework 1.12.3. Everything is working fine but when testing my site in Internet Explorer 7 the layout breaks because of the IE box model.
I'm now trying the coliff / bootstrap-ie7 and Schepp / box-sizing-polyfill but i can't get it to work. I've pasted the *behavior: url(/public/css/boxsizing.htc); after all box-sizing properties in the bootstrap.css file and i have placed the following code in my layout.phtml file:
<!--[if lt IE 8]>
<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
I have also pasted "AddType text/x-component .htc" in my .htaccess file.
Does someone know why this is not working?
Thanks!
Inside the bootstrap-ie7.css is the path to the htc file. Make sure you've upload the .htc itself file to your css or js folder and put the path from the root in that .css.
First line of the -ie7.css file {box-sizing:border-box;behavior:url(/js/boxsizing.htc)}
This path must be your relative root path. If the .htc is in the assets/js folder, put that in the behavior url parenthesis.
{box-sizing:border-box;behavior:url(assets/js/boxsizing.htc)}
I have followed every tutorial that came up in Google search to add a simple CSS styling to a Magento CMS page.
I simply want to add the following CSS
.list-checkmark{
list-style-image: url("../images/Check-Mark-2.png");
margin-left: 3em;
}
to my page http://demo.txsystems.com/index.php/integration-service This is a CMS page, and I have added the following
<reference name="head">
<action method="addItem">
<type>skin_css</type><script>MyCss.css</script>
</action>
</reference>
To the layout update XML of this page in Magento admin.
I have added the file myCss.css to /var/www/html/skin/frontend/default/hellogamez/css
Please can someone help me to understand, what else I am missing, the said image is in the appropriate image folder.
And of course in the CMS page here is the UL list that I am trying to apply the formatting, I am in Magento 1.7
<ul class="list-checkmark">
<li>PCs (laptop, desktop, tablet)</li>
<li>Portable and Desktop Printing Systems</li>
<li>First Responder Devices</li>
<li>Vending Machines</li>
<li>Handhelds</li>
<li>Medical Devices and Testing Equipment</li>
<li>Multifunctional Printers</li>
<li>Industrial Control Systems</li>
<li>Storage and Locker Systems</li>
<li>Event Ticketing</li>
<li>Asset Tracking</li>
<li>Commercial Ovens</li>
</ul>
Thanks
The idea is good, but looks like you may be pulling from the wrong spot.
<reference name="head">
<action method="addItem">
<type>skin_css</type><script>MyCss.css</script>
</action>
</reference>
...will pull from the core code folders.
Rather use:
<reference name="head">
<action method="addCss"><stylesheet>css/MyCss.css</stylesheet></action>
</reference>
...which will load from the location you described:
skin/frontend/default/hellogamez/css/MyCss.css
...and inject into your pageload in the same cluster as the other css calls.
Then make sure your image is in the images folder on the same level as that css folder ie:
skin/frontend/default/hellogamez/images/Check-Mark-2.png
Also note that if you use the local.xml method to have it load site wide, you can use this same code snippet.
Good day! I have begun with gwt 2.5. I have installed org-netbeans-modules-gwt4nb-2.10.5.nbm on NetBeans_7. After I built and ran an easy gwt app(enter link description here) in NetBeans_7 using GlassFish 3+, default browser (firefox_14) started up a corresponding page and output the empty one. What's the problem? Also I installed the gwt dev plug-in on firefox_14 but I have been getting the same result.
Main Entry Point
...
public class MainEntryPoint implements EntryPoint {
/**
* Creates a new instance of MainEntryPoint
*/
public MainEntryPoint() {
}
/**
* The entry point method, called automatically by loading a module that
* declares an implementing class as an entry-point
*/
#Override
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");
button.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
label.setVisible(!label.isVisible());
}
});
RootPanel.get().add(button);
RootPanel.get().add(label);
}
}
...
HelloGWT.html
<!doctype html>
<!--
The DOCTYPE declaration above will set the browser's rendering engine into
"Standards Mode". Replacing this declaration with a "Quirks Mode" doctype may
lead to some differences in layout.
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name='gwt:module' content='gwt.intro.Main=gwt.intro.Main'>
<title>Main</title>
</head>
<body>
<script type="text/javascript" src="gwt.intro.Main/gwt.intro.Main.nocache.js"></script>
<!-- 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>
I receive the following warnings:
GWT Compiling client-side code.
WARNING: 'com.google.gwt.dev.GWTCompiler' is deprecated and will be removed in a future release.
Use 'com.google.gwt.dev.Compiler' instead.
(To disable this warning, pass -Dgwt.nowarn.legacy.tools as a JVM arg.);
Computing all possible rebind results for 'com.google.gwt.useragent.client.UserAgentAsserter'
Rebinding com.google.gwt.useragent.client.UserAgentAsserter
Checking rule
[WARN] Detected warnings related to 'com.google.gwt.editor.client.SimpleBeanEditorDriver'. Are validation-api-.jar and validation-api--sources.jar on the classpath?
Specify -logLevel DEBUG to see all errors.
[WARN] Unknown type 'com.google.gwt.editor.client.SimpleBeanEditorDriver' specified in deferred binding rule
As soon as I run the app, I get the following message from server: http://postimage.org/image/uf6lcczjb/
The GWT4NB plugin seems to use the old GWT compiler class, that is why you get the warnings. However that should not be a problem. The 404 error suggest that there is something missing or you point the browser to the wrong URL. The name of your host page must match the name of the page in the URL. Since your host page is called HelloGWT.html, make sure the URL you open looks something like this:
http://127.0.0.1:8080/HelloGWT.html
For the final build I suggest you use Ant or Maven. Check out the official GWT documentation Compile and run in production mode and Deploy a GWT Application.
Open the gwt.properties file and change the gwt.output.dir entry as needed (/ followed with the value of the entry gwt.module).
Meziano
I'm trying to use DockLayoutPanel in Jboss-errai application.
My entry point class:
#EntryPoint
public class Application {
private Caller<UserService> userService;
private Label registerConfirmMessage;
#AfterInitialization
public void createUI() {
DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
p.addNorth(new HTML("header"), 2);
p.addSouth(new HTML("footer"), 2);
p.addWest(new HTML("navigation"), 10);
p.add(new HTML("content"));
RootLayoutPanel.get().add(p);
}
My Application.gwt.xml:
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.4//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.4/distro-source/core/src/gwt-module.dtd">
<!-- GWT module definition: the rename-to attribute is used to have a shorter
module name that doesn't reflect the actual package structure. -->
<module>
<inherits name="org.jboss.errai.common.ErraiCommon" />
<inherits name="org.jboss.errai.bus.ErraiBus" />
<inherits name="org.jboss.errai.ioc.Container" />
<inherits name="org.jboss.errai.enterprise.CDI" />
<inherits name="org.hibernate.validator.HibernateValidator" />
<source path="client" />
<source path="shared" />
</module>
I detected different result when I change DOCTYPE. So:
In IE6 it works with either doctype
<!DOCTYPE HTML>
Blank page in Mozilla Firefox 14, Chrome
<!DOCTYPE>
Blank page in FF14, but it works in Chrome.
All other doctypes result in blank page.
Advise me please correct solution!
From the documentation:
This widget will only work in standards mode, which requires that the
HTML page in which it is run have an explicit declaration.
So that means that:
1.The browser needs to be running in standards mode, and not in quirks mode.
2.In the beginning of your HTML file you should have this:
<!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. -->
The doctype is defined in the HTML page where the application starts.
and not the gwt.xml
Also check the the link below, it describes how a gwt project is organized:
https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects