I am using the newly released Annotation Chart in gwt by calling native javascript, and what I got until now is to have it display the example chart as it is, but the problem I am having is that it is not interactive at all. It looks more like an image. Anyone got any idea about how might I make this work properly?
Here's the code I am using:
public void onModuleLoad() {
createChart();
}
private native void createChart()
/*-{
$wnd.google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new $wnd.google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new $wnd.google.visualization.AnnotationChart($wnd.document.getElementById('chart_div'));
var options = {
displayAnnotations: true,
};
chart.draw(data, options);
}
}-*/;
and I am loading the library in the HTML file:
<!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="GUI.css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Analytics</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="gui/gui.nocache.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {'packages' : ["annotationchart"] });
</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>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
To answer my own question, here is the GWT wrapper that I wrote for this chart. It works and supports all the options, and can be used in the same way as you would use other google charts in GWT.
Related
I am trying to verify the open graph meta tag & in our site. Here is the HTML code:
<div class="atg_store_applicationResourceContainer">
</div>
<meta name="robots" content="index, follow" />
<!-- Coming inside regular metadetails-->
<!-- contentKey = -->
<!-- SEOTagID - **** -->
<title>Sectional Living Rooms </title>
<meta name="description" content="Find Sectional Living Rooms that will look great in your home and complement the rest of your furniture." />
<meta name="author" content="EXAMPLE.com" />
<meta name="google-site-verification" content="UscxdOsY5bXX9hk_Y0GILMPvzsL66vDcHHwkZZ7Gxpg" />
<meta property="og:title" content="Sectional Living Rooms "/>
<meta property="og:site_name" content="EXAMPLE"/>
<!-- requestSocialUrl = http://www.example.com/cartridges/PageSlot/PageSlot.jsp -->
<!-- customCanonical = http://www.example.com/furniture/Living-Rooms/Sectional-Living-Rooms/_/N-8wh -->
<link rel="canonical" href="http://www.example.com/furniture/Living-Rooms/Sectional-Living-Rooms/_/N-8wh" /> <!-- add + instead of space in words for SEO -->
<meta property="og:image" content="http:/images/unavailable.gif?$PDP_Cart_Primary_150x150$" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.example.com/furniture/Living-Rooms/Sectional-Living-Rooms/_/N-8wh"/>
<meta property="og:description" content="Find Sectional Living Rooms that will look great in your home and complement the rest of your furniture. #iSofa #abc"/>
<script>var _adblock=true;</script>
I am trying to get the value of the content attribute from meta tags having the property attribute value as og:title & og:description. Any help would be helpful.
I am able to find get the content of the meta with names but am not able to get the content of <og:title> & <og:description> as the tag does not have a name
We are using both UFT & Selenium Webdriver (Java). So I can use help on any single one.
For Selenium you can go with xpath like
//meta[#property='og:title']
//meta[#property='og:description']
And to get the content use getAttribute() method of the WebElement
WebElement titleEl=driver.findElement(By.xpath("//meta[#property='og:title']"));
String titleContent = titleEl.getAttribute("content");
I'm going through the book: GWT in Action. On chapter I'm working through the very first hello world application. It's all in development mode.
My issue is that the label in my .java file is not showing up when I open the URL webpage. There is nothing being displayed versus the Label("Hello World!") appearing.
EDIT: When at the displayed webpage, I pressed F12 in google chrome to see if I could find anything weird. Got the error: Failed to load resource: the server responded with a status of 404 (Not Found)
HelloWorld.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name="com.google.gwt.user.User" />
<source path="client" />
<entry-point class="com.example.gwt.client.HelloWorld"></entry-point>
</module>
HelloWorld.java
package com.example.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
#Override
public void onModuleLoad() {
RootPanel.get().add(new Label("Hello World!"));
}
}
HelloWorld.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HelloWorld</title>
<script type="text/javascript" language="javascript" src=".nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
My console is displaying this after I run it as a web application:
[WARN] Server class 'org.eclipse.jetty.servlet.listener.ELContextCleaner' could not be found in the web app, but was found on the system classpath
[WARN] Adding classpath entry 'file:/C:/Users/Qs/Desktop/eclipse/plugins/com.google.gwt.eclipse.sdkbundle_2.6.0/gwt-2.6.0/gwt-dev.jar' to the web app classpath for this session
For additional info see: file:/C:/Users/Qs/Desktop/eclipse/plugins/com.google.gwt.eclipse.sdkbundle_2.6.0/gwt-2.6.0/doc/helpInfo/webAppClassPath.html
If you don't specify the rename-to in your gwt.xml as shown below then by default GWT places the generated nocache.js under war directory by the name of location of gwt.xml followed by its name as shown in below snapshot.
<module rename-to="xyz">
For more info have a look at gwt-module dtd.
Please have a look Defining a module and Renaming modules
There are two ways to solve this issue:
define rename-to in gwt.xml that is more preferable over second solution
gwt.xml
<module rename-to="hello">
html
<script type="text/javascript" language="javascript" src="hello/hello.nocache.js"></script>
use default way
html
<script type="text/javascript" language="javascript" src="com.example.gwt.HelloWorld/com.example.gwt.HelloWorld.nocache.js"></script>
Here is a snapshot to make it more clear
Change the src attribute of the script tag in HelloWorld.html to
src="com.example.gwt.client.HelloWorld/com.example.gwt.client.HelloWorld.nocache.js"
If that still doesn't work, run the GWT compiler and look at the files it generates to determine the exact name of the *.nocache.js file.
I am trying to make my background webView transparent like that :
webView.setBackgroundColor(0x00000000);
but it doesn't work and if I add this line everything is transparent(I don't see my html page) :
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
I read that some times there is a problem when this android:hardwareAccelerated="true" is in the manifest, but I don't have this line.
HTML :
<BODY style=\"padding:0;margin:0;\">
<div style="padding:0;margin:0;background:transparent;border:none;position:relative;cursor:pointer;overflow:hidden;height:165px;">
<object ggnoclick ggswfcid name="fo_GGUID" id="fo_GGUID" width="100%" height="165" data="http://c.gumgum.com/ads/com/cesar/big_dogs/cesar_250x100_01.swf?modalURL=GGUID" type="application/x-shockwave-flash" allowscriptaccess="always" wmode="transparent" background="transparent" style="background:transparent;">
<param name="AllowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
</object>
</div>
</BODY>
myWebView.setBackgroundColor(0);
This works for my case.I use android 2.2.
See that same topic in This Link
I'm still newbie in SmartGWT, currently having a strange problem..
I am using Windows XP and SmartGWT version 3.0,
GWT SDK 2.4.0 (using Eclipse IDE).
So my problem is, I kind of copied examples from the SmartGWT showcase: Styled ComboBox
DynamicForm df = new DynamicForm();
ComboBoxItem cb = new ComboBoxItem();
cb.setValueMap("cat", "dog", "bird");
cb.setTitle("Select:");
df.setItems(cb);
...
layout.addMember(df);
And when I run it as Web Application, the valuemap doesn't appear.
I mean, the [v] button is there but nothing happens when i clicked it..
Sorry for the noob question, and thanks for your help! :D
UPDATE - 05/03/2012
Here is what appears on my browser:
screenshot removed
Here is the full standalone code:
HelloWorld.java
package com.example.helloworld.client;
import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ComboBoxItem;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
VLayout layout = new VLayout();
layout.setWidth100();
layout.setHeight100();
DynamicForm df = new DynamicForm();
ComboBoxItem cb = new ComboBoxItem();
cb.setTitle("Select :");
cb.setValueMap("Cat", "Dog", "Bird");
df.setItems(cb);
layout.addMember(df);
layout.draw();
}
}
HelloWorld.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- 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.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.smartgwt.SmartGwt" />
<!-- Specify the app entry point class. -->
<entry-point class='com.example.helloworld.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>
On the 'Development Mode' tab in Eclipse (the one that shows you link to run on browser),
i get this message:
[INFO] [helloworld] - Your *.gwt.xml module configuration prohibits
the use of the current doucment rendering mode (document.compatMode='
CSS1Compat').Modify your application's host HTML page doctype, or
update your custom 'document.compatMode' configuration property
settings.
There is also a single warning:
The following classpath entry 'C:\some-path\smartgwt-3.0\smartgwt.jar'
will not be available on the server's classpath.
UPDATE 2 - HTML and CSS file
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 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="HelloWorld.css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</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="helloworld/helloworld.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>
and the CSS file:
/** Add css rules here for your application. */
/** Example rules used by the template application (remove for your app) */
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.sendButton {
display: block;
font-size: 16pt;
}
/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
width: 400px;
}
.dialogVPanel {
margin: 5px;
}
.serverResponseLabelError {
color: red;
}
/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
margin: 15px 6px 6px;
}
IMPORTANT UPDATE
I forgot to inform you that I am currently using Google Chrome(18.0.1025.168) for debug / test build. When I ran it on Firefox, it runs OK!
I noticed this thread a bit late.. So this is currently a known bug.
conclusion: do NOT use google chrome for GWT / smartGWT development mode (for now).
Thank you for your help! :D
I forgot to inform you that I am currently using Google Chrome(18.0.1025.168) for debug / test build. When I ran it on Firefox, it runs OK!
I noticed this thread (smartclient forum) a bit late.. So this is currently a known bug.
conclusion: do NOT use google chrome for GWT / smartGWT development mode (for now).
Thank you for your help! :D
ComboBox is not SmartGWT. Where is it coming from ?
This code works as expected :
DynamicForm df = new DynamicForm();
ComboBoxItem cb = new ComboBoxItem();
cb.setValueMap("cat", "dog", "bird");
cb.setTitle("Select");
df.setItems(cb);
HLayout layout = new HLayout();
layout.addMember(df);
layout.draw();
DynamicForm df = new DynamicForm();
ComboBox cb = new ComboBox();
cb.setValueMap("cat", "dog", "bird");
cb.setTitle("Select:");
//other fields
df.setFields(cb); // Use this to add fields
layout.addMember(df);
Have a look At Show Case
Try this..
DynamicForm df = new DynamicForm();
ComboBox cb = new ComboBox();
Map<String,String> valuesMap = new HashMap<String,String>();
valuesMap.put("cat","cat");
valuesMap.put("dog","dog");
valuesMap.put("bird","bird");
cb.setValueMap(valuesMap);
cb.setTitle("Select:");
df.setItems(cb);
...
layout.addMember(df);
If you are in debug mode you never will see the content of this selectItem or comboBox, but if you select down with the keyboard you will see the content. You should be in "production" mode for see everything correctly
Is a problem with chrome, if you work with firefox you will see the content
I'd like to add some kind of library, or maven plugin, or 'something' to combine and compress my javascript and css source files.
However, I think this is pretty difficult to do unobtrusively with Java. The Rails people have pretty much solved this problem... it uses the unjoined/uncompressed files for development and then it compresses everything during production. It does this unobtrusively as you don't have to change your html headers or anything like that - it works for both testing and production. This is more or less what I want. Does it even exist in the Java space?
The last thing I want is to comment and uncomment lines of freemarker/html code for development and production - I want everything to be the same. Ideally, I'd want to be able to leave Tomcat running and code my javascript and css, and see my changes instantly - no delays or hickups. I also don't want to have to manually run a command to generate the new javascript every time I make a change... or even have some daemon constantly update it (because then it might not be instantaneous when I'm testing). At the same time, if I'm going to package up my war for production, I want it to use the joined and compressed files instead.
Is this even possible? If so, what tool should I be looking at? I know there are quite a few that do some of this, but they've fallen short on the "unobtrusive" aspect.
Thanks
A solution that has worked for me is using the maven-minify-plugin (groupId is com.samaxes.maven) but only when building for production. Use a build property to specify if you are in development mode or not. Link to plugin
You can then have something like this (I don't know freemarker so I am just pasting some JSP code but I am sure it can easily be converted):
<c:choose>
<c:when test="${developmentMode}">
<link rel="stylesheet" type="text/css" href="<c:url value="/css/custom1.css"/>"/>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/custom2.css"/>"/>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/another1.css"/>"/>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/another2.css"/>"/>
<script type="text/javascript" src="<c:url value="/js/mylibrary.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/more.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/util.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/whatever.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/more.js"/>"></script>
</c:when>
<c:otherwise>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/minified.css"/>"/>
<script type="text/javascript" src="<c:url value="/js/minified.js"/>"></script>
</c:otherwise>
</c:choose>
This way non-minified/combined JS/css is used while in development and the minified css only used when building for production.
EDIT: As requested here is the code to expose Spring-defined beans on the ServletContext:
<bean class="org.springframework.web.context.support.ServletContextAttributeExporter">
<property name="attributes">
<map>
<!-- Obviously this can be changed to read from properties file -->
<entry key="developmentMode" value="false" />
</map>
</property>
</bean>
Jawr is a library that provides compression and merge of css/js files. It provides a Tag for the html include statements.
This make it possible to use the same unmodified JSP Page for development (with unmodified css/js) and production (merged and minified).
wro4j seams to similar features.
Using maven-minify-pluginworked for me too.
But I manage to find an even less intrusive way to use it than using conditional tags like c:when, by combining it with the maven-war-plugin.
This code snippet can be used as it is :
First, start by minifying the CSS/JS without using suffix (meaning that the files keep their name)
<plugin>
<groupId>com.samaxes.maven</groupId>
<artifactId>minify-maven-plugin</artifactId>
<version>1.7.2</version>
<executions>
<execution>
<id>default-minify</id>
<phase>prepare-package</phase>
<configuration>
<charset>UTF-8</charset>
<skipMerge>true</skipMerge> <!-- do not create one big file -->
<nosuffix>true</nosuffix> <!-- do not use suffix like 'min' -->
<cssSourceDir>css</cssSourceDir>
<cssSourceIncludes>
<cssSourceInclude>*.css</cssSourceInclude>
</cssSourceIncludes>
<jsSourceDir>js</jsSourceDir>
<jsSourceIncludes>
<jsSourceInclude>*.js</jsSourceInclude>
</jsSourceIncludes>
</configuration>
<goals>
<goal>minify</goal>
</goals>
</execution>
</executions>
Then, when building the war file, do not overide CSS/JS files (which are already generated in the target by the minify goal)
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.4</version>
<configuration>
<!-- in order to use minify filed listed bellow -->
<warSourceExcludes>**/*.css, **/*.js</warSourceExcludes>
</configuration>
</plugin>
The built war will then contains the exact same files but compressed.
(this might not be the best way to perform minifying, but it doesn't change anything in development)
Hope this helps...