2009-02-05 7 views
11

Gibt es eine Standardmethode, um meine Anwendungen skinfähig zu machen?Wie mache ich meine Anwendungen "skinfähig"?

Mit "skinnable" meine ich die Fähigkeit der Anwendung, mehrere Skins zu unterstützen.

Ich ziele hier keine bestimmte Plattform ab. Ich möchte nur wissen, ob es allgemeine Richtlinien gibt, um Anwendungen skinbar zu machen.

Es sieht so aus, als ob das Enthäuten von Webanwendungen relativ einfach ist. Was ist mit Desktop-Anwendungen?

Antwort

8

Skins sind nur noch eine weitere Ebene der Abstraktion (YALOA!).

Wenn Sie auf der MVC design pattern nachlesen dann werden Sie viele der Grundsätze erforderlich verstehen.

Die Präsentationsschicht (oder die Haut) nur ein paar Dinge zu tun hat:

  • die Schnittstelle anzeigen
  • Wenn bestimmte Maßnahmen ergriffen werden (Klick, die Eingabe von Text in einer Box, etc), dann löst es Aktionen
  • es hat Hinweise aus dem Modell und Controller zu empfangen, wenn es

In einem normalen Programm ändern muss diese Abstraktion, indem Code ausgeführt wird, die die Textfelder einer Verbindung zu die Methoden und Objekte, auf die sie bezogen sind, und Code, der die Anzeige basierend auf den Programmbefehlen ändert.

Wenn Sie hinzufügen möchten Enthäuten Sie diese Fähigkeit zu nehmen und machen es so, dass wieder ohne Kompilieren des Codes erfolgen.

Schauen Sie sich zum Beispiel XUL an und sehen Sie, wie es dort gemacht wird. Sie werden feststellen, dass viele Skinning-Projekte XML verwenden, um die verschiedenen "Gesichter" der Skin zu beschreiben (es spielt Musik oder organisiert die Bibliothek für eine MP3-Player-Skin) und dann wo sich jedes Steuerelement befindet und welche Daten und Methoden es hat sollte im Programm angehängt werden.

Es kann hart scheinen, bis Sie es tun, dann erkennen Sie, es ist wie jede andere Abstraktionsebene, die Sie schon einmal behandelt haben (aus einem Programm mit gotos, Strukturen, Funktionen, Strukturen, Klassen und Objekte, JIT-Compiler usw.).

Die anfängliche Lernkurve ist nicht trivial, aber ein paar Projekte tun, und Sie werden es ist nicht schwer zu finden.

-Adam

5

Halten Sie alle Ihre Arten in einer separaten CSS-Datei (en)

von jedem Inline-Styling Bleiben Sie weg

+2

Kurz gesagt:) / – xan

1

Das Grundprinzip besteht darin, dass durch CSS in Webseiten verwendet.

Anstatt die Formatierung (Farbe/Schriftart/Layout [bis zu einem gewissen Grad]) Ihres Inhalts festzulegen, beschreiben Sie einfach, um was für einen Inhalt es sich handelt.

Um ein Web-Beispiel in dem Inhalt für eine Blog-Seite geben könnten Sie verschiedene Abschnitte als ein markieren:

  1. Titel
  2. Blog-Eintrag
  3. Archiv Pane

etc .

Der Eintrag kann aus mehreren Unterabschnitten wie "Überschrift", "Körper" und "Zeitstempel" bestehen.

An anderer Stelle haben Sie ein Stylesheet, das alle Eigenschaften für jede Art von Element, Größe, Ausrichtung, Farbe, Hintergrund, Schriftart usw. angibt. Beim Rendern der Seite oder beim Zeichnen/Initialisieren der Komponenten in Ihrer Benutzeroberfläche konsultieren Sie immer die aktuelles Stylesheet zum Nachschlagen dieser Eigenschaften.

Dann wird das Enthäuten und in der Tat das Bearbeiten Ihres Entwurfs VIEL einfacher. Sie erstellen einfach ein anderes Stylesheet und passen die Werte an den Inhalt Ihres Heats an.

Edit:

Ein wichtiger Punkt ist die Unterscheidung zwischen einem allgemeinen Stil (wie Klassen in CSS) zu erinnern und einem bestimmten Stil (wie IDs in CSS). Sie möchten bestimmte Elemente in Ihrem Layout eindeutig identifizieren können, z. B. die Überschrift, als ein einzelnes identifizierbares Element, auf das Sie einen eindeutigen Stil anwenden können, während andere Elemente (z. B. ein Eintrag in einem Blog oder ein Feld in eine Datenbankansicht) möchten alle denselben Stil haben.

3

Es hängt wirklich davon ab, wie „skinnable“ Sie möchten, dass Ihre Apps zu sein. Es wird viel einfacher sein, Farben und Bilder zu konfigurieren, als Komponenten zu verstecken oder zu entfernen oder sogar eigene Komponenten zu schreiben.

In den meisten Fällen können Sie wahrscheinlich mit dem Schreiben einer Art von Ressourcenanbieter beginnen, der Farben und Bilder bereitstellt, anstatt sie in Ihrer Quelldatei fest zu codieren.Also, das:

Color backgroundColor = Color.BLUE; 

etwas werden möchte:

Color backgroundColor = ResourceManager.getColor("form.background"); 

Dann alles, was Sie tun müssen, ist die Zuordnungen in Ihrer Resourcemanager-Klasse ändern und alle Clients im Einklang stehen. Wenn Sie dies in Echtzeit tun möchten, wird das Ändern einer der Zuordnungen des ResourceManagers wahrscheinlich ein Ereignis an seine Clients senden und diese darüber informieren, dass sich etwas geändert hat. Dann können die Clients ihre Komponenten neu zeichnen, wenn sie möchten.

0

Je nachdem, wie tief wollten Sie graben, können Sie entscheiden, einen ‚Formatierung‘ Framework verwenden (zum Beispiel Java PLAF, der Web CSS), oder eine völlig mehr Tier-Architektur entkoppelt.

Wenn Sie eine steckbare Haut definieren wollen, müssen Sie das von Anfang an berücksichtigen. Die Präsentationsschicht kennt nichts über die Geschäftslogik, aber es ist API und umgekehrt.

3

Implementierung variiert je nach Plattform, aber hier ist ein paar allgemeinen Cross-Plattform-Überlegungen:

  • Es ist gut, ein etabliertes Gesamt-Layout, in die visuellen Elemente haben können „gesteckt werden. " Es ist schwieriger (aber immer noch möglich), völlig unterschiedliche allgemeine Layouts durch Skinning zu unterstützen.
  • Entwickeln Sie eine gut dokumentierte Benennungskonvention für die Assets (Bilder, HTML-Fragmente usw.), die eine Skin enthalten.
  • Entwerfen Sie eine saubere Möglichkeit, vorhandene Skins zu "entdecken" und neue hinzuzufügen. Zum Beispiel: Winamp verwendet ein ZIP-Dateiformat, um alle Bilder für seine Skins zu speichern. Alle Skin-Dateien befinden sich in einem bekannten Ordner außerhalb des Anwendungsordners.
  • Achten Sie auf Skalierungsprobleme. Nicht jeder verwendet dieselbe Bildschirmauflösung.
  • Werden Sie Hautentwicklung von Drittanbietern zulassen? Dies beeinflusst Ihr Design.
  • Architektonisch eignet sich das Model-View-Controller-Muster zum Enthäuten.

Dies sind nur ein paar Dinge, auf die Sie achten sollten. Ihre Implementierung variiert zwischen Web- und Fat-Client und Ihren Anforderungen an die Funktionen. HTH.

1

Dies sollte diese Schritten relativ einfach, folgt sein:

  1. Streifen aus allen Styling für Ihre gesamte Web-Anwendung oder Website
  2. Verwenden CSS die Möglichkeit, Ihre App schaut zu ändern.

Für weitere Informationen besuchen Sie css zen garden für Ideen.

0

Es scheint, dass die meisten Leute hier auf CSS verweisen, als wäre es die einzige Option zum Enthäuten. Windows Media Player (und Winamp, AFAIR) verwenden XML sowie Bilder (falls erforderlich), um eine Skin zu definieren.

Das XML verweist auf Hooks, Ereignisse usw. und behandelt, wie die Dinge aussehen und reagieren. Ich bin mir nicht sicher, wie sie mit dem Backend umgehen, aber das Laden einer bestimmten Skin ist wirklich so einfach wie das Finden der entsprechenden XML-Datei, das Laden der Bilder und das Platzieren der Bilder dort, wo sie hingehen müssen.

XML gibt Ihnen auch viel mehr Kontrolle darüber, was Sie tun können (z. B. neue Komponenten erstellen, Komponentengrößen ändern usw.).

XML kombiniert mit CSS kann wunderbare Ergebnisse für eine Skinning-Engine einer Desktop- oder Webanwendung liefern.

1

Sie sollten nicht. Oder zumindest sollten Sie sich fragen, ob es wirklich die richtige Entscheidung ist.

Skinning bricht die UI-Designrichtlinien. Es "knallt" den Benutzer ein, weil Ihre gehäutete App funktioniert und völlig anders aussieht als alle anderen Apps, die sie benutzen. Dinge wie Befehlstasten sind nicht konsistent und verlieren an Produktivität. Es wird weniger behindertengerecht sein, weil Screenreader es schwerer haben werden, es zu verstehen.

Es gibt eine Menge Gründe, nicht zu Haut. Wenn Sie Ihre Anwendung nur visuell unterscheidbar machen wollen, ist das meiner Meinung nach ein schlechter Grund. Sie werden Ihre App schwerer zu benutzen machen und es ist weniger wahrscheinlich, dass die Leute jemals über den Testzeitraum hinausgehen werden. im Grunde zu erwarten ist, wie Media Player und imersive Vollbild-Spiele

Having said, dass alle, gibt es einige Klassen von Anwendungen, wo Häutung. Aber wenn Ihre App nicht in einer Klasse ist, in der das Enthäuten weitgehend vorgeschrieben ist, würde ich ernsthaft darüber nachdenken, andere Wege zu finden, um Ihre App besser zu machen als Ihre Konkurrenz.