add style, improve example (mobile support through live editing)
This commit is contained in:
parent
743a5f83fb
commit
2cc71500fd
6 changed files with 65 additions and 31 deletions
47
index.html
47
index.html
|
@ -3,34 +3,37 @@
|
||||||
<title>Tryumph example page</title>
|
<title>Tryumph example page</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1> This is the Tryumph example page </h1>
|
<center>
|
||||||
|
<h1> This is the Tryumph example page </h1>
|
||||||
Here, you will be able to test out some functions of Tryumph.
|
|
||||||
|
|
||||||
|
Here, you will be able to test out some functions of Tryumph.
|
||||||
|
</center>
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<h2>Get:</h2>
|
<div class=content>
|
||||||
<form onsubmit="try{document.getElementById('value').value = data[document.getElementById('name').value].toString()}catch(e){} ; return false;">
|
<h2>Get:</h2>
|
||||||
<input type="text" id="name">=
|
<form onsubmit="try{document.getElementById('value').value = data[document.getElementById('name').value].toString()}catch(e){} ; return false;">
|
||||||
<input readonly type="text" id="value">
|
<input type="text" id="name">=
|
||||||
<input type="submit" value="Get!">
|
<input readonly type="text" id="value">
|
||||||
</form>
|
<input type="submit" value="Get!">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
<h2>Server-side set:</h2>
|
<h2>Server-side set:</h2>
|
||||||
<form method="post">
|
<form method="post">
|
||||||
<input type="text" name="name">=
|
<input type="text" name="name">=
|
||||||
<input type="text" name="value">
|
<input type="text" name="value">
|
||||||
<input type="submit" value="Set!">
|
<input type="submit" value="Set!">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<h2>Client-side set:</h2>
|
<h2>Client-side set:</h2>
|
||||||
<form onsubmit="try{data[document.getElementById('sname').value] = document.getElementById('svalue').value}catch(e){} ; return false;">
|
<form onsubmit="try{data[document.getElementById('sname').value] = document.getElementById('svalue').value}catch(e){} ; return false;">
|
||||||
<input type="text" id="sname">=
|
<input type="text" id="sname">=
|
||||||
<input type="text" id="svalue">
|
<input type="text" id="svalue">
|
||||||
<input type="submit" value="Set!">
|
<input type="submit" value="Set!">
|
||||||
<button onclick="data.save()" type="button">Save!</button>
|
<button onclick="data.save()" type="button">Save!</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -4,15 +4,14 @@ import java.lang.reflect.InvocationTargetException;
|
||||||
import java.lang.reflect.Method;
|
import java.lang.reflect.Method;
|
||||||
|
|
||||||
import de.tudbut.async.Callback;
|
import de.tudbut.async.Callback;
|
||||||
import de.tudbut.tryumph.config.IRequestCatcher;
|
|
||||||
import de.tudbut.tryumph.server.Request;
|
import de.tudbut.tryumph.server.Request;
|
||||||
import de.tudbut.tryumph.server.Response;
|
import de.tudbut.tryumph.server.Response;
|
||||||
|
|
||||||
public class EventListener {
|
public class EventListener {
|
||||||
|
|
||||||
private IRequestCatcher catcher;
|
private Object catcher;
|
||||||
|
|
||||||
public EventListener(IRequestCatcher catcher) {
|
public EventListener(Object catcher) {
|
||||||
this.catcher = catcher;
|
this.catcher = catcher;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,8 @@ package de.tudbut.tryumph.example;
|
||||||
|
|
||||||
import java.net.Socket;
|
import java.net.Socket;
|
||||||
|
|
||||||
|
import org.w3c.dom.Document;
|
||||||
|
import org.w3c.dom.Element;
|
||||||
import de.tudbut.async.Callback;
|
import de.tudbut.async.Callback;
|
||||||
import de.tudbut.async.ComposeCallback;
|
import de.tudbut.async.ComposeCallback;
|
||||||
import de.tudbut.async.TaskCallable;
|
import de.tudbut.async.TaskCallable;
|
||||||
|
@ -22,13 +24,34 @@ public class Main implements IRequestCatcher {
|
||||||
public TaskCallable<ComposeCallback<Request, Response>> onConnect(Socket socket) {
|
public TaskCallable<ComposeCallback<Request, Response>> onConnect(Socket socket) {
|
||||||
return (tres, trej) -> tres.call((resp, res, rej) -> {
|
return (tres, trej) -> tres.call((resp, res, rej) -> {
|
||||||
System.out.println(resp.toString());
|
System.out.println(resp.toString());
|
||||||
listener.handle(resp, res, rej);
|
listener.handle(resp, r -> {
|
||||||
|
if(r.isHTML) {
|
||||||
|
Document html = r.getHTML();
|
||||||
|
Element element;
|
||||||
|
element = html.createElement("meta");
|
||||||
|
element.setAttribute("name", "viewport");
|
||||||
|
element.setAttribute("content", "width=device-width height=device-height");
|
||||||
|
html.getElementsByTagName("head").item(0).appendChild(element);
|
||||||
|
element = html.createElement("link");
|
||||||
|
element.setAttribute("rel", "stylesheet");
|
||||||
|
element.setAttribute("href", "/style.css");
|
||||||
|
html.getElementsByTagName("head").item(0).appendChild(element);
|
||||||
|
r.updateHTMLData();
|
||||||
|
}
|
||||||
|
res.call(r);
|
||||||
|
}, rej);
|
||||||
if(!resp.hasResponse()) {
|
if(!resp.hasResponse()) {
|
||||||
res.call(new Response(resp, "<h1>Error: 404 Not found " + resp.realPath + "</h1>", 404, "Not Found"));
|
res.call(new Response(resp, "<h1>Error: 404 Not found " + resp.realPath + "</h1>", 404, "Not Found"));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@GET
|
||||||
|
@Path("/style.css")
|
||||||
|
public void style(Request request, Callback<Response> res, Callback<Throwable> rej) {
|
||||||
|
res.call(new Response(request, request.context.file("style.css"), 200, "OK", "text/css"));
|
||||||
|
}
|
||||||
|
|
||||||
@GET
|
@GET
|
||||||
@Path("/")
|
@Path("/")
|
||||||
public void onIndex(Request request, Callback<Response> res, Callback<Throwable> rej) {
|
public void onIndex(Request request, Callback<Response> res, Callback<Throwable> rej) {
|
||||||
|
|
|
@ -81,7 +81,7 @@ public class BrowserContext {
|
||||||
return AsyncJSON.write(data)
|
return AsyncJSON.write(data)
|
||||||
.compose((resp, res, rej) -> {
|
.compose((resp, res, rej) -> {
|
||||||
if(response.isHTML) {
|
if(response.isHTML) {
|
||||||
Document document = response.getHtml();
|
Document document = response.getHTML();
|
||||||
Element element = document.createElement("script");
|
Element element = document.createElement("script");
|
||||||
Node text = document.createTextNode(
|
Node text = document.createTextNode(
|
||||||
"function setCookie(cname, cvalue) {" +
|
"function setCookie(cname, cvalue) {" +
|
||||||
|
@ -108,8 +108,8 @@ public class BrowserContext {
|
||||||
"data.save = function saveData() { setCookie('tryumph.data', encodeURIComponent(JSON.stringify(data))) }"
|
"data.save = function saveData() { setCookie('tryumph.data', encodeURIComponent(JSON.stringify(data))) }"
|
||||||
);
|
);
|
||||||
element.appendChild(text);
|
element.appendChild(text);
|
||||||
Node body = document.getElementsByTagName("body").item(0);
|
Node head = document.getElementsByTagName("head").item(0);
|
||||||
body.insertBefore(element, body.getFirstChild());
|
head.appendChild(element);
|
||||||
response.updateHTMLData();
|
response.updateHTMLData();
|
||||||
}
|
}
|
||||||
if(needsChange) {
|
if(needsChange) {
|
||||||
|
|
|
@ -71,13 +71,13 @@ public class Response {
|
||||||
return html = HTMLParsing.parse(htmlData);
|
return html = HTMLParsing.parse(htmlData);
|
||||||
}
|
}
|
||||||
|
|
||||||
public String getHtmlData() {
|
public String getHTMLData() {
|
||||||
if(!isHTML)
|
if(!isHTML)
|
||||||
throw new IllegalStateException("Tried to access HTML on a non-HTML response");
|
throw new IllegalStateException("Tried to access HTML on a non-HTML response");
|
||||||
return htmlData;
|
return htmlData;
|
||||||
}
|
}
|
||||||
|
|
||||||
public Document getHtml() {
|
public Document getHTML() {
|
||||||
if(!isHTML)
|
if(!isHTML)
|
||||||
throw new IllegalStateException("Tried to access HTML on a non-HTML response");
|
throw new IllegalStateException("Tried to access HTML on a non-HTML response");
|
||||||
return html;
|
return html;
|
||||||
|
|
9
style.css
Normal file
9
style.css
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue