I am new to GWT, I am trying to implement sample program using JsInterop
but it does not work.
JavaScript code:-
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Jsinterop.css">
<title>Web Application Starter Project</title>
<scripttype="text/javascript"language="javascript"src="jsinterop/jsinterop.nocache.js">
var foo = new com.example.jsinterop.client.MyJsType();
if (myType.aStaticMethd) {
alert("Ask me what's the meaning of life...");
}
</script>
</head>
<body>
</html>
How can I get simple implementation to work? Is there something I'm missing?
------------------------------------JAVA CODE----------------------------
Related detailed java code for above javaScript is:-
#JsType
public class MyJsType implements EntryPoint {
A sample type to be accessed from javaScript.
public MyJsType(){}
some method
public String aPublicMethod() {
return "Hello ";
}
#JsMethod
public static String aStaticMethd() {
return "method call";
}
on moduleload method
#Override
public void onModuleLoad() {
TODO Auto-generated method stub
Window.alert("HIII");
aStaticMethd();
Window.alert("HELLOOOOOOO");
}
}
------------------------------------JAVA CODE-------------------------------
How can I get simple implementation to work? Is there something I'm missing?
I have given two alert statement in java code
Window.alert("HIII");
aStaticMethd();
Window.alert("HELLOOOOOOO"); between alert statement I am calling the API astaticMethod() in javaScritp :-
var foo = new com.example.jsinterop.client.MyJsType();
if (myType.aStaticMethd) {
alert("Ask me what's the meaning of life...");
}
</script>
with alert statement but javascript alert statement is not executing According to my requirement I am trying to call java object in javaScript.
Related
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
I am working in GWT in the project.
I have a requirement in my project where I need an automatic refresh of my screen every 5 minutes.
Can somebody please help me?
public class TimerExample implements EntryPoint, ClickListener {
public void onModuleLoad() {
Button b = new Button("Click and wait 5 minutes");
b.addClickListener(this);
RootPanel.get().add(b);
}
public void onClick(Widget sender) {
Timer t = new Timer() {
public void run() {
reloadAll();
}
};
// Schedule the timer to run once in 5 minutes.
t.schedule(5*1000*60);
}
private void reloadAll() {
Window.Location.reload();
}
}
If you use the Activies and Places framework from GWT, you could use the activity-mapper with the 'goTo(samePlace)' method to handle your usecase easily. It's part of the MVP design/pattern.
Refresh every 300 seconds (5 minutes):
<meta http-equiv="refresh" content="300">
Place this meta tag under the head element of your gwt html hosting page.
If you use a JSP rather than a HTML file as the GWT hosting file, you could do this
<%
String refreshInterval = request.getParameter("refreshInterval");
%>
<head>
<meta http-equiv="refresh" content="<%=refreshInterval%>">
</head>
I'm stuck -
I need to have a Wicket Panel be able to add a class attribute to the <body> tag of whatever page it's on.
Example usage:
Java:
add(new SpecialSidebarComponent("sidebar"));
Generated HTML:
<body class="sidebar">
...
<div id="sidebar">My Wicket Panel</div>
...
</body>
I cannot add a wicket:id and make the body a Wicket component, because this makes it very difficult to add components to a page in the big page hierarchy I have, and it still also doesn't easily allow for a Panel to modify the body attribute.
I thought BodyTagAttributeModifier may be for this, but apparently it is for something else and cannot get it to function ( Wicket: how to use the BodyTagAttributeModifier class? )
Any helpful ideas?
Update:
In looking at it, it appears the BodyTagAttributeModifier class is only for a Panel's parent tag, not the Page's <body> tag:
Example (Scala syntax):
class Home extends WebPage {
add(new Sidebar("sidebar"))
}
class Sidebar(id: String) extends Panel(id) {
add(new BodyTagAttributeModifier("class", true, new Model("layout-class"), getParent))
}
Template:
<html>
<body>
<div wicket:id="sidebar">Sidebar</div>
</body>
</html>
Rendered:
<html>
<body>
<div class="layout-class">
<h1>Hello World!</h1>
</div>
</body>
</html>
Very confusing name IMHO. Doesn't solve the issue but at least makes more sense.
I personally think the Javascript option is the cleanest for this specific case. However, your comment about add(Component...) being final leads me to believe that you might be interested in the setTransparentResolver(true) method. Here's how it works...
BasePage.html
<body wicket:id="body">
<div wicket:id="panel" />
</body>
BasePage.java
public class BasePage extends Page {
public String bodyClass = "";
public BasePage() {
super();
WebMarkupContainer bodyContainer = new WebMarkupContainer("body");
bodyContainer.setTransparentResolver(true);
bodyContainer.add(new SimpleAttributeModifier("class", new PropertyModel<String>(this, "bodyClass")));
}
}
MyPage.java (extends BasePage)
public class MyPage extends BasePage {
public MyPage() {
super();
add(new SidebarPanel("panel"));
super.bodyClass = "sidebar";
}
}
Even though you are not adding the SidebarPanel directly to the bodyContainer in the BasePage, it will still work out because of setTransparentResolver(true).
For your simple case, go with the Javascript. For the general issue of feeling constrained by subclasses not being able to fit inside containers, be aware of transparent resolving.
If you really can't give the <body> tag a wicket:id (I'll assume you don't have a BasePage that every, or almost every, other page extends in which to abstract this), it'll be not possible to know at page render time (when that <body> tag is rendered) what class to append to it, it will be simply copied as is from your HTML to the output.
You could achieve the same via javascript, however. Make your Panel implement IHeaderContributor and use IHeaderResponse.renderOnDomReadyJavscript().
public abstract class SpecialSidebarComponent(String id) extends Panel
implements IHeaderContributor {
.....
public void renderHead(IHeaderResponse response){
String javascript = "document.body.setAttribute('class', 'sidebar');";
response.renderOnDomReadyJavascript(javascript);
}
....
}
I think you were on the right track with BodyTagAttributeModifier, at least according to JavaDoc. The compilation problems in the linked article stem from the use of a non-existing Constructor...
in SpecialSidebarComponent you should be able to do this:
add(new BodyTagAttributeModifier("class", Model.of("sidebar"), this));
Can't try this right now because I'm not at my development computer...