I have been trying to integrate zero clipboard library with gwt code as follows.
test.html
<script type="text/javascript" language="javascript" src="test/test.nocache.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="text/javascript">
function initZeroClipboard() {
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
}
</script>
.....................................
//Intial body load instantiating 'Moviepath'
<body onload="initZeroClipboard();">
TestWidget.java
Anchor copy = new Anchor("Copy");
......................
//setting id to refer the movie
copy.getElement().setId("copyId");
glueCopy("Hello World");
...........
//Native method
public static native void glueCopy(String text) /*-{
var clip = new $wnd.ZeroClipboard.Client();
clip.setText(text);
clip.glue('copyId');
}-*/;
But on intial load itself i am getting the following error in IE and FF.
Jetty Server IE error
Jetty server FF error
I have donloaded 'ZeroClipboard.swf' and 'ZeroClipboard.js' files from the following
https://github.com/jonrohan/ZeroClipboard
Can anyone come across this issue, if so suggest me how to get rid of this.
Related
I recently came across the fact that the imports of bootstrap were not accessible in my code. Namely, the plugin alert for jQuery was not available within my code (jQuery.fn.alert was undefined). I had in the header:
<script src="#routes.Assets.at("lib/jquery/jquery.min.js")"
type="text/javascript"></script>
<script src="#routes.Assets.at("lib/bootstrap/js/bootstrap.min.js")"
type="text/javascript"></script>
and in the body:
<body>
#playscalajs.html.scripts("client")
</body>
In the client script, when it called $("...").alert(), I receive the error: alert is not a function, although I verified bootstrap did define it.
How to make bootstrap and playscalajs work nicely together?
The problem came from #playscalajs.html.scripts("client") which is unfold to these:
<script src="/assets/client-jsdeps.js" type="text/javascript"></script>
<script src="/assets/client-fastopt.js" type="text/javascript"></script>
<script src="/assets/client-launcher.js" type="text/javascript"></script>
jQuery is imported again in client-jsdeps.js since it is a scala-js dependency. Since I could not interleave bootstrap imports before the client-launcher.js script and after the client-jsdeps.js scripts, I delayed the execution of the main object using the following code:
// New object calling the previous Main object
#JSExport
object MainDelayed extends js.JSApp {
#JSExport def main(): Unit = $(document).ready(Main.main _)
}
// The original object
object Main {
def main() = { ... }
}
I want to inject some CSS and JavaScript files via a preprocessor.
In my preprocessor I inject the html template to the body element.
I printed the result out via console.log(document.body) - you can see the result at the bottom. It looks good, but the script is not evaluated.
If I run console.log(window.foobar) in my test, it's undefined.
Actually I don't want to to inject simple scripts, I want to load some files via
<script src="build/app.js"></script>
I need it in every test, so I don't want to refactor every single test for the same code injection, that's the reason why I tried to put it into the html generated by karma.
<body><script> window.foobar = 'miau!';</script>
<!-- The scripts need to be at the end of body, so that some test running frameworks
(Angular Scenario, for example) need the body to be loaded so that it can insert its magic
into it. If it is before body, then it fails to find the body and crashes and burns in an epic
manner. -->
<script type="text/javascript">
// sets window.__karma__ and overrides console and error handling
// Use window.opener if this was opened by someone else - in a new window
if (window.opener) {
window.opener.karma.setupContext(window);
} else {
window.parent.karma.setupContext(window);
}
// All served files with the latest timestamps
window.__karma__.files = {
'/base/node_modules/mocha/mocha.js': '253e2fdce43a4b2eed46eb25139b784adbb5c47f',
'/base/node_modules/karma-mocha/lib/adapter.js': '3664759c75e6f4e496fef20ad115ce8233a0f7b5',
'/base/test/custom-test.js': 'abf5b0b3f4dbb62653c816b264a251c7fc264fb9',
'/base/test/build/build.css': 'df7e943e50164a1fc4b66e0a0c46fc86efdef656',
'/base/test/build/build.js': '9f0a39709e073846c73481453cdee8d37e528856',
'/base/test/build/test.js': '0ccd4711b9c887458f81cf1dedc04c6ed59abe43'
};
</script>
<!-- Dynamically replaced with <script> tags -->
<script type="text/javascript" src="/base/node_modules/mocha/mocha.js?253e2fdce43a4b2eed46eb25139b784adbb5c47f"></script>
<script type="text/javascript" src="/base/node_modules/karma-mocha/lib/adapter.js?3664759c75e6f4e496fef20ad115ce8233a0f7b5"></script>
<script type="text/javascript" src="/base/test/custom-test.js?abf5b0b3f4dbb62653c816b264a251c7fc264fb9"></script></body>
Karma introduces the page scripts/html just like ajax, so it wont execute once the append has finished.
You will need to append the files for each spec. I have a helper for this job:
function appendCSS(path){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href='base/' + path;
document.body.appendChild(link)
}
function appendScript(path){
var link = document.createElement('script');
link.type = 'javascript';
link.src='base/' + path;
document.body.appendChild(link)
}
function loadAssets(page){
document.body.innerHTML = __html__['_site/' + (page || 'index') + '.html'];
appendCSS('_site/styles/demo.css');
appendCSS('_site/styles/' + page + '.css');
appendScript('_site/scripts/vendor.js');
appendScript('_site/scripts/' + page + '.js');
}
module.exports = {
loadAssets: loadAssets
};
In my spec i then simply call the helper, passing the name of the html page to be tested.
require('../helper').loadAssets('tested-page-name');
As you can see, i use the borwserify plugin, but i hope this helps.
I am using GXT's sencha
We have a web application named "dashboard"
url = localhost:8080/dashboard/
We have another webapplication named issuetracker
url = localhost:2990/issuetracker/
Now i have a velocity template in the issuetracker web application in which i have given the following code
<iframe src="localhost:8080/dashboard" width="500" height="600">
</iframe>
When i click a button in the dashboard web application the url of the issuetracker application should change like "localhost:8080/issuetracker/issues?mqlVersion=25".
This 25 value comes from the dashboard web application.
When i tried writing jsni code none of the following values showed up
the top most window's url which is "localhost:2990/issuetracker/"
$wnd.top.location
$wnd.top.location.href
$wnd.parent.location.href
$wnd.parent.location
window.top.location
window.top.location.href
window.parent.location.href
window.parent.location
Where am i going wrong?
Any suggestions.
Use $wnd in JSNI instead of window.
Try (clean browser cache)
JSNI
Window.Location.replace(url);
public static final native String getParentWindow() /*-{
return $wnd.parent.location.href;
}-*/;
JSP/HTML
<script type="text/javascript">
function changeURL() {
try {
window.parent.location.href = 'http://localhost:8080/issuetracker/issues?mqlVersion=25';
} catch (e) {
window.location.href = 'http://localhost:8080/issuetracker/issues?mqlVersion=25';
}
}
</script>
Sample code
JSP/HTML
<div>
<div id='myDiv'>hello</div>
<iframe src="localhost:8080/dashboard" width="500" height="600">
</iframe>
</div>
dashboard Entry Point class:
public static final native Element getParentElementById(String id) /*-{
return $wnd.parent.document.getElementById(id);
}-*/;
....
public void onModuleLoad() {
getParentElementById("myDiv").setInnerHTML("hi");
}
Output:
Inner HTML hello of myDiv is replaced with hi.
I am using a custom gridview widget and large amount of data(say 1000 rows) assigned to it.I know that it will take more time.And I want to know how much time it exactly taking to load the grid.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Custom.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CustomWidget</title>
<script type="text/javascript" language="javascript" src="mywidget/mywidget.nocache.js">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<div id="txt"></div>
</body>
</html>
But not able display time..and its working when executing as single html page.
Another two ways along with #Braj answer
1.Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:
Javascript parsing and execution
Layout
CSS style recalculation and selector matching
DOM Event handling
Network resource loading
Timer fires
XMLHttpRequest callbacks
Painting
Fallow this link Speed Tracer and to Crome(click on free) ,works with Crome only
2.You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
With this we can get how much time each function taken , how many times is called and % of total time
but its works with fire fox only.
Fallow this link FireBug.Click on Console and enable Profile to see the performance of each function.
Sometimes you may get obfuscated function names.To avoid this project>Google>GWT Compile>Select output style as Pretty
Try this one
Steps to follow:
create a hidden div that have a information about current time before downloading nocache.js
Once nocache.js is loaded it will call EntryPoint#onModuleLoad() method of your entry point class.
Compare the time to get the time taken
HTML/JSP:
<body>
<div id="timeinfo" style="visibility: hidden;"></div>
<script type="text/javascript">
var today = new Date();
document.getElementById("timeinfo").innerHTML = today.getTime();
</script>
<script type="text/javascript" src="mywidget/mywidget.nocache.js"></script>
</body>
Entry point class:
public class MyWidget implements EntryPoint {
public void onModuleLoad() {
RootPanel timeinfo = RootPanel.get("timeinfo");
long startTime = Long.valueOf(timeinfo.getElement().getInnerHTML());
long endTime = System.currentTimeMillis();
System.out.println(new Date(startTime));
System.out.println(new Date(endTime));
System.out.println("Total time taken=" + (endTime - startTime) + " ms.");
RootPanel.getBodyElement().removeChild(timeinfo.getElement());
...
}
}
output:
Tue Apr 22 16:55:49 IST 2014
Tue Apr 22 16:56:03 IST 2014
Total time taken=14479 ms.
Open console in your browser. Click on the Network tab. Reload the page. See how long it takes to load each resource.
I am trying to embed Google-Plus into my GWT Application. I would like it to be embedded into a HorizontalPanel. I did read +1button developers google. I didn't find any post about this particular problem in stackoverflow. My problem might be that I don't understand how to include the js into a GUI component. I would appreciate an Example of how to add the Google+ code into a Panel.
Here is how to do it:
Documentation:
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>
in GWT:
private void drawPlusOne() {
String s = "<g:plusone href=\"http://urltoplusone.com\"></g:plusone>";
HTML h = new HTML(s);
somePanel.add(h);
// You can insert a script tag this way or via your .gwt.xml
Document doc = Document.get();
ScriptElement script = doc.createScriptElement();
script.setSrc("https://apis.google.com/js/plusone.js");
script.setType("text/javascript");
script.setLang("javascript");
doc.getBody().appendChild(script);
}
I've personally never embedded the +1 button in GWT, but the linked article seems pretty self explanatory.
In the section "A Simple Button", it indicates that the simplest way of implementing GooglePlus integration is to add this:
<script src="https://apis.google.com/js/plusone.js" />
<g:plusone></g:plusone>
First, the <script> tag should be included in your .gwt.xml file.
Then I'd implement the <g:plusone></g:plusone> like this:
public class GPlusOne extends SimplePanel {
public GPlusOne () {
super((Element)Document.get().createElement("g:plusone").cast());
}
}
(Note that this code is untested, but it's based on the simple concept that a SimplePanel can be extended to compile as any HTML element.)
Then you'd use the new GPlusOne element wherever you'd want the button to show.
I found a better way to do it:
Follow this example to have the button work on invocation on a normal html page (you can try one here http://jsfiddle.net/JQAdc/)
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
function gPlusBtn(id, params) {
/* window.alert("searching for "+ id +" with params: "+ params) */
paramsObj = eval( '('+params+')' );
gapi.plusone.render(id, paramsObj );
}
// params is here just for a reference to simulate what will come from gwt
params = '{href:"http://1vu.fr", size:"tall"}';
</script>
</head>
<body>
taken from http://jsfiddle.net/JQAdc/
<div id="gplus" />
<button onclick="gPlusBtn('gplus', params)">show!</button>
</body>
</html>
Then you can call a native method to trigger the button display on Activity start (if you're using MVP).
protected native void plusOneButton(String id, String params) /*-{
$wnd.gPlusBtn(id, params);
}-*/;
You can have multiple buttons with different urls, that's why id is left as a parameter.
NOTE: for me the raw HTML works on localhost, but the GWT version. I have to deploy to the server to be able to see the results