adobe air 工程师

tech2024-01-14  70

adobe air 工程师

Creating a desktop application with Adobe AIR can be an empowering experience. Whether you’re a Flash, Flex, or JavaScript developer, building an application that exists within a single window is a straightforward process. Once an application outgrows the bounds of a single screen, however, you’ll begin to wonder how best to approach it. This article will take a look at the options available and consider the pros and cons of each situation. Answer the quiz at the end and be in the running to win a free copy of Adobe CS4 Web Premium and Flex Builder Pro 3!

使用Adobe AIR创建桌面应用程序可能是一种授权体验。 无论您是Flash,Flex还是JavaScript开发人员,构建存在于单个窗口中的应用程序都是一个简单的过程。 但是,一旦应用程序超出了单个屏幕的范围,您就会开始想知道如何最好地实现它。 本文将介绍可用的选项,并考虑每种情况的利弊。 最后回答测验 ,并参加竞赛 ,赢取Adobe CS4 Web Premium和Flex Builder Pro 3的免费副本!

视窗选项 (Window Options)

It might be an options screen, or a secondary view, or a document window. There are many directions that an application can take and a few different ways in which to solve the problem:

它可能是选项屏幕,辅助视图或文档窗口。 应用程序可以采取许多指示,以及解决问题的几种不同方法:

switch the current view

切换当前视图 create a lightbox-style dialog

创建灯箱式对话框 use a native window

使用本机窗口
切换当前视图 (Switch the Current View)

Switching views is one of the easiest ways to change the interface of an existing application. Within an HTML application, you can either load the view into the current DOM or change the URL to point to another page.

切换视图是更改现有应用程序界面的最简单方法之一。 在HTML应用程序中,您可以将视图加载到当前DOM中,也可以将URL更改为指向另一个页面。

When I built Snitter, it used both of these features for different purposes. Most screens are simply div elements hidden away and brought back into view using a little CSS and JavaScript. With this approach, you can easily animate the transitions as you would on any HTML page.

当我构建Snitter时 ,它同时将这两个功能用于不同的目的。 大多数屏幕只是隐藏的div元素,并使用一些CSS和JavaScript带回到视图中。 使用这种方法,您可以像在任何HTML页面上一样轻松地为过渡设置动画。

In the case of changing the URL of the current document, Snitter uses this to refresh the view when a new theme is applied. This can be a little tricky because you need to make sure that the application initialization code is kept separate from the screen reloading.

如果更改了当前文档的URL,则在应用新主题时,Snitter会使用它来刷新视图。 这可能有点棘手,因为您需要确保应用程序初始化代码与屏幕重新加载保持分开。

The Google Analytics application uses tabs to track the newly loaded views.

Google Analytics(分析)应用程序使用标签来跟踪新加载的视图。

View switching solves the issue when the secondary views fit in well with the space provided by the main view (as is the case with Google Analytics).

当辅助视图与主视图提供的空间完全吻合时(例如Google Analytics(分析)),视图切换解决了该问题。

灯箱式对话框 (A Lightbox-style Dialog)

A lightbox is a JavaScript-driven dialog box, that does not require a new browser window. It uses an overlay to obscure page content while placing on top a small, centered content box for the attention of the user. The name originates from the library that first implemented the idea: Lightbox. With the advent of popup blockers in standard web browsers, lightboxes became popular as a workaround. They looked good (generally speaking) and they offered some modality. In other words, the content within the lightbox had priority, blocking out the original page content until some action was performed.

灯箱是JavaScript驱动的对话框,不需要新的浏览器窗口。 它使用覆盖层遮盖页面内容,同时将一个小的居中内容框放在顶部以引起用户注意。 该名称源自首先实现该想法的库: Lightbox 。 随着标准Web浏览器中弹出窗口阻止程序的出现,灯箱已成为一种变通方法。 他们看起来不错(通常来说),并且提供了一些形式。 换句话说,灯箱内的内容具有优先权,会阻止原始页面内容,直到执行某些操作为止。

This trend has continued into AIR-based applications with lightboxes offering the ability to do quick, stylized alerts without the overhead of instantiating a new window.

这种趋势一直持续到带有灯箱的基于AIR的应用程序中,该灯箱提供了快速进行程式化警报的功能,而无需实例化新窗口。

Within HTML-based applications though, this has its downfalls. In particular, keyboard access still allows users to tab through to other controls available behind the content in the lightbox. This can cause users to perform unwanted actions.

但是,在基于HTML的应用程序中,这有其缺点。 特别是,键盘访问仍然允许用户在灯箱内容背后的其他选项卡之间切换。 这可能导致用户执行不需要的操作。

本机窗口 (Native Window)

Probably the most compelling approach is the ability to instantiate new native windows within Adobe AIR through the NativeWindow class. The quickest, most efficient way to instantiate a new HTML window here is to use window.open. This works similar to using the same command in a web browser:

也许最引人注目的方法是能够通过NativeWindow类在Adobe AIR中实例化新的本机窗口。 在此处实例化新HTML窗口的最快,最有效的方法是使用window.open 。 这类似于在Web浏览器中使用相同的命令:

window.open('newpage.html');

A new window is created and a HTML document is loaded in that new window. The parent window can be accessed via window.opener. This is especially handy if you need to facilitate communication between the two windows.

创建一个新窗口,并在该新窗口中加载HTML文档。 可以通过window.opener访问父窗口。 如果您需要促进两个窗口之间的通信,这尤其方便。

The major downfall to this approach is the lack of options for the new window; it’ll always use system chrome, even if your application is designed without it.

这种方法的主要缺点是缺乏新窗口的选项; 即使您的应用程序设计时没有它,它也将始终使用系统镶边。

If your application needs to use custom chrome, even for new windows, then you’ll need to create your own native windows. Thankfully, Adobe AIR’s API makes this relatively straightforward (if just a little more verbose). The createRootWindow method of the HTMLLoader object creates new windows and allows a HTML page to be loaded within that window.

如果您的应用程序需要使用自定义镶边,即使是用于新窗口,则需要创建自己的本机窗口。 值得庆幸的是,Adobe AIR的API使此操作相对简单(如果稍微冗长一些)。 HTMLLoader对象的createRootWindow方法创建新窗口,并允许在该窗口中加载HTML页面。

Let’s go through the steps of instantiating a new window. The first step is to define the window options via the NativeWindowInitOptions class. For example, whether system chrome should be used would be defined in this object:

让我们完成实例化新窗口的步骤。 第一步是通过NativeWindowInitOptions类定义窗口选项。 例如,将在此对象中定义是否应使用系统镶边。

var options = new air.NativeWindowInitOptions(); options.systemChrome = "none"; options.type = "lightweight";

The Type property has three different options: normal, utility, and lightweight. A lightweight window must always be accompanied with systemChrome set to none. A utility window is like a normal window but has a slightly narrower title bar and is absent from the taskbar (as is a lightweight window, for that matter). Normal windows will appear in the taskbar or the Windows menu in OS X.

If you're creating a settings panel, you'd likely use the utility or lightweight options. If you were creating a more substantial secondary window like a document edit screen, you may prefer having that window displayed on the taskbar.

The next step is to define the dimensions of the window by creating a new Rectangle. The first two parameters set the X and Y coordinates from the top-left corner of the screen, while the second two parameters define the width and height respectively:

var options = new air.NativeWindowInitOptions(); options.systemChrome = "none"; options.type = "lightweight";

The Type property has three different options: normal , utility , and lightweight . A lightweight window must always be accompanied with systemChrome set to none . A utility window is like a normal window but has a slightly narrower title bar and is absent from the taskbar (as is a lightweight window, for that matter). Normal windows will appear in the taskbar or the Windows menu in OS X.

If you're creating a settings panel, you'd likely use the utility or lightweight options. If you were creating a more substantial secondary window like a document edit screen, you may prefer having that window displayed on the taskbar.

The next step is to define the dimensions of the window by creating a new Rectangle . The first two parameters set the X and Y coordinates from the top-left corner of the screen, while the second two parameters define the width and height respectively:

翻译自: https://www.sitepoint.com/html-based-adobe-air/

adobe air 工程师

相关资源:针对 HTML 开发人员的 Adobe AIR 语言参考(chm)
最新回复(0)