Archiv
Eine einfache Webseite mit VisualStudio erstellen
Vorgabe
Die Anwendung startcoinbase.info soll lediglich eine „Landing Page“, ein Impressum sowie eine Datenschutzseite enthalten. Die Landing Page sollte responsiv sein und auf verschiedenen Geräten ähnlich aussehen. Damit ich nicht alles neu erfinden muss, verwende ich das Template VISUALIZE von TEMPLATED. So sieht das Template im Original aus:
Aus dem Template möchte ich folgende Webseite erstellen:
Um die Webseite zu erstellen sind nur wenige Änderungen notwendig. Das abgerundete Bild soll etwas größer sein als das im Original-Bild, die Schriftfarbe für h1 wird angepasst und die Stylevorgabe für den Button wird leicht abgeändert.
Projekt anlegen
Aus meiner Sicht eignet sich für diese Art von Webseite am besten die Projektvorlage „HTML-Anwendung mit TypeScript“:
Zunächst kopiere ich die Datei main.css vom Template in das neu erstellte Verzeichnis css der Webanwendung:
Inhalte anpassen
Im nächsten Schritt kopiere ich den Inhalte der index.html (die Datei vom Template) in die index.html (die Datei in Visual Studio) und passe den Pfad zum Stylesheet an. Zusätzlich passe ich im Head-Bereich den Title an und ergänze keywords und description:
Dann ersetze ich den Text „This is…“ mit meinem eigenen Text, entferne die ganzen Social Media Buttons und füge stattdessen Links zu Impressum und Datenschutz hinzu (gaaanz wichtig). Den span mit der Klasse avatar lasse ich stehen – das ist das abgerundete Bild.
Die Main-Sektion entfällt bei der Startseite komplett, deshalb lösche ich den gesamten Block. Dafür ergänze ich in der Section mit der id „header“ noch einen Text unterhalb des Bildes sowie einen Button.
Die letzte Änderung in der Datei index.html ist die Anpassung des Footers und das Entfernen der Scripts, da diese nicht verwendet werden.
Im Footer habe ich einen Link zum Template und dessen Autor eingebaut um die Anforderungen der CC-Lizenz zu erfüllen. Beispiele wie diese Anforderungen umzusetzen sind findet man auf der Creative Commons Seite. Damit sind die grundlegenden Änderungen für die Startseite erfolgt.
Styles anpassen
Jetzt mache ich noch einige Anpassungen im Stylesheet. Zunächst sollen die h1-Elemente etwas größer werden:
Die Hintergrundfarbe der Buttons wird leicht angepasst – #FF6382 wird zu #7C5D7D.
Für hover und active verwende ich den ebenfalls den Farbcode #7C5D7D.
Dann entferne ich beim h1 Element die Opacity für die Schriftfarbe und ändere die Anzeigegröße des runden Bildes (Klasse .avatar img) auf 260px.
Für die Bilder lege ich den Ordner images an und kopiere die Dateien avatar.jpg und bg.jpg aus dem Template hinein. Das avatar-Bild habe ich natürlich durch ein Katzenbild ersetzt 😉
Damit ist die Seite fast schon fertig.
Weitere Seiten
Ich muss nur noch die Seiten für den Datenschutz und das Impressum anlegen. Dazu kopiere ich die index.html und passe die Inhalte an. Die Texte für Impressum und Datenschutz füge ich zwischen header und footer ein.
Die Texte für Impressum und Datenschutz kann man mit dem Generator auf eRecht24 erstellen.
Desktop-Anwendung „cats“ mit electron – Teil I
The Cat API – Suuuuuper – es gibt tatsächliche eine API für Katzenbilder. Das Internet ist doch zu was gut 😉
Mit der API und dem electron Framework will ich ein Widget bauen um wechselnde Katzenbilder anzuzeigen. Zunächst einmal muss dazu node.js installiert werden. Unter Windows kann man einfach den Installer von der Node-Webseite herunterladen und den Setup starten:
Anschließend stehen die Befehle node und npm zur Verfügung:
Im nächsten Teil werde ich electron mit Hilfe von npm installieren und eine erste „Hello World“-Anwendung erstellen…
JSF – Swipe events mit jQuery Mobile
Mit Hilfe der Javascript-Library jQuery und jQuery Mobile kann man auf JSF-Seiten Wischbewegungen auswerten. Um die Webseiten ohne iPad zu testen, kann man die Desktop-Version von Safari verwenden.
Im Head-Bereich der JSP-Datei werden die jQuery-Dateien eingebunden (ich habe die Dateien auf die gleiche Ebene wie die JSP-Seite gelegt):
<link rel="stylesheet" href="./jquery.mobile.css" /> <script src="./jquery.js"></script> <script src="./jquery.mobile.js"></script>
dann kommt der Seiten-Inhalt – dieser wird im body-Bereich der Datei angelegt:
<div id="page1" data-role="page" >
<h:outputText value="Page 1" />
</div>
<div id="page2" data-role="page" >
<h:outputText value="Page 2" />
<h:outputText value="#{bean.hello}" />
</div>
die beiden div-Elemente bekommen den Zusatz data-role=page. Damit erzeugt HTML5 mehrere Web-Seiten innerhalb einer einzigen JSP-Datei. Der Browser zeigt zunächst nur den Inhalt des ersten DIV-Element (mit Attribute page) an. Jetzt wird noch der Javascript-Code benötigt um auf den Event swipe zu reagieren:
$(function() {
$('body').bind('swiperight', function(e) {
alert('You swiped right!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
alert('You swiped left!');
e.stopImmediatePropagation();
return false;
});
});
Jetzt muss man die Seite bei einer Wischbewegung wechseln. Dazu prüft man auf welcher Seite man gerade steht und wechselt auf die jeweils andere Seite:
var curPage = 1;
$(function() {
$('body').bind('swiperight', function(e) {
//alert('You swiped right!' + curPage);
if (curPage == 2) {
curPage = 1;
$.mobile.changePage("#page1", "slide", true, true);
}
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
//alert('You swiped left!' + curPage);
if (curPage == 1) {
curPage = 2;
$.mobile.changePage("#page2", "slide", false, true);
}
e.stopImmediatePropagation();
return false;
});
});
hier noch einmal die gesamte Seite:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Cache-Control" content="no-cache">
<link rel="stylesheet" href="./jquery.mobile.css" />
<script src="./jquery.js"></script>
<script src="./jquery.mobile.js"></script>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var curPage = 1;
$(function() {
$('body').bind('swiperight', function(e) {
//alert('You swiped right!' + curPage);
if (curPage == 2) {
curPage = 1;
$.mobile.changePage("#page1", "slide", true, true);
}
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
//alert('You swiped left!' + curPage);
if (curPage == 1) {
curPage = 2;
$.mobile.changePage("#page2", "slide", false, true);
}
e.stopImmediatePropagation();
return false;
});
});
</script>
</head>
<f:view>
<body>
<h:form id="content_form" enctype="multipart/form-data">
<div id="page1" data-role="page" >
<h:outputText value="Page 1" />
</div>
<div id="page2" data-role="page" >
<h:outputText value="Page 2" />
</div>
</h:form>
</body>
</f:view>
</html>
das ganze geht natürlich auch problemlos mit ASP.NET-Seiten.
ASP.NET – Swipe events mit jQuery Mobile
Mit Hilfe der Javascript-Library jQuery und jQuery Mobile kann man auf ASP.NET-Seiten Wischbewegungen auswerten. Um die Webseiten ohne iPad zu testen, kann man die Desktop-Version von Safari verwenden.
Zunächst fügt man eine neue WebForm in die ASP.NET-Anwendung ein. Diese sieht dann wie folgt aus:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="bla.aspx.vb" Inherits="WebApplication1.bla" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
im Head-Bereich werden die jQuery-Dateien eingebunden (ich habe die Dateien in das root-Verzeichnis der Webanwendung kopiert):
<link rel="stylesheet" href="./jquery.mobile.css" /> <script src="./jquery.js"></script> <script src="./jquery.mobile.js"></script>
dann kommt der Seiten-Inhalt – dieser wird im body-Bereich der Datei angelegt:
<div id="page1" data-role="page" >
<asp:Button ID="Button1" runat="server" style="z-index: 1" Text="Page 1" />
</div>
<div id="page2" data-role="page" >
<asp:Button ID="Button2" runat="server" style="z-index: 1" Text="Page 2" />
</div>
die beiden div-Elemente bekommen den Zusatz data-role=page. Damit erzeugt HTML5 mehrere Web-Seiten innerhalb einer einzigen aspx-Datei. Der Browser zeigt zunächst nur den Inhalt des ersten DIV-Element (mit Attribute page) an. Jetzt wird noch der Javascript-Code benötigt um auf den Event swipe zu reagieren:
$(function() {
$('body').bind('swiperight', function(e) {
alert('You swiped right!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
alert('You swiped left!');
e.stopImmediatePropagation();
return false;
});
});
Jetzt muss man nur noch die Seite bei einer Wischbewegung wechseln. Dazu muss man prüfen auf welcher Seite man gerade steht und auf die jeweils andere Seite wechseln:
var curPage = 1;
$(function() {
$('body').bind('swiperight', function(e) {
//alert('You swiped right!' + curPage);
if (curPage == 2) {
curPage = 1;
$.mobile.changePage("#page1", "slide", true, true);
}
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
//alert('You swiped left!' + curPage);
if (curPage == 1) {
curPage = 2;
$.mobile.changePage("#page2", "slide", false, true);
}
e.stopImmediatePropagation();
return false;
});
});
hier noch einmal die gesamte Seite:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Swipe.aspx.vb" Inherits="WebApplication1.Swipe" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link rel="stylesheet" href="./jquery.mobile.css" />
<script src="./jquery.js"></script>
<script src="./jquery.mobile.js"></script>
<script type="text/javascript">
var curPage = 1;
$(function() {
$('body').bind('swiperight', function(e) {
alert('You swiped right!' + curPage);
if (curPage == 2) {
curPage = 1;
$.mobile.changePage("#page1", "slide", true, true);
}
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
alert('You swiped left!' + curPage);
if (curPage == 1) {
curPage = 2;
$.mobile.changePage("#page2", "slide", false, true);
}
e.stopImmediatePropagation();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="page1" data-role="page" >
<asp:Button ID="Button1" runat="server" style="z-index: 1" Text="Page 1" />
</div>
<div id="page2" data-role="page" >
<asp:Button ID="Button2" runat="server" style="z-index: 1" Text="Page 2" />
</div>
</form>
</body>
</html>
HTML5 – multiple File upload zu einem JSF-Webservice
Das Paket FileUpload von Apache Commons macht es recht einfach einen „Form-based File Upload in HTML“ zu erstellen. Es wird einfach ein Webservice (siehe einen Webservice in Java erstellen) erstellt und die doPost-Methode implementiert. In dieser werden die Eigenschaften der hochgeladenen Datei ausgelesen und die Datei wird auf dem Server gespeichert:
...
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
...
public void doPost(HttpServletRequest request, HttpServletResponse response)throws IOException {
FileItemFactory factory = newDiskFileItemFactory();
ServletFileUpload upload = newServletFileUpload(factory);
try {
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
String fileName = item.getName();
long sizeInBytes = item.getSize();
String tmpFile = fileName.replace("'", "");
System.out.println("--> " + tmpFile + " / " + sizeInBytes);
File file = newFile("/tmp/" + tmpFile);
item.write(file);
}
} catch (Exception e) {
e.printStackTrace();
}
/*
* Returncode an rufendes Programm
*/
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
out.println("<?xml version=\"1.0\" encoding=\"iso-8859-1\" ?>");
out.println("<return_code>");
out.println("OK");
out.println("</return_code>");
}
die HTML-Bestandteile (ein Label, ein Multifile-Select und ein Button) werden einfach in der JSF-Seite deklariert:
<label for="selectedFiles">Select a File to Upload</label><br /> <input type="file" name="selectedFiles" id="selectedFiles"multiple/> <input type="button" onclick="uploadFiles()" value="Upload" />
beim Klick auf den HTML-Button wird eine JavaScript-Funktion aufgerufen, um die ausgewählten Dateien aus dem Feld selectedFiles zu bearbeiten (geht z.B. ab Firefox 3.6)
function uploadFiles() {
var files = document.getElementById('selectedFiles').files;
for (var i=0, l=files.length; i<l; i++) {
fileUpload(files[i]);
}
}
für jede Datei wird die Funktion fileUpload ausgeführt. In der Funktion wird zunächst der Fileinhalt in die Variable fileDate eingelesen (siehe auch Read local file). Anschließend wird die Datei an den Webservice gesendet (Webservice-Aufruf mit XMLHttpRequest):
function fileUpload(file) {
var fileName = file.name;
var fileSize = file.size;
var boundary = "xxxxxxxxx";
var uri = "<url to webservice>";
var xhr = new XMLHttpRequest();
var fileData;
reader = new FileReader();
reader.onload = function(evt) {
fileData = evt.target.result;
xhr.open("POST", uri, true);
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
xhr.setRequestHeader("Content-Length", fileSize);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
if (xhr.responseText != "") {
alert(xhr.responseText);
}
}
}
}
var body = "--" + boundary + "\r\n";
body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
body += "Content-Type: application/octet-stream\r\n\r\n";
body += fileData + "\r\n";
body += "--" + boundary + "--";
xhr.sendAsBinary(body);
};
reader.readAsBinaryString(file);
return true;
}
HTML5 – read local file
Es soll eine Datei (vom Benutzer per File-Select Dialog) ausgewählt mit JavaScript ausgelesen werden. Hier ist der HTML-Teil des Quellcode:
<label for="selectedFiles">Select a File to Upload</label><br /> <input type="file" name="selectedFiles" id="selectedFiles" multiple/> <input type="button" onclick="readFile()" value="Read" />
mit einem Klick auf den Button wird folgender JavaScript-Code ausgeführt:
function readFile(){
var files = document.getElementById('selectedFiles').files;
var FileData;
reader = new FileReader();
reader.onload = function(evt) {
fileData = evt.target.result;
alert("Data: " + fileData);
};
reader.readAsBinaryString(files[0]);
}
Mit readAsBinaryString wird die erste ausgewählten Datei eingelesen. Sobald die Datei vollständig geladen (onload) ist, wird der Inhalt per alert ausgegeben. (getestet im Firefox 3.6)
HTML5 – Webservice-Aufruf per XMLHttpRequest
Ein einfacher Aufruf eines Webservice per XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.onload = function(e){
alert("OK: " + xhr.responseText);
};
xhr.onerror = function(e){
alert("ERROR: " + e.target.status);
};
xhr.open("GET","http://<url to webservice>", true);
xhr.send(null);
Srccode's Blog 