|
09.03.2010
Image
Moderne Oberflächen bestechen vor allem durch grafische Elemente wie Icons, Texturen, Hintergrundgrafiken und Buttons. Dabei handelt es sich um ganz gewöhnliche Bilddateien. Standardmäßig unterstützt XDEV 2 die Bildformate JPG, GIF und PNG. Andere von Java unterstützte Bildformate können darüber hinaus manuell eingebunden werden. Auf der Arbeitsfläche lässt sich die Bild-Komponente völlig frei positionieren, skalieren oder mit Hilfe von Layout-Managern layouten. Mit gedrückter Shift Taste können Sie Bilder auch proportional skalieren.
Unterstützte Bildformate:
Bildformat
|
Eigenschaften
|
GIF
|
Ein GIF-Bild kann max. 256 Farben enthalten. Davon kann 1 Farbwert transparent, sprich durchsichtig sein. Bei digitalisierten Fotos ist beim GIF-Format ein massiver Qualitätsverlust feststellbar. GIF eignet sich besonders für Bilder mit wenigen Farben, z.B. für Icons, Logos, Zeichnungen, Cartoons und Schwarz-Weiß-Bilder. Eingeführt wurde das GIF-Format im Jahr 1987.
|
JPG
|
Das JPG-Format wurde von der Joint Photographic Experts Group entwickelt. Ein JPG-Bild kann über 16,7 Mio. verschiedene Farbwerte enthalten. Im Gegensatz zum GIF-Format lassen sich JPG-Bilddateien zudem komprimieren. Dadurch eignen sich JPG-Bilder besonders für Web-Anwendungen und schnelle Benutzeroberflächen. Das Nachfolgeformat ist JPEG-2000, welches eine verbesserte Kompression bietet.
|
PNG
|
PNG wurde dazu entwickelt, um das GIF-Format im Web abzulösen. Im Gegensatz zum JPG-Format komprimiert PNG die Daten verlustfrei.
|
Hinweis: Alle Bilder müssen grundsätzlich als RGB vorliegen. CMYK- und HSB-Bilder werden nicht unterstützt. Beim Abspeichern des Projekts werden nur die im Projekt verwendeten Bilder gespeichert.
|
» Weitere Formate einbinden «
Mit Hilfe der Java Advanced Imaging (JAI) API können Sie weitere Bildformate in XDEV 2 einbinden. Die API unterstützt u.a. die Formate BMP, TIFF und PNM.
» Bilder einfügen «
Der Umgang mit Bilder ist in XDEV 2 sehr einfach, denn dafür bietet Ihnen die Umgebung einen Bilderkatalog, mit Sie Ihre Bilder bequem per Drag&Drop in die Arbeitsfläche ziehen können. Der Bilderkatalog wird mit Bildern eines bereits existierenden Verzeichnisses auf der Festplatte geladen, oder Sie legen direkt im Bilderkatalog einen neuen Ordner an, den Sie dann mit ausgesuchten Bildern individuell füllen können. Um Speicherplatz zu sparen, werden dabei nur die Pfade zu den jeweiligen Bild-Dateien gespeichert. Den Bilderkatalog können Sie über das Menü Ansicht, Werkzeugregister, Bilder aufrufen. Genauso komfortabel können Sie Ihre Bilder jedoch auch direkt aus Ihrem Datei-Manager per Drag&Drop in XDEV 2 einfügen. Dies funktioniert auch mit vielen anderen Programmen, welche den freien Bild-Export über die Zwischenablage unterstützen.
» Das Image-Objekt «
Die Bild-Komponente setzt sich aus einem Bild-Container und dem eigentlichen Bild zusammen. Beim Einfügen einer Bild-Komponente auf die Benutzeroberfläche wird jedoch lediglich der leere Bild-Container dargestellt, während das Bild selbst erst während der Laufzeit dynamisch über einen Dateipfad geladen wird. Das Prinzip ist ähnlich wie bei vielen Grafik- und DTP-Programmen.
Mit Hilfe spezieller Methoden lässt sich die Bild-Datei aus dem Bild-Container auslesen, einer Variable zuweisen und so als Bild-Objekt im Speicher weiterverarbeiten, z.B. um ein Bild zu kopieren, abzuspeichern oder per Drag&Drop zu verschieben.
Die wichtigsten Image-Methoden:
Funktion
|
Image Methoden
|
Bild-Objekt erzeugen
|
Fügen Sie ein Bild auf die Arbeitsfläche ein, wechseln Sie in den Code-Editor und klicken Sie das Bild an, um alle Methoden in der Bibliothek anzuzeigen. Definieren Sie eine Variable vom Typ  XdevImage | XDEV NLS: XdevBild mit dem Namen bildObjekt und weisen Sie dieser die Methode getImage( ) | XDEV NLS: holeBild ( ) zu, mit der das Bild-Objekt ausgelesen und in der Variable bildObjekt gespeichert wird.
1
|
XdevImage bildObjekt = Bild.getImage();
|
|
1
|
XdevImage bildObjekt = Bild.getImage()
|
|
1
|
XdevBild bildObjekt = Bild\holeBild()
|
|
Über die Variable lässt sich das Bild-Objekt nun genauso einfach wie eine gewöhnliche Variable weiterverarbeiten, z.B. einer anderen Variable vom Typ XdevImage | XDEV NLS: XdevBild zuweisen
|
Bild zuweisen
|
Weist der Bild-Komponente eine neues Image-Objekt zu. Wenn das Image-Objekt null | XDEV NLS: NULL_WERT ist, dann wird ein bereits bestehendes Image-Objekt entfernt. Mit dem Parameter true | XDEV NLS: WAHR legen Sie fest, dass sich die Bild-Komponente an die Größe des Image-Objekts anpassen soll.
1
2
|
XdevImage bildObjekt = Bild.getImage();
Bild2.setImage(bildObjekt, true);
|
|
1
2
|
XdevImage bildObjekt = Bild.getImage()
Bild2.setImage(bildObjekt, true)
|
|
1
2
|
XdevBild bildObjekt = Bild\holeBild()
Bild2\setzeBild( bildObjekt, WAHR )
|
|
|
Bild-Objekt über einen Pfad laden
|
Lädt ein Bild von einem Pfad, der als Zeichenkette angegeben werden muss, und zeigt dieses in der Image-Komponente an. Wenn der Parameter fitSize | XDEV NLS: passeGrößeAn auf true | XDEV NLS: WAHR gesetzt wird, dann wird das Bild in Originalgröße angezeigt, ansonsten in die Image-Komponente gequetscht. Das geladene Image-Objekt kann auch einem Image-Objekt zugewiesen werden.
1
|
Bild.setImage("c:/Bilder/01.jpg", true);
|
|
1
|
Bild.setImage("c:/Bilder/01.jpg", true)
|
|
1
|
Bild\setzeBild("c:/Bilder/01.jpg", WAHR)
|
|
|
Bild-Objekt über Auswahl-Dialog laden
|
Lädt ein Bild-Objekt von einem Handle (Verweis auf eine Datei) und zeigt dieses in der Image-Komponente an. Das Handle muss in binärer Form vorliegen. Wenn der Parameter fitSize | XDEV NLS: passeGrößeAn auf true | XDEV NLS: WAHR gesetzt wird, dann wird das Bild in Originalgröße angezeigt, ansonsten in die Image-Komponente gequetscht.
1
2
3
4
|
Int dateiID = openLocalRead(true);
Bild.loadImageFromHandle(dateiID, true);
close(dateiID);
|
Int dateiID = openLocalRead(true);
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal geöffnet wird. Die Variable ist somit ein Zeiger auf die Datei. Für die Auswahl der Datei wird ein Dialog geöffnet. Mit true wird die Datei binär geöffnet, mit false im ASCII-Modus. Die Methode finden Sie in der Funktionsbibliothek IO.
Bild.loadImageFromHandle(dateiID, true);
Weist der Bild-Komponente das Image-Objekt zu, das von der Datei gestreamt wird. Die Datei wird mit Hilfe der Zeiger-Variable dateiID bestimmt. Mit true wird das Image-Objekt an die Größe der Bild-Komponente angepasst.
close(dateiID);
Schließt den geöffneten Kanal zur Datei.
|
|
1
2
3
4
|
Int dateiID = openLocalRead(true)
Bild.loadImageFromHandle(dateiID, true)
close(dateiID)
|
Int dateiID = openLocalRead(true)
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal geöffnet wird. Die Variable ist somit ein Zeiger auf die Datei. Für die Auswahl der Datei wird ein Dialog geöffnet. Mit true wird die Datei binär geöffnet, mit false im ASCII-Modus. Die Methode finden Sie in der Funktionsbibliothek IO.
Bild.loadImageFromHandle(dateiID, true)
Weist der Bild-Komponente das Image-Objekt zu, das von der Datei gestreamt wird. Die Datei wird mit Hilfe der Zeiger-Variable dateiID bestimmt. Mit true wird das Image-Objekt an die Größe der Bild-Komponente angepasst.
close(dateiID)
Schließt den geöffneten Kanal zur Datei.
|
|
1
2
3
4
|
Ganzzahl dateiID = öffneLokalZumLesen(WAHR)
Bild\ladeBildVonHandle ( dateiID, WAHR )
schließe ( dateiID )
|
Ganzzahl dateiID = öffneLokalZumLesen(WAHR)
Definiert eine Ganzzahl-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal geöffnet wird. Die Variable ist somit ein Zeiger auf die Datei. Für die Auswahl der Datei wird ein Dialog geöffnet. Mit WAHR wird die Datei binär geöffnet, mit FALSE im ASCII-Modus. Die Methode finden Sie in der Funktionsbibliothek Ein&Ausgabe
Bild.ladeBildVonHandle(dateiID, WAHR)
Weist der Bild-Komponente das Image-Objekt zu, das von der Datei gestreamt wird. Die Datei wird mit Hilfe der Zeiger-Variable dateiID bestimmt. Mit WAHR wird das Image-Objekt an die Größe der Bild-Komponente angepasst.
schließe ( dateiID )
Schließt den geöffneten Kanal zur Datei.
|
|
|
Bild speichern
|
Um ein Bild zu speichern, muss zuerst die Verbindung zu einer Datei hergestellt werden, in die die Bilddaten geschrieben werden sollen. Mit Hilfe der Methode openWrite( ) | XDEV NLS: öffneZumSchreiben ( ), die Sie in der Funktionsbibliothek IO | XDEV NLS: Ein&Ausgabe finden, werden die Bilddaten dann in die Datei geschrieben.
Tipp: Mit der Methode openLokalWrite(Boolean binary) | XDEV NLS: öffneLokalZumSchreiben ( Wahrheitswert binär ), kann die Datei mit Hilfe eines Auswahldialogs bestimmt werden.
|
1
2
3
4
5
6
|
Int dateiID = openWrite("c:/Bilder/01.png", false, true);
XdevImage bildObjekt = Bild.getImage();
bildObjekt.writePNG(dateiID);
close(dateiID);
|
Int dateiID = openWrite("c:/Bilder/01.png", false, true);
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal für einen schreibenden Zugriff geöffnet wird. Die Variable ist ein Zeiger auf die Datei. Für den Zugriff auf die Datei muss ein Pfad als Zeichenkette angegeben werden. Der zweite Parameter legt fest, ob die Daten an die Datei angehängt werden sollen. Der dritte Parameter legt fest, ob die Datei binär (true) oder im ASCII-Modus (false) geöffnet werden soll. Die Methode finden Sie in der Funktionsbibliothek IO.
XdevImage bildObjekt = Bild.getImage();
Definiert wird eine Variable vom Typ XdevImage. Dieser wird das Image-Objekt der Komponente Bild zugewiesen.
bildObjekt.writePNG(dateiID);
Die XdevImage Methode speichert das Image-Objekt in die geöffnete PNG-Datei.
close(dateiID);
Schließt den geöffneten Kanal zur Datei.
|
|
1
2
3
4
5
6
|
Int dateiID = openWrite("c:/Bilder/01.png", false, true)
XdevImage bildObjekt = Bild.getImage()
bildObjekt.writePNG(dateiID)
close(dateiID)
|
Int dateiID = openWrite("c:/Bilder/01.png", false, true)
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal für einen schreibenden Zugriff geöffnet wird. Die Variable ist ein Zeiger auf die Datei. Für den Zugriff auf die Datei muss ein Pfad als Zeichenkette angegeben werden. Der zweite Parameter legt fest, ob die Daten an die Datei angehängt werden sollen. Der dritte Parameter legt fest, ob die Datei binär (true) oder im ASCII-Modus (false) geöffnet werden soll. Die Methode finden Sie in der Funktionsbibliothek IO.
XdevImage bildObjekt = Bild.getImage()
Definiert wird eine Variable vom Typ XdevImage. Dieser wird das Image-Objekt der Komponente Bild zugewiesen.
bildObjekt.writePNG(dateiID)
Die XdevImage Methode speichert das Image-Objekt in die geöffnete PNG-Datei.
close(dateiID)
Schließt den geöffneten Kanal zur Datei.
|
|
1
2
3
4
5
6
|
Ganzzahl dateiID = öffneZumSchreiben ("c:/Bilder/01.png", FALSCH, WAHR )
XdevBild bildObjekt = Bild\holeBild ( )
bildObjekt\schreibePNG ( dateiID )
schließe ( dateiID )
|
Ganzzahl dateiID = öffneZumSchreiben ("c:/Bilder/01.png", FALSCH, WAHR )
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal für einen schreibenden Zugriff geöffnet wird. Die Variable ist ein Zeiger auf die Datei. Für den Zugriff auf die Datei muss ein Pfad als Zeichenkette angegeben werden. Der zweite Parameter legt fest, ob die Daten an die Datei angehängt werden sollen. Der dritte Parameter legt fest, ob die Datei binär (WAHR) oder im ASCII-Modus (FALSCH) geöffnet werden soll. Die Methode finden Sie in der Funktionsbibliothek Ein&Ausgabe.
XdevBild bildObjekt = Bild\holeBild ( )
Definiert wird eine Variable vom Typ XdevImage. Dieser wird das Image-Objekt der Komponente Bild zugewiesen.
bildObjekt\schreibePNG ( dateiID )
Die XdevImage Methode speichert das Image-Objekt in die geöffnete PNG-Datei.
schließe ( dateiID )
Schließt den geöffneten Kanal zur Datei.
|
|
|
Bild-Dateien kopieren
|
1
2
3
4
5
6
7
8
|
Int quellDatei = openLocalRead(true);
Bild.loadImageFromHandle(quellDatei, true);
Int zielDatei = openWrite("", false, true);
synchronizeHandles(quellDatei, zielDatei);
close(quellDatei);
close(zielDatei);
|
Int quellDatei = openLocalRead(true);
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal geöffnet wird. Die Variable ist somit ein Zeiger auf die Datei. Für die Auswahl der Datei wird ein Dialog geöffnet. Mit true wird die Datei binär geöffnet, mit false im ASCII-Modus. Die Methode finden Sie in der Funktionsbibliothek IO.
Bild.loadImageFromHandle(quellDatei, true);
Weist der Bild-Komponente das Image-Objekt zu, das von der Datei gestreamt wird. Die Datei wird mit Hilfe der Zeiger-Variable quellDatei bestimmt. Mit true wird das Image-Objekt an die Größe der Bild-Komponente angepasst.
Int zielDatei = openWrite("", false, true);
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, die zum Schreiben geöffnet wird. Die Variable ist ein Zeiger auf die Datei. Der erste Parameter gibt den Pfad zur Datei an. Der zweite Parameter legt fest, ob die gespeicherten Daten angehängt oder ob die Datei überschrieben werden soll. Der dritte legt fest, die Datei binär oder im ASCII-Modus geöffnet werden soll.
synchronizeHandles(quellDatei, zielDatei);
Überträgt die Daten der Quell-Datei in die Ziel-Datei.
close(quellDatei);
Schließt den geöffneten Kanal zur Datei.
close(zielDatei);
Schließt den geöffneten Kanal zur Datei.
|
|
1
2
3
4
5
6
7
8
|
Int quellDatei = openLocalRead(true)
Bild.loadImageFromHandle(quellDatei, true)
Int zielDatei = openWrite("", false, true)
synchronizeHandles(quellDatei, zielDatei)
close(quellDatei)
close(zielDatei)
|
Int quellDatei = openLocalRead(true)
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal geöffnet wird. Die Variable ist somit ein Zeiger auf die Datei. Für die Auswahl der Datei wird ein Dialog geöffnet. Mit true wird die Datei binär geöffnet, mit false im ASCII-Modus. Die Methode finden Sie in der Funktionsbibliothek IO.
Bild.loadImageFromHandle(quellDatei, true)
Weist der Bild-Komponente das Image-Objekt zu, das von der Datei gestreamt wird. Die Datei wird mit Hilfe der Zeiger-Variable quellDatei bestimmt. Mit true wird das Image-Objekt an die Größe der Bild-Komponente angepasst.
Int zielDatei = openWrite("", false, true)
Definiert eine Integer-Variable und weist dieser die ID einer Datei zu, die zum Schreiben geöffnet wird. Die Variable ist ein Zeiger auf die Datei. Der erste Parameter gibt den Pfad zur Datei an. Der zweite Parameter legt fest, ob die gespeicherten Daten angehängt oder ob die Datei überschrieben werden soll. Der dritte legt fest, die Datei binär oder im ASCII-Modus geöffnet werden soll.
synchronizeHandles(quellDatei, zielDatei)
Überträgt die Daten der Quell-Datei in die Ziel-Datei.
close(quellDatei)
Schließt den geöffneten Kanal zur Datei.
close(zielDatei)
Schließt den geöffneten Kanal zur Datei.
|
|
1
2
3
4
5
6
7
8
|
Ganzzahl quellDatei = öffneLokalZumLesen(WAHR)
Bild\ladeBildVonHandle ( quellDatei, WAHR )
Ganzzahl zielDatei = öffneZumSchreiben( "", FALSCH, WAHR )
synchronisiereHandles ( quellDatei, zielDatei)
schließe ( quellDatei )
schließe ( zielDatei )
|
Ganzzahl quellDatei = öffneLokalZumLesen(WAHR)
Definiert eine Ganzzahl-Variable und weist dieser die ID einer Datei zu, zu der ein Kanal geöffnet wird. Die Variable ist somit ein Zeiger auf die Datei. Für die Auswahl der Datei wird ein Dialog geöffnet. Mit WAHR wird die Datei binär geöffnet, mit FALSE im ASCII-Modus. Die Methode finden Sie in der Funktionsbibliothek Ein&Ausgabe
Bild.ladeBildVonHandle(quellDatei, WAHR)
Weist der Bild-Komponente das Image-Objekt zu, das von der Datei gestreamt wird. Die Datei wird mit Hilfe der Zeiger-Variable quellDatei bestimmt. Mit WAHR wird das Image-Objekt an die Größe der Bild-Komponente angepasst.
Ganzzahl zielDatei = öffneZumSchreiben( "", FALSCH, WAHR )
Definiert eine Ganzzahl-Variable und weist dieser die ID einer Datei zu, die zum Schreiben geöffnet wird. Die Variable ist ein Zeiger auf die Datei. Der erste Parameter gibt den Pfad zur Datei an. Der zweite Parameter legt fest, ob die gespeicherten Daten angehängt oder ob die Datei überschrieben werden soll. Der dritte legt fest, die Datei binär oder im ASCII-Modus geöffnet werden soll.
synchronisiereHandles ( quellDatei, zielDatei)
Überträgt die Daten der Quell-Datei in die Ziel-Datei.
schließe ( quellDatei )
Schließt den geöffneten Kanal zur Datei.
schließe (zielDatei)
Schließt den geöffneten Kanal zur Datei.
|
|
Hinweis: Das Speichern von Dateien auf dem lokalen Rechner ist unproblematisch. Dagegen ist das Speichern von Dateien auf einen Server grundsätzlich nur dann möglich, wenn der Benutzer die entsprechenden Zugriffsrechte besitzt. Dies gilt natürlich auch für XDEV 2 Anwendungen.
Für das Speichern, bzw. Uploaden von Dateien auf einem Server bei einem Internet Service Provider oder auf externen File-Servern ist ein serverseitiger Dienst notwendig, den Sie noch zusätzlich programmieren müssen. Dabei handelt es sich um ein sehr kleines Programm, i.d.R. ein CGI-Skript oder Servlet, welches lediglich die Aufgabe hat, eine Datei entgegen zu nehmen und auf dem Server abzulegen. Die Kommunikation zwischen der Anwendung und dem Service erfolgt über Server-Ports mit Hilfe von Sockets.
|
|
Bilder uploaden
|
Bei Web-Anwendungen benötigen Sie zum Uploaden einer Datei nur die Methode uploadFile( ) | XDEV NLS: dateiHochladen ( ), die Sie in der Funktionsbibliothek bei Misc | XDEV NLS: Sonstiges finden. Die Methode öffnet einen Dialog für die Auswahl einer Datei. Der Pfad zur Datei kann wahlweise absolut oder relativ angegeben werden. Wenn Sie keinen Pfad angeben, wird das Verzeichnis der Anwendung verwendet. Wenn Sie als zweiten Parameter keinen Dateinamen angeben, wird automatisch der Name der ausgewählten Datei verwendet. Als dritten Parameter können Sie ein Limit für die Dateigröße in Bytes festlegen (1 Kilobyte = 1024 Bytes, 1 Megabyte = 1024 Kilobyte). Mit dem vierten Parameter können Sie schließlich noch einen Titel für das Auswahlfenster festlegen.
1
|
uploadFile("http://www.xdev-software.de/images", "01.jpg", 1*1024*1024, "Bild hochladen");
|
|
1
|
uploadFile("http://www.xdev-software.de/images", "01.jpg", 1*1024*1024, "Bild hochladen")
|
|
1
|
dateiHochladen ( "http://www.xdev-software.de/images", "01.jpg", 1*1024*1024, "Bild hochladen" )
|
|
|
» Transparenzen «
Mit Hilfe spezieller Transparenz-Filter, die Sie in den Eigenschaften bei Transparenz einstellen können, lassen sich Bildpixel mit bestimmten Farbwerten transparent (=durchsichtig) darstellen. Anders als bei GIF (1 Farbe) und PNG (256 Farben) grundsätzlich möglich, können Sie in XDEV 2 sogar beliebig viele Farbwerte als transparent definieren. Auch eine halbtransparente Darstellung ist möglich.
Tipp: XDEV 2 bietet Ihnen einen Bild-Editor, mit dem Sie Ihre Bilder nachbearbeiten und für einen schnellen Oberflächenaufbau komprimieren können. Um den Bild-Editor aufzurufen, klicken Sie das entsprechende Bild mit der rechten Maustaste an und wählen dann im Kontextmenü Bild bearbeiten aus.
|
|
