Wir haben eine Feder-MVC-basierte Webanwendung. Jetzt müssen wir diese Anwendung so ändern, dass sie auf den Smartphones richtig dargestellt wird.
Dafür werden wir separate JSPs für die Smartphones erstellen. Wenn also die Anfrage vom Browser kommt, werden wir prüfen, ob die Anfrage vom Desktop kommt, dann werden wir es zeigen die normale JSP oder wenn die Anfrage von Mobile kommt dann zeigen wir JSP's für Smartphones.
Wir werden dafür feder mobil sein.
In einigen Fällen werden wir auch die Daten auf den Smartphones einschränken wollen. Möglicherweise zeigen wir nicht alle Daten in den JSPs.
z.B. Möglicherweise müssen wir nur wenige Elemente im Menü anzeigen. Die Desktop-Webanwendung zeigt das vollständige Menü an, während Smartphones weniger Menüelemente anzeigen. Obwohl wir eine andere JSP für das Desktop-Menü und das mobile Menü haben, stammen die Menüelemente aus der Datenbank.
Gibt es ein Entwurfsmuster, das uns dabei helfen wird? Wir wollen diese nicht sonst Bedingungen schreiben, um nach Gerätetyp zu überprüfen.
Wenn Sie das Menüproblem aus der Sicht der Benutzeroberfläche sehen, können Sie das Abstract Factory Designmuster verwenden. Im Allgemeinen haben Sie eine gemeinsame Schnittstelle, die Menüs erzeugt:
%Vor%und zwei Implementierungen:
%Vor%Schreiben Sie dann eine Methode, die den entsprechenden Client-Typ für die angegebene Factory erstellt:
%Vor% und verwenden Sie MenuFactory in Ihren Controllern und JSPs, ohne sich darum zu kümmern, welche Variante es ist. Dies sind die einzigen if-Anweisungen in der Hilfedatei createMenuFactory() .
Wenn Sie andererseits das Problem aus Sicht der Daten sehen, wird das Strategie-Pattern auf die Service-Ebene angewendet wäre angemessen. aber der code code würde dem oben genannten sehr ähnlich sein, wenn *Factory in *Service umbenannt würde und Implementierungen eher Strategien als Fabriken genannt werden.
Sehen Sie sich das Sitemesh-Framework an, ein leichtgewichtiges und flexibles Java-Webanwendungs-Framework, das anwendbar ist das Gang of Four Decorator-Muster, um eine saubere Trennung des Inhalts von der Präsentation zu ermöglichen .
Unten sehen Sie ein Beispiel, das Ihnen zeigt, wie Sie es verwenden können.
pom.xml
%Vor%WEB-INF / web.xml
%Vor%WEB-INF / sitemesh.xml
%Vor%WEB-INF / site-mesh-decorators.xml
%Vor%WEB-INF / sitemesh / mobile.jsp
%Vor%WEB-INF / Sitemesh / tablet.jsp
%Vor%WEB-INF / sitemesh / desktop.jsp
%Vor%HomeController.java
%Vor%WEB-INF / Ansichten / mobil / home / index.jsp
%Vor%WEB-INF / Ansichten / tablet / home / index.jsp
%Vor%WEB-INF / Ansichten / desktop / home / index.jsp
%Vor%Die meisten anderen vorgeschlagenen Lösungen sind überentwickelt, befolgen Sie das Prinzip "Keep It Simple".
Generieren Sie eine standardisierte Abstraktion einer Seite in XML mithilfe von JSP, die je nach Clientgerätetyp ein geeignetes anderes Stylesheet für die Aufnahme auswählt. Dies hält eine gute Trennung von Inhalt und Präsentation aufrecht, ohne sich an ein bestimmtes Gerät zu binden.
Wenn Sie Spring 3 MVC verwenden und sich an das normale Muster erinnern, dass eine Controller-Methode eine Ansicht zurückgibt, dann wäre der einfachste und korrekteste Weg, eine separate Methode zu haben, mit den mobilen Geräten zu arbeiten ODER zu haben die gleiche Methode, aber eine andere Ansicht (über Ihren View Resolver) zurückgeben.
Zum Beispiel könnte meine Methode so etwas wie Folgendes tun:
%Vor%Sie können sich sogar etwas einfallen lassen und die Namen anhand eines vordefinierten Musters dynamisch erstellen, wie iPhones "form_iphone" und Chrome "form_chrome" erhalten.
Mit der Absicht, Ihre Unterstützung auf jede Art von Gerät auszuweiten, würde ich eine Art von Unterstützung erstellen, um dies zu unterstützen. Ich kann einen einfachen Ansatz denken, aber ich nehme viel an (Ihr Menü wird basierend auf Benutzererlaubnis durch Beispiel gerendert ...).
Ändern Sie die Berechtigungen des Benutzers basierend auf seinem aktuellen Gerät (Desktopbenutzer können alles sehen, mobile Benutzer haben weniger Berechtigungen und können daher einige itens im Menü nicht sehen). Sie können sich beim Benutzer anmelden und seine Berechtigung basierend auf dem Gerät bearbeiten.
Dies könnte durch Hinzufügen einer Spalte in Ihrer Menütabelle oder durch Erstellen eines Prozessors erstellt werden, um Menüelemente zu entfernen, die für einige Geräte nicht gerendert werden können.
Denken Sie daran, dass Smartphones in verschiedenen Größen erhältlich sind, dh zwei Ansichten reichen nicht aus. Sehen Sie sich HTML5 an. Sie benötigen möglicherweise nicht einmal zwei Ansichten. Habe eine responsive Webseite. Eine reagierende Seite passt sich automatisch an kleine und große Formfaktoren an. zB: Ссылка . Versuchen Sie, die Seiten im obigen Link zu vergrößern. Sie könnten ein Menü haben, das sich auf kleineren Bildschirmen komprimiert (oder einige Elemente entfernt). Wenn Touch in Ihrer Anwendung wichtig ist, schauen Sie sich Java-Script-Frameworks an, die sich berühren. Siehe auch Ссылка
Wenn Ihr Hauptziel darin besteht, Unterstützung für das mobile Web hinzuzufügen, wäre eine Alternative, die ich in Betracht ziehen würde, nur eine Version Ihrer Website zu haben, die reaktionsfähig ist.
Sie können dies mit vielen CSS-Frameworks erreichen, einer der beliebtesten ist Twitter's Bootstrap .
Bei diesem Ansatz wird die Größe des Bildschirms bei einer kleineren oder größeren Bildschirmgröße entsprechend angepasst. Sie können ein flüssiges Layout mit diesem Beispiel ausprobieren: Bootstrap-Flüssigkeit .
Auf diese Weise ändert Ihre Web-App ihr Layout und ihren Inhalt (einschließlich der Menüs und Bilder) so dass es auf mehreren Bildschirmgrößen verwendbar ist.
Tags und Links java design-patterns spring-mvc spring-mobile