Эй, автор сценариев!В сценариях, как и в жизни, внешний вид очень важен

Сотрудники группы Microsoft Scripting Guys

В течение сотен и даже тысяч лет философы и мудрецы говорили нам, что мнение о ком-либо или чем-либо не должно основываться только на внешнем виде. (Не то, чтобы мы должны судить людей по своему мнению; как-никак красота – это глаз наблюдателя.) Вы знаете, что они говорят: «Настоящая красота внутри, а не снаружи, и то, что вы собой представляете, гораздо важнее внешнего вида».

К этом программисты могут добавить только одно: вздор.

Верно, вздор. Авторы сценариев из группы Scripting Guys первыми признали, что в идеальном мире внешний вид не имеет значения. Однако мы живем не в идеальном мире. В противном случае картофель фри и мороженое с горячим шоколадом стали бы двумя главными продуктами питания. Нравится вам это или нет, но внешний вид важен. И это особенно верно для сценариев.

Программисты, пишущие сценарии, знают, что немногие прослезятся при виде абсолютной красоты сценария VBScript, запущенного в командной строке. (Может быть, автор сценариев Дин Цальтас, но он единственный, кто приходит на ум.)

С другой стороны также верно, что в нашем высокотехнологичном мире программисты больше не ограничены написанием сценариев, запускаемых в программной строке. Благодаря приложениям HTML (HTA) программисты могут использовать возможности DHTML для создания графических интерфейсов для своих сценариев. Те же самые навыки работы с HTML могут использоваться для создания мини-приложений Windows Vista™, новой области, которое обладает потенциалом для революционного изменения всей области сценариев для системных администраторов, как она нам известна. Заметили? Как только начинается разговор о графических интерфейсах, все старые избитые идеи о красоте как о поверхностном понятии пропадают. Для сценариев, работающих в графической среде, внешний вид настолько же важен, насколько функции и производительность.

И это проблема. В конце концов, что мы, авторы сценариев, знаем о создании графических интерфейсов? Похоже, нам не везет, не так ли?

Возможно. Но опять же, может быть и нет. Только что ведь кто-то сказал: «К счастью, существуют авторы сценариев из группы Scripting Guys»?

На самом деле нет. Мы разве не слышали, как только что кто-то это сказал? Может быть кто-то пробормотал это или что-нибудь еще...

Это неважно. Кто-то обязательно должен быть сказать подобное, потому что авторы сценариев из группы Scripting Guys призваны оказывать поддержку (нужна она вам или нет).

Для начала работы с прекрасным миром графических интерфейсов давайте взглянем на начало небольшого простого приложения HTA. (Для получения дополнительных сведений о создании HTA посетите HTA Developers Center (Центр разработчиков HTA).)

На рис. 1 показана первая часть новой настольной информационной системы. Как вы видите, я начал с добавления небольшой графики в правом верхнем углу окна HTA. Идея заключалась в том, что при первой загрузке HTA выполняется получение имени вошедшего пользователя, а затем его имя и имя компьютера отображаются на этом изображении. Позднее мы добавим в HTA еще много интересного, но, как бы они сказали, начнем с начала.

Рис. 1** Начало вашего довольно привлекательного графического интерфейса HTA **

Однако мы не знаем, кто такие «они». Возможно, кто-то из философов. Вероятно, Вольтер. Это очень похоже на то, что мог сказать Вольтер.

Разумеется, это довольно привлекательное небольшое приложение и его...красота...никогда не заставит прослезиться автора сценариев Дина. Но оно служит в качестве полезного демонстрационного средства, основной принцип которого применим к множеству других ситуаций. Как-никак, множество подобных напыщенных мини-приложений Windows Vista работает на сходном принципе; они просто отображают причудливую графику (например, средство измерений или наборный диск), а затем помещают на эту графику текст. Это выглядит как небольшая привлекательная фишка для обозначения свободного места на диске, и если оно заканчивается, на общую графику накладывается динамический текст.

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

Существует одна проблема с тем, что сначала отображается графика, а затем на ней – текст: это не работает. Вместо этого с помощью простой разметки HTML получим то, что показано на рис. 2. Не совсем то, что мы задумывали. Возможно, Ницше, который сказал, что «люди никогда не смогут поместить текст на графику, по крайней мере не в HTA», был прав.

Рис. 2** Первая попытка наложения текста **

Или, возможно, Ницше ошибался: разве кто-то только что не сказал – ладно, неважно. Как выяснилось, мы не может сделать то, что необходимо, с помощью обычного кода HTML; он просто не работает подобным образом. Конечно, теоретически мы можем сделать графику фоном, а затем использовать таблицы, неразрывные пробелы и всевозможные хитрости, чтобы попробовать наложить на нее текст. Но есть веская причина сказать «теоретически»; за исключением самых простых случаев эта стратегия никогда не работает.

Как выяснилось, существует гораздо лучший способ создания привлекательных макетов в HTA или мини-приложениях Windows Vista: таблицы стилей, лучше известные как CSS.

CSS используются для определения шрифтов, полей и выравниваний, цветов и других аспектов отображения документа. (В частности, это применяется к веб-страницам. Однако, поскольку HTA и мини-приложения по своей сути являются исключительно веб-страницами, CSS могут использоваться так же успешно и для них.) Мы даже не можем начать рассмотрение всех возможностей CSS, поэтому, если вам нужно, ознакомьтесь с дополнительными сведениями на веб-узле CSS reference documentation (Справочная документация CSS) в библиотеке MSDN®. Сейчас достаточно сказать, что можно использовать CSS для точного управления макетом приложения HTA, включая возможность наложения одного элемента (текста) на другой (графика).

Мы объясним, как все это выполняется. Но прежде чем мы начнем объяснение, давайте взглянем на код очень простого приложения HTA, показанного на рис. 3.

Figure 3 Наконец, у нас есть сценарий...

<SCRIPT LANGUAGE=”VBScript”>

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
 “<font style=’font-size:18pt;color:white’>” & _
 strUser & “<br>” & strComputer & “</font></p>”
End Sub

</SCRIPT>

<img src=“test2.jpg“ align=“right“>
<span id=UserData style=“position:absolute;left:770px;top:150px“></span>

Как вы видите, здесь все совсем другое. Подпрограмма Window_OnLoad (на основе имени) автоматически выполняется при каждом запуске или обновлении HTA. Мы обсудим эту подпрограмму через минуту. Кроме того, имеются два элемента HTML: графика и диапазон. Как вы, несомненно, знаете, мы использовали эту разметку для вставки графики, используя атрибут выравнивания для размещения графики в правой части окна:

<img src=”test2.jpg” align=”right”>

Это приводит нас к разметке HTML для диапазона:

<span id=UserData style=”position:absolute;
left:770px;top:150px”></span>

Итак, здесь мы использовали тег диапазона. Что же такое тег диапазона? По существу, диапазон – это простая область HTA с названием; это «отмеченная» часть окна HTA, которую можно определить программно (во основном, потому, что диапазону был дан идентификатор UserData). После настройки диапазона можно написать подпрограмму назначения диапазону текста или кода HTML. Фактически, мы не просто можем это сделать, в нашем HTA мы сделали именно это.

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

style=”position:absolute;left:770px;top:150px”

Этот параметр, как вы, вероятно, подозреваете, является ключевым фактором для успешного размещения динамического текста поверх графики. Здесь мы фактически указываем три различных атрибута стиля.

Position Мы указываем HTA, чтобы диапазон размещался абсолютно. Это в действительности значит, что диапазон должен всегда находиться в одном месте, даже если это означает, как в этом случае, что текст размещается на другом элементе (как, например, графике).

Left Указывается расположение диапазона относительно левого края окна HTA. В данном случае диапазон начинается в 770 пикселах (770px) от левого края.

Top Этот параметр сходен с атрибутом Left, за исключением того, что положение диапазона указывается относительно верхнего края окна HTA. В данном случае для начала размещения диапазона мы хотим начать с верхнего края окна и отсчитать 150 пикселов вниз (150px).

Как мы узнали, что необходимо установить левую сторону диапазона на расстоянии 770 пикселов, а правую – на расстоянии 150 пикселов? Если сказать правду, мы не выясняли это. Вместо этого мы сделали предположение; мы разместили графику на странице и присвоили значения атрибутам Left и Top диапазона. Затем мы открыли HTA и посмотрели на результаты. Как вы могли ожидать, мы немного ошиблись, поэтому мы изменили значения, обновили HTA и снова посмотрели результаты. Мы повторили это несколько раз, как Маша из сказки про трех медведей, и нашли верные значения.

Примечание. Вы знаете сказку о Маше и медведях, об их стульях, кроватях и ложках, которые были слишком большими или слишком маленькими и т.д. Нет, мы не уверены, может ли эта девочка считаться великим философом или нет. Но вы можете сказать, что то, как она беспрепятственно проникла в дом медведей, ела их похлебку, сидела на их стульях и спала в их кроватях, определенно свидетельствует о наличии собственной уникальной философии.

В любом случае, на рис. 4 показан вид HTA на данный момент. Разумеется, это, возможно, и не произведение искусства, но опять же, я бы посмотрел на Пикассо, программными методами выполняющего размещение информации на графике.

Рис. 4** Посмотрите на силу стиля **

Кстати, говоря о стиле, как же мы программно разместили информацию на графике? У нас есть хорошие новости: наконец настал момент поговорить о подпрограмме Window_OnLoad, которая показана на рис. 5.

Figure 5 Подпрограмма Window_OnLoad

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
  “<font style=’font-size:18pt;color:white’>” & _
  strUser & “<br>” & strComputer & “</font></p>”
End Sub

Что же, если мы рассмотрим эту подпрограмму более подробно, то поймем, что обсуждать нужно не так уж много. Сначала мы создали экземпляр объекта Wscript.Network. Затем мы использовали следующие строки кода для получения имени пользователя, домена и имени компьютера:

strUser = objNetwork.UserDomain & “\” & _
  objNetwork.UserName
strComputer= objNetwork.ComputerName

Это, конечно, информация, которую нужно разместить в окне HTA. Для этого необходимо просто совместить переменные strUser и strComputer с небольшой разметкой HTML, затем присвоить полученную строку свойству InnerHTML нашего диапазона:

UserData.InnerHTML = _
  “<p align = ‘center’> “ & _
  “<font style=’font-size:18pt;color:white’>” _
  & strUser & “<br>” & strComputer & _
  “</font></p>”

Да, мы знаем, что этот код выглядит довольно сложным. Но на самом деле не все так плохо. Он такой только из-за того, что мы совмещаем несколько элементов в одной строке. Мы начали с открывающего тега paragraph, который указывает, что необходимо расположение текста в параграфе по центру.

“<p align = ‘center’> “

Далее идет открывающий тег font для шрифта, который указывает, что используется текст белого цвета размером 18 точек:

“<font style=’font-size:18pt;color:white’>”

strUser – это переменная для имени пользователя в формате Domain\UserName. с помощью "<br>" вставляется перенос строки. Перенос строки используется для того, чтобы имя пользователя размещалось на одной строке, а имя компьютера на другой. strComputer – это переменная для имени компьютера. Наконец, мы добавили закрывающие теги шрифта и параграфа:

“</font></p>”

Если посмотреть на все эти элементы по отдельности, вы увидите, что код ничуть не настолько сложный, как можно было бы подумать.

Кстати, вы можете размещать столько элементов HTML, сколько вам необходимо. Например, предположим, что в центре графики необходимо разместить кнопку. Для этого просто добавьте в код HTA следующее:

<input type=”button” value=”Test Button” style=”position:absolute;left:820px;top:300px”>

Благодаря этому HTA должно выглядеть так, как показано на рис. 6.

Рис. 6** Замечательная кнопка **

И снова, для верного размещения кнопки необходимо попробовать несколько вариантов, но это не должно занять много времени. На самом деле, если вы хотите заниматься математическими расчетами, вероятно, вы сможете определить верное расположение быстрее. Необходимо знать только ширину и высоту всех объектов, чтобы указать эти данные с помощью параметра стиля, а также ширину и высоту окна HTA. По умолчанию, по крайней мере на тестовом компьютере одного автора сценариев, HTA приблизительно 1020 пикселов в ширину и около 685 пикселов в высоту (конечно, результаты могут различаться). В подобной ситуации вы можете начать с этих цифр, а затем изменить их в соответствии с вашими требованиями.

Это слишком короткое введение в CSS, но оно должно послужить для вас начальной точкой к созданию привлекательного внешнего вида ваших сценариев. Философы могут усмехнуться, глядя на эти усилия, и сказать, что настоящая красота сценария заключена в его сути, а не во внешнем виде. Но посмотрите на это с другой стороны. Кто величайшие философы всех времен? Правильно: Платон, Сократ, Аристотель – эти ребята. Имея это в виду, хочу задать вопрос: видели ли вы когда-нибудь фотографию кого-либо из них? Не кажется ли вам интересным, что нет фотографий людей, которые говорят, что красота не имеет значения? Не кажется ли это странным? Есть над чем задуматься.

Сотрудники группы Microsoft Scripting Guys работают... ну, хорошо, получают зарплату в корпорации Майкрософт. Когда они не играют в бейсбол, не тренируют бейсбольную команду, не смотрят бейсбол и не занимаются другими делами, они ведут проект Script Center в журнале TechNet. Веб-узел проекта находится по адресу www.scriptingguys.com.

© 2008 Корпорация Майкрософт и компания CMP Media, LLC. Все права защищены; полное или частичное воспроизведение без разрешения запрещено.