Я не хочу писать о том как установить Flex Builder и как его сконфигурировать. Причина не в моей лени, причина в том что если это человеку интересно он откроет гугл и получит тысячи ссылок как это сделать. Также писать пример использования какой либо компоненты просто скучно — есть TourDeFlex в котором подробно рассказано как пользоваться компонентами.
Мой коллега, архитектор и ведущий разработчик в крупнейшем проекте нашей компании как то попросил меня посмотреть материал который он подготовил для собеседования претендента на должность разработчика. Это был код и вопрос заключался в следующем — объясни мне пожалуйста что происходит в коде и чтобы ты изменил. Ответ подразумевал подробный анализ и, если это необходимо, рефакторинг кода. Пример приводить я не буду по двум причинам — я не могу выносить конкретные примеры из моей работы и само по себе задание достаточно сложное и подразумевает наличия не только знаний Flex, но и в общем практики программирования. Но сейчас вспомнив это задание я подумал что для человека который только начинает и которому это действительно интересно нужен совет. Как и что сделать. Не кусок кода, а обсуждение и выяснение причин и следствия.
Давайте поиграем. Правила игры простые. Ниже опубликован полностью рабочий пример. Ваша задача, для начала, его скомпилировать и показать мне ссылку на рабочее приложение. Это не трудно и даже при полном отсутствии опыта это займет не больше часа. Для того чтобы мы начали разговор я должен увидеть приложение. Не будем идти темными дорогами и я скажу последовательность действий.
1. Установить Flex Builder.
2. Создать Flex Project и скопипастить код в это приложение.
3. Нажать Run
4. Залить приложение на любой хостинг и в комментариях опубликовать ссылку или просто отправить мне на e-mail.
Что дальше? Послед того как я увижу рабочее приложение, мы начнем разбирать детально что написано. На первом этапе не засоряйте голову — просто добейтесь работы. Приготовьте минимальный набор для продолжения разговора.
Замечание. Я противник не своих слов… Вы конечно же должны прочитать документацию, возможно посмотреть (видео) примеры. Но вы должны знать что я очень люблю читать и копипастинг будет приравниваться к нечестной игре :) А я не играю не честно. Ок?
Итак, приложение.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var weather:XML
[Bindable]
private var cities:ArrayCollection=new ArrayCollection([{label: "Харьков", data: "Kharkiv"}, {label: "Киев", data: "Kyiv"}]);
private function clickHandler():void
{
weatherService.GetWeather.send(targetCity.selectedItem.data, "Ukraine");
}
private function resultHandler(e:ResultEvent):void
{
weather=new XML(e.result);
weatherResult.visible=true;
}
private function faultHandler(e:FaultEvent):void
{
}
]]>
</mx:Script>
<mx:WebService id="weatherService"
wsdl="http://www.webservicex.com/globalweather.asmx?WSDL"
showBusyCursor="true">
<mx:operation name="GetWeather"
resultFormat="object"
result="resultHandler(event);"
fault="faultHandler(event);"/>
</mx:WebService>
<mx:Panel title="Пример">
<mx:TabNavigator width="450"
height="250">
<mx:VBox label="Погода">
<mx:HBox>
<mx:Label text="Выберите город: "/>
<mx:ComboBox dataProvider="{cities}"
id="targetCity"/>
<mx:Button label="Показать погоду"
click="{clickHandler()}"/>
</mx:HBox>
<mx:HRule width="100%"/>
<mx:Grid visible="false"
id="weatherResult">
<mx:GridRow>
<mx:GridItem>
<mx:Label text="Местоположение: "/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="{weather.Location}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="Текущее время: "/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="{weather.Time}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="Ветер: "/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="{weather.Wind}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="Видимость: "/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="{weather.Visibility}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="Температура: "/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="{weather.Temperature}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="Влажность: "/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="{weather.RelativeHumidity}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="Давление: "/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="{weather.Pressure}"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:VBox>
<mx:VBox label="Биржа">
</mx:VBox>
<mx:VBox label="Новости">
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
А вот это
скриншот скомпилированного приложения. По секрету скажу — там много подсказок :)
И cааааамая последняя ремарка. Для человека который очень хорошо знаком с флексом попрошу на первых порах занять кресло наблюдателя. Код написан так, чтобы можно было над ним поработать. Любые вопросы приветствуются, но не факт что на любые вопросы вы получите ответ.
Да. забыл дописать. Что делает этот пример? Вы можете посмотреть погоду для двух городов Украины — Киев и Харьков )
Комментарии (23)
RSS свернуть / развернутьdegtyarchuk
Запустить это и можно сказать что пол дела сделано )
cyril
degtyarchuk
интересный квест для кодеро-программеров)
1. поставил ЭТО
2. Создал Flex Project (index)и скопипастил код
3. Нажал Run
На локальной машине заработало и показало:
4. Залил приложение на musikant.com.ua/programilla/flex/
На хосте грузится, но не работает:
— загвоздка в том, что на хосте не работает как надо?
— с подсказки скриншотом заметил только разницу в скорости ветра( там баг в коде?)
— на хосте бесконечно долго идет загрузка с удаленного хоста погодного (там баг в коде?)
— или совсем не туда попал?(
PigmaLion
Немного буков.
Флекс просто клиент и он никогда не содержит в себе данных — данные забираются на каком либо сервере. Вопрос протоколов с которыми работает флекс пока оставим. Давай просто решим что все работает через простое http соединение (ну как и браузер). Но только это решение временное )).
Теперь смотрим. Весь цикл выглядит примерно так " послал запрос --> принял ответ". Сколько всего может быть видов ответа? Правильно — два. Результат и Ошибка. Других ответов быть не может. Наша задача написать два метода для обработки ответа — resultHandler и faultHandler.
Обратите внимание на такой момент. НЕ НАЗЫВАЙТЕ МЕТОДЫ русскими словами в транслитерации, не пишите названия вида ttttMethod или прочую муру — метод должен иметь четкое название ) Прочитал и понял что происходит. Ну или как минимум приближенное к четкому. Это вопрос более к общим практикам программирования и кому интересно можно начать попутно читать книгу «совершенный код» — даже новичку полезно и почти все понятно. Это ОЧЕНЬ важный момент.
Теперь смотрим на код.
Мы в этом коде создаем обьект типа WebService с id weatherService. Пока что обратите внимание только на result=«resultHandler(event) и fault=»faultHandler(event). Мы говорим следующее. Если в процессе вызова метода на вебсервисе произойдет ошибка (выбросится событие об ошибке) то ее должен обработать метод faultHandler, в случае результата — передать обработку результата методу resultHandler.
Что нам надо сделать с ошибкой? Правильно. Обработать ее. Ошибки также называют исключениями. Обработка исключений является одним из важнейших навыков и на самом деле не настолько тривиальна как это может показаться с первого взгляда. Но в этом примере мы ограничимся только показом сообщения ошибки. И все.
Смотрим наш метод. Я его намеренно оставил пустым.
Это action script код. Метод и функция слова синонимы. Я говорю метод только в силу привычки. Как описать словами этот метод? Примерно так: Это приватный (private) метод который ничего не вернет (void) и на во входных параметрах получает объект e класса FaultEvent. Синтаксис action script, основы ООП читаем через гугл. Это скучно и бессмысленно описывать в рамках программилы. Будьте уверены что без базовых знаний ООП (и без понимания этих знаний) у вас ничего не выйдет.
То, что вызывает наш метод faultHandler передает в него обьект, который содержит в себе информацию. Для того чтобы узнать какая информация в этом обьекте нам доступна мы должны посмотреть документацию livedocs.adobe.com/flex/3/langref/mx/rpc/events/FaultEvent.html. Умение читать API очень важно — без этой способности мы не можем ничего написать. Также, стоит запомнить и принять факт — документация как правило на английском и искать перевод бессмысленно если вы хотите программировать, а не заниматься переводом.
Наша задача — дописать метод так, чтобы увидеть сообщение об ошибки: из объекта e получить сообщение message и через Alert вывести содержание ошибки.
Вроде как подошел к следующему раунду игры.
1. допишите метод faultHandler для того чтобы через Alert показывалось сообщение об ошибки.
2. Придумайте способ спровоцировать ошибку.
3. Покажите результат
В помощь скриншоты без описания :)
scriptico.com/test/error.jpg
scriptico.com/test/error-handler.jpg
cyril
Т.к. у меня линуха x86_64, то пришлось установить firefox-bin. Как советовалось в инсталлере флекса, проверил его командой
т.е. firefox-bin: ELF 32-bit, что ему и надо было. Ну и соответственно закинул ему в папку плагинов 32-битного флеша.
Вот мой небольшой результат:
yuginboy
yuginboy
degtyarchuk
Kide
yuginboy
мну на «флеш и ко» тяжко загнать )
просто, читайнул статейку
Kide
Так сказать, с алертовым окошком особых проблем не было (на рисунке твоем есть небольшая подсказка), больше провозился с генерацией ошибки.
yuginboy
Ну ждем Давида и поедем дальше.
cyril
yuginboy
yuginboy
cyril
yuginboy
Это с хоста — http://musikant.com.ua/programilla/flex
На локалке у меня не получилось спровоцировать ошибку(( и так и сяк — не хватает знаний.
Да и с алертом честно помучался:
Когда оно написано — оно то уже понятно — я читаю внутри show с конца- «у объекта(хреновый заголовок) есть метод сообщение у которого в свою очередь есть метод перевести все в строчку».
Опыта с ООП мона сказать нету)
По подсказке конечно с картинки смотрел. Но все равно не сразу догнало.
PigmaLion
основы ооп — необходимый минимум.
Смотреть подсказки вроде как хорошо )
Догоняло сразу или через пол часа — не страшно )
cyril
degtyarchuk
cyril
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.