add style, improve example (mobile support through live editing)

This commit is contained in:
Daniella / Tove 2022-07-03 16:42:16 +02:00
parent 743a5f83fb
commit 2cc71500fd
6 changed files with 65 additions and 31 deletions

View file

@ -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>

View file

@ -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;
} }

View file

@ -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) {

View file

@ -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) {

View file

@ -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
View file

@ -0,0 +1,9 @@
center {
text-align: center;
}
.content {
margin: auto;
display: block;
max-width: 700px;
}