UI-Komponenten

Diese Seite stellt eine kurze Übersicht über die wichtigsten Komponenten dar, die zum Bau eines Viewers benötigt werden. Eine Übersicht aller Komponenten finden Sie in unserer Showcase-Anwendung samt Code-Beispielen, welche hier zu finden ist.

tip

In den folgenden Beispielen wird die Viewer-Komponente als View-Child mit #viewerComponent referenziert. Diese Variable wird oftmals an andere Komponenten weitergegeben.

Viewer

<jwt-multi-mode-viewer #viewerComponent
                       (sourceChanged)="source = $event"
                       (passwordRequired)="passwordRequiredSource = $event"
                       (pageCountChanged)="pageCountChanged($event)"
                       (documentChanged)="documentChanged($event)"
                       (pageIndexChanged)="currentPageIndex = $event"
                       [source]="source" />

Toolbar

<jadice-common-toolbar [provider]="viewerComponent" [config]="TOOLBAR_CONFIG" />

Toolbar-Config

    readonly TOOLBAR_CONFIG: ToolbarConfig<Viewer> = DefaultToolbar.CONFIG;

Die Default-Config DefaultToolbar.CONFIG enthält die Standardbelegung der Toolbar und kann als Ausgangspunkt für eigene Konfigurationen kopiert und angepasst werden.

Thumbnail-View

<jwt-thumbnail-panel #thumbnailPanelComponent
                     [viewerProvider]="viewerComponent"
                     [document]="currentDocument"
                     [pages]="pages"
                     (pageClicked)="pageSelected($event)"
                     [currentPageIndex]="currentPageIndex" />

jadice-common-components

Die jadice-common-components ist eine Library, die UI-Komponenten zur Verfügung stellt, die bei Verwendung mit dem jadice Viewer für ein Einheitliches Look&Feel sorgen. Ähnlich wie bei Angular Material stehen Komponenten zur Verfügung die angepasst und gestyled werden können. Aktuell existieren die folgenden Komponenten:

• Button
• Button-Group
• Floating Toolbar
• Info-Bar
• Loading-Indicator
• Menü
• PillBox
• Separator
• Toolbar
• Tooltip

Annotation-Panel

 <jwt-annotation-panel [viewerProvider]="viewerComponent"
                       (annotationSelected)="pageSelected($event)"
                       [annotationProfile]="annotationProfile$ | async" />

Ersteller- und Änderungsangaben (showAuthorDetails)

Optional zeigt jeder Listeneintrag zusätzlich, wer die Annotation zuletzt geändert hat und wann. Das Flag ist standardmäßig aus; ohne es bleibt die Liste unverändert.

 <jwt-annotation-panel [viewerProvider]="viewerComponent"
                       (annotationSelected)="pageSelected($event)"
                       [annotationProfile]="annotationProfile$ | async"
                       [showAuthorDetails]="true" />

Mit aktivem Flag werden beide Zeitstempel eines Eintrags mit Sekunden und in der aktiven Übersetzungssprache formatiert, damit Erstellung und Änderung vergleichbar sind. Ohne das Flag bleibt die bisherige Formatierung erhalten.

Der Änderungszeitstempel wird vom Annotationsmodell selbst gepflegt. Der Name des ändernden Benutzers dagegen nicht — ihn muss die integrierende Anwendung vergeben, z.B. beim Anlegen über AnnotationCustomizers.get().setLastModifiedBy("<benutzer>") analog zu setCreatedBy. Ist kein Name gesetzt, zeigt die Zeile den Platzhalter für einen unbekannten Benutzer.

note

Die Angaben sind personenbezogene Daten. Da das Flag standardmäßig aus ist, werden sie nur angezeigt, wenn die integrierende Anwendung das bewusst aktiviert.

Advanced Search

<jwt-advanced-search-panel [viewerProvider]="viewerComponent" />