Mozilla Technology Introduction Mozilla Technology Introduction Part A: Web sites with Gecko { For Web Authoring { Req.: HTML/CSS/JavaScript NTU CSIE and csie.org Part B: Extending Mozilla: XUL-World! Mozilla Localization: Traditional Chinese { For Mozilla extensions developer Hung-Te Lin 林弘 德 { Req.: XML*/JavaScript Part C: Hack the source icos’03 { For source level programmers { Req.: Programming common sense 1 2 Outline Part A: Web sites with Gecko Websites INCOMPATIBLE! { Presentational Error { Functional Error For Web Authoring { Misc Error Req.: HTML/CSS/JavaScript Writing Good Pages 3 4 1 Pages INCOMPATIBLE!!!!! Presentational Error: Plugins Presentational Error Plugin presentational error { CSS rendering { Flash not transparent no solution until Macromedia fixed it Functional Error { Java cannot display ODBC like Chinese { JavaScript error Incorrect version, or many reasons Misc Error { ActiveX Controls Currently not available { Content-Type Error { Windows Media not playing Must follow Mozilla’s embed rule 5 6 Presentation Error: HTML Tags Presentational Error: CSS!! IE-specific tags like <marquee> CSS is the most common error recently. IE does not support full CSS2 { Solved by XUL+XBL, emulation IE’s ActiveX and filter: is not supported XML/MathML not correct? { IE Alpha filter: filter:alpha(opacity=75); { Maybe DTD not found { Mozilla way: -moz-opacity:0.75; { MathML requires correct Content Type DIV layout box model error { No solution IE has some CSS error { Some hacks can prevent this 7 8 2 Functional Error: Functional Error Common JavaScript Error Use “JavaScript Console” to see if any error occurs, and click VB Script? will bring you to the location of source The most common error is “Cannot find object: XXXX” which { No Solution is due to IE’s syntax. We DO have innerHTML but you must get the object first JavaScript Error? Mozilla has no ‘all’ attribute { You may use all other ways to find elements, actually even { Mostly only small piece of code needs to document.NAME is better. See also: document.getElementById, be modified document.getElementByTagName. There is no “children”. We have childNodes { Fix it if you can access the page, or ask Cannot submit Forms { IE can sometimes just use object’s name to access it. Mozilla is the site maintainer to do so. more restricted. Only forms can use this format for compatible with old pages { Or, Save the page and change it locally 9 10 Functional Error: JavaScript Error -- Sample Misc Error: Content-Type http://www.kingstone.com.tw/, the search is not functional. Mozilla trusts HTTP Header “Content-Type”, while IE trusts on JS Console says “input_form is not defined”, line 122 content preload. Click to view: Situation: downloaded some file and Mozilla treated as plain/text { document.search_form.p19.value = ""; if (input_form.p.value=="") { Solution: alert("請至少輸入一個查詢條件！") } { Update remote magic { Submit is O.K now, but this page has more bugs { Use .htaccess { // ------ Check and fixup incoming data block AddType application/x-msdos-program .xpi if(!document.body.children.incoming.children.properties) { document.all.incoming.innerHTML = "<DIV” …..} I want to view in plain/text? { Will be solved in future { <DIV id=“1”> <div id=“summary”> …. </div> </div> { Currently: about:config and change <DIV id=“2”> Network.http.accept.default <div id=“summary”> … text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/pl You cannot repeat ID. ain;q=0.8,video/x- mng,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1 { …… 11 12 3 The Standards Writing Good Pages What JavaScripts can we use in Use CSS, because you can avoid some Gecko? useless HTML Tables, JavaScript and images. { ECMA262-Edition 3 Try to make your page available to Gecko, { DOM IE, and text-based like lynx { Netscape JavaScript You may choose the best presentation http://www.xulplanet.com/references/elemref/ target, like Gecko and IE JavaScript should run on most browsers 13 14 Q & A Part B: Extending Mozilla: Websites INCOMPATIBLE! XUL-World! { Presentational Error { Functional Error { Misc Error For Mozilla extensions developer Writing Good Pages Req.: XML*/JavaScript 15 16 4 Outline XULPlanet XULPlanet XULPlanet: http://www.xulplanet.com/ XUL: XML, JavaScript, XBL, XPCOM A good tutorial and source for XUL { Writing XUL Programs { Mozilla packages and Layout userChrome and userContent XPInstall, Localization, Themes Sidebar and Sherlock 17 18 XUL: XML and JavaScript XUL: Packaging XUL: pronounced as “zool”, like “cool” Chrome: UI elements in application XML User-interface Language { Content: Windows and Scripts Case sensitive { Skin: Style sheets, images Usually split into: { Locale: Locale and resource { XML/RDF for layout and elements { CSS for style { chrome://<component>/content/<file.xul> { Entity like Locale Resource chrome://dom/content/dom.xul { Scripts (currently most JavaScript) Content Area: request document { Additional images 19 20 5 XUL: Manifest XUL: XUL for a simple window To specify package location <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> Sample: <window id="findfile-window" title="Find Files" orient="horizontal" <?xml version="1.0"?> xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <RDF:RDF <button label="Normal"/> xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <button label="Disabled" disabled="true"/> <RDF:Seq about="urn:mozilla:package:root"> <button label="Default" default="true"/> <RDF:li resource="urn:mozilla:package:findfile"/> </RDF:Seq> </window> <RDF:Description about="urn:mozilla:package:findfile" chrome:displayName="Find Files" chrome:author="Whoever" chrome:name="findfile"> </RDF:Description> Invokation: 1. just browse this xul file and it’ll be shown. </RDF:RDF> 2. If you want to specify the size, use JavaScript and assign. Chrome directory: “installed-chrome.txt” • window.open("chrome://navigator/content/navigator.xul", { content,install,path,/main/calculator/ "bmarks", "chrome,width=600,height=300"); 3. Run mozilla –chrome chrome://….. 21 • resource:// refer to the directory where Mozilla installed22 XUL: Menus XUL: Add Events! (DOM2) <toolbox flex="1"> <menubar id="sample-menubar"> <script src=“blah.js”> <menu id="file-menu" label="File"> <menuitem label=“New" accesskey=“n" <menupopup id="file-popup"> <menuitem label="New"/> oncommand=“alert(‘What\’s new?’);"/> ... <menuitem label="Open"/> <menuitem label="Save"/> <button id="cancel-button" label="Cancel" <menuseparator/> <menuitem label="Exit"/> oncommand="window.close();"/> </menupopup></menu> <menu id="edit-menu" label="Edit"> <menupopup id="edit-popup"> <menuitem label="Undo"/> <menuitem label="Redo"/> </menupopup> </menu> </menubar> </toolbox> 23 24 6 XUL: XBL, XUL: Style it eXtensible Bindings Language Declaring behavior of XUL widgets. HTML styles Limitation of XUL: { <html:table>, <html:br>, …… { You can’t change how elements works CSS Styling Sample: define a new ‘box’ with 3 buttons { <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml version="1.0"?> { Use HTML ‘class=‘ ‘id=‘ and other style <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="binding1"> rules to style your user interface <!-- content, property, method and event descriptions go here --> </binding> </bindings> ----------------------------------------------------------------------------------------------------- 25 scrollbar { -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');26 } XPCOM: Cross-Platform XUL/XBL: Making OO widgets! Component Object Model Limits of XUL JavaScripts: Attribute Inheritance { You cannot access low level APIs XBL Bindings: Solution: { Write native code to do low level API { Content { Provide an interface for JavaScript to call Appearance of widget { Like most OO Models with interface/implementation { Property/Field Using: (ActiveX way) Field: Generated variables like random { Get a component Property: Get/Set { Get the part that implements interface you want { Call the function { Method and event descriptions var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); Action of some event if (!aFile) return false; var LocalFile=aFile.QueryInterface(Components.interfaces.nsILocalFile); 27 28 if (!aLocalFile) return false; 7 Mozilla Themes (Skins) and Locales Why’re Mozilla themes so hard? Change chrome files! The most flexible than others Change Skin/Locale: switch specified package in manifest file. Hardest than others Locales: UTF8 defined in DTD files { Most themes only change toolbar { Use: <button label="&findLabel"/> { Declare: <!ENTITY findLabel "Find"> You have to style all CSS DTD for XUL, and properties for scripts All of these applies to langpacks { In XUL: <stringbundle id="strings" src="strings.properties"/> { In script: var strbundle=document.getElementById("strings"); Themes error may lead to unavailable { In Prop: notFoundAlert=Not found! while langpacks error leads to crash 29 30 XPInstall Mozilla Package and Layout Cross Platform Installation mozilla/bin/ { chrome/ the chrome (XUL) Package your work and make a en-US.jar, en-win/mac/unix.jar, US.jar: locale install.js then name it “.xpi” comm.jar, messenger.jar: content modern.jar, classic.jar: skin Many ways to install it, like Installed-chrome.txt text index chrome.rdf: registered chrome { Javascript: var xpi = {}; xpi[caption]= url; { components/ XPCOM native InstallTrigger.install(xpi);