This article is a bit outdated and needs to be updated.
å眮ã
Mozillaã¯ã³ã³ãã£ã°ã¬ãŒã·ã§ã³å¯èœã§ãããŠã³ããŒãå¯èœãª chrome(ã¯ãã )ããã£ãŠããã ã€ãŸããã¡ã€ã³ãŠã£ã³ããŠã®çµã¿ç«ãŠãããã«ã³ã³ãããŒã©ã®æç¡ã§ãããã¢ããªã±ãŒã·ã§ã³ã« ããŒãã³ãŒãã£ã³ã°ãããŠããã®ã§ã¯ãªããå¥ã®UIèšè¿°ããèªã¿èŸŒãã§æ¥ããå®éã Mozillaã®ãŠã£ã³ããŠ(ãšãã€ã¢ãã°)ã®ã»ãšãã©ã¯ãã®æ©æ§ãçšããŠæžãããŠããã XUL(ãã®ã€ã¥ããã"ãºãŒã«"ãšçºé³ããã.ãŸã"XMLããŒã¹ã®ãŠãŒã¶ã€ã³ã¿ãã§ãŒã¹èšèª"ã®ç¥ã§ãã)㯠ãããã®UIèšè¿°ãçµã¿ç«ãŠãããã®èšèªã®æã ã®ååã§ããã
ãŠã£ã³ã㊠ã¯ãã ã¯ãã©ãŠã¶ã®äžã§HTMLã³ã³ãã³ãã管çããŠããã®ãšåã ã¬ã€ã¢ãŠããšã³ãžã³ã«ãã衚瀺ããã管çããããããã§ã¯ãUIèšè¿°ã¯HTML 4ãšå€§å€è¯ã䌌ãŠãã. XULã¯XMLã®1ã¢ããªã±ãŒã·ã§ã³ã§ãããå®éãXULã¯ããã€ãã®ãšã¬ã¡ã³ãåã«ç¹å®ã®æå³ãå®çŸ©ãã XMLãã®ãã®ã§ãããXULèšè¿°ã®äžã«HTMLãç¹åšããŠããŠãæ§ããªãã®ã§ããã
çšèª
"XPFE"ã¯Mozillaãã©ãŠã¶ã®ã¯ãã¹ãã©ãããã©ãŒã ããã³ããšã³ãã衚ã çšèªãšããŠMozillaã®çµç¹ã§ã¯å©çšãããŠããããªããªãXãšCã¯,ãããã³ããŒã§å©ããŠé·ã硬ãããã ãã䌌ãŠããããã§ããããã®è¶£æšã¯ã¯ãã¹ãã©ãããã©ãŒã ã¢ããªã±ãŒã·ã§ã³ãäœãç®çã§èšèšããã ããŒã«ã®éãŸããããã©ãŠã¶ãã¡ãŒã«ã¯ã©ã€ã¢ã³ãã®ãããªã¯ãã¹ãã©ãããã©ãŒã ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšã§ããã æ±çšã®ã¯ãã¹ãã©ãããã©ãŒã ã¢ããªã±ãŒã·ã§ã³ãã¬ãŒã ã¯ãŒã¯ãå®è£ ããããšã§ã¯ãªãã ããã¯æ¢ã«å®è¡ã«ç§»ãããŠããã倧å€å€§ããªä»äºã§ãããæã ã¯ãã©ãŠã¶ã®ãããªãããã¯ãŒã¯ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããã®ã« é©ããã¯ãã¹ãã©ãããã©ãŒã æ©èœãæäŸããããã€ããã§ãããã¯ãã¹ãã©ãããã©ãŒã æ©èœã¯ãã§ã«Mozillaã®HTMLã¬ã€ã¢ãŠã ãšã³ãžã³,Geckoã«å®è£ æžã§ããã
"ã¯ãã¹ãã©ãããã©ãŒã UI"ãšããçšèªã¯å¹ŸåçŽãããããUIèšèšè ã¯è€æ°ã®ãã©ãããã©ãŒã ã§åäœããUIèšè¿°ãäœãããšã ã§ããããããããã€ã¢ãã°ã®ãã¿ã³ã®ãããªãã®ã®é©åãªé 眮ã«é¢ããŠãããŸããŸãªãã©ãããã©ãŒã ã®ç°ãªãèããèæ ®ãã é©åãªULèšè¿°ããããªãã«ã¯è¥å¹²ã®ãã©ãããã©ãŒã ã«äŸåããèšè¿°ãå¿ èŠã«ãªãã XUL仿§åç¬ã§ã¯ãããçšåºŠã¯ãã¹ãã©ãããã©ãŒã ãå¯èœãšããã ãã§ããã UIèšèšè ãšãã«ããšã³ãžãã¢ã¯å°ãªããšãããã€ãã®ãã©ãããã©ãŒã äŸåXULææžãåããŠã¡ã³ããã³ã¹ããå¿ èŠãããã ããã
"XPããŒã«ããã"ã¯XPFEãšå¹Ÿåé¡äŒŒããŠãããããã©ãåè ã¯åŸè ã«æ¯ã¹ãŠããå ·äœçã§ããã åŸã£ãŠå®å šã«çœ®ãæãããããã®ã§ã¯ãªãããªã2ã€ã®çšèªãååšããã®ãã«ã€ããŠã¯èª°ã確ãã§ã¯ãªãã
"XUL"ã¯ãã§ã«ç޹ä»ããããã㯠Mozilla ã®ãŠã£ã³ããŠã®ã»ãšãã©,ç¹ã«ã¡ã€ã³ãã©ãŠã¶ãŠã£ã³ããŠãå«ããã® ã¬ã€ã¢ãŠããèšè¿°ããã®ã«å©çšããXMLã®1ã¢ããªã±ãŒã·ã§ã³ã§ããã
ç¯å²
ãã®ææžã¯èŠæ±ä»æ§ãè¿°ã¹ãããšã¯è©Šã¿ãŠããªããæã ã¯çŸæç¹ã§ã®"èŠæ±ä»æ§"ææžããã£ãŠããªãã XPããŒã«ãããã¢ãŒããã¯ãã£ã¯ãããã«é¢ããçè§£ãåŸãã«ã¯è¯ãå Žæã§ãã. ãã®ææžã¯, Mozilla ããã³ããšã³ãã¢ãŒããã¯ãã£ã«é¢ããç°¡åãªã€ã³ãããã¯ã·ã§ã³ãå«ãã§ãã,UIã®æ§ç¯ã«é¢ãã 説æã«çãããŒã£ãŠãã.ããã¯ããã€ãã®ããã«äžå®å šã§ãã.
Mozilla ã¢ããªã±ãŒã·ã§ã³ã¯ãã€ã¢ãã°ãã¿ã³ãã¡ãŒã«ããã¯ã¹ãã©ã«ãã®ãããª"å°ããª"ã³ã³ããã³ãããæ§æãããã ãããããŸãšããŠãŠã£ãžã§ãããšåŒã¶ããŠã£ãžã§ããã«ããæç»ãšãŠãŒã¶ãšã®å¯Ÿè©±ã¯åã ã®ãŠã£ãžã§ããã®å¶åŸ¡äžã«çœ®ããã ããã¯ãŠã£ãžã§ãããçæãããæã«èšå®ãããã ãŠã£ãžã§ããã®é 眮ãšå ±ã«,ãŠã£ãžã§ããéã®ãäºãã®äŒè©±,ãŸãæã«ã¯ãããã®èšå®ã ã¹ã¯ãªããã«ãã£ãŠæå®ãããUIã¬ã€ã¢ãŠãã«ãã£ãŠå¶åŸ¡ãããããã®ã¹ã¯ãªããã®æ§é 㯠ãã®ææžããããã¯ä»ã®é¢é£ããææžã«ãŠå®çŸ©ãããã
ãŠã£ãžã§ããã¯äž»ãšããŠã¢ããªã±ãŒã·ã§ã³ãèªåèªèº«ã«å«ãã§ããæçã§ãããäžè¬ã«ã¯ ãŠã£ã³ããŠã®é åã®é·æ¹åœ¢ã«å¯Ÿå¿ããããŠã£ãžã§ããã¯äžè¬ã«åçã«ããŒããããã©ã€ãã©ãª ã«åããŠéããããŠããããããŠã£ãžã§ããã¯ãŠã£ã³ããŠã®äžéš(ããŒã«ããŒãšãããŒã«ããŒãéãããã®) ããã€ããšãæ³å®ããŠããããç¥ããªãããããã¯ãŠã£ã³ããŠãšäžç·ã«åäœããããšããããã¯ãŠã£ã³ããŠãªã ã§åäœããããšãæ³å®ããŠããããç¥ããªã(ãã©ãããã©ãŒã ã«äŸåããã¡ãã¥ãŒããŒ)ã å šãã¢ããªã±ãŒã·ã§ã³ã®UIã®äžéšã§ã¯ãªãã®ãããããªãã
ãŠã£ãžã§ããã¯ã³ã³ãã€ã«æã«åãã£ãŠå®çŸ©ãããæ¯èããã€ã ãã¿ã³ã¯ããŠã¹ã«åå¿ããããŒã«ããŒã¯ãã¿ã³ãéããã³ã³ãããšããŠåäœããã ãŠã£ãžã§ããããã®ã¢ããªã±ãŒã·ã§ã³ã«ãããã广ã¯ãããããå®çŸ©ãããã¢ããªã±ãŒã·ã§ã³ã®æ¯èãš ãŠã£ãžã§ããéã®ãªã³ã¯ã®çµåããšããŠå®çŸ©ãããããã®ãªã³ã¯ã¯ XULã«å«ãŸããŠããJavaScriptã«ãã£ãŠ, ãããã¯XULããæ§ç¯ãããåŸ,ã³ã³ãã³ãã¢ãã«ãèµ°æ»ããã€ãã³ããªã¹ãã仲ä»ããã¢ããªã±ãŒã·ã§ã³ã³ãŒãã« ãã£ãŠãªãããŠãããäžè¬ã«ãå®éã®ã¢ããªã±ãŒã·ã§ã³ã¯ãã®2çš®é¡ã®çµåããå©çšããŠããã
ã¢ããªã±ãŒã·ã§ã³ã¯ãäŸãã°"ãã¡ã€ã«ãéã"ã³ãã³ããåãããšãäœããããã«ã€ããŠã¯ åãã£ãŠç¥ã£ãŠããã"éã"ãã¿ã³ã¯åãªããã¿ã³ã§ããããã¿ã³ã¯äžè¬ã«ã¯ãªã³ã±ãŒãžã®ããã« åçŽãªJavaScriptãå©çšããŠãã³ãã³ããåŠçããã¢ããªã±ãŒã·ã§ã³ã«éä¿¡ããã
æã ã¯æåã«æçœãªUIã³ã³ããã³ããããŒã«ããŒãã¡ãã¥ãŒããã€ã¢ãã°ã«çŠç¹ãããŠãããšæãã æŠå¿µçã«ãXULèšèªã¯ãã®(å šãŠã£ã³ããŠã®äžçªäžã«ã¡ãã¥ãŒããŒããã€ãããªããOSäžã§åãã¢ããªã±ãŒã·ã§ã³) ããã«æå®ããããšã«ãã£ãŠããã£ããã«åäœããã³ã³ããã³ãã®ããã±ãŒãžãæå®ããŠããã¹ããšãã£ã¿ã§ç·šéããããšãã§ããã:
main window containing menubar area at top across width of window containing menubar (and its contents) toolbar area below menubar across width of window containing main toolbar (and its contents) application-specific content area below toolbar area
XULãã¡ã€ã«ã®æ§é
æã ãéžãã èšèªã¯è¡šç€ºæ å ±ãCSSã§å³ä»ããã XMLã§ããã XMLã®ç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ã®è©³çްã ã€ãŸãç¹å®ã®ããŒã«ããŒã«é¢ããææ³ã«ã€ããŠã¯ ç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ã«ã€ããŠèšè¿°ããå¥ã®ããã¥ã¡ã³ãã«å§ãã ææ°ã®ãªã¹ãã«ã€ããŠã¯XPããŒã«ããã ã€ã³ããã¯ã¹ããã§ãã¯ããããšã
XULã¯ãŠã£ã³ããŠã®ã¬ã€ã¢ãŠããèšè¿°ããããã®èšèªãªã®ã§ã ãã®ããã¥ã¡ã³ãã察象ãšãããããã¯ãšXUL[windows.html windows]ã«ã€ããŠèšè¿°ãã å¥ã®ããã¥ã¡ã³ãã§éè€ããéšåããããXULã®ãŠã£ã³ããŠã«é¢ããèšè¿°ãæžããšããäœæ¥ã¯ã ææ³ãXMLã§ãã(HTML 4ãšã¯éããªã)ãšããããšãXULã«ç¹æã®ãšã¬ã¡ã³ããããããšãé€ããŠ åºæ¬çã«HTMLã§ã³ã³ãã³ããæžãäœæ¥ãšåããããªãã®ã§ããã ãããã®ãšã¬ã¡ã³ãã¯ä»¥äžã«è¿°ã¹ãããã«ãŠã£ã³ããŠã®æ¯èãšçµã³ã€ãããŠã£ãžã§ãããšç¹å®ã®ã€ã³ãã©ã§ããã
XULããã¥ã¡ã³ããæžãããšã®çްéšã®ã»ãšãã©ã¯ãXMLããã¥ã¡ã³ããæžãããšãšã»ãšãã©åãã§ããã XMLããã¥ã¡ã³ãã®èšè¿°ã«ã€ããŠã¯ä»ã®åªããXMLã«é¢ããããã¥ã¡ã³ãã«è²ãããšã«ããããã®ãã㪠ããã¥ã¡ã³ãã¯ååšããã«éããªããšæããæã ã¯ãŸã èŠãããšããªãã æ¬ããã¥ã¡ã³ãã§ã¯XULã«ç¹åããç¹ã«éäžããããšãšããã
åèªã®å€§å°æåèå¥ãšåå空é,ãã¡ã€ã«ã¿ã€ã
XMLã¯ãã¡ãã倧æåå°æåãåºå¥ãããXULã§ãåãã§ããã æã ã®çŸåšã®ã³ãŒãã¯ãã® ç¹ã«HTMLããŒã ã¹ããŒã¹ã®ã¿ã°ãšå±æ§ã«ã€ããŠã¯ãã®å¶éã«ã€ããŠå³ããããªãåŸåã«ããã ã¿ã°ãšå±æ§ã«ã€ããŠã¯ã«ãŒã«ãšããŠãXHTML ã¯ãŒãã³ã°ãã©ãã ã®äžã§ææ¡ãããŠããããã«å¿ ãå°æåã§æžãããã«ä»åŸå€ãã£ãŠããã§ãããã
Mozillaã§ã¯ XULãã¡ã€ã«ã«ç¹å¥ã®æå³ãããããŠãããããã¯ãã®ããšã«ãã£ãŠãã®äžããUIèšè¿°ãèŠã€ããããšã æåŸ ããŠããããã®çç±ã«ãã,æã ã¯.xulã®æ¡åŒµåããã€ãã¡ã€ã«ã«å¯Ÿå¿ããMIMEã¿ã€ã"text/xul"ãå®çŸ©ããŠããã (æšæºã«æºæ ããããã«,ãããããã®mimeã¿ã€ãã"text/x-xul"ã ããªã«ãã«å€æŽããå¿ èŠãçããŠãããšæããã) ãã®çš®ã®ãã¡ã€ã«ã¯"text/xml"ã®ãã¡ã€ã«ãšåãããŒã¶ãçšããŠåŠçããã(ãŸããããããã«"text/xml"ã¿ã€ãã® ãã¡ã€ã«ãããã§ããããã«XMLã®ææ³ã«ãŒã«ã«åŸãããšã«ãªã).(*.xmlãšããååã®)XMLãã¡ã€ã«ããXULããã¥ã¡ã³ãã èªã¿èŸŒãããšã¯å¯èœã§ããããã®çµæçããUIã¯XMLã³ã³ãã³ãã¢ãã«ãå©çšããŠçæãããã§ããããXULã³ã³ãã³ãã¢ãã«ã¯ *xulãã¡ã€ã«ããçæããããXMLããã¥ã¡ã³ãã¯åºæ¬DOM Level1 Core APIããµããŒãããã HTMLããã¥ã¡ã³ããDOM Level 1 HTML APIããµããŒãããã®ãšåãããã«ãXULããã¥ã¡ã³ãã¯æ¡åŒµã»ããããµããŒãããã Mozilla ã®XULã³ã³ãã³ãã¢ãã«ã¯ ããŒã«ã«ã®ãã¡ã€ã«ãšãªã¢ãŒãã®ãã¡ã€ã«ã®ããŒãžã®ãããªçŽ æŽãããæ©èœããµããŒãããã 詳现ã¯XULãšRDFããã¥ã¡ã³ããåç §ã®ããšã äžè¬ã«ã¯ãXULã¯*.xulãã¡ã€ã«ã«æ ŒçŽããããšæãã ããã
XULãã¡ã€ã«ã¯XULã«ç¹åããç¹å¥ã®ãšã¬ã¡ã³ãïŒXULãšã¬ã¡ã³ããšåæ§ã«ãXMLãšã¬ã¡ã³ããHTMLãšã¬ã¡ã³ããå«ãããšãã§ããã XULã®(ããHTMLãšã¬ã¡ã³ãã䜿ãããŠãããªãHTMLã)ããŒã ã¹ããŒã¹å®£èšã ãã¡ã€ã«äžã«å«ãŸããŠããªããã°ãªããªã.ããŒã ã¹ããŒã¹ã¯æ éã«åãæ±ãå¿ èŠããã.æ£ããããŒã ã¹ããŒã¹ã®äœ¿çšã«ãã£ãŠ ããŒã ã¹ããŒã¹ãåã ã®ã¢ããªãã¥ãŒãã«ã§ã¯ãªã,ã¿ã°ã®ããã ãã«å©çšãããããšãå¿ èŠãšãã ãã®èŠåã«å¯ŸãããŸããªäŸå€ããã°ã§ããã
XULãã¡ã€ã«ã®åºæ
XULã¯XMLã§ããããŸããæ£ããXULãã¡ã€ã«ã¯æšæºã®XMLããŒãžã§ã³ãšDOCTYPEæã§å§ãŸãã
XMLã§ã¯æé»ã®è¡šç€ºã»ãã³ãã£ã¯ã¹ã¯çšæãããŠããªãã®ã§åžžã«ã¹ã¿ã€ã«ã·ãŒããšé¢é£ã¥ããããªããã°ãªããªãã Mozillaã¯æšæºã®ã¹ã¿ã€ã«ã·ãŒã"xul.css"ããã£ãŠããã åžžã«ãæåã«ãã®xul.cssãèªã¿èŸŒãããã«ããªããã°ãªããªãããç¹°ãè¿ãã®åŠçåœä»€ãå©çšããããã®ãšåãããã« ããããã®ã¹ã¿ã€ã«ã·ãŒããèªã¿èŸŒãããšãã§ããã ãããŠæåŸã«ãããã¥ã¡ã³ãäžã§å©çšããããŒã ã¹ããŒã¹ã¯å šãŠå®£èšãããŠããå¿ èŠãããã ãã£ãŠãXULãã¡ã€ã«ã®ä»¥äžã®ãããªå§ãŸãã«ãªãã ãã
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!DOCTYPE window> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
HTMLããŒã ã¹ããŒã¹ã¯ãã¡ããæšæºã®ãã®ã§ãããXULããŒã ã¹ããŒã¹ã¯æããã«äžæçãªãã®ã§ãããã å°ãªããšãçºé³ã®èª¬æã«ã¯åœ¹ã«ãã€ã äžèšã®äŸã§ã¯æé»ã®XULããŒã ã¹ããŒã¹ãå©çšããŠããããšã«æ³šæããããã«. ããã¯ä»»æã§ãã.æ¬ããã¥ã¡ã³ãäžã®ä»ã®äŸã§ã¯æã«è§ŠããŠãããŒã ã¹ããŒã¹å©çšã®åºŠã«ãã¡ãã¡ æç€ºããããšã®åé¡ç¹ã«ã€ããŠè«ããããšæã.
chrome
ãããã³ã«ã¯ ã¯ãã èšè¿°äžã«å«ãŸããŠãããã¡ã€ã«ã®æ£ç¢ºãªäœçœ®ãç§»åãããŠã XULãœãŒã¹ã«ã¯ãªãã圱é¿ããªãããã«ããMozillaã®ãã1ã€ã®æ¡åŒµã§ããã ãããã£ãŠããã¯é åãã§ãã.ãã€ã[packages.html ããã±ãŒãž]ã«ãã®æ©æ§ã«ã€ããŠã® å®å
šãªèšè¿°ãèŒãã§ãããããçŸæç¹ã§ã¯ããããã¥ã¡ã³ããªã®ã ã幟åæä»£é
ãã«ãªã£ãã®ã èšå®å¯èœãªã¯ãã ã«ããã
ã¹ã¯ãªããã£ã³ã°
XULã€ã³ã¿ãã§ãŒã¹ã¯ãããããã°ã©ã ããããŸã§ã¯æ¥ç¶ãããŠããªããŠã£ãžã§ãããéãããã®ã«éããªãã "ããã°ã©ãã³ã°"ã¯è€æ°ã®ãŠã£ãžã§ãããçµã³ã€ããŠç¹å¥ã®æ©èœãäžããJavaScriptã®ããã«ç°¡åã«ããªãåŸããã ãªãã§ãã§ããC++ã¢ããªã±ãŒã·ã§ã³ã³ãŒãã®ããã«è€éã«ããªãåŸãã æ¬çš¿ã§ã¯ã¢ããªã±ãŒã·ã§ã³ããã°ã©ãã³ã°ã¯ãã®ç¯çãè¶ãããã®ãšèããJavaScriptã«ããŒãããšã«ããã
JavaScript
XULã«ã¯JavaScriptãå«ãã HTMLã³ã³ãã³ããå«ããããšãã§ãããJavaScriptã®é¢æ°ãHTMLãšåãããã« æžãè¶³ãããšãã§ãã.XULãã¡ã€ã«ã«ã¯<head>
ã»ã¯ã·ã§ã³ããªãã®ã§ ã¹ã¯ãªããã¯ä»ã®ã³ã³ãã³ãã«æ··ãã£ãŠããŠ,HTMLããŒã ã¹ããŒã¹ã®<script>
ã¿ã°ã§åãåããããã
<html:script type="application/x-javascript"> // dialog initialization code function InitWindow() { var checkbox = document.getElementByID("remember"); if (checkbox) checkbox.checked = true; } </html:script>
JavaScriptã¯HTMLããã¥ã¡ã³ãã®æãšåãããã«onClick
ãã³ãã©ãšåçš®ã®ãã®ãšã㊠åç
§ãå¯èœã§ãã.JavaScriptã®ããªã¥ãŒãåãå
¥ããã¢ããªãã¥ãŒãã®ãªã¹ãã®ããã« indexã§åç
§ãããŠããåã
ã®ãŠã£ãžã§ããã®ããã¥ã¡ã³ããåç
§ããŠãã ããã
JavaScriptã¯æãå®å šã«å¥ã®ãã¡ã€ã«ã«åããŠä»¥äžã®ããã«ããŠXULãã¡ã€ã«ã«åã蟌ãããšãã§ãã
<html:script language="javascript" src="our.js"/>
ãããã¯XMLã³ã³ãã³ãã®ããã«èŠãããããããªãJavaScriptãXMLããŒã¶ãå¡ãããç¥ããªãã®ãé²ãããã« CDATAã»ã¯ã·ã§ã³ã®ã³ã³ãã³ããšããŠè¿œãããããšãã§ãã(äŸãã°,<
ãã£ã©ã¯ã¿)
<html:script type="application/x-javascript"> <![CDATA[ function lesser(a,b) { return a < b ? a : b; } ]]> </html:script>
JavaScriptã®æ¡åŒµ
Mozillaã§ã¯ãå³å¯ã«ã¯ãã©ãŠã¶ã®ç°å¢ã«å«ãŸããŠããªãæ°ããæ©èœããµããŒãããããã« JavaScriptã«ããã€ãã®æ¡åŒµãè¡ãå¿ èŠãçããã ãããã¯æšæºã«æºæ ããŠããªãããã¡ããä»ã§ã¯å€æŽã®äœå°ã¯æ®ãããŠããã åã ã®æ¡åŒµã¯æ¡åŒµãå¿ èŠãšããæ©èœã«é¢ããåå¥ã®ããã¥ã¡ã³ãã«èšè¿°ãããŠããã
DOMã®æ¡åŒµ
XULã¯HTMLãšåããã®ã§ã¯ãªãã®ã§ãXULããã¥ã¡ã³ããDOMã¬ãã«1ã³ã¢APIããµããŒãããŠããŠã XULããã¥ã¡ã³ãã¯DOMã¬ãã«1HTML APIããµããŒãããªããããããªãããMozillaã¯HTMLãæ¡åŒµããåŸåããããã XULã³ã³ãã³ãã¢ãã«ã®ããã«æ¡åŒµDOMæ©èœæ§ããµããŒãããã çŸæç¹ã§ã¯ãããã®è¿œå ãããDOMã¡ãœããã¯ãã³ãŒãããã®æ
å ±ãæ¢ãã®ã«æãæµããå Žæã ããã©ãå©çšå¯èœã§ããã ãããã®ã€ã³ã¿ãã§ãŒã¹ã¯ãã£ã¬ã¯ããªmozilla/rdf/content/public/idl
ããèŠã€ããããšãã§ãã
XULDocument
XULDocument
㯠HTMLDocument
ã®æ¡åŒµã®ãšããšåãæ¹æ³ã§ Document
ãæ¡åŒµãããã®ã§ããã
interface XULDocument : Document { Element getElementById(in DOMString id); NodeList getElementsByAttribute(in DOMString name, in DOMString value); };
getElementById
ã¯HTMLã®getElementById
ãšåãããã«åäœããã
getElementsByAttribute
ã¯æå®ãããååã®å±æ§ãäžããããå€ããã£ãŠããElements
ã®ãªã¹ããè¿ãã "*" ã®å€
ã¯ãã®å±æ§ããã€å
šãŠã®ãšã¬ã¡ã³ãã衚ãã¯ã€ã«ãã«ãŒãã§ããã
XULElement
XULElement
㯠Element
ãæ¡åŒµãããã®ã§ããã
<xul:window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <broadcaster id="canGoBack"/> <titledbutton src="resource:/res/toolbar/TB_Back.gif" align="bottom" value="Back" onclick="BrowserBack()"> <observes element="canGoBack" attribute="disabled"/> </titledbutton> </window>
getElementsByAttribute
颿°ã¯XULDocument
ã«åãååã®é¢æ°ããããã ãã®ããŒãžã§ã³ã¯äžãããããšã¬ã¡ã³ãã®åºæºãæºãããªããã€äžãããããšã¬ã¡ã³ãã®åå«(CSSã®ã»ã¬ã¯ã¿çšèª)ã§ãã ãšã¬ã¡ã³ãã®ã¿ãè¿ããã®ã§ããã
XULElement
ããŸããXULããã¥ã¡ã³ãããŒãã«ãã£ãŠèªåçã«å®è¡ãããããããŒããã£ã¹ã¿éã仲ä»ãããšããæ©èœ, åŸã£ãŠéåžžã®JavaScriptã§ã¯å©çšãããªãä»ã®ã¡ãœããããµããŒãããã
XUL ãšã¬ã¡ã³ã
äžè¿°ããããã«ãXULãã¡ã€ã«ã¯ãã»ãšãã©XMLã®ææ³ã«åŸã£ãHTMLãã¡ã€ã«ã§ããã XULãã¡ã€ã«ã¯HTMLãšã¬ã¡ã³ãããå«ãã§ããªããããããªãããå®å šã«æ©èœæ¬äœã®ãã®ã§ãããããããªãã ããããXULã§ã¯ããã€ãã®ãšã¬ã¡ã³ãåãç¬èªã«å®çŸ©ããŠããããããã¯ãŠã£ã³ããŠã«æ©èœæ§ã远å ãããã®ã§ããã
ãŠã£ãžã§ãã
ãŠã£ãžã§ããã¯äžè¬ã«ãã¿ã³ãããã¹ãããã¯ã¹ãããªãŒã³ã³ãããŒã«ãªã©ããã©ãŒã ã³ã³ãããŒã«ã®ãããªãªããžã§ã¯ãã§ããã ãŠã£ã³ããŠã«ã¯ä»ã®HTMLã³ã³ãã³ããšåãããã«ç°¡åã«(html
ããŒã ã¹ããŒã¹ã䜿ã£ãŠ) HTML圢åŒã®ãšã¬ã¡ã³ããå«ããããšãã§ããã(ã§ã,ãã®HTMLãšã¬ã¡ã³ãã<form>
ã¿ã°ã§ãããå¿
èŠã¯ãªã) å®éãåãŠã£ãžã§ããã§ã¯ããèªèº«ãèšè¿°ããããããã®XMLææ³ãç¬èªã«å®çŸ©ããŠãã.詳现ã«ã€ããŠã¯ 玢åŒã§åç
§ãããŠãããŠã£ãžã§ããã®ããã¥ã¡ã³ããåç
§ããããã
ä»ã®ã€ã³ãã©
ãŠã£ãžã§ããã¯ã¡ããã©HTMLã®ããã«JavaScriptã€ãã³ããã³ãã©ããã£ãŠããããšãããã ããã¯JavaScriptãšãããŒããã£ã¹ã¿ããŒãã䜿ã£ãŠãäºãã«çµã³ã€ããããŠããã ãããŒããã£ã¹ã¿ããŒãã¯XULèšè¿°ã®äžã§<broadcaster>
ãšã¬ã¡ã³ãã§å®£èšãããŠããã ãŠã£ãžã§ããéã®ç¶æ
å€åã®ãããšãã«å©çšãããã1ã€ããããã¯2,3ã®ãŠã£ãžã§ããã§ãã®ãã¡ã®ïŒã€ã®å±æ§ã®å€ã ãããŒããã£ã¹ã¿ããŒãã«çµã³ã€ããããã«çµã¿åããããããªããšãå¯èœã§ããããã®çµã³ã€ãã¯XULã§ã¯ãã®ããã«å®çŸ©ããã:
<xul:window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <broadcaster id="canGoBack"/> <titledbutton src="resource:/res/toolbar/TB_Back.gif" align="bottom" value="Back" onclick="BrowserBack()"> <observes element="canGoBack" attribute="disabled"/> </titledbutton> </window>
ããã,ãããŒããã£ã¹ã¿ããŠã£ã³ããŠã«é 眮ããããšã¯ã¢ããªã±ãŒã·ã§ã³ã³ãŒã次第ã§ããã ããå¿ èŠã§ããã°ãã¯ããããšãå¯èœã§ããã
ãããŒããã£ã¹ã¿ã¯ããããªç¶æ å€åããããŒããã£ã¹ãããããšãã§ãã ä»ã®XULãŠã£ãžã§ããäžã®å±æ§ã®å€ã«çµã³ã€ããããšãã§ããã ãã詳ããããã¥ã¡ã³ãã«ã€ããŠã¯[broadcasters.html ãããŒããã£ã¹ã¿ãšãªãã¶ãŒã]ãèŠãããšã
ãŠã£ã³ããŠã®äŸ
äžèšã¯å®å šãªã¡ãã¥ãŒããŒãšHTMLã³ã³ãã³ããšãªã¢ããã£ããŠã£ã³ããŠã«ã€ããŠã®èšè¿°ãããå®å šãªXULããã¥ã¡ã³ãã®äŸã§ããã ã¡ãã¥ãŒããŒã«ã¯Fileãšããã¡ãã¥ãŒã1ã€ãããéžæãããšãããã°ã³ã³ãœãŒã«ã«"Hello World!"ãšæžãåºã ã¡ãã¥ãŒã¢ã€ãã ã1ã€ãã£ãŠããã ã³ã³ãã³ããšãªã¢ã«ã¯ãã¡ã€ã« contentframe.htmlã®å 容ã衚瀺ããããã®ã³ãŒãã¯æ¬ããã¥ã¡ã³ãã§ã¯æç¢ºã«ã¯è§ŠããŠããªããã㪠å®éã®ã¢ããªã±ãŒã·ã§ã³ã§ã®ãŠã£ã³ããŠãäœãéã«åœ¹ã«ãã€ããã€ãã®æŠå¿µã玹ä»ããŠããã詳现ã¯ãªã³ã¯ã«åŸãããšã
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!DOCTYPE window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <menubar> <menu name="File"> <menuitem name="Hello World!" onclick="dump('Hello world!\n');"/> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window>
ãã®äŸã®æåããwindowã¿ã°ãŸã§ã¯æšæºã«æºæ ãã[#preamble ããªã¢ã³ãã«]ã§ããã
ãã®äŸã®windowã¿ã°ã«ã¯idãä»äžããŠããããšã«æ³šæãå³å¯èšããšããã®äŸã§ã¯å¿ èŠãªããã®ã§ããã ããããªããå®çšäžãXULã®ã»ãšãã©ã®ããŒãã¯ãã®ãããªéå®åããã£ãŠãããããããããšAOMã® getElementByIdã¡ãœãããå©çšããŠã®æ€çŽ¢ãç°¡åã«ãªãã éå®åã¯ä»ã«ãXULäžã®åã ã®ãšã¬ã¡ã³ãã«å¯ŸãHTMLãšã¬ã¡ã³ããšåã#ææ³ã䜿ã£ãŠåãã«ãŒã«ãé©çšã§ããã®ã§CSSã«ã圹ã«ãã€ã
#main-window { display: block; width: 100%; height: 100%; }
äŸãã°ãäžèšã®ã¹ã¿ã€ã«ã«ãŒã«ã¯ã¡ã€ã³ãŠã£ã³ããŠã«åœãŠã¯ãŸãã ãŠã£ã³ããŠããã®äžã«ã³ã³ãã³ããšãªã¢ãå¹ ãšé«ãããã£ã±ããã£ã±ãã«åãããã«æå®ããŠããã
äŸã®äžã®æ¬¡ã®ãšã¬ã¡ã³ãã¯ã¡ãã¥ãŒããŒã®å®£èšãããŠããããã®ã¡ãã¥ãŒããŒã«ã¯ "File"ãšããã¡ãã¥ãŒã1ã€ããããã®ã¡ãã¥ãŒã«ã¯ã¡ãã¥ãŒã¢ã€ãã ã1〠ãããç°¡åãªJavaScript onclick
ãã³ãã©ãã¡ãã¥ãŒã¢ã€ãã ã«åŒµãä»ããããŠããã ãã®ãã³ãã©ã¯ã¡ãã¥ãŒããŠãŒã¶ã«éžæããããšãã«çºç«ãããããã°çšã³ã³ãœãŒã«ã« "Hello world!" ã®ããã¹ãããã³ãããã(詳现ã¯[menus.html ã¡ãã¥ãŒããŒãšã¡ãã¥ãŒ]ãåç
§ã®ããš)ã
æåŸã«HTML iframe
ããã.frameã¯html:
ã®æ¥é èŸã䌎ãããšã«æ³šæã ããã¯frameãHTMLãªããžã§ã¯ãã§ãã,ããã©ã«ãã®XULããŒã ã¹ããŒã¹ã®äžã§äœ¿ãããŠããããã§ããã grameã«ã¯ä»ã«ãflex
ãšããç¹å¥ã®å±æ§ããã.ããã¯ã©ãã ãã®frameããŠã£ã³ããŠäžã®é åã« åŒã䌞ã°ãããšãã§ãããã瀺ããŠãã(詳现ã«ã€ããŠã¯[boxes.html ããã¯ã¹ã·ã¹ãã ]ãåç
§ã®ããš)ã
çæ³çãªå°æ¥ã®æ¹åæ§
çæ³çã«ã¯XUL UIèšè¿°ã®ããã±ãŒãžã¯ä»¥äžã®ãããª1ã€ã®ãã¡ã€ã«ãšããŠåºè·ãããã®ãæãŸãã:
<?xml version="1.0"?> <?xml-stylesheet href="xul.css" type="text/css"?> <!DOCTYPE package> <package xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <window id="main"> ... </window> <window id="help"> ... </window> </package>
ãããŠãŠã£ã³ããŠ(ãããã¯ä»ã®ãµãŒãã¹)ã¯æåã«ããã±ãŒãžå šäœãããŒãžã³ã°ããŠã次ã«ãã®çµæåŸãããå 容ãããŠã£ã³ã㊠ã«é¢ããæ å ±ãåãåºããŠã€ã³ã¹ã¿ã³ã¹åãããããšããã®ãæãŸããã
Package *package = LoadPackage("http://xxx/package.xul");
InstantiateWindow(package, GetNodeWithID("main");
ãã®çŽ æŽãããä»çµã¿ã¯ä»ã¯ãŸã åããªãããšããã®ã¯ã³ãŒããXMLããã¥ã¡ã³ããããŒãžã³ã°ããçµæã ãŠã£ã³ããŠã§ããããšãæåŸ
ããããã§ããããã£ãŠçŸåšã¯XULãã¡ã€ã«ã«ã¯å°ãªããšã1ã€ã®ãŠã£ã³ããŠãå«ãã§ããªããŠã¯ãªããªãã
<?xml version="1.0"?> <?xml-stylesheet href="xul.css" type="text/css"?> <!DOCTYPE window> <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> ... </window>
æã ã¯å°æ¥ãããã«å€ãã®"ããã±ãŒãž"ãå®è£ ããŠãããããšæãã
åœéå
å®çšäžã®çç±ã«ãã,UIèšè¿°ã«ã€ããŠã®ãã±ãŒã«ã«äŸåãã屿§ã¯ããŒã«ã©ã€ãºã®å¯Ÿè±¡ãšãªã ç¹å®ã®éšåã ãã®UIèšè¿°ã®ãµãã»ãããèšè¿°ããããŒã«ã©ã€ãºåå¥ã®ãã¡ã€ã«ã§ãã£ãšã楜ããã§ éçºããã(ãããŠãããããé åžãããã§ããã)ãããã¯ããŒã«ã©ã€ãºãããæååã®åã ã®ãã¡ã€ã«ã§ããã
åœéåã«ã€ããŠã¯XULã³ãŒãã£ã³ã°ã¹ã¿ã€ã«ã¬ã€ãã©ã€ã³ ã®ããã¥ã¡ã³ãã®äžã§ãã£ãšè©³çްã«è°è«ãããŠãããæçã«èšã£ãŠãMozillaã¯ãã®ã¡ã«ããºã ãšã㊠XMLãšã³ãã£ãã£ãæ¡çšããã ãšã³ãã£ãã£ã¯ãã®èšèªã®1æ©èœã§ããããããã£ãŠæ¬ææžã®æ±ãç¯çãè¶ããŠãããXULãã¡ã€ã«ã¯ãã±ãŒã«ã« å¿ããŠå€åããã³ã³ãã³ãã代ããã«å©çšããããšã§ç°¡åã«ããŒã«ã©ã€ãºãå¯èœã§ããã ããŒã«ã©ã€ãºãããããã¹ãã¯å¥ã®DTD ãããããã¯DTDã®æçã§å®çŸ©ãããŠããªããã°ãªããªããã·ã¹ãã å šäœã¯åãšãªã£ããã±ãŒã«ç¬èªã®DTDã«ãã£ãŠèšå® ããããã®DTDã¯å®è¡æã«ãã®æã®ãã±ãŒã«ã®èšå®ã«ãããã£ãŠæå®ã®XMLãã¡ã€ã«ã«ãã£ãŠéžæãããã Mozillaã¯ãã®éžæãããŒã«ã©ã€ãºãããXMLãã¡ã€ã«ããã®DTDãæå®ããŠããã° XULã®ããŒã«ã©ã€ãºã«é¢ããŠ ã§æŠèª¬ãããŠããããã« chrome URLãçšããŠèªåçã«è¡ãã