Technology Introduction

Mozilla Technology Introduction „ Part A: Web sites with { 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 „ 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 = "

….
{ Currently: about:config and change
„ Network.http.accept.default
… „ text/,application/xml,application/+xml,text/;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 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 { 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:///content/ { Entity like Locale Resource „ chrome://dom/content/dom. { 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 css"?> „ Sample: xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#">