Hintergrundgeschichte
Eines Tages haben wir uns entschieden, ein neues Thema im Microsoft Office 2022-Stil für die Schnittstelle hinzuzufügen. Aber, in diesem Fall würde die Anzahl von CSS-Dateien erhöht, und das, seinerseits, würde die Größe der Softwares-Pakete vergrößern. Demzufolge, haben wir das Modell der Gestaltung der JS-Komponenten verändert, um folgende Aufgaben zu lösen:- neues Schnittstelle-Thema mit verschiedenen farblichen Akzenten hinzufügen;
- Abwärtskompatibilität für unsere Benutzer bewahren;
- die Erhöhung von Größe der Produkt-Skripte vermeiden.
Aber, erste Dinge zuerst.
Neues Thema
Wie es oben erwähnt wurde, eine der wichtigsten Aufgaben war das Hinzufügen vom neuen Thema der Schnittstelle im Microsoft Office 2022-Stil mit verschiedenen farblichen Akzenten und standardmäßige Verwendung vom diesen Thema. Außerdem, möchten wir auch die Abwärtskompatibilität bewahren, d.h. die Möglichkeit, jederzeit das Thema Microsoft Office 2013 mit dem erforderlichen Farbton auszuwählen.Entfernen von CSS-Dateien
Das Hinzufügen vom neuen Schnittstelle-Thema beim alten Gestaltung-Modell würde die Anzahl von CSS-Dateien erhöhen. Wir haben die Lösung gefunden – alle Stil-Einstellungen und Steuerelemente sind in die Skript-Dateien verschoben und die CSS-Dateien entfernt worden.Derzeit die Datei stimulsoft.viewer.js enthält alle erforderlichen Stil-Einstellungen der Komponente für Anzeigen von Berichten und Dashboards, und die Datei stimulsoft.designer.js enthält alle Stil-Einstellungen der Komponente für Erstellen von Berichten und Dashboards. Dadurch braucht man keine CSS-Dateien für die Arbeit der Software.
Neue Methode und neue Option
Für die Abwärtskompatibilität haben wir die Möglichkeit der Verwendung einer Option der Komponente oder einer speziellen Methode angeboten. Um das standardmäßige Schnittstelle-Thema festzulegen, haben wir in JS-Komponenten eine neue Option theme hinzugefügt. Diese Option befindet sich in der Gruppe der Einstellungen appearance. Diese Option kann mit einer der Aufzählungen StiViewerTheme (StiDesignerTheme) festgelegt werden. Zum Beispiel,options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteBlue
.Außerdem, eine spezielle Methode setTheme, die das Thema bei der Arbeit mit JS-Komponente zu ändern erlaubt, ist für die Änderung vom Thema hinzugefügt worden. Als Argument nimmt die Methode dieselbe Aufzählung an, zum Beispiel,
viewer.setTheme(Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteTeal)
.Anzeigen von Symbolen bei verschiedenen Maßstäben
Für Anzeigen von Symbolen in verschiedenen Bildschirm-Maßstäben haben wir zusätzliche Bilder der Steuerelemente der Komponenten in einigen Größen hinzugefügt. Natürlich, die Erhöhung der Anzahl von Bildern führt zur Erhöhung der Skript-Größe. Um diese Erhöhung zu vermeiden, haben wir alle Bilder ins Format WebP umgewandelt, und es erlaubt die bisherige Größe der Software-Skripte zu speichern. Jetzt sehen alle JS-Komponenten, der Designer und der Viewer, richtig bei verschiedenen Maßstäben des Nutzer-Bildschirms aus.Wenn Sie noch Fragen haben, kontaktieren Sie uns.