====== Käyttöliittymän teko ======

===== Dialogi-ikkunan luominen =====

{{ohjeet:wix:malli.png}}

Yllä olevan ikkunan saa luotua seuraavalla koodinpätkällä:
<code wix>
<UI>
  <Dialog Id="UI_Progressbar" Width="370" Height="270" Title="[ProductName] -asennus" NoMinimize="yes" Modeless="yes">
    <Control Id="UI_BannerBitmap" Type="Bitmap" X="0" Y="0" Width="370" Height="39"
	     TabSkip="yes" Text="UI_BannerBmp" />
    <Control Id="UI_BannerLine" Type="Line" X="0" Y="40" Width="370" Height="0" />
    <Control Id="UI_StatusLabel" Type="Text" X="35" Y="80" Width="300" Height="10"
	     Text="{\DlgFont8}Asennetaan:" />
    <Control Id="UI_ProductLabel" Type="Text" X="35" Y="95" Width="300" Height="20"
	     Text="{\DlgFont10}[ProductName]" />
    <Control Id="UI_ProgressBar" Type="ProgressBar" X="35" Y="125" Width="300" Height="10"
	     ProgressBlocks="yes" Text="Progress done">
      <Subscribe Event="SetProgress" Attribute="Progress" />
    </Control>
    <Control Id="UI_BottomLine" Type="Line" X="0" Y="234" Width="370" Height="0" />
    <Control Id="UI_Cancel" Type="PushButton" X="304" Y="243" Width="56" Height="17"
	     Default="yes" Cancel="yes" Text="{\DlgFont8}Peruuta">
      <Publish Event="EndDialog" Value="Exit">1</Publish>
    </Control>
  </Dialog>
  <TextStyle Id="DlgFont8" FaceName="Tahoma" Size="8" />
  <TextStyle Id="DlgFont10" FaceName="Tahoma" Size="10" Bold="yes" />
  <Binary Id="UI_BannerBmp" SourceFile="ty_logo.bmp" />
</UI>
</code>

==== Ikkunan avaus ====

Varsinainen ikkuna luodaan käskyllä
<code wix>
  <Dialog Id="UI_Progressbar" Width="370" Height="270" Title="[ProductName] -asennus" NoMinimize="yes" Modeless="yes">
</code>
Tämä on aika yksiselitteistä, tehdään 370x270 kokoinen ikkuna. Niinhän sitä luulisi. MSI-yksiköt eivät ole pikseleitä, vaan jokainen MSI-yksikkö määritellään 1/12-osaksi MS Sans Serif koko 10 -fonttia. Täten, normaalisti ikkunan koko olisi noin 493x360 pikseliä. Tarkkaa arvoa on vaikea antaa, sillä Microsoftin sivuillakin sanotaan "approximately".

NoMinimize-määrittely poistaa pienennyskuvakkeet ikkunasta. Modeless-määrittely tarkoittaa, että asennusohjelma saa jatkaa suoritustaan, kun tämä ikkuna on esillä. Jos ikkuna ei olisi Modeless, asennus pysähtyisi odottamaan, kunnes ikkuna suljetaan.

==== Yläreunan logo ====

<code wix>
    <Control Id="UI_BannerBitmap" Type="Bitmap" X="0" Y="0" Width="370" Height="39"
	     TabSkip="yes" Text="UI_BannerBmp" />
    <Control Id="UI_BannerLine" Type="Line" X="0" Y="40" Width="370" Height="0" />
</code>

Jokainen Control-elementti määrittelee yhden yksityiskohdan ikkunassa. Ensin määritellään kuva, joka ladataan ikkunan yläreunaan. Kuvan koko on määritelty 370x39, eli käytännössä halutaan käyttää 493x52 pikselin kuvaa. Jos kuva on liian pieni tai suuri, Windows Installer skaalaa sen (mahdollisimman rumasti reunoja pehmentämättä).

{{ohjeet:wix:ty_logo.png}}

TabSkip tarkoittaa, että tabilla käyttöliittymää selatessa ei ole tarpeen pysähtyä tähän kuvaan.

Toinen Control-elementti määrittelee pikselin (MSI-pikselin siis) kuvan alle väliviivan joka on koko ikkunan levyinen.

==== Tiedot asennuksesta ja edistyminen ====

<code wix>
    <Control Id="UI_StatusLabel" Type="Text" X="35" Y="80" Width="300" Height="10"
	     Text="{\DlgFont8}Asennetaan:" />
    <Control Id="UI_ProductLabel" Type="Text" X="35" Y="95" Width="300" Height="20"
	     Text="{\DlgFont10}[ProductName]" />
    <Control Id="UI_ProgressBar" Type="ProgressBar" X="35" Y="125" Width="300" Height="10"
	     ProgressBlocks="yes" Text="Progress done">
      <Subscribe Event="SetProgress" Attribute="Progress" />
    </Control>
</code>

Ensimmäinen Control pistää "Asennetaan:" tekstin paikalleen. Tärkeää huomata, että fontti määritellään tekstin alussa {\DlgFont8}-tagilla. Myöhemmin koodissa määritellään, mitä kyseinen tagi tarkoittaa.

Seuraava Control näyttää asennettavan ohjelman nimen, hieman isommalla fontilla.

Viimeinen Control näyttää edistymispalkin. ProgressBlocks määrittelee, että haluamme paloista koostuvan palkin (vaihtoehtona yhteinäinen sininen palkki). Controllin sisällä määritellään Subscribe-elementillä, että haluamme Eventin SetProgress muuttavan tämän palkin tietoja. Muuten palkissa ei näkyisi pahemmin edistystä.

==== Peruuta-nappula ====

<code wix>
    <Control Id="UI_BottomLine" Type="Line" X="0" Y="234" Width="370" Height="0" />
    <Control Id="UI_Cancel" Type="PushButton" X="304" Y="243" Width="56" Height="17"
	     Default="yes" Cancel="yes" Text="{\DlgFont8}Peruuta">
      <Publish Event="EndDialog" Value="Exit">1</Publish>
    </Control>
</code>
Ensimmäinen Control vain tekee vaakaviivan.

Toinen Control luo nappulan, jossa lukee "Peruuta". Default-määritys tekee nappulasta oletuksen, eli returnia tai spacea lyömällä nappula pitäisi painua pohjaan. Cancel-määritys tekee nappulasta peruutusnappulan, jolloin ESCillä voidaan myös saada nappula pohjaan. Controllin sisällä määritellään Publish-elementillä, mitä tehdään, jos nappulaa painetaan. Tässä tapauksessa tehdään "EndDialog" arvolla "Exit", joka keskeyttää asennuksen. (EndDialog arvolla "Return" jatkaa asennusta)

==== Yleiset määritykset ====
<code wix>
  <TextStyle Id="DlgFont8" FaceName="Tahoma" Size="8" />
  <TextStyle Id="DlgFont10" FaceName="Tahoma" Size="10" Bold="yes" />
  <Binary Id="UI_BannerBmp" SourceFile="ty_logo.bmp" />
</code>

Tässä määritellään, mitä fonttitageilla tarkoitetaan ja mistä kuva banneriin ladataan.

===== Sekalaisia havaintoja =====

  * Käyttöliittymän kokoyksikkö on 1/12-osa MS Sans Serif 10 -fontin koosta. Täten käyttöliittymän koko kasvaa jos Helppokäyttötoiminnoilla on kasvatettu fontin kokoa.
  * Kuvat skaalataan automaattisesti oikean kokoisiksi, skaalaus on perusmallia joten se ei pehmennä reunoja.
  * Kerro käyttöliittymäyksiköt noin 1.33:lla saadaksesi sopiva kuvankoko.