localization in remote xul

Good Articles about Remote XUL Application

• Remote Application Development with Mozilla - O'Reilly [ part 1, part 2 ]
• XUL - Creating Localizable XML GUI

เจอบทความนี้ตอนที่กำลังหาวิธีทำ Localization สำหรับ Remote XUL อยู่ ( Remote XUL คือการเปิด XUL Application บน Web Server ผ่าน Browser )

สรุปได้ความว่า XUL จะไม่อ่านไฟล์ DTD ที่เก็บข้อความ localization จากที่ url อื่นนอกจาก chrome directory เท่านั้น ... ในขณะที่ Remote XUL ไม่มี chrome directory เพราะฉะนั้น Remote XUL จะไม่มีทางอ่านไฟล์ DTD ได้!!

เท่าที่ลองค้นข้อมูลดู ก็เห็นวิธีแก้ไขปัญหาอยู่เหมือนกัน แต่เป็นวิธีแก้แบบน่าเกลียด อุบาทว์ ทุเรศที่สุด

• ใช้ PHP ดึงข้อมูลในไฟล์ DTD มาแปะไว้ในไฟล์ .xul ตรงๆ โดยใช้ function require(filename) ทำให้ XUL ไม่ต้องไปหาไฟล์ DTD เพราะ PHP จัดการดึงมาแปะให้แล้ว แต่ปัญหาของวิธีนี้สำหรับผมคือ ผมยังหาวิธีทำให้ xul กับ php ทำงานร่วมกันยังไม่ได้เลย! (มันไม่ยอมทำบุญร่วมชาติกันเลยรึไงนะ)
  
• อีกวิธีก็เหมือนกันกับวิธีแรก แต่เราทำตัวเป็น PHP ซะเอง นั่นก็คือ ไม่ต้องใช้ไฟล์ DTD แล้ว คัดลอกเนื้อหาใน DTD มาแปะไว้ในไฟล์ xul นี่แหละ! แล้วเวลาเปลี่ยนภาษา ก็ใช้วิธีเปลี่ยนไฟล์ xul แทน เพราะวิธีนี้ xul 1 ไฟล์ ก็เก็บภาษา 1 ภาษา ... มี 10 ภาษา ก็ต้องใช้ xul 10 ไฟล์ ... แล้วคิดดู ถ้าต้องแก้ไฟล์ xul ... นรก!

ไม่รู้ว่า Mozilla จะจัดการกับปัญหานี้รึเปล่า คือไม่รู้ว่ามันเป็น bug เป็น features ที่ยังไ่ม่ได้ implement หรือเป็นความตั้งใจของ Mozilla เอง (โอ้! ไม่)

remove tab

ถ้าเขียน XUL Application ที่มี tab เราจะต้องจัดการ function ของการ remove tab ด้วยตัวเอง โดยถ้าคิดตามหลักการเขียนโปรแกรม ถ้าไม่เขียนให้ remove tab ก่อนแล้วค่อยเปลี่ยนไป tab ใหม่ ก็ต้องเขียนแบบกลับกันคือเปลี่ยนไป tab ใหม่ก่อน แล้วค่อย remove tab ที่ต้องการ

แต่ทั้ง 2 วิธีข้างต้นนั้น มาใช้จัดการกับการ remove tab ของ XUL ไม่ได้ครับ มันมี bug อยู่

ลองมาดูโครงสร้าง tab ของ XUL กันก่อน

<tabbox>
   <tabs>
      <tab></tab>
   </tabs>
   <tabpanels>
      <tabpanel></tabpanel>
   <tabpanels>
</tabbox>

จะเห็นว่า tabbox มี container อยู่ 2 ตัวคือ tabs และ tabpanels ซึ่ง tab คือ tab bar ที่อยู่ข้างบน ส่วน tabpanel เป็นเนื้อหาของ tab ที่อยู่ด้านล่าง

การจะ remove tab นั้น ต้อง remove ทั้ง tab และ tabpanel ซึ่งในส่วนนี้ อยากจะ remove อันไหนก่อนก็ได้ แต่สิ่งที่ต้องทำตามลำดับ (เพื่อไม่ให้มี bug) นั่นคือลำดับการ remove และการเปลี่ยน tab ปัจจุบัน

function ในการ remove ใน XUL เราสามารถใช้ function ของ DOM ได้เลย นั่นคือ removeChild(element) ส่วนการเปลี่ยน tab นั้น เราใช้การ set ค่า selectedTab และ selectedPanel ของ tabbox ในการบอกว่าตอนนี้ tab ไหนถูกเลือกอยู่

การ remove "tab" นั้น เราต้องเปลี่ยนไป tab ใหม่ก่อน แล้วจึงสั่ง removeChild

ส่วนการ remove "tabpanel" เราต้อง removeChild ก่อน แล้วถึงเปลี่ยนไป tab ใหม่

tabbox.selectedTab = newTab;
tabs.removeChild(oldTab);

tabpanels.removeChild(oldTabpanel);
tabbox.selectedTabpanel = newTabpanel;

ถ้าเราไม่ทำตามนี้ ปัญหาที่เกิดขึ้นมันเป็นปัญหาด้านการ rendering

• tab: tab ด้านบนจะแหว่งไปบางส่วน ซึ่งส่วนนั้นเดิมเป็นส่วนของ tab ที่ถูก remove ไปบังไว้ แต่พอ tab นั้นถูก remove ไปแล้ว ส่วนนั้นกลับยังไม่แสดง เลยทำให้ tab ที่อยู่ข้างๆดูแหว่งไป
  
• tabpanel: ถ้าเราไปเลือก tabpanel ใหม่ก่อน แล้วค่อย remove tabpanel ที่ต้องการ ก็จะทำให้ tabpanel ที่ถูกเลือกใหม่ตอนแรกนั้น แสดงเป็นหน้าโล่ง หลังจากที่เรา remove tabpanel ที่ต้องการไปแล้ว

update! tabbox.selectedTabpanel = newTabpanel ต้องทำเป็นอย่างสุดท้ายเท่านั้น รวมทั้งต้องทำก่อน remove tab และ set selectedTab ด้วย

IIS + PHP + Apache + XUL = CRAP

วันนี้ขอนอกเรื่อง XUL หน่อย แต่ก็เกี่ยวกับ Project ที่ใช้ XUL นี่แหละ

คือกำลังจะทดสอบให้ Browser เปิดไฟล์ XUL ขึ้นมาโดยใช้ PHP อย่างแรกที่ต้องทำก็คือ ติดตั้ง WebServer

ตัวแรกที่แวบขึ้นมาในหัว ไม่ใช่อื่นไกล IIS นั่นเอง เพราะไม่ต้องไป Download โปรแกรมมาติดตั้ง แล้วก็จะใช้แค่ลองทดสอบอะไรง่ายๆ ไม่ได้จะเอาไปใช้งานจริงๆจังๆ ... หลังจากติดตั้ง IIS แล้วก็ถึงคราวของ PHP ซึ่งก็ไป Download ตัวใหม่ล่าสุดมาจากเว็บไซต์ แต่ปรากฏว่า เข้าเว็บ http://www.php.net ไม่ได้! ก็ลองค้นจากอินเตอร์เนตเพื่อหา Mirror ยังไม่ทันจะหาเจอ ก็ปรากฏว่าเว็บเข้าได้แล้ว -_- (เมื่อกี๊เข้าหลายครั้งมากเลยนะ ไม่ใช่ครั้งเดียว)

พอติดตั้ง PHP เข้ากับ IIS เรียบร้อย ก็ทำตามที่เว็บ SitePoint แนะนำ โดยการแก้ไข php.ini เพื่อให้สามารถเขียน php tag ปนกับ xul tag ได้ จากนั้นก็ไฟล์ .htaccess เพื่อทำให้ไฟล์นามสกุล XUL ถูกมองว่าเป็นไฟล์ PHP

หลังจากแก้ไฟล์ php.ini แล้ว จะมาสร้าง .htaccess ก็ปรากฏว่า สร้างไฟล์ชื่อนี้ไม่ได้ เพราะ Windows ไม่ย๊อมไม่ยอมให้มี "." นำหน้าไฟล์ ... ไม่รู้อะไรมากระแทกหัว ความคิดแรกที่ผุดออกมาคือ เปลี่ยนไปใช้ Apache เป็น WebServer ดีกว่า (โปรดอย่าสงสัย บอกแล้วว่ามีอะไรมากระแทกหัว)

ก็ไป Download ไฟล์ Apache Http Server มาติดตั้ง แล้วก็ตามด้วย PHP ซึ่งก็ไปอ่านวิธีติดตั้ง PHP บน Apache ในนั้นบอกว่ามีวิธีติดตั้งอยู่ 2 วิธี คือแบบเป็น CGI กับแบบเป็น Module แบบ CGI เค้าบอกว่ามันเสี่ยงต่อการโดนโจมตี (ด้วยอะไรไม่รู้) ก็เลยใช้วิธีติดตั้งแบบให้ PHP เป็น Module ของ Apache

แล้วปัญหาก็มาอีก คือมี Big Bug ของ PHP 5.1.x ที่ทำให้ไม่สามารถใช้งาน PHP บน Apache 2.2.x ได้!! (หรือเป็น Bug ของ Apache ก็ไม่รู้) ... ใช้งานไม่ได้เลยนะ คือไม่สามารถ start server ได้เลย ... แต่ปัญหานี้ก็มีคนแก้ไขแล้ว โดยเข้าไปดูได้ที่ apachelounge.com ซึ่งในขณะที่กำลังอ่านอยู่นั้น สมองก็เริ่มคิดได้ว่า ถ้าตั้งชื่อไฟล์ .htaccess ไม่ได้ ... มันหมายความว่า Windows มันตั้งชื่อไฟล์นี้ไม่ได้ ไม่ใช่ IIS มันตั้งชื่อไฟล์นี้ไม่ได้! ... อยากโดดถีบตัวเอง -_-

และแล้วก็ไปหาว่าจะใช้ .htaccess ใน Windows ยังไง ก็ได้คำตอบว่า ตั้งเป็นชื่อไฟล์ ht.acl ก็ได้ แต่ไม่แน่ใจว่ามันใช้ได้ เพราะว่าหลังจากใส่ข้อมูลลงไปในไฟล์นี้แล้ว ก็ลองเปิดไฟล์ XUL จาก IIS ดู ก็ยังไม่ได้อยู่ดี ... มันขึ้นมาให้ Download ไฟล์ ไม่ขึ้นเป็น Web Application ... จริงๆในเว็บเค้าก็บอกว่า เค้าใช้ Apache เป็น Web Server นะ แต่ผมดื้อน่ะ อยากใช้ตัวอื่นมากกว่า

แล้วในที่สุดก็เลิกดื้อ ใช้ Apache จนได้ แต่ก่อนนั้น ก็ต้องจัดการกับปัญหาที่ลง PHP บน Apache ไม่ได้ก่อน ซึ่งขั้นตอนก็ไม่ถึงกับยุ่งยาก แต่ก็ไม่ได้สะดวกสบาย ...

พอจัดการเสร็จแล้ว ก็จะแก้ DocumentRoot ของ Apache ให้ชี้ไปที่ๆเก็บไฟล์ไว้อยู่ ... ปรากฏว่าไม่ได้ครับ มันหาไฟล์ไม่เจอ ไม่รู้ทำไม คิดว่าคงต้องแก้หลายที่ ก็เลยแก้กลับเป็นอย่างเดิม แล้ว Copy ไฟล์มาดีกว่า (เลิกดื้อแล้ว) ... จากนั้นก็ Restart WebServer แต่ปรากฏว่าพอเรียก url มันจะเรียกค้างอยู่อย่างนั้น ไม่มีอะไรขึ้นมาเลย ... งงน่ะสิ

ก็ลองแก้ DocumentRoot กลับไปกลับมาก็แล้ว Restart Server ก็แล้ว ลองไปไล่ดูวิธี Install PHP บน Apache ก็แล้ว ก็ไม่เจอจุดที่น่าสงสัยเลย ... เกือบจะถอดใจแล้ว ก็ลอง Stop แล้ว Start Server อีกที ปรากฏว่าได้แฮะ ... สรุปก็ไม่รู้ว่าเป็นเพราะอะไรเหมือนกัน ลองแก้ Configuration ให้เป็นแบบที่ผิด ก็ไม่ได้ผลลัพธ์เหมือนตอนแรก ... งงน่ะสิ

ปัญหายังไม่หมด! หลังจากใช้ PHP บน Apache ได้แล้ว แต่ XUL ล่ะ ... ยังไม่ได้! ทำตามวิธีที่ SitePoint บอกก็ไม่ได้ผล มันขึ้นมาว่า "xml declaration not at start of external entity" แล้วก็ชี้ตรงที่ "" ผมก็ลองหาจาก Google ซักพักใหญ่ บางที่บอกว่าเพราะมี Space อยู่ ลองแก้ดู ก็ไม่ได้ผล ... ก็หาวิธีจนต้องไปแก้ config ของ Apache ให้ไฟล์นามสกุล XUL มี Content-Type เป็น "application/vnd.mozilla.xul+xml" ... ซึ่งตอนแรกเค้าก็ใช้วิธีตั้ง Content-Type ด้วย PHP แต่ในเมื่อมันไม่ได้ผล ก็เลยต้องมาแก้ config แทน ...

สรุปตอนนี้ใช้ได้แล้ว Perfect! ... หลังจากนั่งแก้ นั่งลง ประมาณ 3 ชม. OH! CRAP ...

don't forget namespace

ข้อคิดสำหรับ XBL วันนี้ ... จงอย่าลิมใส่ Namespace xul หน้า tag เด็ดขาด ... ไม่อย่างนั้น ไฟล์ binding ทั้งไฟล์จะใช้ binding ได้ตัวแรกสุดตัวเดียว ตัวถัดๆมาจะไม่แสดงผลอะไรเลย ...

วันนี้นั่งไล่เป็นชม. ไม่รู้ว่าทำไมมันไม่แสดงผล สุดท้ายก็รู้ว่าเกิดจากการที่ลืมใส่ xul: หน้า tag ไป 2 ตำแหน่ง ... กรรมจริงๆ

อยากให้มี xul ide ดีๆจังเลย

เกร็ดเล็กๆน้อยๆ

เริ่มอันแรกด้วยเกร็ดเล็กเกร็ดน้อยดีกว่า

• ถ้าต้องการให้มีไฟล์ xul หลายๆไฟล์มารวมกันขึ้นมา ต้องใช้ Overlays
• xbl เอาไว้ใช้เวลาต้องการสร้าง xul tag ขึ้นมาเป็นของตัวเอง แล้วก็สามารถกำหนด css และ script เฉพาะสำหรับ tag นั้นได้ด้วย
• ถ้าต้องการสร้างตาราง xul มีทางเลือกให้ 2 ทางคือการใช้ listbox และการใช้ tree ซึ่ง tree จะทำอะไรได้หลายอย่างมากกว่า listbox เช่น nested row แต่ element ในแต่ละ cell ก็จำกัดแค่ text กับ image เท่านั้น ต่างกับ listbox ที่สามารถใส่ได้หมด (เช่น textbox)
• tag "script" ที่ไว้ include javascript เข้ามาใน xul ต้องใส่ไว้ภายใน window tag เท่านั้น! ไม่อย่างนั้นก็ error
• widget เกือบทั้งหมด (คิดว่าทั้งหมด) ที่สามารถใส่รูปได้ เช่น toolbarbutton, button, image etc. จะสามารถใช้ css ในการกำหนดที่อยู่ของรูปแทนโดยใช้ list-style-image ทำให้ไฟล์ xul ไม่ดูรก และง่ายต่อการ maintain code ด้วย
• textbox ธรรมดาๆจะไม่สามารถกำหนด border หรือ background ได้ ต้องเปลี่ยน class ของมัน โดยใส่ว่า class="plain" จากนั้นค่อยใช้ stylesheet ในการกำหนดรูปแบบ
• toolbarbutton ไม่สามารถจัดรูปให้อยู่ตรงกลางได้ (หาวิธีไม่เจอจริงๆ) ต้องใช้ padding-left ในการจัดเอาแทน
• ถ้าไม่ต้องการให้ widget นั้นๆขยายขนาดจนเต็ม box ก็มีอยู่ 2 วิธีคือ เอา flex ที่อยู่ระดับชั้นบนออก หรือไม่ก็ใส่ box ครอบ widget นั้นๆเข้าไปอีกที และกำหนดค่า align หรือ pack ด้วย
• xul มี grid เอาไว้ใช้จัด layout ที่มีลักษณะคล้าย grid เช่น form input layout
• widget ใน xul ไม่ได้กำหนดค่า overflow มาให้ ทำให้เวลาลดขนาดหน้าต่าง เมื่อถึงจุดที่ widget ชิดกันหมดแล้ว มันก็จะหายตกขอบไปเลย ไม่มี scrollbar มาให้เลื่อนดู ต้องกำหนดค่า overflow:auto หรืออื่นๆเอาไว้ตรง widget ที่ต้องการให้มี scrollbar
• widget stylesheet classname ใน xul สามารถใส่ pseuso-class :hover ต่อท้ายใน stylesheet เพื่อบอกว่าต้องการแสดงรูปแบบอะไรเมื่อ mouse hover

พอก่อนละ นึกได้จะมาเขียนอีก ตอนนี้กำลังนั่งศึกษา xbl อยู่ ปวดหัวจริงๆ

Start Point

ผมจำไม่ได้แล้วว่ารู้จัก XUL ตั้งแต่เมื่อไหร่ แต่ที่แน่ๆ ตอนนี้กำลังศึกษาและเขียนมันอยู่ ก็ไม่ได้นั่งอ่านหนังสือ แล้วก็งีบหลับอย่างเดียว แต่เอา XUL มาใช้กับงานที่กำลังจะทำเลย มันเป็นงานกึ่งส่วนตัว (งานของที่บ้าน) เป็นระบบ Inventory Systems ซึ่งงานนี้ไม่มีใครมาบังคับว่าต้องใช้อะไรเขียน ขอแค่มันเสร็จและใช้งานได้ แถมยังไม่มีเวลามาจำกัดว่าต้องเสร็จในกี่เดือนด้วย (เลยลากยาว)

ในตอนแรกไม่มีความคิดจะใช้ XUL หรอก ความคิดแรกที่ผุดขึ้นมาในหัวก็แค่เพียงต้องการให้มันเป็น Web Application และก็ว่าจะออกแบบระบบ Interface เอง คือทำ Tab Bar, Menu, Tree, Popup Windows etc. เองทั้งหมด (หรือลอกคนอื่นมาบ้าง) แต่ลงมือทำไปซักเดือนนึง ... ไม่ไหวครับ งานมันเคลื่อนที่ไปช้ามาก เนื่องจากต้องการให้มันสวยด้วย และใช้งานได้ดีด้วย ... ก็เลยท้อไปพักใหญ่

ก็เลยต้องมาเรียนต่อที่อเมริกา ฮ่าๆๆ ไม่ใช่ครับ ... ไม่เกี่ยวกัน ... แต่ก็มาเรียนต่อที่อเมริกาจริงๆ ผลจากการมาอยู่ที่อเมริกาซึ่งเป็นเมืองเทคโนโลยี เลยทำให้นึกถึง XUL ขึ้นมา (ไม่เกี่ยวอีกแล้ว)

จากนั้นก็เริ่มเลยครับ ลองผิด ลองผิด แล้วก็ลองผิด ไปเรื่อยๆ (ไม่รู้ว่าจะถูกเมื่อไหร่) จนตอนนี้ก็ยังเขียนไม่เสร็จหรอกครับ แต่อึดอัด อยากเขียนสิ่งที่ได้เรียนรู้มา

คือไม่ได้ต้องการเขียนหนังสือ หรือ Tutorials หรือแม้แต่ Articles! แต่ต้องการเขียนทั้งความรู้ และความรู้สึก ความยากลำบาก ความทุกทรมาน และบั๊กทุเรศๆ ทุกๆอย่างที่มีไอ้เจ้า XUL เข้ามาเกี่ยวข้อง เท่านั้นเอง!

ว่าแล้วก็เริ่มเขียนเลยดีกว่า ... พรุ่งนี้นะ (นิสัยเดิมมาแล้ว)