Wicket with Javascript application(GWT made by LibGDX) - gwt

I can read english to some degree but I'm not good at writing.
Then I appologize for any rudeness.
I don't know well about wicket but I think it very good.
I want to deploy on wicket Javascript application made by LibGDX ,but on wicket's HTML file it does not work.
LibGDX logo was shown but next is not.(Maybe it seems to be not found next file (xxxx.cache.html) ??)
Please Tell me how to work Javascript(GWT) application on wicket.
Chrome shows this error.
Uncaught ED5709743BB488EF40123B0ADA51D171.cache.html:84393
com.badlogic.gdx.utils.GdxRuntimeException: Invalid assets description file.
My Javascript application is made by GWT which is client only created by LibGDX.
(LibGDX is multi platform game framework.
It can create WebGL application from java by GWT compiled.)
I think it can work in wicket because this GWT application is client only.
Javascript application is
assets
|...(many files used in game)
|-com
|-badlogic
|-gdx
|-...(some directory)
html
|html.nocache.js
|A0B51A68A37B38F9FF8A8855EDF848C7.cache.html
|Bxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|ED5709743BB488EF40123B0ADA51D171.cache.html
|Exxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|hosted.html
|soundmanager2.swf
|logo.png
|....(many files)
|-gwt
|-chrome
|chrome_rtl.css
|chrome.css
|-images
|-...(some directory)
|...(some files)
soundmanager2-jsmin.js
soundmanager2-setup.js
styles.css
My Javascript application can work in Struts JSP(deployment under webapp).
I wrote at wicket in this way :
src/main/java/.../testwicket/page/xxx.html
<!doctype html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<title>wicket + gwt(client only) test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="soundmanager2-setup.js"></script>
<script src="soundmanager2-jsmin.js"></script>
</head>
<body>
<a class="superdev" href="javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2Flocalhost%3A9876%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2Flocalhost%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D">SuperDev Refresh</a>
<div align="center" id="embed-html"></div>
<script type="text/javascript" src="html/html.nocache.js"></script>
</body>
<script>
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = 'default';
}
function handleMouseUp(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = '';
}
document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
</script>
</html>
Javascript application is in
src/main/webapp/
|-assets
|-html
soundmanager2-jsmin.js
soundmanager2-setup.js
style.css
Even if this code is added in GWT, it do not work(I don't call this code from java...Should I call it?).
public static native void setWindowHref(String url)/*-{
$wnd.location.href = url;
}-*/;

Related

sails.js and foundation 6 - TypeError: url.indexOf is not a function

I am trying to use sails.js and Zurb Foundation 6.2. I used this handy npm generator that sets up my grunt tasks. The output looks pretty good. I have a single js file that contains jquery, foundation, etc.
In my layout.ejs, I have this:
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<link rel="stylesheet" href="/styles/app.css">
<!--STYLES END-->
</head>
<body>
... some html ...
<%- body %>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/foundation.js"></script>
<!--SCRIPTS END-->
<script>
$(document).foundation();
</script>
</body>
</html>
When I run the page, I get this error:
**TypeError: url.indexOf is not a function
jQuery.fn.load()
foundation.js:9612
<anonymous>
foundation.js:11913
<anonymous>**
My reading on this suggests that the issue is either that something is not be loaded, is being loaded more than once, or is in the wrong order. How do I narrow that down? I tried to use CDN's for each piece and still couldn't make it work.
Thank you for your help.
Foundation is not currently compatible with jQuery 3.0.0, Foundation is using the deprecated jQuery.fn.load(). Use jQuery 2.2.x for now. See issue and PR:
https://github.com/zurb/foundation-sites/issues/8834
https://github.com/zurb/foundation-sites/pull/8923

CoffeeScript from CDN above 1.4.0 cannot call JavaScript function

CoffeeScript code is not working when the 1.10.0 version coffee-script.min.js is linked.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset='utf-8'> </head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script>
<!--
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js" > </script>
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.10.0/coffee-script.min.js" > </script>
<script type="text/coffeescript" >
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
The latest working CDN coffee-script.min.js is 1.4.0. What is the problem?
Those script hosted in CDN are not for browser, I think.
I tried your code, and as you say it did not work and there was the following console log.
Uncaught ReferenceError: require is not defined
require is a specification of commonJS and it is not implemented in browser default.
If you would not like to compile and make it work easily, the code below is available.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
</head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
<script type="text/coffeescript">
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
This way is introduced at the official site.
http://coffeescript.org/
While it's not recommended for serious use, CoffeeScripts may be included directly within the browser using tags. The source includes a compressed and minified version of the compiler (Download current version here, 39k when gzipped) as extras/coffee-script.js. Include this file on a page with inline CoffeeScript tags, and it will compile and evaluate them in order.
Error in packaging on the part of the CDN provider, see here:
https://github.com/jashkenas/coffeescript/issues/3811
https://github.com/cdnjs/cdnjs/issues/4869

how to mix javascript js file(script embedded with php) and php code in netbeans?

if my hello.js is like this
function jst()
{
var i = 0 ;
i = <?php echo 35; ?>
alert( i );
}
what i really want in netbeans is to interpret that .js file through php interpreter without changing my extension of hello.js to hello.php or in other words i dont wan to change extension of my file from js . the reason behind this is Because netbean provide special support(i.e editing, coloring of text etc) for files with .js extension .
this is how i am including file in index.php
<script>
<?php include 'hello.php'?>;
</script>
code is working fine but i want to use hello.js instead hello.php in netbeans like as shown in following snippet
<script src="hello.js"></script>
what should i do?? how professional websites handle this issue??
*.js
http://s13.postimg.org/vl6vo4fif/image.png
*.php
http://s21.postimg.org/t7tuk42l3/after.png
every thing has converted to plain text after changing extension
You can only do as the most used way, via parameter
hello.js
function jst(alertMe)
{
alert( alertMe );
}
index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsFileTest</title>
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
var alertMe = <?php echo 35; ?> ;
</script>
</head>
<body>
<button onclick="jst(alertMe)">Try it</button>
</body>
</html>
Develop your js within your php file.
If everything works as expected then you can outsource everything as a separate file .js
But remember : php is parsed and interpreted on server side . So everything outside php tags is completely ignored. Therefore :
<script type="text/javascript" src="jsFile.js"></script>
is pure html and will be ignored. On server side php knows nothing about the existence of these .js file and it will not load and parse it. But this is required if you want php also interpret this file too.
If you want to include it with a php file, you can do it like
Put <script type="text/javascript"> at the beginning. code completion starts again.
jsFile.php
index2.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsFileTest</title>
<?php
include_once 'jsFile.php';
?>
</head>
<body>
<?php
echo "myID = ".$myId."<br>";
?>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Running :
But now we come to the important part.
Look at the html output source :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsFileTest</title>
<script type="text/javascript">
function myFunction()
{
alert("Hi from jsFile.php");
}
</script>
</head>
<body>
myID = idontknow<br>
<button onclick="myFunction()">Try it</button>
</body>
</html>
As you can see , javascript ( function myFuntion() ) is inserted directly in the html output. That is exactly what does not happen with
<title>jsFileTest</title>
<script type="text/javascript" src="jsFile.js"></script>
You can not use src="jsFile.php"
<script type="text/javascript" src="jsFile.php"></script>
After the parsing is finished the content is sent to the client. From this moment it is useless to even try to parse embedded php code in javascript. (the server is no longer involved , has already done its work)
IE detects an error (Status Line). when you double-click this
Error window pops up
the browser expects valid javascript code and this
$myId = "idontknow";
is not a valid JS code.
You just need to enable the PHP to read JS files. Do this:
Open your httpd.conf (Apache configuration file) and find this line:
AddHandler application/x-httpd-php .php
And add the extension, modifying this line to:
AddHandler application/x-httpd-php .php .js
You can even add CSS files too.
put this in customJs.php
<?php ob_start(); ?>
<script type="text/javascript">
<?php ob_end_clean(); ?>
alert('aaaa');
<?php ob_start(); ?>
</script>
<?php ob_end_clean(); ?>

GWT inject jQuery script after page load

I have html page with script file custom.js that is bootstrap for GWT
<!DOCTYPE html>
<html>
<head>
<!-- -->
<script type="text/javascript" src="login/login.nocache.js"></script>
<script type="text/javascript" src="common/js/custom.js"></script>
</head>
<div id="gwt-inject-place"/>
</html>
And that is ok, all works fine.
But in custom.js there is function that I need to fire after login/login.nocache.js inject some html in <div id="gwt-inject-place"/>. Normally custom.js is somehow run before injection take place.
So what should I do to inject JavaScript jquery file?
alert('global');
jQuery(document).ready(function ()
{
alert('inner');
}
This inject custom.js but only global alert shows.
public void onModuleLoad(){
RootPanel.get("gwt-inject-place").add(view);
ScriptInjector.fromUrl("../common/js/custom.js").inject();
}
From Google Docs :
<script src="js-url"/>
Automatically injects the external JavaScript file located at the location specified by src. See automatic resource inclusion for details.
So, You have to place the injection on module.gwt.xml
further Info: Link

Launching Custom URL in PhoneGap + iPhone

I am developing Sencha touch application that will work on iPhone. Now application is ready and works fine in phone browser. But, now I want to distribute my application so I am using PhoneGap.
All my HTML and JavaScript pages are deployed at http://170.60.26.20:8099/Sencha/Html/index.html. Now i want to load that URL using phonegap. Suggest me the steps how could I do this.
I have installed phonegap-1.2.0-0 version.
Create new Phonegap App in xcode and you just need to modify already exist index.html file in www folder.
You can use window.location javascript method to load your web app in phone app.
In PhoneGap(Cordova).plist, add your server to the ExternalHosts list and make OpenAllWhitelistURLsInWebView to YES.
Please try following code to run your html pages in phonegap app.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LoadUrl
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
window.location="http://web.me.com/djpinter1/iPhone/jqtouch/demos/main_tabbar/#ui";
//window.location="http://170.60.26.20:8099/Sencha/Html/index.html";
}
</script>
</head>
<body onload="onBodyLoad()">
</body>
</html>
In your xcode , start a new project as phonegap project. Then copy the files from your project folder to www folder in the phonegap project.Keep in mind that index.html file should be in the parent folder , otherwise you have to change the url accordingly in the corresponding class that invokes a webview.
You can follow this link
http://wiki.phonegap.com/w/page/39991939/Getting%20Started%20with%20PhoneGap%20iOS%20using%20Xcode%204
Hope it will help