I am trying to get a PDF in GWT from client side
I am using jspdf for that
Here is my code in GWT client side onModuleLoad
public void onModuleLoad() {
Button btn = new Button("click");
RootPanel.get().add(btn);
btn.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
callJs();
}});
}
public native void callJs() /*-{
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');
}-*/;
}
In my project.html file,
I added these in my header
<script type="text/javascript" src="examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
I have downloaded the jspdf and put inside my war folder
Now when i Click on the button I get the error in console:
jsPDF is not defined
Please suggest what I am missing ..
NOTE: If i use the same above code within my project.html page
It works fine
but it doesnt work when i put the same code inside my JSNI method
It seems that <script type="text/javascript" src="jspdf.js"></script> has not been loaded by your browser (404 ?).
Be sure that the jspdf.js file is at the root of you .war (with your project.html)
Related
Javascript files are not being pulled into my Phonegap app. This is a recent problem that is quite frankly driving me insane. This is the top of my index.html file:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD90W6MypWGP6s4luD2kQHhZ9IFQrfr04g&sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/facebook.js"></script>
<script type="text/javascript">
app.initialize();
</script>
This is my facebook.js file that I'm trying to pull in:
$(document).on('ready' , function(){
console.log('ready')
function onDeviceReady(){
console.log('test')
var plugin = new CC.CordovaFacebook();
plugin.init('***************', 'myapp',
['email'],
function(response){console.log(response)},
function(failure){console.log(failure)});
var loginButton = $('#login-with-facebook');
loginButton.on('click' , function(e){
e.preventDefault();
plugin.login(function(token) {
console.log("Access token is: " + token);
}), function(failure){console.log(failure)});
})
}
if (window.cordova.logger) {window.cordova.logger.__onDeviceReady();};
onDeviceReady();
document.addEventListener("deviceready", onDeviceReady, false);
})
I can't console.long anything in the facebook.js file. What's driving me even more crazy is that it's worked on occasion. Are my files out of order? Also, I only seem to be running into this issue after installing one of the cordova facebook plugins. Does anybody know what's going on here?
Because you define your onDeviceReady function inside an anonymous event handler function, it won't be available until the DOM is loaded (and shouldn't only be accessible from within the event handler. This would only work properly if the device is ready before the DOM loads and only because onDeviceReady is manually invoked in the onDocumentReady event handler. Replace your facebook.js with the following.
function onDeviceReady(){
console.log('test')
var plugin = new CC.CordovaFacebook();
plugin.init('443530475777959', 'spencerspiegelapp',
['email'],
function(response){console.log(response)},
function(failure){console.log(failure)});
var loginButton = $('#login-with-facebook');
loginButton.on('click' , function(e){
e.preventDefault();
plugin.login(function(token) {
console.log("Access token is: " + token);
}), function(failure){console.log(failure)});
})
}
$(document).on('ready' , function() {
console.log('ready')
document.addEventListener("deviceready", onDeviceReady, false);
if (window.cordova.logger) {
window.cordova.logger.__onDeviceReady();
}
});
I am attempting to get a very simple HTML/JavaScript application working for SDK 5.0b, the instructions for which are here...
http://samsungtvdev.blogspot.com/2013/04/smamsung-smart-tv-how-to-write-hello.html
I can launch VirtualBox 4.2.16 and see my application in the menu for the emulator. However, when I launch it, the background is black, and I don't see my application. I also see a bunch of warnings in the emulator about 'RegisterType()' and other functions not being available.
I tried posting this on the Samsung SDK forum, but it's pretty dead over there. I also tried the suggestion here, but copying the application manually also doesn't seem to work. Anyone have any ideas on how I can get this working?
Edit: Here is the HTML code. This isn't more than a "hello world" example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HelloWorld</title>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
<!-- TODO: your code here -->
<div id="outputDiv"></div>
</body>
</html>
This is the JavaScript code.
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
alert("App loaded!");
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("anchor").focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_LEFT:
alert("LEFT");
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
break;
case tvKey.KEY_UP:
alert("UP");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
break;
case tvKey.KEY_ENTER:
case tvKey.KEY_PANEL_ENTER:
alert("ENTER");
document.getElementById("outputDiv").innerHTML += "<h1>Hello, World!</h1><br/>";
break;
default:
alert("Unhandled key");
break;
}
};
Here are the logs:
http://pastebin.com/mZULDGc6
1.) Look for misspellings, typos and missing commas. Samsung Smart TV SDK seems to be very strict with that and since you have no proper console, you don't get any errors if you forget a comma or something
2.) check your HTML/CSS
Maybe you should post your code so I can have a closer look.
EDIT: You forgot to add the scripts in your HTML head. You have to add every script file that you use in your project, such as Main.js. That would be
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
and also all Samsung SmartTV API script files that are required.
First what i see, you forgot "anchor" tag in html.
Not included external JS files in html page, and standard smart tv sdk files:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
Then add
<body onload="Main.onLoad();" onunload="Main.onUnload();">
Are you sure that images loaded? Print it in console.
Why div block position inside canvas, move it outside. I think that code started with js error, so you don't see anything. Be more careful.
I had same issue and fixed it by adding background: red; for body tag in css.
I have a html, say A.html. I am invoking A.html inside of A.html inside an IFRAME.
A.html
<html>
.....
<IFRAME>
A.html (same domain, etc as A.html)
</IFRAME>
</html>
This is a GWT app. This IFRAME is a popup, and when the user closes (clicks a close button) this popup (which is also loading the A.html as you can see above), I want to
fire an event to display some message on the outer A.html which means I need an access to codes outside of IFRAME. How can I achieve this?
Thanks
Since your iframe contents are being loaded from the same domain, you can call javascript functions on the containing page. I'm assuming that you're asking about calling the code outside the iframe from GWT. If so, then you can use JSNI.
For example, given the JSNI method:
private final native void postClosedEvent()
/*-{
$wnd.functionDefinedOutside();
}-*/
You could call the method within a GWT ClickHandler:
closeButton.addClickHandler(new ClickHandler()
{
public void onClick(ClickEvent e)
{
postClosedEvent()
}
});
This assumes a function defined using javascript in the containing page, for instance:
<script type="text/javascript">
var functionDefinedOutside =
function()
{
alert("GOT MESSAGE FROM iframe");
};
</script>
Note: If the iframe contents are loaded from a different domain, you can achieve the same result using postMessage.
IFRAME in the GWT module is defined as:
<iframe src="/temp.jsp"></iframe>
GWT module (Outer class):
public class Test implements EntryPoint {
public void onModuleLoad() {
registerMethod();
}
private static native void registerMethod() /*-{
$wnd.mt = $entry(#test.client.Test::show(Ljava/lang/String;));
}-*/;
public static void show(String value){
Window.alert("Calling from inside IFRAME " + value);
}
}
JSP inside the IFRAME: temp.jsp
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>temp</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<div id="content">
Holla commo estas from the iframe!
</div>
<script type="text/javascript">
window.alert("inside iframe");
window.parent.mt("passing a value to a parent!!!");
</script>
</body>
</html>
I'm working on installing a PhoneGap plugin on an iPhone. The page for the plugin I am attempting to install can be seen here: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/MessageBox.
I believe I have narrowed down my problem to incorrectly working with the JavaScript file. I am including it on my HTML page like so:
<script language="javascript" type="text/javascript" src="MessageBox.js"></script>
The rest of my HTML page is this:
<script type="text/javascript">
alert("test1");
var messageBox = window.plugins.messageBox;
alert("test2");
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
</script>
I see an alert saying test1, but not the second alert. This makes me think that the error is on the line:
var messageBox = window.plugins.messageBox;
However, I'm not quite sure what I should be doing differently. From what I can tell, I've done all the necessary steps as described on the plugin's documentation page, seen here:
https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MessageBox/README.md
(As expected, I also do not see the output of the messageBox.alert... line when viewing this through the iOS simulator.)
I would appreciate any help with this issue, thanks!
NOTE: my initial thread regarding this topic can be seen here: Trouble Installing PhoneGap Plugin
EDIT: I should also add that I have the exact same problem when trying to install a different (but similar) plugin, known as "Prompt"
EDIT2: Here's my index.html:
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="MessageBox.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
navigator.notification.alert("PhoneGap is working");
window.location.href="otherpage.html";
}
</script>
The problem is that when you try to create your MessageBox, PhoneGap is not ready yet.
You just need to wait for PhoneGap to be ready before you execute your code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location="otherpage.html";
}
</script>
</head>
<body>
</body>
</html>
Then, on otherpage.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="MessageBox.js"></script>
</head>
<body onload="onLoad()">
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
console.log("onLoad");
var messageBox = window.plugins.messageBox;
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
}
</script>
</body>
</html>
I tested it on PhoneGap 1.4.1
How can I do Tinymce toolbar draggable with jQuery?
Try this in your tinyMCE init method
tinyMCE.init({
// ...
handle_event_callback : function(e) {
if(e.type == 'click') {
$('.mceExternalToolbar').draggable();
}
return true;
}
});
Include the following jQuery UI files :
<script type="text/javascript" src="tiny_mce.js"></script>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
Note that i've tried this only with one tinyMCE instance.
I don't know if there are some side effects of this workaround, but it's working for now.