WEBVTT 00:00:00.054 --> 00:00:02.961 In this video, I'm going to show you what XPCOM is, and how to use it. 00:00:02.961 --> 00:00:07.795 XPCOM is a technology created by Mozilla, for creating cross platform components. 00:00:07.795 --> 00:00:10.903 It stands for Cross Platform Component Object Model. 00:00:10.903 --> 00:00:15.936 Now what an XPCOM object is, is it's basically just a set of functionality that accomplishes something. 00:00:15.936 --> 00:00:19.171 And what's special about them is these 3 things. 00:00:19.171 --> 00: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. 00:00:28.544 --> 00:00:31.626 Secondly they can be used across different platforms. 00:00:31.626 --> 00:00:36.171 So typically each XPCOM object is supported on Boot2Gecko [Firefox OS], Linux, OSX, Windows, etc. 00:00:36.171 --> 00:00:41.172 And thirdly, it can be used across different programming languages. 00:00:41.172 --> 00:00:45.171 Most commonly C++ and JavaScript, but you can also use Python, 00:00:45.171 --> 00:00:49.211 I believe .NET with Mono and there's probably a bunch of other languages that are supported as well. 00:00:49.211 --> 00:00:53.295 So I'm just going to show you quickly, an example of an XPCOM component. 00:00:53.295 --> 00:00:55.405 And that's the file picker control. 00:00:55.405 --> 00:00:57.938 So if I just hit Control + S on my keyboard. 00:00:57.938 --> 00:01:00.072 You'll see that it comes up right here. 00:01:00.072 --> 00:01:03.535 And this whole file picker is wrapped around an XPCOM component. 00:01:03.535 --> 00:01:07.136 And the browser uses that XPCOM component to tie into the functionality. 00:01:07.136 --> 00:01:09.206 And no matter which operating system you're on. 00:01:09.206 --> 00:01:11.490 The code is the same for handling showing that file picker. 00:01:11.490 --> 00: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. 00:01:18.537 --> 00:01:20.536 So I'm just going to hit Alt to get the menu. 00:01:20.536 --> 00:01:24.240 Go to Tools, Web Developer, Scratchpad. 00:01:24.240 --> 00:01:28.469 And if you haven't seen the Scratchpad video, I recommend watching that first. 00:01:28.469 --> 00:01:31.405 So that you can get this Environment menu up here. 00:01:31.405 --> 00:01:34.989 So next I'm going to go to the environment menu, and I'm going to change this to Browser. 00:01:34.989 --> 00:01:37.936 And it's just saying that this scratchpad executes in the Browser context. 00:01:37.936 --> 00:01:43.736 And that's because otherwise, it's executing in the web page context, which doesn't have access to XPCOM components. 00:01:43.736 --> 00:01:47.824 So the first thing I want to do is show you a list of XPCOM components that are available to you. 00:01:47.824 --> 00:01:50.405 So I'm going to go to Components.classes 00:01:50.405 --> 00:01:55.019 And I'm going to select that and I'm going to go to Inspect. 00:01:55.019 --> 00:02:00.823 And you can see on the right here, here's a list of all the different XPCOM components. 00:02:00.823 --> 00:02:04.157 And you can see there is a ton of them. 00:02:04.157 --> 00:02:07.269 And it has this little Filter properties right here. 00:02:07.269 --> 00:02:09.657 So I'm just going to search for filepicker and see if anything comes up. 00:02:09.657 --> 00:02:15.157 And it does, you can expand it, and see its properties right here. 00:02:15.157 --> 00:02:20.658 There's also something called interfaces. I'm going to go to Components.interfaces just to show you. 00:02:20.658 --> 00:02:22.870 I'm going to Inspect that. 00:02:22.870 --> 00:02:25.536 And this shows you all the different interfaces. 00:02:25.536 --> 00:02:29.905 Now each and every XPCOM component will implement one or more of these interfaces. 00:02:29.905 --> 00:02:37.470 And I say it implements at least one because, every single XPCOM component implements something called: nsISupports. 00:02:37.470 --> 00:02:44.905 Now nsISupports is like IUnknown if you happen to know Win32 COM. 00:02:44.905 --> 00:02:46.937 But if you're not familiar with that, that's fine. 00:02:46.937 --> 00:02:54.405 Basically, all you need to know is this has 3 methods. One is AddRef, one is Release, and one is QueryInterface. 00:02:54.405 --> 00:02:59.905 And QueryInterface is how you can use an XPCOM object to see if it supports any of these different interfaces. 00:02:59.905 --> 00:03:02.804 So let's go ahead and create a file picker XPCOM object. 00:03:02.804 --> 00:03:05.938 So I'm just going to clear this out, and I'm going to create the file picker. 00:03:05.938 --> 00:03:14.189 Components.classes here I just put the ID that we previously obtained. 00:03:14.189 --> 00:03:15.842 @mozilla.org/filepicker;1 00:03:15.842 --> 00:03:21.068 dot createInstance is the method you call to actually create an XPCOM object. 00:03:21.068 --> 00:03:27.760 Components.interfaces.nsIFilePicker 00:03:27.760 --> 00:03:29.760 So you have to pass in the interface right there as well. 00:03:29.760 --> 00:03:31.427 And I can look that up right here. 00:03:31.427 --> 00:03:34.177 nsIFilePicker, and you can see it right there. 00:03:34.177 --> 00:03:37.536 Now another way you can get the interface that corresponds to an object. 00:03:37.536 --> 00:03:41.804 Is obviously using QueryInterface, which I described before from nsISupports. 00:03:41.804 --> 00:03:46.927 Or you can just copy this right here, and paste it in Google, with quotes. 00:03:46.927 --> 00:03:54.805 and usually you'll find an MDN documentation describing how to use that object, and also what the interface methods are. 00:03:54.805 --> 00:03:58.405 So here's the description of what it is right here. 00:03:58.405 --> 00: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. 00:04:03.370 --> 00:04:05.003 And the different attributes. 00:04:05.003 --> 00:04:12.207 So I'm going to go back to the scratchpad, and I'm just going to Inspect that picker control. 00:04:12.207 --> 00:04:19.038 And you can see here all the different methods that are available for us to use. 00:04:19.038 --> 00:04:22.843 So next you would normally read the documentation to see how to use the XPCOM object. 00:04:22.843 --> 00:04:24.370 But I happen to already know. 00:04:24.370 --> 00:04:27.260 So there are 2 important methods. One is called init and one is called show. 00:04:27.260 --> 00:04:28.805 And I'll just show you them up here. 00:04:28.805 --> 00:04:32.928 init function, and actually the next one is called open. 00:04:32.928 --> 00:04:36.236 And you can see the open right there. 00:04:36.236 --> 00: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. 00:04:46.904 --> 00:04:52.403 Components.interfaces.nsIFilePicker.modeOpen 00:04:52.403 --> 00:05:03.927 And then you go picker.open, and this takes a callback function which gets passed a result. 00:05:03.927 --> 00: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. 00:05:16.760 --> 00:05:20.470 And again I didn't need to know any of this. 00:05:20.470 --> 00:05:23.203 I could have just looked at the documentation and then figured it out. 00:05:23.203 --> 00:05:26.571 So I'm just going to hit Run now and see what happens. 00:05:26.571 --> 00:05:32.138 And you see that the first thing that happens is it's asking me to select a file. 00:05:32.138 --> 00:05:33.737 It has the title up there. 00:05:33.737 --> 00:05:36.670 And let's say I select this extra include dot diff file. 00:05:36.670 --> 00:05:38.037 And hit Open. 00:05:38.037 --> 00:05:40.926 And now you can see that it shows that alert that we created. 00:05:40.926 --> 00:05:43.427 File chosen: and then it shows you the file that was chosen. 00:05:43.427 --> 00:05:45.369 So now I hit OK. 00:05:45.369 --> 00:05:50.600 So in this video I showed you what XPCOM is, and how to use one particular component.