Change Installer UI Example | Qt Installer Framework Documentation

- Qt Installer Framework Documentation
- Tutorials and Examples
- Change Installer UI Example

# Change Installer UI Example

Using a component script to change the installer UI.

Change Installer UI demonstrates how to use the `Component()` function to change the default text for the check box label on the license check page. This example does not install any components, but it specifies a dummy component in the package information file, because installers without components are not allowed.

## 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>Change Installer UI Example</Name>
         <Version>1.0.0</Version>
         <Title>Change Installer UI Example</Title>
         <Publisher>Qt-Project</Publisher>
         <StartMenuDir>Qt IFW Examples</StartMenuDir>
         <TargetDir>@HomeDir@/IfwExamples/changeuserinterface</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 `<Default>` element specifies whether the component is preselected for installation in the user interface by default.
- The `<Script>` element sets the file name of the loaded JavaScript file.
- The `<Licenses>` element sets the `name` of the license agreement that the end user accepts, as well as the filename of the `file` that has the license.

     <?xml version="1.0" encoding="UTF-8"?>
     <Package>
         <DisplayName>Dummy Component</DisplayName>
         <Description>This example does not install any components. It demonstrates
         modifying the text on the next page.</Description>
         <Version>1.0.0-1</Version>
         <ReleaseDate>2013-01-01</ReleaseDate>
         <Default>true</Default>
         <Script>installscript.qs</Script>
         <Licenses>
             <License name="Beer Public License Agreement" file="license.txt" />
         </Licenses>
     </Package>

## Updating UI Text

In installscript.qs, the `Component()` function adds the license check page and connects to the `changeLicenseLabels` signal when end users enter the page:

     function Component()
     {
         if (!installer.isCommandLineInstance())
             gui.pageWidgetByObjectName("LicenseAgreementPage").entered.connect(changeLicenseLabels);
     }

The `changeLicenseLabels` function changes the text label for the accept license check box on the page:

     changeLicenseLabels = function()
     {
         page = gui.pageWidgetByObjectName("LicenseAgreementPage");
         page.AcceptLicenseLabel.setText("Yes I do!");
     }

Note: Do not use the `Component()` function to add translations.

## 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 -p packages installer.exe

- On Linux or macOS:

       ../../bin/binarycreator -c config/config.xml -p packages installer

This creates the installer to the current directory.

Files:

- changeuserinterface/changeuserinterface.pro
- changeuserinterface/config/config.xml
- changeuserinterface/packages/org.qtproject.ifw.example.changeuserinterface/meta/installscript.qs
- changeuserinterface/packages/org.qtproject.ifw.example.changeuserinterface/meta/license.txt
- changeuserinterface/packages/org.qtproject.ifw.example.changeuserinterface/meta/package.xml