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.
Related
I'm trying to add an external web widget from a weather website. It gives me somethink like this:
<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>
I've tried creating a HTML widget with that code and adding it to my panel, but it doesn't show.
The embed code you have been given only works when it is included in the HTML file. It doesn't work when added dynamically. For example, if you open an empty HTML file in a web browser and run:
document.body.innerHTML += "<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>";
in the developer (F12) console, you will see that the external content doesn't get loaded. This is because scripts will not automatically be executed when added in this way.
You don't need to execute this external script, however. All it does is create and insert an iframe, and set some attributes and styling. If we look at the source code of the script, we can translate it into a GWT equivalent.
Embed JS script:
conte = document.getElementById("cont_5caab8f298a3d34d53973f2d8906d1f7");
if (conte) {
conte.style.cssText = "width: 176px; color: #868686; background-color:#FFFFFF; border:1px solid #D6D6D6; margin: 0 auto; font-family: Roboto;";
elem = document.createElement("iframe");
elem.style.cssText = "width:176px; color:#868686; height:200px;";
elem.id = "5caab8f298a3d34d53973f2d8906d1f7";
elem.src = "https://www.tiempo.com/getwid/5caab8f298a3d34d53973f2d8906d1f7";
elem.frameBorder = 0;
elem.allowTransparency = true;
elem.scrolling = "no";
elem.name = "flipe";
conte.appendChild(elem);
}
GWT equivalent:
public class Hello implements EntryPoint {
public void onModuleLoad() {
Panel root = RootPanel.get("main"); // replace with your Panel
//This doesn't work:
//HTML embed = new HTML("<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>");
//This does:
Frame embed = new Frame("https://www.tiempo.com/getwid/5caab8f298a3d34d53973f2d8906d1f7");
embed.setStyleName(""); // remove GWT styling. You could add your own CSS class here.
embed.getElement().setAttribute("style", "width:176px; color:#868686; height:200px;");
embed.getElement().setAttribute("frameborder", "0");
embed.getElement().setAttribute("scrolling", "no");
root.add(embed);
}
}
You can use an IFrame element to load external content.
final Frame frame = new Frame("url");
frame.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
// do stuff here
}
});
RootPanel.get("mydiv").add(frame);
Note though, that you won't be able to interact with the external content due to Cross site scripting.
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.
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 want my page to load javascript dynamically to my body:
<script type= "text/javascript" src="this path should be decided from wicket dynamically"/>
I am using wicket version 1.4 therefore JavaScriptResourceReference does not exist in my version (for my inspection it wasn't ' )
how can I solve this ?
thanks in advance :).
I specify my comment into an answer.
You can use this code snippet:
WebMarkupContainer scriptContainer = new WebMarkupContainer("scriptContainer ");
scriptContainer .add(new AttributeAppender("type", Model.of("text/javascript")));
scriptContainer .add(
new AttributeAppender("src", urlFor(
new JavaScriptResourceReference(
YourClass.class, "JavaScriptFile.js"), null).toString()));
add(scriptContainer );
and the corresponding html:
<script wicket:id="scriptContainer "></script>
Just change the string JavaScriptFile.js to load any other Javascript file.
JavascriptPackageResource.getHeaderContributor() does exactly what you need.
You need nothing in your markup, just add the HeaderContributor it returns to your page.
Update: For Wicket 1.5 see the migration guide, but it goes like this:
public class MyPage extends WebPage {
public MyPage() {
}
public void renderHead(IHeaderResponse response) {
response.renderJavaScriptReference(new PackageResourceReference(YuiLib.class,
"yahoo-dom-event/yahoo-dom-event.js"));
response.renderCSSReference(new PackageResourceReference(AbstractCalendar.class,
"assets/skins/sam/calendar.css"));
}
}
If you want to put your <script> element in the body, you can simply declare it as a WebMarkupContainer and add an AttributeModifier to set the src attribute. Although in that case wicket won't generate the relative URLs for you, you have to do it yourself.
I'm not sure I understood completely.
If you are trying to create and append a script to the body after the page is loaded you should do it this way:
<script type="text/javascript">
function load_js() {
var element = document.createElement("script");
element.src = "scripts/YOUR_SCRIPT_SRC.js"; // <---- HERE <-----
document.body.appendChild(element);
}
// Wait for the page to be loaded
if(window.addEventListener)
window.addEventListener("load",load_js,false);
else if(window.attachEvent)
window.attachEvent("onload",load_js);
else
window.onload = load_js;
</script>
What I did here is create a new script element, and then apply to it its source.
That way you can control dynamicaly the src. After that I append it to the body.
The last part is there so the new element is applied only after the page is loaded.