Changes

Jump to: navigation, search

Real World Mozilla Adding Chrome to FirstXpcom Lab

1,632 bytes added, 15:35, 23 March 2007
no edit summary
[[Dive into Mozilla]] > [[Dive into Mozilla Day 5]] > Adding Chrome to FirstXpcom Lab
 
'''IN PROGRESS...'''
=Introduction=
In the former case we use '''createInstance''', which gives us a new unique instance. In the latter we use '''getService''', which returns a shared instance of an existing component (i.e., a Singleton). Unlike IFirstXpcom, which can be created many times by different callers, the nsIAlertsService is a shared component, because only one pop-up message at a time can be shown to the user.
 
<blockquote>NOTE: Because this is JavaScript and not C++, there is no need to recompile or start/stop the browser when you make a change to your files. Using the [http://ted.mielczarek.org/code/mozilla/extensiondev/index.html Extension Developer's extension], you can simply reload all chrome: '''Tools > Extension Developer > Reload All Chrome'''</blockquote>
== Creating the dialog ==
</pre>
When the menu item is clicked, the dialog will be shown and the values the user enters returned. The '''showDialog''' function begins by packaging up IN (we use '''inn''' because '''in''' is a keyword in JavaScript) and OUT variables. This allows us to pass multiple variables from/to the dialog. In this case, we pass the value of our component's '''name''' attribute to the dialog, so it can be displayed in a textbox for editing. The '''out''' variable will contain the updated values as entered in the dialog's textboxes (the code to do this will be discussed shortly).
We actually display the dialog using '''window.openDialog''', which takes a URI to our dialog's XUL file, as well as a list of options (e.g., dialog is modal, resizable, etc.) and our '''params''' object, containing the inn and out variables. Execution will block on '''focus()''' until the user clicks OK or Cancel, or closes the window.
Here's the complete XUL file for our dialog, this time with the JavaScript added:
window.arguments[0].out = {name:nameValue, value:increaseValue};
return true;
}
</script>
</pre>
In the dialog element we've wired the '''onLoad''' and '''onOK''' functions. The '''onLoad''' function is used to extract the parameters passed in with the call to '''window.openDialog()''' and set values in the UI.
The '''onOK''' function occurs when the user clicks the accept button (i.e., OK). When this happens the values from the textboxes are obtained and packaged up in the '''out''' parameter we sent in earlier. This is how we pass values back to the main window, and our extension code in '''firstxpcomchrome'''.
= Integrating with the build systetm =
TODO -- see http://developer.mozilla.org/en/docs/JAR_Manifests for a discussion of jar.mn files in the build system.
=Reflections=
=Reflections=We've now gone through a complete cycle, first developing a C++ XPCOM component, then writing unit tests and throw-away code in the JavaScript shell, before finally creating a complete XUL/JS extension with a custom UI. The lessons learned along the way are useful even if you don't plan on doing all of it again: C++ developers have gained an awareness of the types of issues XUL/JS developers will face; and XUL/JS developers have a better understanding of what is happening when they use components and interfaces through script. This simple component and extension can be used as the foundation for your next extension project. We've really only scratched the surface.
=Resources=
* [http://developer.mozilla.org/en/docs/Extensions Extensions on MDC]
* [http://kb.mozillazine.org/Extension_development Extension Development on Mozillazine]
* [http://developer.mozilla.org/en/docs/XUL_Event_Propagation XUL Event Propagation]

Navigation menu