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
Related
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.
I'm building a responsive HTML creative template to serve a full screen ad. The ad is displayed on a mobile device, running iOS 6-7, using version 6.8.0 of the DFP SDK. I noticed that when serving an ad with my template, DFP wraps my HTML with extra html/body tags (see comments below):
<!-- the code below is from DFP -->
<html><head>
<meta name="viewport"content="width=device-width,height=device-height,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/>
</head><body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<!-- my code starts here -->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
...
<!-- my code ends here -->
<!-- the code below is from DFP -->
</body></html>
The issue I'm having is that height=device-height from the injected HTML code makes my ad scrollable. My ads are displayed in landscape and for unknown reason device-height and device-width default to a same value - the device width. The HTML above is not valid because nested html/body tags and I can't control the viewport definition to remove the erronous height=device-height.
Questions:
Is there a way to suppress DFP generated wrapping HTML (<html>...</html>) and rely on my code to supply it (so I can supply my own viewport)
Any clues why landscape view of the ad defaults both width and height to the device width
I ended up using Javascript to update the header:
<script type="application/javascript">
var meta = document.getElementsByTagName("meta")[0];
meta.setAttribute("content", 'width=device-width,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0');
</script>
I've got a JavaScript fix specifically for IE9 and want to load it into my project only for that browser. I thought I might be able to do something like this in my .gwt.xml:
<script src="ie9svgfix.js">
<when-property-is name="user.agent" value="ie9"/>
</script>
But unfortunately this doesn't work. Does anybody know a clean way to do this in GWT?
Thanks,
Jon
You can try conditional comments:
<!--[if IE 9]>
<script src="ie9svgfix.js"></script>
<![endif]-->
The cleanest way in GWT would be to use deferred-binding and inject the script with the ScriptInjector in the IE9 permutation; or have the script loaded by the host page, in which case you can use conditional comments (as suggested by Stano).
With deferred-binding, you'd have to create a class to "deferred-bind" with a specific implementation for IE9.
class SvgFix {
public void fix() { /* no op */ }
}
class SvgFixIE9 {
#Override
public void fix() {
ScriptInjector.fromUrl(GWT.getModuleBaseForStaticFiles() + "ie9svgfix.js")
.setWindow(ScriptInjector.TOP_WINDOW)
.inject();
}
}
And in your EntryPoint, inject the script:
GWT.<SvgFix>create(SvgFix.class).fix();
And finally then choose the appropriate implementation based on permutation:
<replace-with class="com.example.client.SvgFixIE9">
<when-type-assignable class="com.example.client.SvgFix" />
<when-property-is name="user.agent" value="ie9" />
</replace-with>
BTW, note that <script> in gwt.xml files is not supported with the xsiframe linker, and I'd encourage you to use it going forward (it has all the advantages of all the other linkers, and none of their drawbacks, plus it adds Super Dev Mode, flexibility/configurability, etc.)
Making an update to my iOS app which is built with Flash using Flash Builder 4.7. I'm getting feedback from Apple that "Your app contains a launch image with a size modifier that is only supported for apps built with the iOS 6.0 SDK or later." -- So I downloaded the latest iPhone SDK (6.1). How do I tell Flash Builder to target this SDK when building my app?
Thanks!
Update: here's my descriptor file:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/3.4">
<id>com.bitty.dicesquared</id> <!-- Bundle Identifier. Required. -->
<filename>DiceSquared</filename> <!-- Used as the filename for the application. Required. -->
<name>dice²</name> <!-- The name that is displayed below the app icon. -->
<versionNumber>1.3</versionNumber> <!-- Required. -->
<!-- Settings for the application's initial window. Required. -->
<initialWindow>
<!-- The main SWF or HTML file of the application. Required. -->
<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
<!-- The initial aspect ratio ("portrait" or "landscape"). Optional. -->
<aspectRatio>portrait</aspectRatio>
<!-- Whether the app will begin auto-orienting on launch. Optional. Default false -->
<autoOrients>false</autoOrients>
<!-- Whether the app launches in full screen. Optional. Mobile only. Default false -->
<!-- (On iOS, this decides if the StatusBar is visible or not.) -->
<fullScreen>true</fullScreen>
<!-- Either auto, cpu, gpu, or direct. Default auto -->
<renderMode>direct</renderMode>
<!-- Whether direct mode allocates storage for depth and stencil buffers. Default false -->
<!-- <depthAndStencil></depthAndStencil> -->
<!-- Whether or not to pan when a soft keyboard is raised or lowered (either "pan" or "none"). Optional. Defaults "pan." -->
<!-- <softKeyboardBehavior></softKeyboardBehavior> -->
<visible>true</visible>
</initialWindow>
<!-- Languages supported by application. Only these languages can be specified. -->
<!-- <supportedLanguages>en de cs es fr it ja ko nl pl pt ru sv tr zh</supportedLanguages> -->
<!-- The icon the system uses for the application. Optional. -->
<!-- Place the icons in a 'source path' (e.g. in the 'src' directory). -->
<!-- iPhone: 57x57, iPhone HD: 114x114, iPad: 72x72, iPad HD: 144x144 -->
<icon>
<image57x57>icon57.png</image57x57>
<image72x72>icon72.png</image72x72>
<image114x114>icon114.png</image114x114>
<image144x144>icon144.png</image144x144>
</icon>
<!-- iOS specific capabilities -->
<iPhone>
<!-- A list of plist key/value pairs to be added to the application Info.plist -->
<!-- UIDeviceFamily: 1 - iPhone/iPod Touch; 2 - iPad; both: universal app -->
<InfoAdditions><![CDATA[
<key>UIDeviceFamily</key>
<array>
<string>1</string>
<string>2</string>
</array>
]]></InfoAdditions>
<!-- Display Resolution for the app ("standard" or "high"). Optional. Default "standard" -->
<requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>
Answer found here: http://forum.starling-framework.org/topic/flash-builder-47-update-tips
The update to AIR 3.5 fixed the problem.
In my plugin/RCP I have defined my own contributions to Eclipse universal intro with page definitions inside the toplevel xml (the one pointed to by the "config" attribute to the "configExtension" element of the org.eclipse.ui.intro.configExtension extension point), which works.
However, I'd like to split out the page definitions to separate files for simpler editing and managing.
So I start out with (in my intro/introcontent.xml):
<page id="myfirststeps" style="$theme$/html/firststeps.css" style-id="page">
<!-- Page content here -->
</page>
And this works. The intro displays the page content correctly. Then I move the page content to firststeps.xml:
<?xml version="1.0" encoding="utf-8" ?>
<introContent>
<page id="myfirststeps" style="$theme$/html/firststeps.css" style-id="page">
<!-- Page content here -->
</page>
</introcontent>
and change the toplevel xml to say:
<page id="myfirststeps" content="intro/firststeps.xml" />
does not work. Running this creates a "File not found" exception, and the file indicated is pointing into the Eclipse installation (like "C:\Program Files\Eclipse") and not, as I would have expected into my plugin. And sure enough, if I copy my xml-file there it finds it.
Any pointers? Is there some trick about the content attribute and how it resolves the path to the file?
Or is there a way to specify a path to the plugin directory in the content attribute?
I'm using Eclipse 3.7.
Turned out that the solution was simple. The file reference in the content attribute is relative to the referencing xml-file, not relative to the plugin-root.
So all I had to do was to remove the "intro"-part of the path. From
<page id="myfirststeps" content="intro/firststeps.xml" />
to
<page id="myfirststeps" content="firststeps.xml" />
And all is well.