|
|
You need to display an additional widow into which additional content can be loaded.
Basic windows can be generated and maintained in a similar fashion as traditional HTML content using the window.open() method.
The JavaScript window.open() method invokes a new window similar to the way it would when used in the browser. Content that gets loaded into the new window can come from a local file, or URL endpoint. Similar to windows created using JavaScript in the browser, there is finite control over the window itself. The window properties that can be controlled are width, height, scrollbars, and resizable.
var login = window.open( 'login.html', 'login', 'width = 300, height = 200' );
A native window is a better choice when additional control over the new window is required. Native windows expose virtually the entire functionality of the operating system, such as control over minimize and maximize functionality, always in front, full screen, and even removal of system chrome altogether. The choice between using window.open() and NativeWindow depends largely on the requirements for the window and the overall portability of the JavaScript source code.
NOTE
You also can use the window.opener property, which is commonly used in JavaScript to refer from a new window to the parent (creating) window.
<html>
<head>
<title>Creating a New Window</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #0B333C;
}
</style>
<script type="text/javascript">
function doLoad()
{
document.getElementById( 'window' ).addEventListener(
'click', doWindow );
}
function doWindow()
{
var login = window.open( 'login.html', null, 'width = 325,
height = 145' );
}
function doLogin( email, pass )
{
alert( 'Welcome: ' + email );
}
</script>
</head>
<body onLoad="doLoad();">
<input id="window" type="button" value="Login" />
</body>
</html>
<html>
<head>
<title>Login</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #0B333C;
}
</style>
<script>
function doLoad()
{
document.getElementById( 'signIn' ).addEventListener(
'click', doSignIn );
}
function doSignIn()
{
var email = document.getElementById( 'email' ).value;
var password = document.getElementById( 'password' )
.value;
window.opener.doLogin( email, password );
}
</script>
</head>
<body onLoad="doLoad();">
<table>
<tr>
<td>Email:</td>
<td><input id="email" name="email" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="password" name="password"
type="password" /></td>
</tr>
<tr>
<td colspan="2" align="right">
<input id="signIn" type="button"
value="Sign In" />
</td>
</tr>
</table>
</body>
</html>
You need to display an additional window into which content can be loaded, and you need to be able to fine-tune how the new window appears.
The HTMLLoader class represents the root content of an HTML-based Adobe AIR application, and has various methods for creating and loading new native windows that require a high degree of customization and control.
Creating and managing native windows with Adobe AIR is highly customizable. As an example, depending on the application requirements, you may want to hide the minimize and maximize buttons. You may also want to control window z-ordering, or force a particular window to always stay on top. The NativeWindow and NativeWindowInitOptions classes offer control over virtually all of these aspects of a native window. Although you can access the native window directly through the window.nativeWindow property, the HTMLLoader class provides much of the functionality for creating new native windows.
Calling HTMLLoader.createRootWindow() returns a reference to the HTMLLoader instance of the newly created window (not the native window itself). The HTMLLoader.createRootWindow() method can take up to four arguments controlling initial visibility, initialization options, scroll bars, and window bounds (i.e., the size and position on the screen). The initialization options are passed through an instance of NativeWindowInitOptions, which must be created and configured prior to creating the new native window. The NativeWindowInitOptions object controls aspects of the window such as whether it is resizable, or even whether it has any system chrome at all. The NativeWindowInitOptions constructor takes no arguments:
var options = new air.NativeWindowInitOptions();
var login = null;
var bounds = new air.Rectangle(
( air.Capabilities.screenResolutionX - 270 ) / 2,
( air.Capabilities.screenResolutionY - 150 ) / 2,
270,
150 );
options.minimizable = false;
options.maximizable = false;
options.resizable = false;
login = new air.HTMLLoader.createRootWindow( false,
options, true, bounds );
All of the arguments for HTMLLoader.createRootWindow() have default values which can be further explored in the Adobe AIR documentation. Not all of the options an application may use appear as initialization options. Additional options that may be controlled on an instance of NativeWindow itself include the window title, and whether it is always in front.
NOTE
In many cases, it is beneficial to start with an invisible window. This will allow the window to size and position itself, load the desired content, and then lay out and render the application without impacting what is displayed. This technique falls into a broader classification that is often referred to as perceived performance and is a very important aspect to consider during development.
Once a reference to the HTMLLoader instance of a new native window is obtained, you can load content into it via the HTMLLoader.load() method. The HTMLLoader.load() method takes a single argument which is a URLRequest instance that points to the HTML content to be loaded into the new window:
<html>
<head>
<title>Creating a New Native Window</title>
<script src="airaliases.js" type="text/javascript"></script>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #0B333C;
}
</style>
<script type="text/javascript">
function doLoad()
{
document.getElementById( 'window' ).addEventListener
( 'click', doWindow );
}
function doWindow()
{
var init = new air.NativeWindowInitOptions();
var bounds = null;
var win = null;
var login = air.File.applicationDirectory.resolvePath
( 'login.html' );
bounds = new air.Rectangle( ( air.Capabilities.
screenResolutionX - 325 ) / 2,
( air.Capabilities.screenResolutionY - 145 ) / 2, 325, 145 );
init.minimizable = false;
init.maximizable = false;
init.resizable = false;
win = air.HTMLLoader.createRootWindow( true, init, false,
bounds );
win.load( new air.URLRequest( login.url ) );
}
</script>
</head>
<body onLoad="doLoad();">
<input id="window" type="button" value="Login" />
</body>
</html>
<html>
<head>
<title>Login</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #0B333C;
}
</style>
<script>
function doLoad()
{
document.getElementById( 'signIn' ).addEventListener
( 'click', doSignIn );
}
function doSignIn()
{
window.nativeWindow.close();
}
</script>
</head>
<body onLoad="doLoad();">
<table>
<tr>
<td>Email:</td>
<td><input id="email" name="email" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="password" name="password" type=
"password" /></td>
</tr>
<tr>
<td colspan="2" align="right">
<input id="signIn" type="button"
value="Sign In" />
</td>
</tr>
</table>
</body>
</html>
For the purpose of enabling more viewing space or enabling additional interactions, your application needs to be able to run using the full screen.
The HTMLLoader class provides the functionality to create new native windows, which, when used in conjunction with the NativeWindowInitOptions class, can create transparent and full-screen native windows.
The difference between using NativeWindowInitOptions for full-screen display and using NativeWindowInitOptions for custom windows is an additional initialization option and setting the window to fill the screen. To remove any OS-specific windowing chrome, use the NativeWindowInitOptions.systemChrome property. The NativeWindowInitOptions.systemChrome property should be set to one of the two string constants found in the NativeWindowSystemChrome class (see Table 4-2).
To create a full-screen window without any chrome, set the NativeWindowInitOptions.systemChrome property to NativeWindowSystemChrome.NONE. Window boundaries that match the full-screen resolution can be passed when calling HTMLLoader.createRootWindow(). The boundaries for the window are passed to the HTMLLoader.createRootWindow() method as a Rectangle object which specifies horizontal and vertical origination, as well as width and height. Depending on the requirements for the application, an alternative approach would be to call NativeWindow.maximize() or to set NativeWindow.bounds directly when system chrome is set to NativeWindowSystemChrome.NONE.
NOTE
If you find yourself confronted with an application that doesn't shut down, but whose visible windows are all closed, you're probably dealing with one of a few different challenges. The first is that you never set a size on a NativeWindow. The second is that you never set a NativeWindow to visible. The most common is that you used NativeWindowSystemChrome.NONE, but never added any content.
<html>
<head>
<title>Creating a Full Screen Window</title>
<script src="airaliases.js" type="text/javascript"></script>
<script type="text/javascript">
function doLoad()
{
var init = new air.NativeWindowInitOptions();
var win = null;
var bounds = new air.Rectangle( 0,
0,
air.Capabilities.
screenResolutionX,
air.Capabilities.
screenResolutionY );
init.minimizable = false;
init.maximizable = false;
init.resizable = false;
init.systemChrome = air.NativeWindowSystemChrome.NONE;
win = air.HTMLLoader.createRootWindow( true, init,
true, bounds );
win.load( new air.URLRequest( 'http://www.adobe.com/
go/air' ) );
}
</script>
</head>
<body onLoad="doLoad();">
</body>
</html>
|
|