Going Mobile mit Apache Wicket – Teil 1 – Setup mit Bootstrap

Hallo,

in der folgenden kleinen Artikelserie geht es um einige kleine Tipps und Tricks, um Webanwendungen mit Apache Wicket zu entwickeln, und zwar Responsive. Hierbei gibt es einige Herausforderungen zu meistern.

Was bedeutet Responsive Web / Responsive Design

Um Anwendungen sowohl auf Desktop- als auch auf mobilen Endgeräten nutzbar zu machen gibt es einiges zu beachen.

  • Richtige Skalierung der Anwendung
  • Performance (gerade wichtig für Mobile Endgeräte die im Mobilnetz unterwegs sind)
  • Anzahl der Requests sollte minimiert werden
  • Ladezeiten verkürzen
  • Caching
  • Browser-Inkompatibilitäten (besonders nett bei älteren Android-Devices)
  • Device-Detection (handelt es sich beim aktuellen Kunden um ein Mobile-, oder Tabletdevice oder haben wir einen Desktoprechner)

Fragen die man unbedingt von vorne weg klären sollte

  • Was sind unsere Target-Devices (was nicht gilt ist – ALLE – das ist nicht zu bezahlen), sondern eine valide Antworte wäre IPhone, IPad und Android ab 2.1)
  • Wird eine Variante für alle Devices entwickelt (Responsive!) oder gibt es eine Mobile- und eine Desktopvariante?

Tools der Wahl

Was man um jeden Preis vermeiden sollte ist, das Rad neu zu erfinden, es gibt sehr viele brauchbare Lösungen für viele Probleme, und eins verspreche ich, wer versucht diese selbst zu lösen wird fast garantiert brutal und schnell scheitern.

  • JQuery als Javascript-Basis-Bibliothek (glücklicherweise bereites Bestandteil von Wicket 6)
  • Bootstrap (Bitte, Bitte, Bitte schreiben Sie kein eigenes CSS-Toolkit, sondern verwenden Sie was bereits da ist)
  • Require.js kann verwendet werden, um Abhängigkeiten richtig aufzulösen, ein Teil der Require.js-Funktionalität wird schon durch Wicket und sein Ressourcenmanagement bereitgestellt

Responsive Design auf einen  Blick

Meine Webseite www.effectivetrainings.de ist zwar nicht mit Wicket gemacht sondern Picket (Wicket-PHP Port), aber mit Bootstrap und man sieht sehr schön, was Responsive Design ist und wie es sich anfühlt, wenn man das Browserfenster einfach mal skaliert.

Desktop Medium-Screen Small-Screen
desktop medium small

Die Seite sieht auf allen Browser / Device-Größen zumindest akzeptabel aus.

Fangen wir also an

Zunächst erzeugen wir uns wie immer einen Wicket-Quickstart.

[code lang=”bash”]mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=6.7.0 -DgroupId=de.effectivetrainings -DartifactId=going-mobile -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false[/code]

Wir entscheiden uns natürlich für die Möglichkeit, eine Anwendung für alle Screen-Größen zu entwickeln, um doppelte Arbeit zu sparen und so günstig wie möglich entwickeln zu können.

Als CSS Framework verwenden wir the One-And-Only Bootstrap – für CSS-Laien (wie mich, auch nach Jahren noch…) die erste und beste Wahl.  Wicket bringt hier schon ein kleines Schmankerl mit, denn Bootstrap ist schon an Bord. Um es zu aktivieren deklarieren wir folgende Abhängigkeit in unserer Pom.

 <dependency>
            <groupId>org.apache.wicket</groupId>
            <artifactId>wicket-bootstrap</artifactId>
            <version>0.8</version>
</dependency>

Die Bootstrap-Integration ist keine Zauberei und wäre auch in ein paar Minuten selber geschrieben, aber wie ich ja früher im Artikel bereits erwähnt habe – es gilt um jeden Preis zu vermeiden das Rad neu zu erfinden.

Zunächst aber räumen wir unsere generierte Klasse Homepage ein wenig auf und Löschen alles aus HomePage.html was nicht gebraucht wird, bis das Markup so aussieht.

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
	<head>
    </head>
	<body>

	</body>
</html>

Sehr klar, oder? Zu beachten ist auf jedenfall die DOCTYPE-Deklaration ganz oben im File. Mit diesem DOCTYPE geben wir den Browsern einen Hinweis, dass wir evtl. mit HTML5 in Berührung kommen.

<!DOCTYPE html>

Um die Bootstrap-Integration jetzt zu verwenden machen wir in HomePage.java einfach folgendes.

public class HomePage extends WebPage {
	private static final long serialVersionUID = 1L;

	public HomePage(final PageParameters parameters) {
		super(parameters);
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        super.renderHead(response);
        response.render(JavaScriptHeaderItem.forReference(Bootstrap.responsive()));
    }
}

Wichtig ist in der renderHead()-Methode folgende Zeile.

container.getHeaderResponse().render(JavaScriptHeaderItem.forReference(Bootstrap.responsive()));

Die Seite die uns daraus gerendet wird beinhaltet derzeit zwar noch keinen Inhalt, aber schaut man sich den <head/>-Tag an, sieht man folgendes

&lt;head&gt;
    &lt;script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-ver-1367063998000.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1367063998000.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="./wicket/resource/org.apache.wicket.bootstrap.Bootstrap/css/bootstrap-ver-1368356946000.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="./wicket/resource/org.apache.wicket.bootstrap.Bootstrap/css/bootstrap-responsive-ver-1368356946000.css" /&gt;
&lt;script type="text/javascript" src="./wicket/resource/org.apache.wicket.bootstrap.Bootstrap/js/bootstrap-ver-1368356946000.js"&gt;&lt;/script&gt;
&lt;/head&gt;

Alle notwendigen Bootstrap Ressourcen sind vorhanden und werden gerendert.

Zuletzt definieren wir uns noch ein minimalistisches Basis-Layout, das wir in den folgenden Artikeln weiter ausbauen werden.

Zunächst stellen wir sicher, dass die initiale Skalierung der Seite auf die Breite des Devices angepasst wird. Hierfür wird der Meta-Tag viewPort verwendet. Eine schöne Beschreibung hierzu findet sich in den Links.

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

Zusätzlich bedienen wir uns zunächst einfach mal an einem Standard-Template von Bootstrap und definieren folgendes Basis-Markup in der HomePage.html

&lt;!DOCTYPE html&gt;
&lt;html xmlns:wicket="http://wicket.apache.org"&gt;
	&lt;head&gt;
        &lt;!-- Skalierung auf devices, volle Skalierung auf die Weite --&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;/head&gt;
	&lt;body&gt;
    &lt;div class="container"&gt;

        &lt;div class="masthead"&gt;
            &lt;ul class="nav nav-pills pull-right"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;h3 class="muted"&gt;Going Mobile&lt;/h3&gt;
        &lt;/div&gt;

        &lt;hr&gt;

        &lt;div class="jumbotron"&gt;
            &lt;h1&gt;Jetzt wirds mobil!&lt;/h1&gt;
            &lt;p class="lead"&gt;Responsive Design mit Bootstrap ist so einfach!&lt;/p&gt;
            &lt;a class="btn btn-large btn-success" href="#"&gt;Klick me!&lt;/a&gt;
        &lt;/div&gt;

        &lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;

Das sieht gerendert dann so aus (einmal Desktop und einmal als Mobile-Version mit verkleinertem Browser-Fenster).

Desktop Small-Screen
desktop-version small-screen-version

Bis jetzt wars einfach..

Bis jetzt war alles relativ einfach, oder? Im nächsten Artikel werden wir unsere Anwendung mit einigen kleinen Spielereien aufpeppen und werden ziemlich schnell an unsere Grenzen kommen.

Links

Beschreibung des ViewPort MetaTags

Sourcen auf GitHub

 

 

Effective Trainings & Consulting - Martin Dilger



Hat Ihnen dieser Blog-Eintrag gefallen? Ich stelle in diesem Blog Informationen über Tools, Frameworks und Werkzeuge zur Verfügung, die mich produktiver machen. Vielleicht kann ich auch Ihnen helfen, produktiver zu werden.


Ich unterstütze Sie als freier Mitarbeiter bei der Entwicklung von Software-Projekten, Agiler Arbeit sowie Schulungen / Fortbildungen.


Jeden Tag ein bisschen produktiver - ab heute