i am new on Play Framework and i am trying to develop sample java application
i have created new html page test.html
in controllers it is working if we simply return result in the form of string i.e. return ok("hello world") but it simply format all the styling/text and just shows "hello world" on the UI.
public static Result test() {
return ok("hello world");
}
// working fine
but it gives errors when i try this
public static Result test(){
return ok(test.render());
}
// giving error
it gives following errors
[error] /opt/ahsen/play-2.2.3/testapp/app/controllers/Application.java:15: render(java.lang.String,play.api.templates.Html) in views.html.test cannot be applied to ()
[error] return ok(test.render());
[error] (compile:compile) javac returned nonzero exit code
here is my test.html file
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript">
</script>
</head>
<body>
#content
</body>
</html>
help please
Your test.html template requires two parameters
#(title: String)(content: Html)
So you need to pass them to the template in your controller
public static Result test(){
String title = "test title";
Html content = // create content
return ok(test.render(title, content));
}
Better solution
Test.html looks rather as a more general layout template. I would create a separate file for generating content instead passing it directly from a controller.
content.html
#(title: String)
#test(title){
<span>this is the content</span>
}
And in the controller it would look like this.
public static Result test(){
String title = "test title";
return ok(content.render(title));
}
Related
Does Eclipse Orion WebIDE support JSP? I am trying to create a simple application and jsp files are not working.
index.html
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function getInput()
{
$.ajax({
type:"GET",
url: "./test.jsp",
success: function(success) {
console.log(success);
}
});
}
</script>
</head>
<body onload="getInput()">
test.jsp
<%#import="./javaMethod*"%>
<%javaMethod a = new javaMethod();
var value = a.initiate();
%>
<input type="hidden" id="test" value="<%=value%>">
javaMethod.java
public class javaMethod
{
public int initiate()
{
return 1;
}
}
This should add a hidden input field which will hold the value from the java method. However, it is not working and the jsp is just displaying as plain text.
This should add a hidden input field - no, this should log anything comes from test.jsp to the browser console. To add the output of the JSP to the body element, use $(document.body).append(success);.
I'm using Wicket and I have followed this guide (and also this one) to build a webpage template.
My goal is to have a fixed header and footer and a dynamic <div> inside <body> that change its content when I change page by clicking on some menu links.
So at the end I have done something like this:
HomePage.html
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</body>
</html>
HomePage.java
public class HomePage extends WebPage {
// Title of the current page
private String pageTitle;
public HomePage() {
// dynamic page title
add(new Label("title", new PropertyModel<>(this, "pageTitle")));
// ...
}
// ...
public String getPageTitle() {
return pageTitle;
}
public final void setPageTitle(String title) {
pageTitle = title;
}
}
Menu.java
public class Menu extends Panel {
public Menu(String id) {
super(id);
add(new BookmarkablePageLink<>("homepageLink", HomePage.class));
add(new BookmarkablePageLink<>("page1Link", Page1.class));
add(new BookmarkablePageLink<>("page2Link", Page2.class));
}
public Menu(String id, IModel<?> model) {
super(id, model);
}
}
Page1.java
public class Page1 extends HomePage {
public Page1() {
setPageTitle("Page1");
// ...
}
}
Page2.java
public class Page2 extends HomePage {
public Page2() {
setPageTitle("Page2");
// ...
}
}
The problem is that everytime I use my Menu to open a page (Page1 or Page2) the browser reloads all resources, I think it's due to Page1 and Page2 that are children of HomePage.
So, for example, one issue I have is that if I want my Menu to keep track of the page I'm currently visiting by setting a active class via javascript, I will have troubles because everytime I visit a page the js files (and all the others) are downloaded again and I loose all the logic I did.
I just would like to change the content of:
<div id="content" wicket:id="template" class="">
</div>
without refreshing all the rest of the page.
Is it possible to do that just by changing the Wicket approach?
Thanks
What you want to do is basically a Single Page Application. In this case page inheritance doesn't work well. You need to turn Page1, Page2, etc... into Panels and use AJAX to place them as page content (in your code wicket:id="template") when user clicks menu items.
You should to use <wicket:extend></wicket:extend> in parent markup. Something like:
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<wicket:extend>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</wicket:extend>
<section id="content">
<wicket:child/>
</section>
</body>
</html>
<wicket:child> is used inside the parent’s markup to define where the children pages/panels can “inject” their custom markup extending the markup inherited from the parent component.
Now only the child markup will updating, I'm not completly sure, but looks like only child part updating.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-15" />
<script type="text/javascript">
var foo;
function test(s)
{
foo = s;
alert(foo);
}
window.onload = function ()
{
foo = 'init';
document.getElementById('foo').doit();
alert(foo);
}
</script>
<body>
<applet id="foo" code="TestApplet.class"
archive="TestApplet.jar" width="0" height="0"></applet>
</body></html>
Java applet code:
public void doit ()
{
try {
getAppletContext().showDocument(
new URL("javascript:test(\"foobar\")"));
} catch (Exception ex) {
ex.printStackTrace();
}
}
When I call this HTML page :
In IE (8) I get: First popup ("foobar"), second popup ("foobar").
In Firefox (19.2, 30.0) I get: First popup ("foobar"), second popup ("init").
Can anybody explain why? Obviously, foo is written by the applet only temporarily.
Many thanks in advance.
I am using a java based adapter in worklight. I have a method which returns a string value. I am able to call the function and the result is going to success handler in the adapter, but i am not able to find out anything about the return value. I cant see the returned String anywhere in the response JSON. Can anyone help me with this?
Here is my response JSON:
{"status":200,"invocationContext":null,"invocationResult":{"responseID":"16","isSuccessful":true}}
I have seen the following example
http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/docs/Module_05_5_-_Using_Java_in_Adapters.pdf, when i do an "invoke Adapter Procedure" on the code sample, I am getting this result.
{ "isSuccessful": true, "result": -9 }
where result is the return value of the java method in the adapter.
But when i do the same thing for my app, i get the following
{ "isSuccessful": true }
Java-adapter.impl code
function getXML() { return {result:
com.worklight.javaCode.FileIOPlugin.getXML() }; }
Java class method
public class FileIOPlugin{
public static String getXML() {
return "SUCCESS";
}
}
function getXML()
{
var invocationData ={
adapter: 'JavaAdapter',
procedure: 'getXML'
};
WL.Client.invokeProcedure(invocationData,{
onSuccess: successHandler,
onFailure: failureHandler
)};
function successHandler(data) {alert(JSON.stringify(data));}
function failureHandler(data) {alert("Error to get data");}
The return needs to be an object.
I've tried to reproduce your problem in the recently released Worklight 6.0, and I see everything working fine, after a copy&paste of your code.
The only change I did was to add the empty parameters on the invocationData object used to invoke the adapter method.
This is my exact code:
FileIOPlugin.java (under server/conf, in a package com.worklight.javacode)
package com.worklight.javacode;
public class FileIOPlugin {
public static String getXML() {
return "SUCCESS";
}
}
JavaAdapter.xml (HTTP adapter definition, under adapters folder)
<?xml version="1.0" encoding="UTF-8"?>
<wl:adapter name="JavaAdapter"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:wl="http://www.worklight.com/integration"
xmlns:http="http://www.worklight.com/integration/http">
<displayName>JavaAdapter</displayName>
<description>JavaAdapter</description>
<connectivity>
<connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
<protocol>http</protocol>
<domain>rss.cnn.com</domain>
<port>80</port>
<!-- Following properties used by adapter's key manager for choosing specific certificate from key store
<sslCertificateAlias></sslCertificateAlias>
<sslCertificatePassword></sslCertificatePassword>
-->
</connectionPolicy>
<loadConstraints maxConcurrentConnectionsPerNode="2" />
</connectivity>
<procedure name="getXML"/>
</wl:adapter>
JavaAdapter-impl.js (next to JavaAdapter.xml)
function getXML() {
return {
result : com.worklight.javacode.FileIOPlugin.getXML()
};
}
I called my app javaAdapterApp, hence these file names:
javaAdapterApp.js (under apps/javaAdapterApp/common/js)
function wlCommonInit(){
}
function getXML() {
var invocationData = {
adapter : 'JavaAdapter',
procedure : 'getXML',
parameters : []
};
WL.Client.invokeProcedure(invocationData, {
onSuccess : successHandler,
onFailure : failureHandler
});
}
function successHandler(data) {
alert(JSON.stringify(data));
}
function failureHandler(data) {
alert("Error to get data");
}
And finally
javaAdapterApp.html (under apps/javaAdapterApp/common)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>javaAdapterApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/javaAdapterApp.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<button onClick="getXML()">GET XML</button>
<script src="js/initOptions.js"></script>
<script src="js/javaAdapterApp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I ran it in the test server, and the result of JSON.stringify(data) in the success handler looks like:
{"status":200,"invocationContext":null,"invocationResult":{"responseID":"9","result":"SUCCESS","isSuccessful":true}}
There is the "SUCCESS" String you are looking for in the invocationResult.result.
Hope this helps
Orlando
I'm trying to show a form with the values but it's not working.
my action:
public static Result login() {
User user = new User();
user.name = "Murilo";
Form<User> userForm = form(User.class);
return ok(login.render(userForm.fill(user)));
}
and my html:
#(myForm : play.data.Form[models.User])
<!DOCTYPE html>
<html>
<head>
</head>
<body>
#helper.inputText(myForm("name"))
</body>
</html>
but when I access it, the following error throws:
type mismatch; found : play.data.Form.Field required: play.api.data.Field
As a addition to nico_ekito's good answer: I usually do not use #helper.. because it is long and not/less readable if your form starts to grow (more fields). So I do the following:
#(editForm:Form[User]
#*** IMPORTS ****#
#import helper._
#form(routes.Tasks.save(), 'class -> "form-horizontal") {
#inputText(editForm:Form("description()").....)
#inputArea(editForm:Form("description()").....)
}
In your template, it should be:
#(myForm : Form[User])
<!DOCTYPE html>
<html>
<head>
</head>
<body>
#helper.inputText(myForm("name"))
</body>
</html>