HTML UI

Script-Quicky: Begrüßungen via HTML UI

~ IgelchenM ~ Hinterlasse einen Kommentar

Immer wieder kristallisierte sich bei den Entwicklerrunden und Gesprächen mit Neulingen bei der User App Entwicklung ein großes Problem. Scheinbar ist es sehr schwer zu verstehen, wie man ein HTML-UI so nutzt, damit im HTML-UI eine Aktion stattfindet und darauf der Server eine Reaktion zeigt.

Lest den heutigen Blogbeitrag durch, um zu erfahren wie ihr so etwas realisieren könnt.
Weiterlesen →

Script-Quicky: HTML-Template für das HTML-UI

~ IgelchenM ~ 1 Kommentar

Auf den letzten Entwicklerrunden wurde immer wieder ein Wunsch geäußert, dass man gerne ein Template für ein HTML-UI haben möchte. Damit dieser Wunsch nicht unbeachtet bleibt, erfolgt heute ein kleiner „Script-Quicky“ in dem ich euch eine ganz einfache HTML-Datei als Template zur Verfügung stelle.

Hinweis:
TippDieser „Script-Quicky“ kann als Ergänzung zu diesem Blogbeitrag genutzt werden. In diesem Beispiel berücksichtige ich ein HTML-UI in der Größe von 200px Breite und 400px Höhe. Ihr könnt später natürlich alles so abändern, dass es zu eurem Projekt passt.

 

home.html

<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta charset="utf-8" />

	<title>Anzeigename für PopUps</title>
    
    <script src="/apps/api/knuddels-api.js"></script>
    <!-- 
    Hier laden wir alle Funktionen die für die clientseitige Verarbeitung unserer App notwendig sind.
    -->
    <script>
		Client.includeCSS('style.css');
		Client.includeJS('/apps/api/jquery.min.js', 'func.js');
	</script>
    <!-- 
        Hier laden wir die CSS-Datei für die Ausgestaltung unserer User App (style.css) - Diese muss unbedingt im WWW-Ordner liegen
        Zusätzlich wird neben der von Knuddels zur Verfügung gestellten JQuery-Version auch noch eine eigene JS-Datei eingebunden, mit der wir Javascriptspielereien einbinden können.
    -->
</head>

<body>
    <div class="Wrapper">
        <div class="Header"></div>
        <div class="Content"></div>
        <div class="Footer"></div>
    </div>
    <!-- 
    Ich habe mir angewöhnt meine User App immer in 4 Bereiche einzuteilen, die ich dann via CSS ausgestalten kann.
    Der Wrapper ist quasi der "Schaukasten" in dem mein angezeigter Content liegt.
    Im Header wird später z.B. das Logo eingefügt, im Footer wäre Platz für ein Copyright oder Versionshinweise und im Content-Bereich logischerweise der Content der App.
    
    -->
</body>
</html>

style.css

.Wrapper {
    /* CSS-Inhalt für den Wrapper-Bereich */
    position:   absolute;
    top:        0px;
    left:       0px;
    background: #000;
    width:      200px;
    height:     400px;
    display:    block;
}
.Header {
    /* CSS-Inhalt für den Header-Bereich */
    position:   absolute;
    top:        0px;
    left:       0px;
    height:     50px;
    width:      200px;
    display:    block;
    background: red;
}
.Content {
    /* CSS-Inhalt für den Content-Bereich */
    position:   absolute;
    top:        50px;
    left:       0px;
    width:      200px;
    height:     325px;
    background: #fff;
    color:      #000;
    display:    block;
}
.Footer {
    /* CSS-Inhalt für den Footer-Bereich */
    position:   absolute;
    bottom:     0px;
    left:       0px;
    width:      200px;
    height:     25px;
    font-size:  10px;
    color:      #fff;
    background: red;
    line-height:25px;
    font-size:  10px;
}

func.js

$(function(){
    alert('Deine User App ist bereit für Neues!');
});

 

DownloadAlle Dateien dieses Blogbeitrages kannst du auf GitHub downloaden.