Table of Contents

Vorschaubilder

Vorschaubilder können in Listenansichten eingesetzt werden und zeigen eine Vorschau des jeweiligen Listeneintrags an.

Listenvorlage

Abbildung 1 - Eine Listenansicht mit Mängeln, die für jeden Listeneintrag ein Vorschaubild anzeigt.

Listenvorlage

Falls eine Vorlage in der Listenansicht definiert wurde kann der Platzhalter für das Vorschaubild wiefolgt mit bindId: "thumbImage" unterhalb der Eigenschaft childTemplates eingebunden werden:

{
    "type": "Ti.UI.ImageView",
    "bindId": "thumbImage",
    "properties": {
        "left": 0,
        "width": 10,
        "top": 1,
        "height": 78
    }
}

Klasse

An einer Klasse existiert die Eigenschaft Thumbnail. Hier kann Code eingefügt werden, der das Bild für den jeweiligen Datensatz in der Liste zurückgibt. Die Syntax unterscheidet sich von anderen Stellen, an denen Code eingegeben werden kann, dadurch, dass code: vorangestellt werden muss und nur eine Anweisung existieren darf.

Bemerkung

Der Thumbnail-Code darf kein return enthalten. Dies wird von der App selbstständig hinzugefügt.

Um z.B. für Dokumente das Bild zurückzugeben, dessen Dateipfad an einem Attribut vom Typ 'path' hinterlegt wurde, reicht dieser Aufruf:

code:Ti.App.mainController.onGetThumbnail(this)

Mit this wird die aktuelle Instanz der Klasse bezeichnet, für die das Vorschaubild ermittelt werden soll. Hängt das Pfadattribut nicht direkt an dieser Klasse, so kann auch ein komplexer Ausdruck verwendet werden:

code:Ti.App.mainController.onGetThumbnail(Ti.App.ex.getModelFromReference(this, 'ref_document'))

Workaround über Funktionsaufruf

Die Einschränkung auf nur eine Anweisung kann umgangen werden, indem ein Funktionsaufruf verwendet wird. In pit - Mobile 2.0 muss die Funktion als globale Variable abgerufen werden. Dies erfordert, dass die globale Variable zunächst zu einem früheren Zeitpunkt deklariert wird. Ab pit - Mobile 4.0 kann eine globale Funktion verwendet werden.

code:Ti.App.globalData.getData('myFunc', 'myCategory')(this)

In der Funktion muss dann der absolute Dateipfad der Bildressource zurückgegeben werden. Dafür kann man folgenden Aufruf verwenden:

return Ti.App.resourceController.getImagePath('res:meter_electric_thumbnail');

Innerhalb dieser Funktion können nach Bedarf mehrere Fälle unterschieden werden um eine ähnliche Wirkung wie bei Markierungen zu erhalten.

Neuerungen seit pit - Mobile 4.0

Ab pit - Mobile 4.0 kann man statt einem Skript nun auch this angeben. Dann wird das erste Pfadattribut der Klasse für das Vorschaubild verwendet. Alternativ kann mit this:Attributname der Attributname auch explizit angegeben werden. Gibt man stattdessen den Namen eines Referenzattributs an (z.B. ref_document, ohne this) ermittelt die App daraus wieder automatisch das erste Pfadattribut der Referenzklasse.

Siehe auch

Klassen
Listenansichten
Markierungen