Advertisement
  1. Code
  2. Web Development

Die Erstellung von einer Tag-Cloud mit dem Google Web Werkzeugkit

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Vor einiger Zeit las ich ein Tutorial von Dan Wellman, in dem die Schritte beschrieben wurden, die zur Erstellung einer ordentlichen Tag-Cloud erforderlich sind. Dans Beispiel stützte sich weitgehend auf das jQuery-Framework, um Daten anzufordern und die Elemente der Benutzeroberfläche zu erstellen. Ich habe mich entschlossen, sein Tutorial noch einmal zu schreiben, mit den beiden Ausnahmen, GWT anstelle von jQuery zu verwenden und eine andere Methode zur Auswahl von Schriftgrößenvariationen.


Falls Sie nicht wissen, was Tag-Clouds sind und welchen Zweck sie erfüllen, ist eine Tag-Cloud eine Form der Visualisierung des Unterschieds in der Wichtigkeit oder Aktivität einiger
vordefinierte Kategorien basierend darauf, wie groß sie in der Cloud erscheinen.

Tag CloudTag CloudTag Cloud

Wir werden die neueste Version von GWT (derzeit 1.5) verwenden und mit MySQL und
PHP als Back-End arbeiten, um die JSON-Daten anzufordern. Ähnlich wie in Dans Tutorial gehe auch ich davon aus, dass Sie bereits
mit dem Einfügen in eine Datenbank vertraut sind.Der PHP-Code in diesem Artikel beschreibt lediglich,
wie Daten aus der Datenbank abgefragt und das Ergebnis im JSON-Format zurückgesendet werden.Sie
sollten erwarten zu lernen:

  • Wie GWT Daten von einem PHP-Backend anfordern und die Antwort mithilfe von Rückrufen verarbeiten kann
  • Verwendung von PHP zum Zurücksenden von JSON-Daten an den GWT-Client
  • So analysieren Sie JSON-Daten in GWT
  • Erstellen und Platzieren einiger Widgets für die GWT-Benutzeroberfläche
  • So stilisieren Sie GWT-Widgets mithilfe von CSS
  • Wie wählt man eine gute Schriftgrößenvariation für die Tag-Cloud?

Ich habe das Cypal Studio GWT-Plug-In für Eclipse verwendet, um dieses Projekt zu erstellen. Wenn Sie bereits verwenden
Mit dieser Kombination sollten Sie dieses Projekt in Eclipse herunterladen und öffnen können.
Ansonsten ist hier ein Link, um weitere Informationen zu erhalten.

Obwohl der GWT-Debugger JavaScript nicht genau debuggt, ermöglicht die Verwendung von Eclipse mit dem Cypal Studio-Plug-In das Debuggen von GWT-Code in der Eclipse-IDE, was besser ist als bei vielen anderen JavaScript-Debuggern.

Fangen wir an

Standardmäßig erhalten Sie als Teil des Skripts, das ein leeres GWT-Projekt generiert, eine HTML-Datei.
Das sieht mehr oder weniger wie der folgende Code aus. Möglicherweise müssen Sie den Pfad der JavaScript-Datei korrigieren
entsprechend Ihrem Server-Setup.

Unsere Tag Cloud wird in der Mitte des Browsers angezeigt. Da das Ausrichten von Seiten mit CSS in der Mitte im IE nicht ordnungsgemäß funktioniert, fügen wir ein neues DIV-Element hinzu und setzen seine ID auf "Wrapper". Dies ist alles, was wir brauchen, um loszulegen. Wenn wir in diesem Tutorial weiter vorankommen, werden wir dieses Dokument erneut besuchen, um weitere hinzuzufügen, aber jetzt gehen wir weiter.

Anfordern von JSON-Daten

Wir beginnen mit der Änderung der onModuleLoad() -Methode der MainEntryPoint-Klasse.
Dies ist die Methode, mit der GWT mit der Ausführung unseres Codes beginnt. Wir wollen damit beginnen
Anfordern von Daten (Tag-Namen und deren Häufigkeit) vom PHP- und MySQL-Backend.

Wir haben eine neue Methode namens getTagData() definiert, in der der RequestBuilder
type wird instanziiert, um das PHP-Skript wmGetTags im Backend aufzurufen. Beachten Sie, wie
die Methode sendRequest() nimmt einen Rückrufparameter auf, der die Antwort verarbeitet, sobald sie
zurückkommt.

Beim Erstellen eines neuen RequestCallback müssen wir
die Methoden onResponseReceived() implementieren und onError() behandeln jeden Fall. Beachten Sie, wie in der
Bei der Methode onResponseReceived() überprüfen wir den Antwortstatuscode. Das liegt daran,
dass diese Methode während des Lebenszyklus einer Anforderung
Browser, obwohl es möglicherweise nicht vollständig erfüllt ist. Eine Anfrage ist nur dann abgeschlossen, wenn
Der Statuscode 200 entspricht. Wir überprüfen den Statuscode mit dem getStatusCode()
Methode.

Als nächstes erstellen wir ein FlowPanel-Widget und fügen es in den "Wrapper" -DIV ein.
Die GWT-Widget-Bibliothek bietet viele verschiedene Arten von Bedienfeldern für unterschiedliche Zwecke, jedoch
FlowPanel ist eine Art Widget, mit dem mehr als ein untergeordnetes Widget in sich gespeichert werden kann. Dies
Eigenschaft macht es zu einem geeigneten Widget für eine Tag-Cloud. Was wir hier tun, ist ein
Haltecontainer für alle Tags, die wir anzeigen müssen.

Erstellen einer Antwort mit PHP

Dieser Teil ist ziemlich einfach. Erstellen wir ein neues PHP-Skript und nennen es wmGetTags.php.
Zuerst müssen wir mit der Funktion mysql_connect() eine Verbindung zur Datenbank herstellen.
Führen Sie dann eine SELECT-Abfrage für die Tabelle aus, die sowohl Tag-Namen als auch deren Vorkommen enthält.
Wenn die Abfrage abgeschlossen ist, verwenden wir eine "For-Schleife", um eine JSON-formatierte Antwort zu generieren.

Bei der Ausführung generiert das obige Skript eine Antwort ähnlich der unten gezeigten:

Oben sehen Sie ein Beispiel für eine JSON-Antwort. Um genau zu sein, wird dies in ein Array mit analysiert
Jeder seiner vier Indizes enthält ein Objekt mit zwei Feldern. Das erste Feld "Tag" enthält der
Name des Tags, während das zweite Feld "Frequenz" die Anzahl der Vorkommen enthält. Wenn Sie das ausführen, was wir bisher codiert haben, wird eine leere Seite angezeigt. Wenn Sie jedoch die Browserkommunikation über die Registerkarte "Net" in Firebug überprüfen, sollten Sie die Ausgabe des obigen PHP-Skripts wie in der Abbildung unten sehen.

Analysieren von JSON-Daten

An diesem Punkt müssen wir die Routine definieren, die die vom Back-End empfangene Antwort analysiert, und die Benutzeroberfläche weiter konstruieren, um die Tags in der Cloud anzuzeigen. Da die HTTP- und JSON-Typen in separaten GWT-Modulen enthalten sind, müssen wir unserer <module name> .gwt.xml die folgenden <inherits> -Tags hinzufügen, um sicherzustellen, dass der zum Parsen von JSON erforderliche Code zur Laufzeit enthalten ist:

Weitere Informationen zu GWT-Modulen finden Sie hier.

Wir müssen jetzt handleGetTags() aufrufen, wenn der Statuscode der Response gleich 200 ist, wie im obigen Code gezeigt. Die handleGetTags() -Methode verarbeitet die JSON-Daten tatsächlich.

Die gesamte XMLHTTPRequest-Kommunikation zwischen dem Client und dem Back-End erfolgt im Klartext. Obwohl die
Obwohl die Back-End-Antwort JSON-formatiert ist, muss sie noch in real konvertiert/analysiert werden
JavaScript-Objekte, mit denen wir dann interagieren können, wie unten gezeigt.

Die JSONParser-Klasse bietet eine statische Methode namens parse(), die einen String aufnimmt
Parameter und gibt ein JSONValue-Objekt zurück, mit dem wir dann interagieren können. Als wir
unser PHP-Skript gibt eine Array-Struktur zurück, die eine Anzahl von enthält
Objekte, die Daten in Bezug auf die Tags einkapseln. Um ein Handle für dieses Array zu erhalten, müssen wir
die isArray() -Methode verwenden.

Der obige Code greift auf das eingebettete Objekt in jedem Index des Arrays zu, um zu den
tatsächlichen Tag-Daten zu gelangen In jeder Iteration der Schleife wird der Inhalt des aktuellen Index als JSONObject zurückgegeben. Jedes extrahierte JSONObject sollte zwei Felder haben: Tag und Häufigkeit.
Wir verwenden die Methode get() der JSONObject-Klasse, um diese Felder abzurufen.

Als nächstes müssen wir die Tag-Namen in die Cloud-Benutzeroberfläche einfügen. Denken Sie an das FlowPanel, das wir
früher erstellt haben? Wir möchten jetzt Hyperlink-Widgets erstellen und in unser Flow-Panel einfügen
panel - das ist es, was diese beiden Zeilen oben tun. Wenn wir das Projekt ausführen, sollte unsere Tag-Cloud
sieht aus wie das:

Widgets stilisieren

Zu diesem Zeitpunkt haben wir eine Liste von Links - aber noch nichts wie eine Tag-Cloud.
Mit GWT kann der Entwickler genau steuern, wie jedes Widget gerendert wird,
indem der Entwickler sein eigenes CSS bereitstellen kann. Das müssen wir tun, um unserer Tag-Cloud
Facelifting. Kehren wir noch einmal zu unserem HTML zurück.

Die erste obige CSS-Regel setzt die Auffüll- und Randwerte zurück und legt dann die Schriftart für unsere
Tag-Cloud fest. Die letzteren Regeln definieren, wie jedes der Tags so positioniert werden soll, dass sie
erscheinen nacheinander horizontal mit der Linienhöhe, der Polsterung und so weiter.

Nun könnten Sie die Frage stellen: "Aber wie sagen wir GWT, für welche CSS-Klasse sie verwendet werden soll?
Welches Widget? "Nun, das ist einfach. Jedes Widget aus der GWT-UI-Bibliothek bietet eine Methode
setStylePrimaryName() mit dem Namen der gewünschten CSS-Klasse
dem Widget zuweisen. Jetzt müssen wir zurückgehen und die richtigen CSS-Klassen
unsere Widgets zuweisen. Es gibt zwei Stellen, an denen wir dies tun müssen. Das erste ist das FlowPanel, das
die Tags hält .

Der zweite Schritt The second is after adding a hyperlink to the FlowPanel.nach dem Hinzufügen eines Hyperlinks zum FlowPanel.

Wir sollten jetzt etwas haben, das ungefähr so aussieht:

Einstellen der Schriftgröße

Wie Sie sehen können, sind unsere Tags durchgekommen und es sieht eher aus wie eine Tag-Cloud. Als nächstes
muss die Größe jedes Tags so einstellen, dass es entsprechend seiner Anzahl von Vorkommen angezeigt wird.

Die einfachste Implementierung besteht darin, eine lineare Funktion zu verwenden, um die Verwendungshäufigkeit eines
Tags seiner Schriftgröße in der Tag-Cloud zuzuordnen. Der zur Bestimmung der Schriftgröße
verwendete Algorithmus bewertet die Häufigkeit jedes Tags anhand des kleinsten und
des größten Vorkommens und gibt dann eine Schriftgröße im Bereich der kleinsten und größten von uns definierten Schriftgröße
definieren.

Also müssen wir zuerst die Tags mit der kleinsten und größten Anzahl von Frequenzen und finden
Erinnern Sie sich an sie innerhalb der Klassenvariablen minFrequency und maxFrequency. Wir haben auch
identifizierte die kleinste und größte Schriftgröße durch Festlegen von MIN_FONT_SIZE und MAX_FONT_SIZE
endgültige Variablen.

Als nächstes definieren wir eine Methode namens getLabelSize(), die die Häufigkeit für die
aktuelles Tag und gibt die CSS font-size für dieses Tag zurück.

Jetzt müssen wir jedem Hyperlink-Widget, das wir hinzufügen, die CSS-Schriftgröße einzeln
das FlowPanel zuweisen. Dazu müssen wir ein Handle für das Style-Objekt des Hyperlinks erhalten
Element und legen Sie die fontSize-Eigenschaft wie unten gezeigt fest:

Und unsere MainEntryPoint.java-Datei sollte folgendermaßen aussehen:

Zusammenfassung

Dieses Tutorial demonstrierte die einfachen Schritte zum Erstellen einer Tag-Cloud und zeigte,
wie GWT eine Verbindung zu einem PHP- und MySQL-Backend herstellen kann, um Daten abzurufen.
Es wurde auch gezeigt, wie GWT-Widgets erstellt und mithilfe der bekannten CSS-Techniken stilisiert werden. Ich hoffe, dass es Ihnen gefallen hat!

  • Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.