Im vorigen Beitrag über Bereitstellung von Anwendungen und Generierung von Offline-Installationsprogrammen für Windows Qt Installer Framework Tutorial haben Sie die Grundlagen des App-Bereitstellungsprozesses und der Installer-Generierung kennengelernt. Qt Installer Framework bietet jedoch viel mehr als das! Was können Sie mit diesem Tool noch tun? Zum Beispiel können Sie die Benutzeroberfläche eines Installers auf viele verschiedene Arten anpassen, und genau das werden Sie in diesem Beitrag lernen. Bevor wir weitermachen, wollen wir eine wichtige Frage beantworten. Warum sollte man das tun?

Das Aussehen der App ist genauso wichtig wie die Leistung und die Benutzerfreundlichkeit. Es ist kein Geheimnis, dass die Benutzer auf das Aussehen der Software achten, die sie verwenden – deshalb spielt der Frontend-Entwickler eine ebenso wichtige Rolle wie der Backend-Entwickler. Dies ist auch der Grund dafür, herauszufinden, wie man ein generisch aussehendes Tool in einen benutzerfreundlichen Augenschmaus verwandelt. Bevor wir das tun, lassen Sie uns mit den Grundlagen beginnen.

Wenn Sie das Qt-Framework und seine Funktionen noch nicht kennen, lesen Sie unseren Blogbeitrag über Qt und wie man damit GUIs erstellt.

Brauchen Sie Hilfe bei Ihrem Projekt? Sehen Sie sich unsere Qt-Entwicklungsdienstleistungen an.

Anpassungen der Icons

Es gibt nur wenige Möglichkeiten, Ihren Installer anzupassen: Erstellen von Komponentenskripten, Hinzufügen eines Steuerskripts oder Ändern der Datei config.xml. Die letzte Position in dieser Liste sollten Sie bereits aus dem vorangegangenen Blog-Beitrag über das Bereitstellung von Anwendungen und Generierung von Offline-Installationsprogrammen für Windows Qt Installer Framework Tutorial kennen, daher werden wir sie zuerst diskutieren.

Die Konfigurationsdatei enthält eine Reihe von XML-Tags, mit denen das Verhalten und das Aussehen des Installationsprogramms geändert werden können. Es gibt eine ganze Reihe von Tags, so dass wir uns nur einige von ihnen genauer ansehen werden. Zuerst etwas Einfaches – das Hinzufügen eines benutzerdefinierten Symbols für das Installationsfenster und die ausführbare Datei.

Um ein Fenstersymbol festzulegen, müssen Sie lediglich das Tag InstallerWindowIcon hinzufügen, das den Namen der PNG-Datei enthält, und es im Konfigurationsordner ablegen. Das Hinzufügen eines benutzerdefinierten Symbols für die ausführbare Datei des Installationsprogramms sieht fast genauso aus, aber in diesem Fall verwenden Sie das Tag InstallerApplicationIcon. Das Format der Datei ist jedoch systemabhängig, d.h. es ist eine .icns für macOS und eine .ico im Falle von Windows. Leider wird dieses Tag unter Unix nicht unterstützt. Beim Namen des Icons im InstallerApplicationIcon-Tag sollte der Dateityp weggelassen werden, da der Generator selbst entscheidet, welcher Typ von Icon verwendet wird. Denken Sie auch daran, dass die Icons nicht zu groß sein sollten – manchmal lässt der Installer-Generator solche Icons weg. Im Falle von Windows funktioniert 128×128 für mich gut. Wenn Sie die Konfigurationsdatei aus dem vorherigen Beitrag verwenden und die genannten Änderungen vorgenommen haben, sollte ihr Inhalt wie folgt aussehen:

<?xml version="1.0" encoding="UTF-8"?>
<Installer>
    <Name>APP NAME</Name>
    <Version>1.0.0</Version>
    <Title>INSTALLER WINDOW TITLE</Title>
    <Publisher>Scythe Studio</Publisher>
    <StartMenuDir>START_MENU_DIR</StartMenuDir>
    <TargetDir>@HomeDir@/APP_DIR</TargetDir>
    <InstallerWindowIcon>logo.png</InstallerWindowIcon>
    <InstallerApplicationIcon>installericon</InstallerApplicationIcon>
</Installer>

Nachdem die neue Installationsdatei für Windows erstellt wurde, sollte alles wie erwartet funktionieren:

Gestaltung

Jetzt haben Sie einige benutzerdefinierte Symbole, aber das Installationsprogramm sieht immer noch recht allgemein aus. Was können Sie mit der Konfigurationsdatei tun, um das zu ändern? Die Antwort ist – ein paar Style Sheets hinzufügen!

Qt Style Sheets ist ein Werkzeug aus dem Qt Widgets-Modul, mit dem man das Aussehen von Widgets anpassen kann. Die Konzepte, Terminologie und Syntax sind stark von HTML Cascading Style Sheets (CSS) inspiriert, aber an die Welt der Widgets angepasst. Sie ist auch der QML-Syntax sehr ähnlich. Da das Qt Installer Framework auf dem Qt Widgets Modul basiert, können wir auch Stylesheets verwenden, um das Aussehen von Installern zu verändern.

Um ein Stylesheet zu Ihrem Installer hinzuzufügen, erstellen Sie einfach die Datei style.qss im config-Verzeichnis und fügen Sie das Tag StyleSheet in die config.xml ein. Sie können auch ein zusätzliches Tag hinzufügen, um die Dinge noch besser zu machen – WizardStyle. Dieser Tag ändert das Layout des Installationsprogramms. Ich schlage vor, sich für den Stil „Modern“ zu entscheiden, da er im Falle von Windows den weißen Rand um den Inhalt des Installationsprogramms beseitigt, der an diesem Punkt der Anpassung störend ist. Jetzt sollte config.xml ähnlich wie der folgende Code aussehen:

<?xml version="1.0" encoding="UTF-8"?>
<Installer>
    <Name>APP NAME</Name>
    <Version>1.0.0</Version>
    <Title>Qt Installer Tutorial</Title>
    <Publisher>Scythe Studio</Publisher>
    <StartMenuDir>START_MENU_DIR</StartMenuDir>
    <TargetDir>@HomeDir@/APP_DIR</TargetDir>
    <InstallerWindowIcon>logo.png</InstallerWindowIcon>
    <InstallerApplicationIcon>installericon</InstallerApplicationIcon>
    <WizardStyle>Modern</WizardStyle>
    <StyleSheet>style.qss</StyleSheet>
</Installer>

Das Style Sheet im Config-Verzeichnis ist leer, so dass es nichts ändern wird. Öffnen Sie die Datei style.qss und Sie können fast jeden Teil des Erscheinungsbildes ändern – wie geht das? Wie im Falle von CSS deklarieren Sie einen Bereich (oder in diesem Fall ein Widget), der angepasst werden soll. Wenn Sie zum Beispiel den Fensterhintergrund ändern wollen, erstellen Sie einen QWidget-Bereich, einfach so:

QWidget
{
    color: white;
    background-color: rgb(61, 56, 56);
}

Wie wäre es, wenn wir dem Installer etwas mehr Farbe geben? Verwenden wir unseren Lieblings-Grünton und die Radius-Eigenschaft, um die Schaltflächen besser hervorzuheben.

QPushButton
{
    background-color: rgb(36, 159, 123);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(61, 56, 56);
    border-radius: 5px;
}

Sie können auch zustandsabhängiges Styling hinzufügen. Im Falle einer Schaltfläche können wir ihre Farbe in einen linearen Farbverlauf ändern, wenn sie gedrückt oder markiert wird.

QPushButton:pressed, QPushButton:checked
{
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgba(36, 159, 123, 60%), stop:1 rgba(19, 85, 64, 60%));
}

Es gibt viele Möglichkeiten, jedes Widget zu verändern, daher werden wir hier nicht alle Optionen besprechen. Wenn Sie mehr über Style Sheets erfahren wollen, lesen Sie die Dokumentationsseite zu Qt Style Sheets und die Seite mit den Beispielen für die Anpassung der einzelnen Elemente. Mit einigen anderen kleinen Änderungen enthält style.qss folgenden Code:

QWidget
{
    color: white;
    background-color: rgb(61, 56, 56);
}
QPushButton
{
    background-color: rgb(36, 159, 123);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(61, 56, 56);
    border-radius: 5px;
    min-height: 25px;
    max-height: 25px;
    min-width: 60px;
    padding-left: 15px;
    padding-right: 15px;
}
QPushButton:pressed, QPushButton:checked
{
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgba(36, 159, 123, 60%), stop:1 rgba(19, 85, 64, 60%));
}
QProgressBar
{
    text-align: center;
}
QProgressBar::chunk
{
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgba(36, 159, 123, 60%), stop:1 rgba(19, 85, 64, 60%));
}

Mit dieser Stilvorlage sollte das Installationsprogramm wie folgt aussehen:

Beachten Sie, dass sich Änderungen im Erscheinungsbild nicht nur auf ein Installationsprogramm, sondern auch auf ein Wartungsprogramm auswirken:

Dies ist bereits eine große Veränderung, aber wir sind noch nicht fertig. Was können Sie noch tun, um die Veranstaltung weiter voranzutreiben? Wie wäre es, einige benutzerdefinierte Seiten mit Skripten hinzuzufügen?

Skripting

Wir haben das Thema Scripting API von Qt Installer Framework noch nicht behandelt, also lassen Sie uns zu Beginn erklären, was dies ist.

Es handelt sich im Grunde um eine Reihe von JavaSctipt-Objekten, die Sie verwenden können, um Skripte zu erstellen, die in .qs-Dateien platziert und von QJSEngine ausgeführt werden. Sie können sie verwenden, um mit bestimmten Teilen der Benutzeroberfläche des Installers oder seiner Funktionalität zu interagieren. Im Fall von Installern gibt es zwei Arten von Skripten: Controller-Skripte und Komponenten-Skripte. In diesem Eintrag werden wir uns auf Komponentenskripte konzentrieren, während der Controller-Typ im nächsten Eintrag ausführlich behandelt wird. Komponentenskripte werden verwendet, um das Verhalten ausgewählter Komponenten im Installer zu steuern, so dass jede Komponente ihr eigenes Skript haben kann.

Bevor Sie mit der Skripterstellung weitermachen, müssen Sie zunächst Ihre Seite erstellen und die .ui-Datei registrieren. Erstellen Sie nun Ihre eigene Widget-Klasse in der .ui-Datei. Als Beispiel verwenden wir die Klasse CustomPage mit dem folgenden Code:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>CustomClass</class>
 <widget class="QWidget" name="MyPage">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>532</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Custom Page</string>
  </property>
  <layout class="QHBoxLayout" name="horizontalLayout">
   <item>
    <layout class="QVBoxLayout" name="verticalLayout">
     <item>
      <widget class="QRadioButton" name="radioButton">
       <property name="locale">
        <locale language="English" country="UnitedStates"/>
       </property>
       <property name="text">
        <string>OptionA</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QRadioButton" name="radioButton_2">
       <property name="locale">
        <locale language="English" country="UnitedStates"/>
       </property>
       <property name="text">
        <string>Option B</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QRadioButton" name="radioButton_3">
       <property name="locale">
        <locale language="English" country="UnitedStates"/>
       </property>
       <property name="text">
        <string>Option C</string>
       </property>
      </widget>
     </item>
    </layout>
   </item>
   <item>
    <widget class="Line" name="line">
     <property name="orientation">
      <enum>Qt::Vertical</enum>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QTextBrowser" name="textBrowser">
     <property name="html">
      <string>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0//EN&quot; &quot;http://www.w3.org/TR/REC-html40/strict.dtd&quot;&gt;

&lt;html&gt;&lt;head&gt;&lt;meta name=&quot;qrichtext&quot; content=&quot;1&quot; /&gt;&lt;style type=&quot;text/css&quot;&gt;
p, li { white-space: pre-wrap; }
&lt;/style&gt;&lt;/head&gt;&lt;body style=&quot; font-family:'MS Shell Dlg 2'; font-size:7.8pt; font-weight:400; font-style:normal;&quot;&gt;
&lt;h3 style=&quot; margin-top:14px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;span style=&quot; font-size:large; font-weight:600;&quot;&gt;Who are we?&lt;/span&gt;&lt;/h3&gt;
&lt;h4 style=&quot; margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;span style=&quot; font-size:medium; font-weight:600;&quot;&gt;We are group of software enthusiasts for whom your satisfaction is the most important.&lt;/span&gt;&lt;/h4&gt;
&lt;h4 style=&quot; margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;span style=&quot; font-size:medium; font-weight:600;&quot;&gt;Our goal is to provide only high quality software which means that we want create easily managed, well documented and effortlessly maintainable software. We work in our productive scheme which is always additionally adjusted by specification of your project. We believe that there is nothing impossible in the case of software development.&lt;/span&gt;&lt;/h4&gt;&lt;/body&gt;&lt;/html&gt;</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

Für den Prozess der Seitenregistrierung werden wir das Paket qtinstallertutorialx64 verwenden, das im vorherigen Beitrag erstellt wurde. Um eine benutzerdefinierte Seite in die package.xml-Datei einzufügen, müssen Sie den Tag UserInterfaces hinzufügen, der eine Liste von UserInterface-Tags enthält, die jeweils den Namen der zu registrierenden Datei enthalten. Vergessen Sie nicht, die registrierten .ui-Dateien im Meta-Ordner abzulegen! Eine solche Liste von Dateien sollte ähnlich wie diese aussehen:

<UserInterfaces>
 <UserInterface>CustomPage.ui</UserInterface>
</UserInterfaces>

Um ein erstes Skript zu Ihrem Installer hinzuzufügen, müssen Sie das Tag Script, das den Namen der .qs-Datei enthält, in die Datei package.xml aufnehmen. Jedem Paket in Ihrem Installer können verschiedene Skripte hinzugefügt werden. Der Inhalt der Datei package.xml sollte nun wie folgt aussehen:

<?xml version="1.0" encoding="UTF-8"?>
<Package>
    <DisplayName>PACKAGE NAME 64-bit</DisplayName>
    <Description>This is going to install APP NAME on your machine</Description>
    <Version>1.0.0</Version>
    <ReleaseDate>2020-06-17</ReleaseDate>
    <Licenses>
        <License name="LICENSE TITLE" file="license.txt" />
    </Licenses>
    <Default>true</Default>
    <Script>installscript.qs</Script>
    <UserInterfaces>
        <UserInterface>CustomPage.ui</UserInterface>
    </UserInterfaces>
</Package>

Nun können Sie mit dem Schreiben des Skripts beginnen. Das Skript muss ein Component-Objekt enthalten, das der Installer beim Laden des Skripts erstellt. Um eine einzelne benutzerdefinierte Seite hinzuzufügen, reicht es aus, wenn das Skript nur eine Component()-Funktion enthält. Um dies zu erreichen, müssen Sie die Funktion addWizardPage verwenden, die vom globalen Objekt des Installers aufgerufen wird. Werfen Sie einen Blick auf den Code des fertigen Skripts:

function Component()
{
    installer.addWizardPage(component, "CustomPage", QInstaller.ReadyForInstallation);
}

Die Funktion zum Hinzufügen einer neuen Seite benötigt drei Parameter.Der erste ist die Komponente, die den registrierten Namen der hinzuzufügenden Widgetklasse enthält – in diesem Fall wurde ein globales Komponentenobjekt übergeben, das auf die aktuelle Komponente verweist. Das nächste Argument ist der Name der registrierten Widgetklasse, die Sie verwenden möchten.Das letzte Argument ist der Index der bestehenden Seite, vor der die neue Seite platziert werden soll.In diesem Fall würde CustomPage vor der Seite ReadyForInstallation platziert werden.

Beachten Sie, dass der Name, der in der Funktion addWizardPage übergeben wird, derselbe sein muss wie der Name des Root-Widget-Objekts, das in der .ui-Datei erstellt wurde, und nicht mit dem Namen der .ui-Datei übereinstimmen muss! Wenn Sie zum Beispiel den Namen des Widget-Objekts in der Datei CustomPage.ui in MyOtherPage ändern, müssen Sie „MyOtherPage“ an addWizardPage übergeben, obwohl der Name der Datei im UserInterface-Tag derselbe bleibt.

<widget class="QWidget" name="MyOtherPage">

function Component()
{
    installer.addWizardPage(component, "MyOtherPage", QInstaller.ReadyForInstallation);
}

An dieser Stelle werden wir keine weiteren Funktionen hinzufügen oder Signale und Slots verbinden, da dies im nächsten Eintrag dieser Serie ausführlich behandelt wird.

Nachdem Sie das neue Installationsprogramm generiert und ausgeführt haben, können Sie die Ergebnisse des beigefügten Skripts sehen:

Übersetzen

Wie Sie bereits erraten haben, ist meine Systemsprache nicht Englisch, so dass die Standardelemente des Installers übersetzt werden, während die benutzerdefinierten nicht übersetzt werden. Um das zu beheben, kann das Qt Translation System verwendet werden.

Alles beginnt mit der Vorbereitung von Zeichenketten für die Übersetzung. Wenn Sie Ihre .ui-Datei mit Qt Creator erstellt haben und nur Strings aus dieser Datei übersetzen wollen, brauchen Sie in diesem Schritt nichts zu tun. Wenn Sie jedoch Strings aus Ihrem Installer-Skript übersetzen wollen, vergessen Sie nicht, diese in die Funktion qsTr() einzuschließen.

Als erstes müssen Sie eine Übersetzungsquelldatei erzeugen. Dies kann mit lupdate mit dem Flag -ts geschehen. Am Anfang übergibt man die zu übersetzenden Dateien und am Ende gibt man den Sprachcode ein, der die Übersetzungssprache angibt. Um eine polnische Übersetzungsquelldatei zu erzeugen, sollte der Befehl wie folgt aussehen:

lupdate installscript.qs CustomPage.ui -ts pl.ts

Da installscript.qs keine zu übersetzenden Zeichenfolgen enthält, kann sie in diesem Fall übersprungen werden. Ich wollte sie jedoch dort belassen, damit man sie nicht vergisst.

Nach dem Ausführen des Befehls wird die .ts-Datei generiert, so dass Sie mit der Erstellung der Übersetzung mit dem Tool Linguist beginnen können. Es ist eine Software, die zum Übersetzen von .ts-Dateien und zum Erzeugen von binären Qt-Nachrichten-Dateien verwendet wird und mit Qt geliefert wird.

Nachdem Sie alle Strings übersetzt haben, können Sie die Option Datei->Freigeben in Linguist verwenden, um die Qt-Nachrichtendatei zu erzeugen, die Sie für die weiteren Schritte benötigen. Sie können auch die Kommandozeile benutzen und den folgenden Befehl verwenden:

lrelase pl.ts

In beiden Fällen sollten Sie eine .qm-Datei erhalten, die Ihre Übersetzung im Binärformat enthält. Stellen Sie nun sicher, dass sie sich im Meta-Verzeichnis befindet. Als letzten Schritt fügen Sie eine Liste der Übersetzungen in package.xml ein, indem Sie die folgenden Tags verwenden:

<Translations>
        <Translation>pl.qm</Translation>
</Translations>

As you see, you can add more translations by simply adding more Translation tags. At the end package.xml should look similar to this code:

<?xml version="1.0" encoding="UTF-8"?>
<Package>
    <DisplayName>PACKAGE NAME 64-bit</DisplayName>
    <Description>This is going to install APP NAME on your machine</Description>
    <Version>1.0.0</Version>
    <ReleaseDate>2020-06-17</ReleaseDate>
    <Licenses>
        <License name="LICENSE TITLE" file="license.txt" />
    </Licenses>
    <Default>true</Default>
    <Script>installscript.qs</Script>
    <UserInterfaces>
        <UserInterface>CustomPage.ui</UserInterface>
    </UserInterfaces>
    <Translations>
        <Translation>pl.qm</Translation>
    </Translations>
</Package>

Nachdem Sie die Übersetzung hinzugefügt und ein neues Installationsprogramm erstellt haben, können Sie die Ergebnisse sehen:

Zusammenfassung

Mit diesem Eintrag haben Sie gelernt, wie Sie die Benutzeroberfläche des Installationsprogramms anpassen können. Das Erscheinungsbild des Installers liegt nun in Ihrer Hand. Dies ist jedoch nicht das Ende dieses Tutorials. Im nächsten Beitrag werden Sie mehr über die Verwendung von Skripten und die Handhabung des benutzerdefinierten Verhaltens Ihres Installers erfahren. Wir sehen uns bald wieder!