Verwenden Sie HTML-CSS-Javascript, um Ihr eigenes RIA-Grafik-Tutorial Seite 1/2 zu erstellen

Geben Sie RIADemo als Projektnamen ein.

Wählen Sie den auszuführenden Server und den Java ee-Standard aus.

Wählen Sie hier Tomcat5.0, j2ee1.4. Dieser Artikel stellt Beispiele vor und hängt nicht vom Server ab, da HTML, CSS und Javascript selbst statisch sind und nach Abschluss eine HTML-Datei sind. Im engeren Sinne muss ein Webprogramm von einem Server ausgeführt werden, und Netbeans übernimmt dieses Verwaltungskonzept weiterhin.
In diesem Schritt können Sie auf „Fertig stellen“ klicken, um das Projekt zu erstellen. Der nächste Schritt besteht darin, ein Framework auszuwählen. Aus Gründen der Einfachheit und Übersichtlichkeit wird hier kein Framework ausgewählt.
Nachdem das Projekt eingerichtet wurde, sieht die Projektstruktur des Projektarbeitsbereichs wie folgt aus:

Da es statisch ist, müssen Sie auf nichts außerhalb des Webseitenverzeichnisses achten.
Um die Verwaltung zu erleichtern, müssen unter dem Webseitenverzeichnis „inc“ und „images“ zwei neue Verzeichnisse erstellt werden. Dies ist recht einfach und wird hier nicht im Detail beschrieben.
Das erste Beispiel: Warten Sie, bis die Seite angefordert wird. Der Effekt ist wie folgt:

In diesem Beispiel soll ein Vorgang auf der aktuellen Seite ausgeführt, die Seite eingefroren und ein Wartefeld angezeigt werden, bevor der Vorgang verlassen oder die Ergebnisse des Vorgangs zurückgegeben werden. Die Funktion besteht darin, den Benutzer darüber zu informieren, dass die Seite geladen wird. Insbesondere bei bestimmten umfangreichen Datenanfragen kann diese Benutzeroberfläche den Ärger der Kunden durch lange Wartezeiten lindern.
Eine kurze Analyse zeigt, dass dieses Beispiel aus zwei Hauptpunkten besteht.
1. Statische Elemente
2. Wann erscheint das Feld und wann verschwindet es? Die Benutzeroberfläche in diesem Effekt ist ein Ladefeld auf einem abgedunkelten Hintergrund.
Bei statischen Elementen handelt es sich, unabhängig davon, wie sie aussehen, immer um HTML, CSS und JavaScript, mit Ausnahme natürlich eingebetteter Steuerelemente wie Flash. Tatsächlich fallen eingebettete Steuerelemente nicht mehr in den Geltungsbereich statischer Elemente wie HTML.
In diesem Beispiel ist das Feld mit dem Laden eigentlich nur ein Div, das ein Bild mit einem Bildlaufeffekt und gewöhnlichem Text enthält. Das Div wird jedoch mit CSS verschönert und dann mit den Eigenschaften der Webseite kombiniert, um es zu steuern Anzeige der div. und verschwinden.
Wie kann man also einen solchen Effekt erzeugen? Um den gesamten Produktionsprozess vorerst unabhängig von JavaScript zu erklären, erstellen Sie zunächst das Div.
Klicken Sie im Webseitenverzeichnis mit der rechten Maustaste auf Neu -> HTML

Wählen Sie HTML aus und benennen Sie den Dateiindex
Nachdem die Seite erstellt wurde, ist das einzige benötigte Material das Bild „loading.gif“ mit Scrolleffekt. Kopieren Sie das Bild in den Bilderordner.
Erstellen Sie als Nächstes eine neue CSS-Datei, klicken Sie mit der rechten Maustaste auf den Ordner „inc“, wählen Sie „Neu“ -> „Andere“ und wählen Sie „Cascading Style Sheets“ in anderen Verzeichnissen aus, wie in der Abbildung gezeigt:

Benennen Sie den Stil, klicken Sie auf „Fertig stellen“ und generieren Sie die CSS-Datei. Bewegen Sie den Cursor in den Bereich des Root-Stylesheets und dort auch ist ein Effektvorschaufenster, wie unten gezeigt:

Das Generatorfenster auf der rechten Seite des Editors bietet GUI-Einstellungen für viele Attribute und generiert automatisch den entsprechenden Code. Unterhalb des Editors wird eine Vorschau des Stils angezeigt. Im Schriftartenfenster wählt der Autor beispielsweise Kursivschrift aus . Wählen Sie „Fett“, dann „Unterstrichen“ und wählen Sie „#ff0099“ (eine Art Rot) aus. Wenn Sie eine Farbe auswählen, wird eine Farbauswahl angezeigt. Der Vorschaueffekt sieht wie folgt aus.

Der Editor generiert den Code automatisch und die Vorschaubox zeigt den Effekt auch nach der Anwendung sehr gut an.
Es ist zu beachten, dass der vom Tool generierte Code zwar einfach, aber sicherlich nicht so flexibel und leicht zu steuern ist wie Handschrift.
Definieren Sie hier den Stil der Wartebox, die wir benötigen
.Laden
{
border:2px solid #a3bad9;/* Der Stil des Rahmens des angewendeten Stilobjekts*/
color:#003366; /* Die Farbe des Inhalts im angewendeten Stilobjekt*/
padding:10px; /* Der Abstand zwischen dem Inhalt im angewendeten Stilobjekt und dem Stilrahmen (oben, unten, links, rechts) */
margin:0; /* Der Abstand zwischen dem angewendeten Stilobjekt und seinen umgebenden Elementen (oben, unten, links, rechts) */
z-index:2000; /* Der Wert der Z-Koordinate des angewendeten Stilobjekts auf der Webseite*/
width:205px; /* Breite des angewendeten Stilobjekts*/
text-align:center; /* Zentriert den Inhalt im angewendeten Stilobjekt*/
position:absolute; /* Die Position des angewendeten Stilobjekts auf der Seite wird angezeigt */
Schriftstärke: fett; /* Der Stil der Schriftart im angewendeten Stilobjekt*/
Schriftgröße: 13px; /* Die Größe der Schriftart im angewendeten Stilobjekt*/
}
Wenn Leser an der spezifischen Bedeutung jedes Attributs interessiert sind, können sie nach Informationen für ein tieferes Verständnis suchen. Ich werde hier nicht auf Details eingehen.
Fügen Sie nach dem Erstellen des CSS den folgenden Code zur soeben erstellten Datei index.html hinzu, um den CSS-Stil zu importieren.

Treten Sie im Bereich bei

Speichern Sie die Datei, klicken Sie mit der rechten Maustaste auf die Datei index.html und wählen Sie Datei ausführen

Der Browser wird automatisch geöffnet und der Anzeigeeffekt ist wie folgt:

Aufmerksame Leser können feststellen, dass sich die Benutzeroberfläche geringfügig von der am Anfang gezeigten unterscheidet, wenn Sie dem gerade definierten Ladestil den folgenden Code hinzufügen.
background:white url(../images/block-bg.gif) repeat-x; /* Der Hintergrund des angewendeten Stilobjekts und auf horizontale Wiederholung eingestellt*/
Natürlich müssen Sie auch das Hintergrundbild block-bg.gif hinzufügen. Nach dem Hinzufügen des Hintergrundbilds ist der Effekt wie folgt:

An diesem Punkt ist die Benutzeroberfläche fertiggestellt.
Als Nächstes legen Sie fest, wie Sie die Webseite dunkel und nicht anklickbar machen.
Der einfachste Weg, eine Webseite abzudunkeln, besteht darin, die Hintergrundfarbe der Webseite in eine dunkle Farbe zu ändern. Dies ist jedoch offensichtlich bedeutungslos, da nach dem Ändern in eine dunkle Farbe die Elemente auf der Seite weiterhin angeklickt werden können.
Wie kann man also den Hintergrund abdunkeln und das Klicken unmöglich machen?
Analysiert man noch einmal das Prinzip statischer Webseiten, muss die Verdunkelung durch Anpassen der Farbe erreicht werden. Um die Nicht-Klickbarkeit zu erreichen, kann dies durch Ersetzen des angeklickten Objekts erreicht werden, das heißt, auf dem anzuklickenden Objekt wird ein Objekt generiert Dieses Objekt ist transparent. Wenn der Benutzer dann klickt, klickt er tatsächlich auf ein transparentes Objekt, das das zugrunde liegende Objekt blockiert, was dem Benutzer die Illusion vermittelt, dass der Klick ungültig ist, wie unten gezeigt:

Wenn Objekt B transparent ist und sich neben Objekt A befindet und ein Dritter versucht, Objekt A zu kontaktieren und nur auf Objekt B trifft, sind alle Kontakte gegen A ungültig.
An diesem Punkt der Analyse müssen wir ein Div mit diesem Spezialeffekt erstellen. Letztendlich handelt es sich immer noch um eine CSS-Produktion und -Anwendung.
Der dunkle Transparenzeffekt kann über das Filterattribut von CSS erzielt und ein neuer Stil für bgdiv definiert werden
.bgdiv
{
Hintergrund:#ccc; /* Hintergrundfarbe*/
Deckkraft:.3; /* Transparenz*/
filter: alpha(opacity=30); /* filter transparent*/
position:absolute; /* Die Position des angewendeten Stilobjekts auf der Seite wird angezeigt */
z-index:1000; /* Der Wert der Z-Koordinate des angewendeten Stilobjekts auf der Webseite*/
width:500px; /* Breite des angewendeten Stilobjekts*/
height:500px; /*Höhe des angewendeten Stilobjekts*/
top: 0px; /* Der Abstand zwischen dem angewendeten Stilobjekt und dem oberen Rand der Seite*/
left: 0px; /* Der Abstand zwischen dem angewendeten Stilobjekt und dem linken Ende der Seite*/
}

Fügen Sie im Körperbereich Folgendes hinzu:
Führen Sie die Datei aus. Der Effekt ist wie folgt:

Zu diesem Zeitpunkt ist das UI-Design abgeschlossen, aber die Größe des Div, das wir sehen, beträgt 500 * 500, was nicht die gesamte Seite ausfüllt, und das Wartefeld ist nicht zentriert, und der Effekt ist bereits von Anfang an sichtbar Offensichtlich ist dies nicht direkt möglich. Bei der tatsächlichen Verwendung muss der Hintergrund die gesamte Seite ausfüllen, das Wartefeld muss in der Mitte angezeigt werden und wir müssen steuern können, wann der Effekt erscheint und wann er verschwindet.
Dann müssen diese Aufgaben per JavaScript erledigt werden.
JavaScript kann fast alle statischen Elemente auf der Seite steuern, und die oben genannten Effekte werden offiziell durch die Steuerung des Hintergrund-Div und der Wartebox erreicht.
In JavaScript besteht der einfachste Weg, ein Element auf der Seite abzurufen, darin, dem ID-Attribut des Zielobjekts einen Wert zuzuweisen und ihn dann über getElementbyId von JavaScript abzurufen.
Weisen Sie hier zunächst dem ID-Attribut von bgdiv einen Wert zu, z. B.:

Lösen wir zunächst das erste Problem, nämlich die Größe der Ebene so festzulegen, dass sie die gesamte Seite über Javascript ausfüllt.
Funktion showbg()
{
var bgdiv=document.getElementById("bgdiv"); // Holen Sie sich das bgdiv-Objekt
bgdiv.style.width=document.body.clientWidth; // Stellen Sie die Breite des bgdiv-Objekts auf die Breite des sichtbaren Bereichs der Webseite ein
if (document.body.clientHeight>document.body.scrollHeight) // Stellen Sie die Höhe des bgdiv-Objekts auf die Höhe des sichtbaren Bereichs der Webseite ein
bgdiv.style.height=document.body.clientHeight;
anders
bgdiv.style.height=document.body.scrollHeight;
}
Was hier erklärt werden muss, ist, dass sowohl clientWidh als auch scrollWidth die Breite des visuellen Bereichs darstellen. Der Unterschied besteht darin, dass scollWidth größer als clientWidth ist, wenn es Bildlaufleisten auf der Webseite gibt, da scollWidth die Bildlaufleiste in ?? einschließt. ??????? Teil, während clientWidth dies nicht tut, nur der sichtbare Teil.
In der obigen Funktion wird clientWidth als Breite verwendet, da es gemäß den Grundprinzipien des Webdesigns ziemlich unfreundlich ist, eine Webseite zu entwerfen, die eine horizontale Bildlaufleiste enthält, da die Maus nur nach oben und unten scrollen kann, aber nicht nach links nach rechts, daher bedeutet hier die direkte Verwendung von clientWidth, sicherzustellen, dass im gesamten Projekt keine horizontale Bildlaufleiste angezeigt wird.
Die folgende Höheneinstellung berücksichtigt die Kompatibilität mit und ohne vertikale Bildlaufleisten.
Die obige Funktion kann sicherstellen, dass das aufgerufene bgdiv den gesamten Bildschirm ausfüllen kann.

Erstellen Sie im Ordner „inc“ eine neue Javascript-Datei, kopieren Sie die obige Funktion hinein und fügen Sie der Seite den folgenden Code hinzu, um die Funktion einzuführen

Um die Anzeige zu erleichtern, fügen Sie onload="showbg();" in das Body-Tag ein. Nach dem Laden der Seite können Sie sehen, dass das angepasste bgdiv die gesamte Seite ausgefüllt hat.
Das Prinzip der Anpassung der Anzeigeposition der Wartebox ist ähnlich. Die Funktion ist:
Funktion showwait()
{
showbg(); // bgdiv anzeigen
var Loading=document.getElementById("loaddiv");//Ladeobjekt abrufen
Loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//Legen Sie den Ladeabstand von oben fest
Loading.style.left=document.body.clientWidth/2-110;//Legen Sie den Abstand zwischen dem Laden und dem linken Ende fest
}
Rufen Sie showwait im Onload-Ereignis auf, um die Wartebox auf einem dunklen, transparenten Hintergrund anzuzeigen.

Hervorzuheben ist hier das Positionsattribut des CSS-Attributs. Dieses Attribut muss auf „absolut“ gesetzt werden, damit der obige Code wirksam ist, da die Position des obigen Codes entsprechend der absoluten Position festgelegt wird.

Der obige Effekt wird angezeigt, sobald die Seite geöffnet wird. Wenn Sie steuern möchten, ob er angezeigt wird, müssen Sie das CSS-Attribut display verwenden. Wenn der Wert block ist, wird er angezeigt wird nicht angezeigt.

Wir haben display:none zu den oben genannten CSS-Attributen hinzugefügt; dann wird der Effekt nicht angezeigt, wenn die Seite geöffnet wird.

Fügen Sie dann bgdiv.style.display="block" in die Funktion showbg ein.

Fügen Sie „loading.style.display="none" zur showwait-Funktion hinzu;

Fügen Sie dem Hauptteil der Seite eine Anzeige hinzu und führen Sie die Seite aus. Nach dem Klicken auf den Anzeigelink wird der benötigte Effekt angezeigt, wie in der Abbildung gezeigt.

Die auftretenden Effekte verschwinden nicht. In meiner täglichen Studienarbeit entdeckte der Autor auch ein Phänomen, wenn der Server die Verarbeitung noch nicht abgeschlossen und die Seite nicht an den Client zurückgegeben hat Die Seite selbst wird nicht geändert, und die sogenannte langsame Netzwerkgeschwindigkeit spiegelt dies nicht wider. Wenn der Server die Verarbeitung abschließt, wird die Seite mit der Änderung versehen. Wenn dann das Showwait-Ereignis ausgelöst wird, wenn auf den Link geklickt wird, tritt der Effekt auf, bis der Server die Verarbeitung der Anfrage abgeschlossen hat und die Seite umgeleitet wird und verschwindet.

Wenn wir beispielsweise den angezeigten Code in „Anzeige“ ändern, dann die Seite ausführen und dann auf „Anzeigen“ klicken, können wir sehen, dass das Wartefeld angezeigt wird. Wenn die Seite verschwindet, wird die Homepage von Sun angezeigt.
Schauen wir zurück. Tatsächlich gibt es an diesem Beispiel nichts Besonderes. Nur wenn Sie mit diesen drei statischen Elementen vertraut sind, können Sie es gut verstehen. Und hier gibt es auch bestimmte Anforderungen an Künstler. Es ist zu beachten, dass die Bildlaufbilder und Hintergrundbilder nicht vom Autor erstellt wurden. Es handelt sich auch um Bilder des ext-Frames ext.
Erwähnenswert ist, dass der Editor von Netbeans 6.1 über umfangreiche Prompt-Unterstützung für JavaScript verfügt, nicht nur über Schlüsselwortunterstützung, sondern auch über Prompts für kompatible Browser und sogar einige einfache Beispiele.

In diesem Artikel wird viel Raum für die Erläuterung eines unkomplizierten Beispiels verwendet. Der Zweck besteht darin, den Lesern eine detaillierte Analyse darüber zu geben, wie sie ihre eigene RIA durch detaillierte Denk- und Entwicklungsprozesse entwickeln können.

Es ist ersichtlich, dass für die Erstellung dieser Art von RIA zwar noch eine gewisse künstlerische Grundlage und Seitendesignfähigkeiten erforderlich sind, die grundlegenden Produktionsschritte jedoch lediglich die folgenden zwei Schritte sind:

1. Erstellen Sie Ihre eigene Benutzeroberfläche mit HTML und CSS.

2. Studieren Sie sorgfältig den Verhaltensmodus der Seite und schreiben Sie Javascript, um die Benutzeroberfläche zu steuern.

Im nächsten Artikel stellt Ihnen der Autor ein komplexeres und umfassenderes Beispiel vor, einschließlich Popup-Dialogfeldern, Popup-Menüs, Spezialeffektebenen und Ziehfenstern.