Статьи

Новое окно в приложениях Adobe AIR на основе HTML

Декабрь 27, 2018

Создание настольного приложения с помощью Adobe AIR может быть очень полезным. Независимо от того, являетесь ли вы разработчиком Flash, Flex или JavaScript, создание приложения, которое существует в одном окне, является простым процессом. Однако, как только приложение выходит за границы одного экрана, вы начинаете задумываться, как лучше всего к нему подойти. В этой статье мы рассмотрим доступные варианты и рассмотрим плюсы и минусы каждой ситуации. Ответьте на викторину в конце и начните выигрывать бесплатную копию Adobe CS4 Web Premium и Flex Builder Pro 3!

Параметры окна

Это может быть экран параметров, дополнительный вид или окно документа. Существует множество направлений, в которых может работать приложение, и несколько различных способов решения проблемы:

  • переключить текущий вид
  • создать диалог в стиле лайтбокса
  • использовать родное окно
Переключить текущий вид

Переключение представлений — это один из самых простых способов изменить интерфейс существующего приложения. В приложении HTML вы можете либо загрузить представление в текущий DOM, либо изменить URL-адрес, чтобы он указывал на другую страницу.

Когда я создавал Snitter , он использовал обе эти функции для разных целей. Большинство экранов — это просто элементы div, спрятанные и возвращенные на экран с использованием небольшого количества CSS и JavaScript. При таком подходе вы можете легко анимировать переходы, как на любой HTML-странице.

В случае изменения URL-адреса текущего документа Snitter использует это для обновления представления при применении новой темы. Это может быть немного сложно, потому что вам нужно убедиться, что код инициализации приложения хранится отдельно от перезагрузки экрана.

Приложение Google Analytics использует вкладки для отслеживания недавно загруженных просмотров.

Переключение представлений решает проблему, когда вторичные представления хорошо вписываются в пространство, предоставленное основным представлением (как в случае с Google Analytics).

Диалог в стиле лайтбокса

Лайтбокс — это диалоговое окно, управляемое JavaScript, для которого не требуется новое окно браузера. Он использует наложение, чтобы скрыть содержимое страницы, при этом помещая сверху маленькую центрированную рамку для контента для внимания пользователя. Название происходит от библиотеки, которая впервые реализовала идею: лайтбокс . С появлением блокировщиков всплывающих окон в стандартных веб-браузерах лайтбоксы стали популярным решением проблемы. Они выглядели хорошо (вообще говоря), и они предложили некоторую модальность. Другими словами, содержимое в лайтбоксе имеет приоритет, блокируя исходное содержимое страницы, пока не будет выполнено какое-либо действие.

Эта тенденция сохранилась в приложениях на основе AIR с лайтбоксами, предлагающими возможность создавать быстрые, стилизованные оповещения без дополнительных затрат на создание нового окна.

Однако в приложениях на основе HTML это имеет свои недостатки. В частности, доступ с клавиатуры по-прежнему позволяет пользователям переходить на другие элементы управления, доступные за контентом в лайтбоксе. Это может заставить пользователей выполнять нежелательные действия.

Родное окно

Вероятно, наиболее убедительным подходом является возможность создания новых собственных окон в Adobe AIR через класс NativeWindow . Самый быстрый и эффективный способ создания нового окна HTML здесь — это использовать window.open . Это работает аналогично использованию той же команды в веб-браузере: 

 window.open('newpage.html');

Создается новое окно, и документ HTML загружается в это новое окно. К родительскому окну можно получить доступ через window.opener . Это особенно удобно, если вам нужно облегчить связь между двумя окнами.

Основным недостатком этого подхода является отсутствие опций для нового окна; он всегда будет использовать системный Chrome, даже если ваше приложение разработано без него.

Если вашему приложению нужно использовать пользовательский Chrome, даже для новых окон, вам нужно создать свои собственные собственные окна. К счастью, API Adobe AIR делает это относительно простым (хотя бы немного более многословным). Метод createRootWindow объекта HTMLLoader создает новые окна и позволяет загружать HTML-страницу в этом окне.

Давайте пройдемся по шагам создания нового окна. Первым шагом является определение параметров окна через класс NativeWindowInitOptions . Например, должен ли системный хром использоваться в этом объекте: 

 var options = new air.NativeWindowInitOptions();  options.systemChrome = "none";  options.type = "lightweight";	
var options = new air.NativeWindowInitOptions();  options.systemChrome = "none";  options.type = "lightweight"; 
  Свойство Type имеет три различных параметра: normal , utility и lightweight .  lightweight окно всегда должно сопровождаться systemChrome установленным в none .  Окно utility похоже на normal окно, но имеет немного более узкую строку заголовка и отсутствует на панели задач (как, впрочем, и lightweight окно).  Normal окна появятся на панели задач или в меню Windows в OS X. 


  Если вы создаете панель настроек, вы, вероятно, будете использовать utility или lightweight опции.  Если вы создавали более существенное вторичное окно, такое как экран редактирования документа, вы можете предпочесть, чтобы это окно отображалось на панели задач. 


  Следующим шагом является определение размеров окна путем создания нового Rectangle .  Первые два параметра задают координаты X и Y в верхнем левом углу экрана, а вторые два параметра определяют ширину и высоту соответственно: 


var windowBounds = new air.Rectangle(200,250,300,400); 
  После определения параметров создается новое окно, а новый объект URLRequest указывает путь к нашему локальному файлу, который сопровождает приложение: 


 var newHTMLLoader = air.HTMLLoader.createRootWindow(    true, options, true, windowBounds);  newHTMLLoader.load(new air.URLRequest("newwindow.html")); 


  Мы могли бы остановиться прямо здесь, но есть небольшая разница между тем, как работает window.open по сравнению с тем, как работает createRootWindow : в последнем случае новое окно не может получить доступ к открывающему окну.  К объекту window открытого окна можно получить доступ через свойство window объекта HTMLLoader который был возвращен переменной newHTMLLoader .  Поэтому мы создадим новое свойство с удачным именем opener и установим его в текущее окно: 


 
newHTMLLoader.window.opener = window; 
  Теперь в нашем недавно открытом окне мы можем получить доступ к открывающему окну так же, как если бы мы использовали window.open: 


            
window.opener // accesses the opener window 
  При создании нескольких окон управление памятью может стать проблемой.  Думайте о каждом новом окне как об открытии новой вкладки в вашем браузере. 


  Еще одним преимуществом создания отдельных собственных окон является возможность использовать эффекты Flash на элементах управления HTMLLoader .  Хотя некоторая анимация возможна с помощью CSS и JavaScript, возможность изменить весь HTML-холст с помощью функций изгиба пикселей в Flash 10 может предложить некоторые мощные эффекты.  См. Пример приложения BlackBookSafe в Центре разработчиков Adobe для получения дополнительной информации.
	                                                                      


  Завершение 


  Создание нового окна может быть простым, но у вас есть много вариантов.  Не забудьте выбрать правильное решение для типа окна, которое вы создаете.  Переключение представлений, лайтбоксы и собственные окна - все это полезные инструменты, помогающие расширить ваше приложение за пределы одного экрана. 


  Проверьте свои знания 





  Проверьте себя на содержание этой статьи, выполнив викторину.  Отправьте свои ответы, чтобы получить шанс выиграть бесплатную копию Adobe CS4 Web Premium и Flex Builder 3 Pro.  Пройдите тест сейчас !

38
Share: