viestards ([info]viestards) wrote on August 29th, 2007 at 11:36 am
XUL piecās minūtēs pt.1

XUL ir valoda, kas līdzīga XML un kas tiek izmantota Mozilla saimes produktu logu un to elementu (widgets) attēlošanai
Apskatīsim vienkāršāko XUL skriptu

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <button label="Labi"/>
</window>

Pirmā rinda norāda, ka tas ir XML fails, tas jādara visiem XUL failiem
Otrajā rindā tiek norādīts izskata fails, šajā gadījumā tiek ņemts globālais fails
Starp <window> un </window> tiek definēts, kā izskatīsies jauns logs
Rinda "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"" norāda kur atradīsies XUL namespace, tas ir nepieciešams Mozillai.
<button label="Labi"> norāda, ka tiks izveidota poga ar nosaukumu "Labi".

Vienkāršs logs ar vienu pogu nekam neder, varētu pielikt kaut ko vairāk. Varbūt vajadzētu uztaisīt kādu mūzikas albumu apskati? Pievienosim laukus mūziķim, albumam un izlaišanas gadam.

Pievienojam sekojošas rindas uzreiz pēc <window ...> birkas.
<textbox id="musician"/>
<textbox id="album"/>
<textbox id="year"/>

Palaižot redzam, ka parādījušies trīs papildus lauki, tikai nevar saprast ko kurš lauks nozīmē, tāpēc vajadzētu pievienot uzrakstus (label)
Mūziķim būs šāds label:
<label control="musician" accesskey="M" value="Mūziķis:"/>
Pievēršiet uzmanību, ka control vērtība sakrīt ar textbox vērtības id.

Taču patreiz tas viss neizskatās labi- lauki un pogas pa visu ekrānu nav tas labākais veids kā veidot formas izskatu, tāpēc nonākam līdz izskata veidošanai. Atšķirībā no Windows pierastās prakses, kad kontroles atrašanās vieta tika norādīta ar koordinātēm, šeit tiek izmantota kastīšu (box) sistēma- kontrole(-es) tiek ielikta savā kastē un šī kaste atkal citā kastē utt. Kastēm var norādīt kā kārtosies kontroles- horizontāli(hbox) vai vertikāli(vbox). Ja nepieciešams atdalīt kontroles, to dara ar atdalītājiem (spacers)

Tagad, kad kontroles saliktas kastēs, viss kods izskatās šādi:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox>
<hbox>
  <vbox>
    <label control="musician" accesskey="M" value="Mūziķis:"/>
  <label control="album" accesskey="A" value="Albums:"/>
  <label control="year" accesskey="G" value="Gads:"/>
  </vbox>
  <vbox>
    <textbox id="musician"/>
    <textbox id="album"/>
    <textbox id="year"/>
  </vbox>
</hbox>

<hbox>
   <button label="Labi"/>
   <button label="Atcelt"/>
</hbox>
</vbox>

</window>     


Visas kontroles ir saliktas vertikālajā kastē, kur savukārt ir divas horizontālās- kontroles un pogas. Kontroles tiek sadalītas vēl divās daļās- uzraksti un ievada lauki. Izklausās sarežģiti, un lai nesaputrotos, formatējums ir svarīgs. Taču vēl arvien izskats nav labs- uzraksti nav tieši pretim ievad laukiem. Lai noformatētu ar kastēm, nāksies krietni papūlēties, tāpēc var izmantot rūtiņas (grids), kas ļauj kontroles pa rūtīm.

Liekot datus rūtīs tos var kārtot gan pēc kolonnām, gan rindām, galvenais atcerēties, ka katrā rūtī ieteicams ievietot vienu kontroli vai kasti.
Kastīšu sakārtojums šajā gadījumā izskatās šādi:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox>
<grid flex="1">
<columns>
  <column>
  <label control="musician" accesskey="M" value="Mūziķis:"/>
  <label control="album" accesskey="A" value="Albums:"/>
  <label control="year" accesskey="G" value="Gads:"/>
  </column>
  <column>
  <textbox id="musician"/>
  <textbox id="album"/>
  <textbox id="year"/>
  </column>
</columns>
<rows>
  <row>
  </row>
  <row>
  </row>
  <row>
  </row>
</rows>
</grid>
<hbox flex="1">
   <button label="Labi"/>
   <button label="Atcelt"/>
</hbox>
</vbox>
</window>

Kad ar izskatu ir daudz maz tikts galā, vajadzētu sākt ķerties klāt datiem.
Sākumā vajadzētu piedarbināt pogas, lai tās kaut ko arī darītu. Te palīgā nav JavaScript kas XUL aplikācijās tiek darbināts tāpat kā jebkur citur Firefox vidē. Poga "Labi" tagad izskatās šādi:
<button label="Labi" oncommand="alert('Input Succesfull');"/>


Tas patreiz arī viss, būs jāpacenšas kaut ko vairāk par RDF un kā to sasaistīt ar XUL.

Lai iegūtu vairāk informācijas iesaku apskatīties daudz pilnīgākas pamācības:
XUL tutoriālis iekš mozilla.org
XUL redaktors, var rakstīt un uzreiz redzēt rezultātu
Tags:
 
( Read comments )
Post a comment in response:
From:
( )Anonymous- this user has disabled anonymous posting.
Username:
Password:
Subject:
No HTML allowed in subject
  
Message:

Notice! This user has turned on the option that logs your IP address when posting.