Introduction to XPCOM and using your first XPCOM component

Tutorial showing you what XPCOM is and how to use it.
http://codefirefox.com

Help us caption & translate this video!

http://amara.org/v/DRhu/

In this video, I'm going to show you what XPCOM is, and how to use it.

XPCOM is a technology created by Mozilla, for creating cross platform components.

It stands for Cross Platform Component Object Model.

Now what an XPCOM object is, is it's basically just a set of functionality that accomplishes something.

And what's special about them is these 3 things.

1. It can be used across different products, so some examples are Thunderbird, Firefox, SeaMonkey, or any other third party product that wants to support it.

Secondly they can be used across different platforms.

So typically each XPCOM object is supported on Boot2Gecko [Firefox OS], Linux, OSX, Windows, etc.

And thirdly, it can be used across different programming languages.

Most commonly C++ and JavaScript, but you can also use Python,

I believe .NET with Mono and there's probably a bunch of other languages that are supported as well.

So I'm just going to show you quickly, an example of an XPCOM component.

And that's the file picker control.

So if I just hit Control + S on my keyboard.

You'll see that it comes up right here.

And this whole file picker is wrapped around an XPCOM component.

And the browser uses that XPCOM component to tie into the functionality.

And no matter which operating system you're on.

The code is the same for handling showing that file picker.

So what I'm going to do in this video, is that I'm going to use the scratchpad and I'm going to interact with that filepicker XPCOM component.

So I'm just going to hit Alt to get the menu.

Go to Tools, Web Developer, Scratchpad.

And if you haven't seen the Scratchpad video, I recommend watching that first.

So that you can get this Environment menu up here.

So next I'm going to go to the environment menu, and I'm going to change this to Browser.

And it's just saying that this scratchpad executes in the Browser context.

And that's because otherwise, it's executing in the web page context, which doesn't have access to XPCOM components.

So the first thing I want to do is show you a list of XPCOM components that are available to you.

So I'm going to go to Components.classes

And I'm going to select that and I'm going to go to Inspect.

And you can see on the right here, here's a list of all the different XPCOM components.

And you can see there is a ton of them.

And it has this little Filter properties right here.

So I'm just going to search for filepicker and see if anything comes up.

And it does, you can expand it, and see its properties right here.

There's also something called interfaces. I'm going to go to Components.interfaces just to show you.

I'm going to Inspect that.

And this shows you all the different interfaces.

Now each and every XPCOM component will implement one or more of these interfaces.

And I say it implements at least one because, every single XPCOM component implements something called: nsISupports.

Now nsISupports is like IUnknown if you happen to know Win32 COM.

But if you're not familiar with that, that's fine.

Basically, all you need to know is this has 3 methods. One is AddRef, one is Release, and one is QueryInterface.

And QueryInterface is how you can use an XPCOM object to see if it supports any of these different interfaces.

So let's go ahead and create a file picker XPCOM object.

So I'm just going to clear this out, and I'm going to create the file picker.

Components.classes here I just put the ID that we previously obtained.

@mozilla.org/filepicker;1

dot createInstance is the method you call to actually create an XPCOM object.

Components.interfaces.nsIFilePicker

So you have to pass in the interface right there as well.

And I can look that up right here.

nsIFilePicker, and you can see it right there.

Now another way you can get the interface that corresponds to an object.

Is obviously using QueryInterface, which I described before from nsISupports.

Or you can just copy this right here, and paste it in Google, with quotes.

and usually you'll find an MDN documentation describing how to use that object, and also what the interface methods are.

So here's the description of what it is right here.

And then it shows which interface it is right here, and then it shows the different methods that are available to you.

And the different attributes.

So I'm going to go back to the scratchpad, and I'm just going to Inspect that picker control.

And you can see here all the different methods that are available for us to use.

So next you would normally read the documentation to see how to use the XPCOM object.

But I happen to already know.

So there are 2 important methods. One is called init and one is called show.

And I'll just show you them up here.

init function, and actually the next one is called open.

And you can see the open right there.

So I'm just going to go picker.init(window, "Select a file", and you pass in the mode, whether it's open or save here.

Components.interfaces.nsIFilePicker.modeOpen

And then you go picker.open, and this takes a callback function which gets passed a result.

And inside I'm not going to put any error checking, but I'm just going to say file chosen is picker.file.path.

And again I didn't need to know any of this.

I could have just looked at the documentation and then figured it out.

So I'm just going to hit Run now and see what happens.

And you see that the first thing that happens is it's asking me to select a file.

It has the title up there.

And let's say I select this extra include dot diff file.

And hit Open.

And now you can see that it shows that alert that we created.

File chosen: and then it shows you the file that was chosen.

So now I hit OK.

So in this video I showed you what XPCOM is, and how to use one particular component.