I'm trying to integrate a specific java applet in my reactjs application.
More over, I would like to make it run in a Dialog (using matelial UI).
I have a render function which works and when I click on a specific button, the Dialog is shown. The code concerning the applet part in the Dialog of my return() function is shown here :
<Dialog
ref="dialogAction"
title={this.state.dialogTitle}
actions={customAction}
actionFocus="submit"
modal={this.state.modal}
autoDetectWindowHeight={true}
autoScrollBodyContent={true}
contentStyle={styles.dialogMarvin}>
<applet
type="application/x-java-applet;version=1.6"
width="540"
height="480"
codebase="./marvin"
archive="appletlaunch.jar"
code="chemaxon/marvin/applet/JMSketchLaunch"
legacy_lifecycle={true}
java-vm-args="-Djnlp.packEnabled=true -Xmx512m"
codebase_lookup={false}>
</applet>
</Dialog>
When I run this code, the Dialog is shown as expected and the first time, firefox ask me if I want to activate java (telling me that it's working so far). Watch the following picture: applet ready to be loaded, but allowance asked
But once java allowed, nothing is displayed (only blank, look the following image: once allowance granted). If I check the code in the brower, some properties are missing. Instead of the original embeded code I have this one (missing archive, codebase and some other) :
<applet
type="application/x-java-applet;version=1.6"
data-reactid=".0.$=12:0.0.2.2.0.$=10.0.1.0"
height="480"
width="540">
</applet>
Some inforamtions are displayed but I don't understand them yet.
Have you arleady try to emmbed an applet in your reactjs ? Have you some tips to give ? I'm doing something wrong ?
React is picky when it comes to allowing random attribute names. So instead of injecting applet by using JSX, just set the innerHTML of the component instead. To do this, use React's dangerouslySetInnerHTML:
var dangerousMarkup = {
__html: '<applet.... ' // the whole markup string you want to inject
};
<div dangerouslySetInnerHTML={dangerousMarkup}></div>
This is basically the same as setting domNode.innerHTML = '<applet...' with vanilla javascript, and React just let's the raw markup pass through without modification.
Docs: https://facebook.github.io/react/tips/dangerously-set-inner-html.html
Related
I have used the jQuery.Get() as well as the $.Get() methods to do this but this does not seem to work.
<head>
<script type="text/javascript" src="jquery-2.1.3.min.js" > </script>
<script language="javascript">
function Read()
{
alert("start");
jQuery.get('/spec.txt', function(result)
{
alert("get");
if (result == 1)
{
alert("1");
$("body").html("<p>Specials</p>");
document.getElementById("specials").innerHTML = "<H1>Specials</H1>";
}
else if(result == 0)
{
alert("2");
$("body").html("<p>No Specials</p>");
document.getElementById("specials").innerHTML = "<H1>No Specials</H1>";
}
});
}
</script>
</head>
<body>
<button onclick="Read()">Specials</button>
<div id="specials">
</div>
</body>
</html>
I want to have a text file in my webroot folder that will only contain the values of 1 or 0. This will be used to determine if there are specials or not (this text file will be altered from another page). The value of this text file is to be read into the webpage and that will determine the course of action the if statements are programmed to. I have attached the code I am currently using to do this but I can't seem to get the $.get() / jQuery.get() to execute. You will notice I am using the alert() method to check the steps through the code but it does not execute the alert("get") immediately after the jQuery.get().
I am not using a webserver which I am assuming is the issue. I am simply running the index.html off my hard disk in the webroot folder. The IF statements are to fire depending on the value of read in from the text file named spec.txt
Please bare in mind I am new to web coding with jQuery and Java but I'm adept at simple HTML / CSS coding. This is my first attempt at dynamic web content like this instead of a static site. The site will eventually be hosted on a webserver if that helps with your answer.
You can't make ajax requests from file:// protocol. It's a security restriction.
Files loaded with file:// are always considered as coming from different domains, you can't bypass this feature.
But... If you are using chrome and just want to test it locally to put in a webserver later, you can disable this feature by running chrome in a unsafe mode
path/to/chrome.exe --disable-web-security
If you are using firefox. You can type in your URL about:config an then go to
security.fileuri.strict_origin_policy -> false
It's ok for local testing only. Don't expect the users of your application to disable that as well or you will be creating a big security problem. Be aware you are disabling all browser security and it will be open for malicious program
Just install a simple web server and have fun!
I have a asp.Net application that make calls to a java applet.
Requests via javascript work as expected without problems. however
there is a mechanism that searches the time intervals in the applet.
(using setInterval)
And when this mechanism is triggered the page "loses" focus.
For example, if I'm with the focus on a text field, and the call occurs, the focus leaves the field.
I tried to go the other way, the applet calling the page, but the result was the same.
I also tried putting this control inside an UpdatePanel, to try to isolate the callback but it still fails.
Also tried putting inside an iframe, but it still fails.
Here is the code that makes the request
function initTimerDevices() {
setInterval(getDeviceStatus, 5000);
}
function getDeviceStatus(name) {
document.applet.getDeviceStatus("ASDF");
}
$(document).ready(function () {
initTimerDevices();
});
And here is the ASP
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<applet name="Myapplet" code=com.xpto.applet.class
archive="applet.jar"
width="0.5" height="0.5">
</applet>
<ul id="ulDevices">
</ul>
</ContentTemplate>
</asp:UpdatePanel>
Is there any way to make the call to the applet asynchronously? Or other form that causes this loss of focus does not exist.
One problem here is in the use of the ready() function which:
..will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
That will probably be some time before:
The JVM is loaded.
The applet Jars or classes are loaded.
The applet itself has gone through the init() and start() methods.
Better to initiate this code from within the applet.
I am using sitemesh for a spring based site. The problem is that I have some javascript that I want it to run on the onload event of only one specific page using jquery $(function() { ... }) and not on every page.
I have included the jquery.js in the bottom of my decorator, after the body. So, if I try to include a <script> tag in the body of my decorated page the script won't be executed because jquery will be loaded after that! I know that I could include the jquery.js in the header of my decorator so it will be before the custom script in the decorated page however I don't really like that solution since it will contain javascritp in the head of my page.
So I would like to have something like a placeholder in my sitemesh decorator in where the custom from my decorated page will be placed (as you can understand I come from the django world :p). Is this possible ? Do you propose anything else or should I just put my jquery.js in the header and be done with it ?
To answer my question, after some search I found the following solution:
I Added the following to the end of my decorator page (after including jquery.js)
<decorator:getProperty property="page.local_script"></decorator:getProperty>
I also added the following
<content tag="local_script">
<script>
$(function() {
alert("Starting");
});
</script>
</content>
The decorated result page contained the contents of the local_script tag exactly where I wanted them and everything worked fine :)
I don't know why this feature of sitemesh is not properly documented - using this you can have a great templating behaviour (like django).
Does anyone know why my action runs every time I reload a page. I have a page with a button that should run when I click on it. But now it seems to run when I load the page.
Here is my button and javascript in file deliverables.scala.html
<input type="button" class="btn success" id="add" value="Export to Excel" onclick="JavaScript:generateExcelClick()" />
<script>
function generateExcelClick(event)
{
window.location = "#Application.generateExcel(currentPage)";
}
</script>
And my controller:
public static void generateExcel(List<Infoobject> list) {
...creating a file (works)
...No return
}
How can I change this code so it only runs when I click on the button? The action should not render an another page or something like that. I only want to generate a file.
Thanks!
Edit
I've tried #controllers.Application.generateExcel(currentPage); and #Application.generateExcel(currentPage); in my Javascript function, but it's still creating the file even if I don't click the button.
I have also checked that #Application.generateExcel(currentPage); doesn't runs from an another site och function.
Someone, please?
A little explanation:
When writing in your Scala view and you say
#Application.generateExcel(currentPage)
It runs the function generateExcel in controller Application
What to do
You don't want it to run the function immediately. You want it to go there onClick
So use
#routes.Application.generateExcel(currentPage)
This outputs a link to that function
However for this to work there has to be a (GET) link to that function in your routes
Add this to routes
GET /whatever/:thing controllers.Application.generateExcel(thing: List<path.InfoObject> list)
HOWEVER
This is a bad idea.Why?
Because putting your entire list in a URL just isn't nice.
Do you ever see a complex list in a URL
URLs have to be less than 2000 characters
WHAT TO DO INSTEAD
Send the list as a POST data. Depending on how you take in your data you'll have to figure it out
If you are trying to just call a controller when clicking on a button, you could try :
<button>Mybutton</button>
I don't think you need javascript here (if I understood your situation).
Edit: The idea of this answer is to say that the less javascript in your page, the better.
Edit2 : Can't comment the discussion below, so I put it here:
As I said here : link, your have to declare your object like this :
controllers.Application.method(list : java.util.List[your.package.Infoobject])
Replace your.package with the package in which your object is (maybe models)
But you will get an errror : No QueryString binder found for type
This is because you can only put Strings and numerals in URLS, so the framework tells you to transform your Object (List) in a String (with the QueryStringBinder).
I would call routes-> /generateExcelReport from the button/link and make it return the file
How to send a file to browser for downloading?
How to download a file with Play Framework 2.0
Do anyone know how to put Google adsense ads inside a GWT web application?
You can put the javascript-code from Adsense in the single HTML page that GWT starts with. This way the advertising will not be displayed in the same area as GTW but above/below the GWT code. For advertising that could be ok.
This example places a baner above the application:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>www.javaoracleblog.com</title>
<script type="text/javascript" language="javascript" src="com.javaoracleblog.aggregator.nocache.js"></script>
</head>
<body>
<script type="text/javascript"..
ADsense code here
</script>
<!-- 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>
In order to indicate to Google WT that the site of Google adsense can be trusted you need to add a regex matching URL to the -whitelist command line argument.
Note that this will probably not solve the problems desribed in the above "Why I dumped GWT" article.
According to this thread on AdSense:
Short version, you can't use Adsense
via Ajax without breaking the
programme policies/t&c's
Long version...
Ad code passed through an xmlhttp call
is not rendered, it's just treated as
text (hence, responseText). The only
way to execute js code is to use
"responseXML" coupled with the
"exec()" command.
For instance...
If your xml contains something along
the lines of:
This is the
content from the external
file javascript code
goes here
You would assign a variable (called
page_data for instance) using
ajax_obj.responseXML, run the XML
through a parser and run
exec(js variable or line from XML
here);
Not really helpful from an Adsense
standpoint, but that's how it's done.
It's also worth mentioning Why I dumped GWT:
Another problem were my adsense
banners. Since I didn’t have a lot of
content on the page, the banners were
sometimes off topic. An even bigger
problem was that the banners stayed
the same when people searched for
different keywords (since the ajax
refresh didn’t trigger an adsense
refresh). I solved this by doing the
search with a page refresh instead of
an ajax call. The ajax part of the
site was limited to sorting, faceting,
i18n and displaying tips.
You might check out the interview I did with InfoQ. It includes a sample chapter from my book and it happens to be on SEO.
It's not trivial, but I think the solutions in the chapter let GWT work nicely in an environment where SEO is important. The basic solution is to implement something I call 'bootstrapping'. This means that your pages take the info that would normally come across in GWT-RPC requests and serialize them into the page. The GWT widget then loads this information without an RPC request. While your page serializes the info into JavaScript, it's easy to also write a <noscript> to the page that can be used for SEO.
Take a look at the PDF included here: InfoQ GWT it goes into all the detail. The whole sample project is here: google code with source on github.
If you really want AdSense to be kinda "inside" GWT I'd use the Frame widget. Basically the Frame widget generates an <iframe ...> inside your GWT code. First I've thought iframe, UGH! But the <iframe> tag is still part of the HTML5 spec and has been even extended by some attributes that seem to be there for exactly this "sandboxing" purpose. And with corresponding CSS styling you will not have any scrollbars around your <iframe>.
And here is the actual solution:
You should put
<ui:style>
.sponsor {
border: 0em;
width: 20em;
height: 6em;
float: right;
display: inline;
}
</ui:style>
<g:HTMLPanel>
<g:Frame ui:field="sponsor" url="issue/extern/Google-AdSense.html" styleName="{style.sponsor}"/>
</g:HTMLPanel>
into your .ui.xml file and the logic into the corresponding .java file:
#UiField
Frame sponsor;
Also you should put the actual Google AdSense code (the <script> stuff) into a separate HTML file inside GWT's public folder which is - in this case - called Google-AdSense.html and is located inside the extern folder inside the public folder. issue (in the Frame url attribute) is in this case the GWT output folder.
And here is how it looks like: The ad in the upper right corner.
Btw this is also the way to embed the Google Analytics code into GWT.
Here is how I do it. I have a demo and source code here: http://code.google.com/p/gwt-examples/wiki/DemoGwtAdsene
You can use AdSense and GWT together without using frames or other hacks if you take some care in how you create your host pages.
The key is to include your AdSense code in the host page and then to manipulate the dom element containing the ad but to not detach it from the page. So you can reposition the ads into the body of your other gwt code as long as the dom structure is not changed.
If you do detach and reattach the containing dom element then it will appear to work in Chrome and Firefox but IE will show a blank space. I tried initially to move the ads DIV element into a DockLayoutPanel and thought everything was great until I belatedly tested it in IE.
So this is OK:
Element element = Document.get().getElmentById("ad");
element.getStyle().setPosition(ABSOLUTE);
element.getStyle().setTop(20, PX);
But this is not:
myPanel.add(ElementWrapper.wrap(element));
because adding a widget to another widget re-parents it.
This means that you cannot use any of the built-in LayoutPanel stuff to hold your ad div because Layout cannot wrap an existing element (It creates its own DIV in its constructor). You may be able to modify the layout panel stuff so it wraps an element and does not re-parent it... but I have not tried this yet.
I've tested the results in IE6+, Chrome and Firefox. Downside is that you cannot refresh the ads unless you load a new page. But in my case GWT was used to enhance html pages so that was not an issue. In any case... are users more likely to click on a different ad than one they read several times? Not sure it is so vital.
I could do this using DFP Small Business + Async Publisher tag + AdSense integration:
Here is the code:
On of your host page, put your publisher tag, something like:
<head>
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
<script type="text/javascript">
var slot1 = googletag.defineUnit('/XXXX/ca-pub-YYYYYYYYYYYYYYY/transaction', [468, 60], 'div-gpt-ad-ZZZZZZZ-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
</script>
...
</head>
I've created a view with uiBinder, with a div with the id specified at the head, like this:
<g:HTMLPanel height="62px" width="100%">
<div id='div-gpt-ad-ZZZZZZZ-0' style='width:470px; height:60px;'>
</div>
</g:HTMLPanel>
On the onLoad() method of the view, you initialize the ad, like this:
#Override
protected void onLoad() {
setupAd();
}
public static native void setupAd() /*-{
$wnd.googletag.cmd.push(function() {$wnd.googletag.display('div-gpt-ad-ZZZZZZZ-0')});
}-*/;
To refresh the ad, just call refresh ad for the slot specified at head:
public static native void refreshAd() /*-{
$wnd.googletag.pubads().refresh([$wnd.slot1]);
}-*/;
That's all!
For more information about the publisher tag, check:
http://support.google.com/dfp_sb/bin/answer.py?hl=en&answer=1649768
Now I'm struggling to know how to make AdSense bot to craw my ajax application. I've implemented the Ajax Crawling scheme:
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
But I've got the information from AdSense forum that the AdSense bot (Mediapartners-Google) doesn't work with "escaped fragment" Ajax scheme.
Does anybody know if Google plan to make any progress on that?
This limits this approach to serve just interest based ads, since the context based ad serving depends on ajax crawling scheme.
Google's AdSense bot crawls your page to determine what ads to serve. Therefore, you should not put AdSense on pages with mostly dynamic content. It won't work well.
Maybe you should look into other ad programs?