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,13 +3,15 @@
<title>Tryumph example page</title>
</head>
<body>
<center>
<h1> This is the Tryumph example page </h1>
Here, you will be able to test out some functions of Tryumph.
</center>
<br/>
<br/>
<div class=content>
<h2>Get:</h2>
<form onsubmit="try{document.getElementById('value').value = data[document.getElementById('name').value].toString()}catch(e){} ; return false;">
<input type="text" id="name">=
@ -32,5 +34,6 @@
<input type="submit" value="Set!">
<button onclick="data.save()" type="button">Save!</button>
</form>
</div>
</body>
</html>

View file

@ -4,15 +4,14 @@ import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import de.tudbut.async.Callback;
import de.tudbut.tryumph.config.IRequestCatcher;
import de.tudbut.tryumph.server.Request;
import de.tudbut.tryumph.server.Response;
public class EventListener {
private IRequestCatcher catcher;
private Object catcher;
public EventListener(IRequestCatcher catcher) {
public EventListener(Object catcher) {
this.catcher = catcher;
}

View file

@ -2,6 +2,8 @@ package de.tudbut.tryumph.example;
import java.net.Socket;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import de.tudbut.async.Callback;
import de.tudbut.async.ComposeCallback;
import de.tudbut.async.TaskCallable;
@ -22,13 +24,34 @@ public class Main implements IRequestCatcher {
public TaskCallable<ComposeCallback<Request, Response>> onConnect(Socket socket) {
return (tres, trej) -> tres.call((resp, res, rej) -> {
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()) {
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
@Path("/")
public void onIndex(Request request, Callback<Response> res, Callback<Throwable> rej) {

View file

@ -81,7 +81,7 @@ public class BrowserContext {
return AsyncJSON.write(data)
.compose((resp, res, rej) -> {
if(response.isHTML) {
Document document = response.getHtml();
Document document = response.getHTML();
Element element = document.createElement("script");
Node text = document.createTextNode(
"function setCookie(cname, cvalue) {" +
@ -108,8 +108,8 @@ public class BrowserContext {
"data.save = function saveData() { setCookie('tryumph.data', encodeURIComponent(JSON.stringify(data))) }"
);
element.appendChild(text);
Node body = document.getElementsByTagName("body").item(0);
body.insertBefore(element, body.getFirstChild());
Node head = document.getElementsByTagName("head").item(0);
head.appendChild(element);
response.updateHTMLData();
}
if(needsChange) {

View file

@ -71,13 +71,13 @@ public class Response {
return html = HTMLParsing.parse(htmlData);
}
public String getHtmlData() {
public String getHTMLData() {
if(!isHTML)
throw new IllegalStateException("Tried to access HTML on a non-HTML response");
return htmlData;
}
public Document getHtml() {
public Document getHTML() {
if(!isHTML)
throw new IllegalStateException("Tried to access HTML on a non-HTML response");
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;
}