Join James Talbot for an in-depth discussion in this video Creating windows, part of AIR 2 with Flash and Flex Essential Training.
Applications often need multiple windows, and AIR allows us to create as many windows as we need for an application without any dependence on the underlying operating system. So we create windows in exactly the same way, whether we're utilizing Windows, Macintosh, or Linux. As long as we're using Adobe AIR, there is no difference between creating windows in all of those different operating systems. We can create windows that look and behave differently based upon our needs, and we can even create custom windows and program them ourselves.
So let's get started. You'll see here that I've imported the ApplicationWindow FXP file. You'll see that there is a source directory here. So go ahead and open up the source directory and then open the default package, and you'll see there is ApplicationWindow1.mxml. Go ahead and just open up this ApplicationWindow1.mxml, as you see here, and you'll see that my root tag here is the WindowedApplication, and you'll see of course there's a blank script block, and then there's also a button here.
Let me go ahead and just run this application. You'll see that this opens up in AIR, and you'll see that there is an Open New Window button. If I currently click on this, it does nothing. What we want to do is when the user clicks on this Open New Window button, we want it to create a brand- new operating system window. So let's go ahead and do that. First thing I want to do is just create the window that it's going to open. So go ahead and use your Components directory here, and right-click on the Components directory, click New, and choose MXML Component.
You'll see that it creates a package here called components. Then for the Name here, let's create a new window, and let's call this window MyWindow1, as you see there. Let's make sure that this window is based off of the window class. So here, I'm just going to simply say Window, and let's make sure that we use the Window - spark.components here. So I'm going to click here. This is utilizing the latest version of the window class, as opposed to the MX version.
Then you're going to say the width of this is 400, and the height of this is 300. That's fine. So go ahead and click Finish. You'll see it creates us a new MyWindow1.mxml in the Components directory. Now again, we're just utilizing this as an example, and in this case we're utilizing Flash Builder. For you Flash developers out there, this works exactly the same way utilizing the AIR APIs. We open up windows in exactly the same way so you may create a button, your own custom button in a SWF file, and you can open up windows in that way.
In this case we're utilizing MXML because we're utilizing Flash Builder, but the same basic principles apply to Flash development as well. So here is my MyWindow1.mxml. Let's go ahead and switch to Design mode, and just add some content here. So the first thing I'd like you to do is scroll down to the Controls, and let's just add a DataGrid to our component so we'll see something when we open this up. We should see that DataGrid, and just as a good practice, let's add in a button here.
We, of course, want to be able to give the user a way to close this window. So give this button an ID of closeButton, and for the Label that the user will see, let's call that Close. In a movie later, we'll actually close this window, so just type in "this.close" for now. We'll write a method called Close that will actually do the closing of this window. So now we've created a simple component. Let's go ahead and just save this component.
Then what I'd like you to do is go back to the ApplicationWindow1.mxml, and of course, when we want this window to open, we want it to open up when the user clicks the button. So let's add a click handler to our button here. So I'm just going to simply say click =, and then I'm going to press the Spacebar, and you'll see it says click - InteractiveObject. So I'm going to click there, and then I'm going to say Generate Click Handler. This is just a timesaving feature of Flash Builder, and what it allows us to do is automatically it builds the method that the Click Handler is going to call.
So you'll see I have my openButton_ clickHandler, you'll see the names match up here, and it's going to simply call this method when the user clicks on that button. It just saves us a lot of typing. So the first thing I want you to do is just go to the top of your clickHandler, and just declare a private variable. So I'm going to say private var, and I'm going to call this window, and I'm going to type this as "Window," as you see there.
So that's going to create my private var window:Window, and you'll see for some reason in this case, it didn't add an import statement. So what I can do is I can click on Window here, and I can type in Ctrl+Space, and you'll see I can click Window, and it says mx.core. Well, that's not the one we use. We use the Spark components. So let's choose Spark, and you should see it automatically adds an import statement there. Now, in most cases, Flash Builder automatically will add that there.
For some reason, it didn't, and just make sure that it says Window here, and it imports this Spark.components.Window, just for those of you checking. I'm sure many of you probably did add that import statement, as you see there. So now that we've done that, let's just go back down to our clickHandler. This is just simply ActionScript 3, so it's exactly the same in Flash or Flex. What I'm going to say is I'm going to say window, I'm going to use the New command, and I'm going to say is equal to MyWindow1.
Then, of course, I have to add my paren, paren there, and you'll see I have MyWindow1window1 Now, you'll see in this case Flash Builder did automatically add the import statement, and this is, of course, a custom component that I wrote, and it's coming from my components directory. This is what we just built. It says import components.MyWindow1, and you'll see it goes directly to this Components directory that you see there. So here I have window = MyWindow1. Then finally, all I have to do is just use the Open command to open this up.
So I'm going to type in the word "window," I'm going to add in a dot, and I'm going to use the open method, just like that, and then type in my paren, parenwindow.open(). So now what should happen is when the user clicks on that button, it's going to call this clickHandler, it's going to create a new object called window, based on this component, it's going to then open up that window. So let's go ahead and just save this. You'll see that it compiles with no problem here. Then I'm going to go ahead and run this application.
You'll see it opens up inside of AIR, and then I'm going to click on Open New Window. You'll see it will open up my new window, and I can drag this window around, like any other operating system window. I can minimize it. You should be able to see that it appears in my taskbar here. You can see that. Both of those appear in my taskbar, because they are Adobe AIR applications. So we have shown how to create a new window inside of an AIR application, and you can see this is done exactly the same way on Windows, Mac, and Linux systems.
That's one of the magic things about Adobe AIR. We're now ready to manipulate these windows, and we can also learn how to change the look and the feel of them in upcoming movies.
- Explaining runtime applications
- Installing and using the Adobe AIR 2 SDK
- Compiling a project in Flash Builder
- Packaging an AIR application in Flash Professional
- Converting a Flex project to an AIR project
- Creating application windows
- Moving and copying files across the operating system
- Opening files in default applications
- Displaying HTML content
- Interacting with other AIR applications
- Using the built-in database
- Securing applications