Dynamic Page Installer Example | Qt Installer Framework Documentation 4.11.0

- Qt Installer Framework Documentation
- Tutorials and Examples
- Dynamic Page Installer Example
- Qt Installer Framework 4.11.0

# Dynamic Page Installer Example

Using a component script and dynamic pages to build an installer.

Dynamic Page Installer illustrates how to use the `component.loaded.connect()` function to load custom installer pages (.ui) instead of using the default installer pages and how to add functionality to the pages.

The Select Installation Type page contains icons that are added to a Qt resource file (.qrc) for delivery with the installer.

## Configuring the Example Installer

The installer configuration file, config.xml, in the `config` directory specifies the text and default values used in the installer:

- The `<Name>` element sets the application name and adds it to the page name and introduction text.
- The `<Version>` element sets the application version number.
- The `<Title>` element sets the installer name and displays it on the title bar.
- The `<Publisher>` element sets the publisher of the software (as shown in the Windows Control Panel, for example).
- The `<StartMenuDir>` element sets the name of the default program group for the product in the Windows Start menu.
- The `<TargetDir>` element sets the default target directory location to be within the `IfwExamples` directory in the home directory of the current user (because it uses the pre-existing variable `,` @HomeDir@, as part of the value). For more information, see Predefined Variables.

     <?xml version="1.0" encoding="UTF-8"?>
     <Installer>
         <Name>Dynamic Page Installer Example</Name>
         <Version>1.0.0</Version>
         <Title>Dynamic Page Installer Example</Title>
         <Publisher>Qt-Project</Publisher>
         <StartMenuDir>Qt IFW Examples</StartMenuDir>
         <TargetDir>@HomeDir@/IfwExamples/dynamicpage</TargetDir>
     </Installer>

## Creating the Example Package Information File

The installer package information file, package.xml, in the `meta` directory specifies the components that are available for installation:

- The `<DisplayName>` element sets the human-readable name of the component.
- The `<Description>` element sets the human-readable description of the component.
- The `<Version>` element sets the version number of the component.
- The `<ReleaseDate>` element sets the date of release for this component version.

- The `<Script>` element specifies the file name of the JavaScript file that is loaded to perform operations.
- The `<UserInterfaces>` element specifies the file names of the installer pages (.ui files) to use.
- The `<Name>` element provides domain-like identification for the component.

     <?xml version="1.0"?>
     <Package>
         <DisplayName>Dynamic page installer example</DisplayName>
         <Description>Can be used as reference on how to build installer independent of predefined installer pages.</Description>
         <Version>1.0.0</Version>
         <ReleaseDate>2014-04-07</ReleaseDate>
         <Script>installscript.js</Script>
         <UserInterfaces>
             <UserInterface>targetwidget.ui</UserInterface>
             <UserInterface>installationwidget.ui</UserInterface>
             <UserInterface>licensewidget.ui</UserInterface>
             <UserInterface>readytoinstallwidget.ui</UserInterface>
         </UserInterfaces>
         <Name>org.qtproject.ifw.example.dynamicpage</Name>
     </Package>

This installer contains three components that each have their own package information file with slightly different contents.

## Creating Dynamic Pages

In installscript.js, we create the installer pages and add functionality to them.

Qt Installer Framework calls the constructors of all scripts. When all the constructors are finished and all UI files are loaded, a `loaded` signal is emitted for each component.

To create an installer page, we have to wait for the `loaded` signal that tells us that the UI file has been loaded:

             component.loaded.connect(this, Component.prototype.installerLoaded);

We hide the default pages by setting their visibility to `false`:

             installer.setDefaultPageVisible(QInstaller.TargetDirectory, false);
             installer.setDefaultPageVisible(QInstaller.ComponentSelection, false);
             installer.setDefaultPageVisible(QInstaller.LicenseCheck, false);
             if (systemInfo.productType === "windows")
                 installer.setDefaultPageVisible(QInstaller.StartMenuSelection, false);
             installer.setDefaultPageVisible(QInstaller.ReadyForInstallation, false);

We use the `loaded` function that we connected earlier to add functionality to the dynamic installer pages:

     Component.prototype.installerLoaded = function () {
         if (installer.addWizardPage(component, "TargetWidget", QInstaller.TargetDirectory)) {
             var widget = gui.pageWidgetByObjectName("DynamicTargetWidget");
             if (widget != null) {
                 widget.targetChooser.clicked.connect(this, Component.prototype.chooseTarget);
                 widget.targetDirectory.textChanged.connect(this, Component.prototype.targetChanged);

                 widget.windowTitle = "Installation Folder";
                 widget.targetDirectory.text = Dir.toNativeSparator(installer.value("TargetDir"));
             }
         }

         if (installer.addWizardPage(component, "InstallationWidget", QInstaller.ComponentSelection)) {
             var widget = gui.pageWidgetByObjectName("DynamicInstallationWidget");
             if (widget != null) {
                 widget.customInstall.toggled.connect(this, Component.prototype.customInstallToggled);
                 widget.defaultInstall.toggled.connect(this, Component.prototype.defaultInstallToggled);
                 widget.completeInstall.toggled.connect(this, Component.prototype.completeInstallToggled);

                 widget.defaultInstall.checked = true;
                 widget.windowTitle = "Select Installation Type";
             }
         ...

installer::addWizardPage() registers a new page to the installer. gui::pageWidgetByObjectName() is then used to retrieve the root widget of the new page, with its name being `"Dynamic"` + the object name of the root widget as set in the .ui file.

## Generating the Example Installer

To create the example installer, switch to the example source directory on the command line and enter the following command:

- On Windows:

       ..\..\bin\binarycreator.exe -c config\config.xml -r resources/additional.qrc -p packages installer.exe

- On Linux or macOS:

       ../../bin/binarycreator -c config/config.xml -r resources/additional.qrc -p packages installer

Because the installer uses additional resources, you must give the `-r` option and specify the path to the Qt resource file that contains the resources. The installer is created in the current directory.

Files:

- dynamicpage/config/config.xml
- dynamicpage/dynamicpage.pro
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage.node1/data/data.node1.txt
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage.node1/meta/installscript.qs
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage.node1/meta/package.xml
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage.node2/data/data.node2.txt
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage.node2/meta/installscript.qs
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage.node2/meta/package.xml
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage/meta/installationwidget.ui
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage/meta/installscript.js
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage/meta/licensewidget.ui
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage/meta/package.xml
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage/meta/readytoinstallwidget.ui
- dynamicpage/packages/org.qtproject.ifw.example.dynamicpage/meta/targetwidget.ui
- dynamicpage/resources/additional.qrc
- dynamicpage/resources/license.txt

Images:

- dynamicpage/resources/icon.png