0:00:00.054,0:00:02.961
In this video, I'm going to show you what XPCOM is, and how to use it.

0:00:02.961,0:00:07.795
XPCOM is a technology created by Mozilla, for creating cross platform components.

0:00:07.795,0:00:10.903
It stands for Cross Platform Component Object Model.

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

0:00:15.936,0:00:19.171
And what's special about them is these 3 things.

0:00:19.171,0:00:28.544
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.

0:00:28.544,0:00:31.626
Secondly they can be used across different platforms.

0:00:31.626,0:00:36.171
So typically each XPCOM object is supported on Boot2Gecko [Firefox OS], Linux, OSX, Windows, etc.

0:00:36.171,0:00:41.172
And thirdly, it can be used across different programming languages.

0:00:41.172,0:00:45.171
Most commonly C++ and JavaScript, but you can also use Python,

0:00:45.171,0:00:49.211
I believe .NET with Mono and there's probably a bunch of other languages that are supported as well.

0:00:49.211,0:00:53.295
So I'm just going to show you quickly, an example of an XPCOM component.

0:00:53.295,0:00:55.405
And that's the file picker control.

0:00:55.405,0:00:57.938
So if I just hit Control + S on my keyboard.

0:00:57.938,0:01:00.072
You'll see that it comes up right here.

0:01:00.072,0:01:03.535
And this whole file picker is wrapped around an XPCOM component.

0:01:03.535,0:01:07.136
And the browser uses that XPCOM component to tie into the functionality.

0:01:07.136,0:01:09.206
And no matter which operating system you're on.

0:01:09.206,0:01:11.490
The code is the same for handling showing that file picker.

0:01:11.490,0:01:18.537
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.

0:01:18.537,0:01:20.536
So I'm just going to hit Alt to get the menu.

0:01:20.536,0:01:24.240
Go to Tools, Web Developer, Scratchpad.

0:01:24.240,0:01:28.469
And if you haven't seen the Scratchpad video, I recommend watching that first.

0:01:28.469,0:01:31.405
So that you can get this Environment menu up here.

0:01:31.405,0:01:34.989
So next I'm going to go to the environment menu, and I'm going to change this to Browser.

0:01:34.989,0:01:37.936
And it's just saying that this scratchpad executes in the Browser context.

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

0:01:43.736,0:01:47.824
So the first thing I want to do is show you a list of XPCOM components that are available to you.

0:01:47.824,0:01:50.405
So I'm going to go to Components.classes

0:01:50.405,0:01:55.019
And I'm going to select that and I'm going to go to Inspect.

0:01:55.019,0:02:00.823
And you can see on the right here, here's a list of all the different XPCOM components.

0:02:00.823,0:02:04.157
And you can see there is a ton of them.

0:02:04.157,0:02:07.269
And it has this little Filter properties right here.

0:02:07.269,0:02:09.657
So I'm just going to search for filepicker and see if anything comes up.

0:02:09.657,0:02:15.157
And it does, you can expand it, and see its properties right here.

0:02:15.157,0:02:20.658
There's also something called interfaces. I'm going to go to Components.interfaces just to show you.

0:02:20.658,0:02:22.870
I'm going to Inspect that.

0:02:22.870,0:02:25.536
And this shows you all the different interfaces.

0:02:25.536,0:02:29.905
Now each and every XPCOM component will implement one or more of these interfaces.

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

0:02:37.470,0:02:44.905
Now nsISupports is like IUnknown if you happen to know Win32 COM.

0:02:44.905,0:02:46.937
But if you're not familiar with that, that's fine.

0:02:46.937,0:02:54.405
Basically, all you need to know is this has 3 methods. One is AddRef, one is Release, and one is QueryInterface.

0:02:54.405,0:02:59.905
And QueryInterface is how you can use an XPCOM object to see if it supports any of these different interfaces.

0:02:59.905,0:03:02.804
So let's go ahead and create a file picker XPCOM object.

0:03:02.804,0:03:05.938
So I'm just going to clear this out, and I'm going to create the file picker.

0:03:05.938,0:03:14.189
Components.classes here I just put the ID that we previously obtained.

0:03:14.189,0:03:15.842
@mozilla.org/filepicker;1

0:03:15.842,0:03:21.068
dot createInstance is the method you call to actually create an XPCOM object.

0:03:21.068,0:03:27.760
Components.interfaces.nsIFilePicker

0:03:27.760,0:03:29.760
So you have to pass in the interface right there as well.

0:03:29.760,0:03:31.427
And I can look that up right here.

0:03:31.427,0:03:34.177
nsIFilePicker, and you can see it right there.

0:03:34.177,0:03:37.536
Now another way you can get the interface that corresponds to an object.

0:03:37.536,0:03:41.804
Is obviously using QueryInterface, which I described before from nsISupports.

0:03:41.804,0:03:46.927
Or you can just copy this right here, and paste it in Google, with quotes.

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

0:03:54.805,0:03:58.405
So here's the description of what it is right here.

0:03:58.405,0:04:03.370
And then it shows which interface it is right here, and then it shows the different methods that are available to you.

0:04:03.370,0:04:05.003
And the different attributes.

0:04:05.003,0:04:12.207
So I'm going to go back to the scratchpad, and I'm just going to Inspect that picker control.

0:04:12.207,0:04:19.038
And you can see here all the different methods that are available for us to use.

0:04:19.038,0:04:22.843
So next you would normally read the documentation to see how to use the XPCOM object.

0:04:22.843,0:04:24.370
But I happen to already know.

0:04:24.370,0:04:27.260
So there are 2 important methods. One is called init and one is called show.

0:04:27.260,0:04:28.805
And I'll just show you them up here.

0:04:28.805,0:04:32.928
init function, and actually the next one is called open.

0:04:32.928,0:04:36.236
And you can see the open right there.

0:04:36.236,0:04:46.904
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.

0:04:46.904,0:04:52.403
Components.interfaces.nsIFilePicker.modeOpen

0:04:52.403,0:05:03.927
And then you go picker.open, and this takes a callback function which gets passed a result.

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

0:05:16.760,0:05:20.470
And again I didn't need to know any of this.

0:05:20.470,0:05:23.203
I could have just looked at the documentation and then figured it out.

0:05:23.203,0:05:26.571
So I'm just going to hit Run now and see what happens.

0:05:26.571,0:05:32.138
And you see that the first thing that happens is it's asking me to select a file.

0:05:32.138,0:05:33.737
It has the title up there.

0:05:33.737,0:05:36.670
And let's say I select this extra include dot diff file.

0:05:36.670,0:05:38.037
And hit Open.

0:05:38.037,0:05:40.926
And now you can see that it shows that alert that we created.

0:05:40.926,0:05:43.427
File chosen: and then it shows you the file that was chosen.

0:05:43.427,0:05:45.369
So now I hit OK.

0:05:45.369,0:05:50.600
So in this video I showed you what XPCOM is, and how to use one particular component.