[WIX] 사용자 화면 추가하기

 회사에서 WIX(Windows Installer XML)으로 빌드 패키지를 작성하고 Jenkins를 이용하여 설치 파일을 생성하고 있습니다.

며칠 전 고객사에서 설치 파일 수정 요청이 들어왔습니다.

협력사에 프로그램을 배포하려고 하는데 프로그램 복제를 막기위해 프로그램 설치 시 라이선스 코드를 입력받도록 해달라는 것이었습니다.

라이선스를 입력받는 화면이 필요한데 사용자 화면을 추가해본적이 없어 웹 검색을 통하여 얻은 내용을 여기에 기록합니다.

WIX에서는 미리 정의된 몇가지 UI 모드를 지원합니다.

1. WixUI_Advanced
2. WixUI_FeatureTree
3. WixUI_InstallDir
4. WixUI_Minimal
5. WixUI_Mondo

각 UI 모드마다 사용하는 Dialog와 나타나는 순서가 정의되어 있습니다.

사용자 화면을 추가하기 위해서는 WixUI_FeatureTree 모드를 사용하는 것이 좋다고 합니다.

먼저 추가할 사용자 화면을 디자인합니다.

WIX 파일에 직접 XML 형식으로 작성을 해도 되고  Wix Edit라는 툴을 이용하여 작성해도 됩니다.

Wix Edit

라이선스 입력 화면을 아래와 같이 디자인했습니다.

그리고 WIX 파일(.*.wxs)에 UI를 위한 섹션을 추가합니다.

UI 섹션에는 Font와 UI Mode에 대한 내용이 꼭 추가되어야 합니다.

<TextStyle Id="WixUI_Font_Normal" FaceName="Tahoma" Size="8" />
<TextStyle Id="WixUI_Font_Bigger" FaceName="Tahoma" Size="12" />
<TextStyle Id="WixUI_Font_Title" FaceName="Tahoma" Size="9" Bold="yes" />
<Property Id="DefaultUIFont" Value="WixUI_Font_Normal" />

<Property Id="WixUI_Mode" Value="FeatureTree" />

사용자가 입력한 라인선스 코드를 저장할 속성을 선언합니다.

<Property Id="LicenseCode" />

UI에서 사용할 Dialog를 참조합니다. 아래 Dialog는 WIX에서 기본적으로 제공하고 있습니다.

<DialogRef Id="WelcomeDlg" />
<DialogRef Id="ErrorDlg" />
<DialogRef Id="FatalError" />
<DialogRef Id="FilesInUse" />
<DialogRef Id="MsiRMFilesInUse" />
<DialogRef Id="PrepareDlg" />
<DialogRef Id="ProgressDlg" />
<DialogRef Id="ResumeDlg" />
<DialogRef Id="UserExit" />
<DialogRef Id="CancelDlg" />
<DialogRef Id="InstallDirDlg" />

마지막으로 설치시 나타날 Dialog들에 대한 내용을 기입합니다.
첫번째 Welcome Dialog를 표시합니다.

<Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="LicenseDlg" />

위의 내용은 WelcomeDlg를 화면에 표시하고(Publish), "Next" 버튼을 클릭했을때 LicenseDlg를 생성하여 표시(NewDialog)하는 WIX 구문입니다.
두번째 우리가 생성한 LicenseDlg가 화면에 표시됩니다. LicenseDlg의 코드는 아래와 같습니다.

<Dialog Id="LicenseDlg" Width="370" Height="270">
<Control Type="Edit" Id="EditLicense" Width="190" Height="15" X="100" Y="5" Property="LicenseCode" />
<Control Type="PushButton" Id="Next" Width="56" Height="17" X="98" Y="20" Text="Next">
	<Publish Event="NewDialog" Value="InstallDirDlg">LicenseCode = "XXXXXX"</Publish>
</Control>
<Control Type="PushButton" Id="Back" Width="56" Height="17" X="161" Y="20" Text="Back">
	<Publish Event="NewDialog" Value="WelcomeDlg">1</Publish>
</Control>
<Control Type="PushButton" Id="Cancel" Width="56" Height="17" X="229" Y="20" Text="Cancel">
	<Publish Event="NewDialog" Value="CancelDlg">1</Publish>
</Control>
<Control Type="Text" Id="Label" Width="96" Height="17" X="0" Y="5" Text="Enter the license code : " />
</Dialog>

위 3번째 줄을 보면 "Next" 버튼을 눌렀을때 InstallDirDlg를 화면에 표시하고 있습니다.
Inline Text인 LicenseCode = "XXXXXX"는 사용자가 입력한 라인선스 코드가 XXXXXX 일때만 InstallDirDlg를 표시하도록 제한하고 있습니다.
이외의 코드를 입력하면 다음 화면으로 넘어가지 않습니다.
세 번째는 설치 폴더를 변경할수 있는 InstallDirDlg 입니다.

<Publish Dialog="InstallDirDlg" Control="Back" Event="NewDialog" Value="LicenseDlg">1</Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="SetTargetPath" Value="[WIXUI_INSTALLDIR]" Order="1">1</Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="DoAction" Value="WixUIValidatePath" Order="2">NOT WIXUI_DONTVALIDATEPATH</Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="SpawnDialog" Value="InvalidDirDlg" Order="3">"1"]]></Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="NewDialog" Value="VerifyReadyDlg" Order="4">WIXUI_DONTVALIDATEPATH OR WIXUI_INSTALLDIR_VALID="1"</Publish>
<Publish Dialog="InstallDirDlg" Control="ChangeFolder" Property="_BrowseProperty" Value="[WIXUI_INSTALLDIR]" Order="1">1</Publish>
<Publish Dialog="InstallDirDlg" Control="ChangeFolder" Event="SpawnDialog" Value="BrowseDlg" Order="2">1</Publish>

네번째는 VerifyReadyDlg 입니다.

<Publish Dialog="VerifyReadyDlg" Control="Back" Event="NewDialog" Value="InstallDirDlg" Order="1">NOT Installed</Publish>
<Publish Dialog="VerifyReadyDlg" Control="Back" Event="NewDialog" Value="MaintenanceTypeDlg" Order="2">Installed</Publish>

이후에는 UI Mode에서 미리 정의해둔 순서대로 Dialog가 표시됩니다.
설명한 내용에 대한 파일은 여기서 다운받으시면 됩니다.
마지막으로 유용한 Youtube 링크를 남깁니다.  https://www.youtube.com/watch?v=usOh3NQO9Ms