Космодром на коленке

IntelliJ IDEA 9 лучшая IDE для ActionScript разработки под Linux

2010-02-23T05:18:00.000-08:00

Не так давно у меня возникла потребность в IDE для ActionScript в Linux, т.к. на моей работе имеется ориентировка на использование Ubuntu и свободного ПО в рабочем процессе, что я всецело одобряю. :) Но, к сожалению, если под Windows выбор как коммерческих, так и бесплатных инструментов для ActionScript достаточно большой, то под Linux выбор не очень..

В предыдущем посте я уже перечислил известные мне доступные бесплатные IDE для ActionScript 3.0 в Linux и рассказал об основных возможностях AS3IDE.

К сожалению, возможностей текущей версии AS3IDE (на январь 2010) для нормальной работы, на мой взгляд, недостаточно. А множество багов и недоработок отбивают всяческое желание к ее повседневному использованию. Статус Альфа-версии сказывается..

После нескольких дней общения с AS3IDE, я решил посмотреть коммерческие решения. В итоге остановился на IntelliJ IDEA 9..

Поиски коммерческих IDE для ActionScript привели меня к трем продуктам:

FDT на базе Eclipse (129$,529$,780$)- на данный момент не имеет поддержки Linux, но разработчики обещают в скором времени. Отладчик только в Enterprise версии (780$);
Adobe Flex Builder 3 for Linux на базе Eclipse (250$-700$)- для Linux есть только Альфа версия без официальной коммерческой поддержки;
IntelliJ IDEA 9 - лучшая IDE для Java с поддержкой ActionScript из коробки (250$-600$).

Полной поддержки Linux ни в Flex Builder 3, ни в FDT не имеется, хотя работы в этом направлении ведутся. Цены на них, на мой субъективный взгляд не особо привлекательные. FDT поддерживает отладчик только в самой дорогой версии Enterprise, для меня этого достаточно чтобы поставить на нем крест, т.к. какой никакой отладчик есть даже в AS3IDE. В общем, желания их пробовать под Linux у меня не возникло. :)
А вот IntelliJ IDEA от Jetbrains показалась привлекательной по цене и функциональным возможностям, плюс это продукт отечественного производителя :). Для индивидуального разработчика получить за 250$ отличную кросс-платформенную Java EE IDE с прекрасной поддержкой ActionScript в довесок, намного интереснее чем один лишь плагин для ActionScript за 250$ (в случае Flex Builder 3) или 780$ (в случае FDT). И хотя инструменты JavaEE разработки для Eclipse тоже достаточно продвинутые, IntelliJ IDEA славится своей интеллектуальностью. Вообще, на мой взгляд, Flex Builder 3 и FDT должны стоить в 2 раза дешевле IntelliJ IDEA, учитывая ее возможности из коробки. :)

Поставив триальную версию и познакомившись с IntelliJ IDEA поближе, я понял, что это как раз то, что нужно:
прекрасно работает в ubuntu;
поддерживает ActionScript 3.0 на высоком уровне;
имеется интеграция с Git;
просто восхитительные возможности рефакторинга и инспектора кода;
возможность просмотра классов из swf.

Короче разработка на ActionScript в IntelliJ IDEA сплошное удовольствие. :)
Незамедлительно обратил внимание начальства на этот продукт и необходимость его приобретения. :)

Ну а дальше будет об установке, много скриншотов и немного комментариев к ним.

Пара слов о запуске IntelliJ IDEA 9 в Ubuntu.

На официальном сайте нужно скачать архив с Intellij IDEA 9. Без регистрации IDEA можно использовать 30 дней в режиме триала (достаточное время чтобы решить нужна ли она вам или нет):
Intellij Idea 9 Ultimate Edition(стабильная версия) или EAP сборки последних версии (за новые фичи платим стабильностью работы, сижу на этой версии проблем пока не возникало :)

Нам так же потребуется Adobe Flex SDK http://www.adobe.com/products/flex/flexdownloads/

Для отладки и просмотра вывода trace в Intelliaj IDEA требуется установка в систему debug flash player plugin для браузера http://www.adobe.com/support/flashplayer/downloads.html#fp10

Установим JDK от sun и flash plugin:
sudo aptitude install sun-java6-jdk flashplugin-nonfree

Заменим файл Flash плагина "/usr/lib/flashplugin-installer/libflashplayer.so" на отладочную версию из архива http://download.macromedia.com/pub/flashplayer/updaters/10/flash_player_10_linux_dev.tar.gz.

Подробнее о установке Flash Debug Plugin в Ubuntu тут: http://ubuntuforums.org/showthread.php?t=1300563

Распакуем архивы с IDE и Flex SDK куда-нибудь. Я распаковывал просто в домашний каталог.
Добавим в начало файла "ideaIU-94.273/bin/idea.sh" во вторую строчку путь к JDK:

#!/bin/sh
JDK_HOME="/usr/lib/jvm/java-6-sun/"
# ...

Подробнее о настройке Intellij Idea 9 в ubuntu описано тут: http://techbrew.net/articles/200711/how-to-put-intellij-idea-on-ubuntu/

После этого запустим idea.sh (возможно потребуется сделать этот файл исполняемым в его свойствах) для запуска IDEA.

Во время первого запуска IDEA попросит выбрать требуемые плагины. Мне пока нужен только Git, а JavaEE не нужно совсем.

Создание "HeloWorld" ActionScript проекта.

Нужно добавить на Flex SDK.

Теперь Flex SDK можно выбрать.

Компиляция, запуск и отладка проекта.

Создадим конфигурацию запуска.

Выберем главный класс.

Добавим точку останова щелчком мыши напротив строки и запустим отладку.

Но для запуска нужно сначала указать браузер.

Идем в настройки среды.

Теперь можно запускать.

Отладчик просто шикарный.

Отлов trace присутствует.

Запущенный в браузере HelloWorld.

AS3IDE - среда разработки для ActionScript 3.0 и Flash в Linux

2010-02-20T22:47:00.000-08:00

Если вы решили вести разработку ActionScript 3.0/Flash приложений из под Linux используя только OpenSource инструменты, то вам вероятно следует запастись мужеством и крепкими нервами. Хотя Adobe Flex SDK вполне себе кросс-платформенный и работоспособный, OpenSource IDE для ActionScript 3.0 в Linux находятся в зачаточном состоянии. :)

Сегодня я немного расскажу об AS3IDE, достаточно перспективном плагине к Eclipse, позволяющем разрабатывать на ActionScript используя Adobe Flex SDK.

Перечислю основные OpenSourse решения для ActionScript, что мне вообще попадалось:

Голый Eclipse с прикрученным компилятором mxmlc из Adobe Flex SDK - нет отладки, нет интеллектуальной подстановки.. В общем, на мой взгляд не намного лучше текстового редактора со скриптом для сборки.
FlexBean плагин для Netbeans - оставил о себе унылые воспоминания недоделанного прототипа. В нем не было вообще ничего кроме запуска компилятора.
Asdt плагин для Eclipse - не пробовал, т.к. он под ActionScript 2.
FlashDevelop под Windows вполне терпимый инструмент но написан под .net. Под mono у меня не завелся. Из коробки умеет только ловить вывод trace.
Air MiniBuilder неплохой кросс-платформенный редактор кода для ActionScript, перспективный развивающийся проект. К сожалению, его нельзя назвать полноценной IDE, т.к. нет отладчика и интеграции со сторонними инструментами вроде систем контроля версии.
AS3IDE плагин для Eclipse - второе работоспособное решение под Linux что мне попадалось.

Здесь я, пожалуй, отмечу, что если вам нужна полноценная качественная среда разработки на Flex/ActionScript под Linux уже сейчас, то настоятельно советую посмотреть на Intellij Idea 9 Ultimate Edition или EAP (Community Edition не поддерживает Flex/ActionScript). На мой взгляд лучшей поддержки Flex/ActionScript под Linux на данный момент просто не существует. И своих денег эта ide стоит, хотя и жалко что нельзя купить поддержку Flex/ActionScript отдельно от Java.

Ну а если вы хотите поэкспериментировать и познакомится с новым перспективным инструментом, я расскажу Вам про AS3IDE и его установке в Ubuntu.

Перечислю положительные качества AS3IDE:

является плагином к Eclipse и позволяет использовать все плюшки этой IDE;
кросс-платформенность;
имеет более-менее юзабельный отладчик с точками останова, просмотром переменных и отловом вывода trace.

Недостатки (по причине сырости проекта):

Может повесит Eclipse намертво, при компиляции более менее сложного проекта;
Интеллектуальная подстановка работает с причудами, нет автоимпорта пакетов;
Отладчик не ловит исключения;
Нет и намека на поддержку рефакторинга :).

AS3IDE начал свою историю недавно, в сентябре 2009. На февраль 2010 находится в стадии преальфа версии и сейчас еще достаточно сырой.
Доступен здесь http://sourceforge.net/projects/as3ide/ Судя по svn репозиторию, проект активно развивается и есть надежда на то, что со временем он станет вполне полноценным решением для коммерческой разработки.

Чтобы попробовать AS3IDE нужно для начала установить Eclise:
sudo aptitude install eclipse
Для просмотра swf в браузере нужно поставить Flash-плагин:
sudo aptitude install flashplugin-nonfree
Скачаем плагин AS3IDE: файл as3ide_update_site.zip
Нам так же потребуется Adobe Flex SDK
http://www.adobe.com/products/flex/flexdownloads/
И Standalone Debug Flash Player для поддержки отладки:
http://download.macromedia.com/pub/flashplayer/updaters/10/flash_player_10_linux_dev.tar.gz

Распакуйте куда-нибудь Flex SDK (например: ~/flex_sdk_3.5).
Распакуйте standalone debug fashplayer в директорию %FlexSDK%/bin (например: ~/flex_sdk_3.5/bin/flashplayer). Standalone версия fashplayer находится в архиве: flash_player_10_linux_dev.tar.gz/flash_player_10_linux_dev/standalone/debugger/flashplayer.tar.gz/flashplayer
Распакуйте куда-ниудь as3ide_update_site.zip (например: ~/as3ide_update_site)

Запустите Eclipse и установите плагин AS3IDE добавив папку из архива в качестве источника приложений.

Настроим путь к распакованному Flex SDK:

Создадим новый поект AS3IDE:

Вставим код "HelloWorld" :)

package { import flash.display.Sprite; import flash.text.TextField; public class Main extends Sprite{ public function Main(){ var txt:TextField = new TextField(); txt.text = "Hello world!"; addChild(txt); } } } * This source code was highlighted with Source Code Highlighter.

Настроим конфигурацию запуска/отладки. Укажем путь к Standalone FlashPlayer:

Нажмем на кнопку Run и проверим работоспособность нашего приложения:

Проверим отладчик. Поставим точку остановки:

Запустим приложение в отладочном режиме:

Переключимся на отладочную перспективу:

Точка останова отработала. В окне отладчика можно посмотреть содержимое переменной txt.

Проверим автоподстановку. В наличии. :)

Вот собственно и все. Будем надеяться AS3IDE продолжит свое развитие и когда нибудь станет достаточно зрелой для использования в коммерческой разработке. Пока же она больше годится для небольших экспериментов.

Благодарю за внимание, удачного кодинга! :)

Использование тега Embed в ActionScript 3.0

2010-02-15T09:55:00.000-08:00

На работе решили периодически делать небольшие доклады по используемым в рабочем процессе технологиям, языкам и инструментам. Надеюсь это будет способствовать получению новых знаний и освежению старых. :)
Делал доклад по использованию тега Embed для встраивания ресурсов в приложения на ActionScript 3.0 (без упора на Flex). Доклад в форме презентации, на слайдах ключевые моменты.
Думаю это может быть кому-нибудь полезно для первичного знакомства с Embed, поэтому выкладываю PDF тут (embedding.pdf).

Симпатичная форма обратной связи средствами Flex и Django

2010-02-12T10:08:00.000-08:00

Доброго времени суток!

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

Задача

Реализовать форму обратной связи для отсылки пользовательских сообщений администратору сайта.

Пояснение

Связка Flex и Django может показаться нерациональной для решения данной задачи, ведь с ней вполне можно справится с помощью HTML и одного скрипта на PHP. Так и есть. :) На этой небольшой задаче я постараюсь рассмотреть минимум необходимый для работы с этими замечательными фреймворками в связке.

От автора

Статья будет интересна тем, кто еще только присматривается к Flex и Django, но не пробовал их в деле. К статье прилагаются полные исходные коды сервера и клиента. Их можно скачать отсюда SendFormFlexDjango.zip. В силу специфики задачи серверная часть примера получилась очень маленькой, так что большая часть статьи описывает создание Flex клиента.

Сразу отмечу, что я не спец по Flex и Django и, к сожалению, не могу сказать, что имею серьезный опыт в web-разработке. :) Дружу с Python уже более двух лет, хотя до недавнего времени не применял для web. Год назад я столкнулся с Flex и немного работал с ним. А несколько недель назад я начал разработку небольшого проекта, для реализации клиентской части которого решил использовать Flex/ActionScript 3.0, а для сервера Django/Python. После небольшого перерыва и без груза чужой кодовой базы, можно сказать начал знакомство с Flex заново, с более свежими ощущениями. :) С Django я ранее знаком не был, и в процессе изучения был приятно удивлен удобством этого фреймворка. На мой взгляд сочетание Flex и Django позволяет довольно быстро получить практический результат.

Из вещей которые мне больше всего понравились во Flex: декларативное описание интерфейса и Data binding. Эти особенности позволяют писать гибкий код и компактный. Что понравилось в Django так это обилие возможностей "из коробки" и прекрасная документация.

О себе немного рассказал. Технологии похвалил. Пора к делу!

Что потребуется для работы?

Для разработки клиента можно взять Trial-версию Adobe Flex Builder 3.

Однако, данной статье я буду использовать бесплатные инструменты FlashDevelop + Flex SDK.

Adobe Flex 3.5 SDK

Нужен для компиляции клиента.

Страница загрузки.

FlashDevelop

Бесплатная среда разработки. На данный момент лучшая бесплатная IDE для ActionScript и Flex. В сравнении с Flex Builder 3 очень аскетичная. К сожалению, хоть она и open source, но написана под .Net, и поддерживается только под Windows. Под Mono не проверял.

http://www.flashdevelop.org

Inkscape

Этот графический векторный редактор потребуется для редактирования и экспорта макета формы из формата svg. Макет в svg находится в архиве с исходниками для статьи. http://www.inkscape.org/

Aptana Studio или Eclipse совместно с дополнением Pydev.

http://www.aptana.org/

http://pydev.org/nightly

Python 2.6

Замечательный язык программирования. ;)

http://www.python.org/

Django 1.1.1

http://www.djangoproject.com/

Django-1.1.1.tar.gz

Для отладки может понадобиться Debug версия Flash Player. Различные версии Flash Player можно скачать здесь

Я скачал Standalone версию плеера, просто закинул его в Program Files и сопоставил для открытия swf файлов.

Огорчает лишь, что по умолчанию Flash Develop не содержит встроенного отладчика и умеет отображать только вывод функции trace().

Отладочного вывода через trace() должно хватать для большинства задач.

Для вывода сложных объектов можно использовать функцию mx.utils.ObjectUtil.toString(obj).

Если же не доступна отладочная версия плеера (нельзя просмотреть вывод функции trace() ), то можно воспользоваться стандартной функцией показа сообщений mx.controls.Alert.show(msg).

Пишем клиентскую часть

Подготовка

Для разработки клиентской части нам потребуется FlashDevelop, Inkscape и Flex SDK.

Распакуем Flex SDK куда-нибудь и настроим в FlashDevelop путь к нему:

Tools->Programm Settings->AS3Context->Flex SDK Location

Шаг 1

Создадим в FlashDevelop проект Flex 3 Project с именем feedback_client (Project->New Project).

Новый проект содержит файл Main.mxml, откроем его и вставим следующий код:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

  <mx:VBox x="0" y="0" width="100%" height="100%" horizontalAlign="center">

    <mx:HBox width="100%">

      <mx:Label text="Имя" width="15%"/>

      <mx:TextInput id="nameTxt" width="100%" maxChars="40" />

    </mx:HBox>

    <mx:HBox width="100%">

      <mx:Label text="e-mail" width="15%"/>

      <mx:TextInput id="emailTxt" width="100%" maxChars="40"/>

    </mx:HBox>

    <mx:TextArea id="msgTxt" width="100%" height="100%" maxChars="5000" />

    <mx:Button id="sendBtn" label="Отправить" />

  </mx:VBox>

</mx:Application>

* This source code was highlighted with Source Code Highlighter.

Описание приложения на Flex начинается с узла mx:Application.

В свойствах этого узла описываются габаритные размеры итоговой флэшl2;и и фоновый цвет. Application в программе на Flex может быть только один. Экземпляр текущего приложения всегда можно узнать из свойства mx.core.Application.application. Все остальные элементы управления добавляются как дочерние элементы Application.

В данном примере я использовал контейнеры VBox и HBox для автоматического выравнивания элементов интерфейса. Существует множество способов задавать размеры и положение объекта: x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter. Что особенно удобно, так это возможность использования процентов для задания некоторых величин.

Для компиляции и запуска проекта нажмем F5 или кнопку на панели инструментов:

Если все в порядке, запустится Flash Player или браузер с нашим приложением:

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

Шаг 2

Попробуем исправить ситуацию, для этого добавим в наше приложение графику.

В качестве примера к статье прилагается, созданный в Inkscape, svg-файл с макетом формы отправки в виде блокнота.

Создадим в директории проекта feedback_client каталог assets в который будем помещать всю графику.

Подготовим графику для встраивания в приложение, экспортировав svg элементы макта в файлы png.

Откроем файл "notepad_src.svg" и экспортируем в png слой "Блокнот".

Для этого откроем окно со списком слоев Shift+Ctrl+L (Слой->Слои), снимем замок со слоя "Блокнот", а на остальные наоборот навесим. Выберем все Ctrl+A (Правка->Выделить все). Shift+Ctrl+E (Файл->экспортировать в растр). Нажать кнопку "Выделение" и поставить галочку экспортировать только выделение, чтобы фон не попал в растр. Выбираем где сохранить файл и жмем экспорт.

Аналогичным образом экспортируется еще три изображения разных состояний кнопки отправки.

Шаг 3

Изменим структур Main.mxml и опишем графику в css файле.

Чтобы не загромождать Main.mxml вынесем форму для ввода данных в отдельный компонент, в файл FormCanvas.mxml и создадим еще один компонент для отображения сообщений, StatusCanvas.mxml.

Cкажу пару слов о создании своих компонент.

Новые компоненты создавать в Flex проще простого. Однажды описав их в отдельном mxml файле их легко потом использовать где угодно как в других mxml так из ActionScript. Для получения нового компонента создается mxml файл и в качестве корневого узла указывается компонент от которого требуется наследоваться.

В нашем случае это будет mx:Canvas:

<?xml version="1.0" encoding="utf-8"?>



<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Label id="mylabel" text="label"/>

</mx:Canvas>

* This source code was highlighted with Source Code Highlighter.

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

Пример использования:

var nc:NewComponent = new NewComponent();

this.addChild(nc); // добавление nc на отображаемый компонент

/* отображение nc */

Alert.show(nc.mylabel.text); //допустимо но объект nc уже должен быть отображен на экране

* This source code was highlighted with Source Code Highlighter.

Если nc еще не отображен в приложении, то его дочерние элементы еще не созданы и поле mylabel будет содержать null.

Переменные будут гарантированно доступны только после события creationComplete. (Хорошее описание этого процесса flex-component-lifecycle-overview)

Если требуется передать объекту параметры сразу при создании, следует описать внутри него свои свойства или поля посредством тега mx:Script (см. StatusCanvasScript.as и StatusCanvas.mxml ), они будут инициироваться в конструкторе. Можно проводить их обработку в обработчике события creationComplete, либо, пометив как [Bindable], биндить(BindingUtils.bindProperty()) непосредственно на элементы управления. Для простоты встраивания графики подключим ее через css. Создадим директорию styles и в ней файл main.css. Опишем css классы с картинкой нашего блокнота и скины для кнопки, используя ключевое слово Embed для встраивания графики в результирующий swf файл приложения:

.notepadBg{

  backgroundImage: Embed("../assets/notepad.png");

  verticalScrollPolicy: off;

  horizontalScrollPolicy: off;

}

.sendButton

{

  upSkin: Embed("../assets/send_btn_active.png");

  overSkin: Embed("../assets/send_btn_over.png");

  downSkin: Embed("../assets/send_btn_down.png");

  disabledSkin:Embed("../assets/send_btn_active.png");

}

* This source code was highlighted with Source Code Highlighter.

Теперь мы можем подключить наш css в любом mxml файле:

<mx:Style source="../styles/main.css"/>

И применять описанные в css классы к компонентам указывая имя класса в свойстве styleName:

<mx:Canvas styleName="notepadBg" width="400" height="500"/> <mx:Button id="sendBtn" styleName="sendButton" />

Опишем классы для полей ввода: .textInput и .textArea.

Чтобы все выглядело натурально нужно сделать поля ввода прозрачными и убрать рамку фокуса:

.textInput

{

  backgroundAlpha: 0.0;

  borderStyle: none;

  focusAlpha: 0;

  fontFamily: "Arial";

  fontSize: 16;

}

* This source code was highlighted with Source Code Highlighter.

Для textArea вдобавок увеличим расстояния между строк:

.textArea

{

/*...*/

leading:8.6;

}

* This source code was highlighted with Source Code Highlighter.

На время отладки, выставим значения backgroundAlpha и backgroundColor для удобства подгонки положения элементов:

.textArea

{

  /*...*/

  backgroundAlpha: 0.8;

  backgroundColor: #ff0000;

  /*...*/

}

* This source code was highlighted with Source Code Highlighter.

Подгоняем положение элементов экспериментируя со значениями координат и размерами элементов в FormCanvas.mxml.

После подгонки параметров получиться вот так:

<

Шаг 4

Выставляем backgroundAlpha равное 0 и убираем backgroundColor из стилей .textInput и .textArea.

В итоге у нас получится вполне симпатичный и интерактивный результат:

После проделанных изменений наш проект будет выглядеть так:

<?xml version="1.0" encoding="utf-8"?>



<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="500" styleName="notepadBg" >

  <mx:Style source="../styles/main.css"/>

  <mx:VBox left="40" top="60" right="50" >

    <mx:HBox width="100%">

      <mx:Label text="Имя:" width="18%" styleName="label" />

      <mx:TextInput id="nameTxt" width="72%" maxChars="40" styleName="textInput"/>

    </mx:HBox>

    <mx:HBox width="100%">

      <mx:Label text="e-mail:" width="18%" styleName="label" />

      <mx:TextInput id="emailTxt" width="72%" maxChars="40" styleName="textInput"/>

    </mx:HBox>

    <mx:TextArea id="msgTxt" width="100%" height="268" maxChars="5000" styleName="textArea" />

    <mx:Canvas width="100%">

      <mx:Button id="sendBtn" label="" horizontalCenter="0" styleName="sendButton" />

    </mx:Canvas>

  </mx:VBox>

</mx:Canvas>

* This source code was highlighted with Source Code Highlighter.

<?xml version="1.0" encoding="utf-8"?>



<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*"

  width="400" height="500"

  paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"

  horizontalScrollPolicy="off" verticalScrollPolicy="off"

  >

  <mx:Style source="../styles/main.css"/>

  <mx:Canvas left="0" top="0" right="0" bottom="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">

    <ns1:FormCanvas id="formCanvas" x="0" y="0" visible="true" />

    <ns1:StatusCanvas id="statusCanvas" x="0" y="0" visible="false" />

  </mx:Canvas>

</mx:Application>

* This source code was highlighted with Source Code Highlighter.

<?xml version="1.0" encoding="utf-8"?>



<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="500" styleName="notepadBg">

  <mx:Style source="../styles/main.css"/>

  <mx:Text verticalCenter="0" horizontalCenter="0" selectable="false" styleName="label"

        htmlText="Сообщение" />

  <mx:Text horizontalCenter="0" bottom="110" styleName="label" selectable="false"

        htmlText="Кликните чтобы продолжить." />

</mx:Canvas>

* This source code was highlighted with Source Code Highlighter.

/* styles/main.css */

.notepadBg{

  backgroundImage: Embed("../assets/notepad.png");

  verticalScrollPolicy: off;

  horizontalScrollPolicy: off;

}

.sendButton

{

  upSkin: Embed("../assets/send_btn_active.png");

  overSkin: Embed("../assets/send_btn_over.png");

  downSkin: Embed("../assets/send_btn_down.png");

  disabledSkin:Embed("../assets/send_btn_active.png");

}

.textInput

{

  /*backgroundAlpha: 0.8;

  backgroundColor:#ff0000;/*/

  backgroundAlpha: 0.0; /*прозрачный фон*/

  borderStyle: none;

  focusAlpha: 0; /*убираем рамку фокуса*/

  fontFamily: "Arial";

  fontSize: 16;

}

.textArea

{

  /*backgroundAlpha: 0.8;

  backgroundColor:#ff0000;*/

  backgroundAlpha: 0.0;/*прозрачный фон*/

  borderStyle: none;

  focusAlpha: 0; /*убираем рамку фокуса*/

  fontFamily: "Arial";

  fontSize: 16;

  leading:8.6; /*увеличиваем междустрочный интервал*/

}

.label

{

  fontFamily: "Arial";

  fontSize: 16;

  fontWeight :bold;

  textAlign: center;

}

.labelGreen

{

  fontFamily: "Arial";

  fontSize: 22;

  fontWeight :bold;

  textAlign: center;

  color:#00ff00;

}

.labelRed

{

  fontFamily: "Arial";

  fontSize:22;

  fontWeight :bold;

  textAlign: center;

  color:#ff0000;

}

* This source code was highlighted with Source Code Highlighter.

Шаг 5

Интерфейс готов. Осталось написать логику обработки; и отправки данных. Для этого создадим два файла MainScript.as и StatusCanvasScript.as в которых будем писать ActionScript код для нашего приложения. Подключим их к mxml файлам добавив тег mx:Script

для Main.mxml:

<mx:Script source="MainScript.as"/>

и для StatusCanvas.mxml:

<mx:Script source="StatusCanvasScript.as"/>

После проделанных изменений FlashDevelop будет отображать наши as файлы как вложенные узлы родительских mxml в дереве проекта.

Заполним as файлы кодом:

/* MainScript.as */

import flash.events.MouseEvent;

import mx.rpc.AsyncToken;

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;

import mx.rpc.http.mxml.HTTPService;

import mx.controls.Alert;

private static const SERVER_URL:String = "http://127.0.0.1:8081/send";

private var service: HTTPService = null;

private function complete():void

{

  service = new HTTPService();

  service.url = SERVER_URL;

  service.method = "POST";

  service.resultFormat = "text";



  formCanvas.sendBtn.addEventListener(MouseEvent.CLICK, sendBtnClick, false, 0, true );

  statusCanvas.addEventListener(MouseEvent.CLICK, statusCanvasClick, false, 0, true );

}

private function showStatus(status:int, msg:String = null):void {

  statusCanvas.status = status;

  if (msg) statusCanvas.msgHtml = msg;

  statusCanvas.visible = true;

}

private function sendBtnClick(event:MouseEvent):void

{

  if ((formCanvas.nameTxt.text == "") ||

    (formCanvas.emailTxt.text == "")||

    (formCanvas.msgTxt.text == ""))

  {

    showStatus(StatusCanvas.EMPTY_FORM);

    return;

  }



  formCanvas.enabled = false;

  sendForm();

}

private function sendForm():void {

  var params:Object = { name:formCanvas.nameTxt.text,

              email:formCanvas.emailTxt.text,

              msg:formCanvas.msgTxt.text};



  var token:AsyncToken = service.send(params);

  var responder:mx.rpc.Responder = new mx.rpc.Responder(onResult, onFault);

  token.addResponder(responder);

}

private function statusCanvasClick(event:MouseEvent):void {

  formCanvas.visible = true;

  statusCanvas.visible = false;

}

private function clearForm():void {

  formCanvas.nameTxt.text = "";

  formCanvas.emailTxt.text = "";

  formCanvas.msgTxt.text = "";

}

protected function onResult(event:ResultEvent):void

{

  formCanvas.enabled = true;



  var xml:XML = new XML(event.result);

  var code:int = int(xml.code);

  switch(code) {

    case 0:

      showStatus(StatusCanvas.OK);

      clearForm();

      break;

    case 1:

      showStatus(StatusCanvas.MSG, xml.msg);

      break;

    default:

      showStatus(StatusCanvas.ERROR);

  }

}

protected function onFault(event:FaultEvent):void

{

  formCanvas.enabled = true;

  if (event.statusCode == 0)

    showStatus(StatusCanvas.CONNECTION_ERROR);

  else showStatus(StatusCanvas.ERROR);

}

* This source code was highlighted with Source Code Highlighter.

/* StatusCanvasScript.as */

import mx.binding.utils.BindingUtils;

public static const OK:int = 0;

public static const ERROR:int = 1;

public static const CONNECTION_ERROR:int = 2;

public static const MSG:int = 3;

public static const EMPTY_FORM:int = 4;

private var _status:int = MSG;

[Bindable]

public var msgHtml:String = "";

[Bindable]

public var msgStyleName:String = "labelGreen";

private function complete():void

{

  BindingUtils.bindProperty(msgTxt,'htmlText', this, 'msgHtml');

  BindingUtils.bindProperty(msgTxt,'styleName', this, 'msgStyleName');

}

public function set status(status:int):void{

  _status = status;



  switch(status) {

    case OK:

      msgStyleName = "labelGreen";

      msgHtml = "Сообщение успешно<br>отправленно";

      break;

    case ERROR:

      msgStyleName = "labelRed";

      msgHtml = "Ошибка!<br>Попробуйте позднее.";

      break;

    case CONNECTION_ERROR:

      msgStyleName = "labelRed";

      msgHtml = "Сервер<br>недоступен."

      break;

    case EMPTY_FORM:

      msgStyleName = "labelRed";

      msgHtml = "Заполните<br>все поля."

      break;

    default:

      msgHtml = "";

      msgStyleName = "label";

      break;

  }

}

public function get status():int{

  return _status;

}

* This source code was highlighted with Source Code Highlighter.

Теперь нужно обязательно указать обработчики события creationComplete="complete()" у корневых элементов в Main.mxml и StatusCanvas.mxml и наше клиентское приложение готово.

Приведу модификации в упрощенном виде:

<mx:Application сreationComplete="complete()" >



<mx:Script source="MainScript.as"/>

</mx:Application>

<mx:Canvas creationComplete="complete()" >



<mx:Script source="StatusCanvasScript.as"/>

</mx:Canvas>

Теперь при нажатии на кнопку Отправить мы можем насладится одним из двух сообщений.

Как видно из кода, приложение посредством обьекта класса HTTPService делает POST запрос на url http://127.0.0.1:8081/send передавая данные сообщения в переменных name, email и msg. Дело за малым написать обработчик этого запроса.

На этом с клиентом закончим, пора браться за сервер.

Пишем серверную часть

Подготовка

Установим Python, Django и Aptana Studio. Для установки Django нужно распаковать Django-1.1.1.tar.gz и выполнить:

python setup.py install.

Желательно так же добавить c:\Python26\Scripts\ в системную переменную PATH, чтобы было удобно использовать django-admin.py, который расположен по этому пути.

После этой манипуляции потребуется перезагрузка.

Создаем проект сервера

Откроем Aptana Studio и создадим новый проект для Python с именем feedback_server (File->New->Project->Pydev->Pydev Project)

Галочку с "Create default 'src'..." можно снять.

Запустим cmd.exe и перейдем в директорию проекта feedback_server. Создадим проект Django:

django-admin.py startproject server

Перейдем в созданную директорию server и создадим Django приложение feedbacks для обработки отправки сообщения:

manage.py startapp feedbacks

Обновим дерево проектов в Aptana (F5) и перейдем к свойствам проекта feedback_server(Alt+Enter). Установите кодировку проекта в utf-8 (Resources->Text file encoding) В разделе "Pydev - PYTHONPATH" нужно добавить созданную django-admin.py директорию Django проекта "feedback_server/server" (Add source folder)

В разделе "Run/Debug Settings" создаем новую конфигурацию запуска (New->Python Run).

В редакторе конфигурации запуска на вкладке Main:

Project: feedback_server

Main Module: ${workspace_loc:feedback_server/server/manage.py}

На вкладке Arguments:

Program arguments: runserver 8081 --noreload

Working directory->Other: ${workspace_loc:feedback_server/server}

При использовании sqlite в качестве СУБД, без указания "Working directory" в настройках запуска, файл базы будет искаться текущем в каталоге Aptana. А так как его там нет, будет создаваться пустой файл, что приведет к ошибке при первом же запросе к таблицам.

Настройка проекта Django

Файл settings.py

В начало файла вставим код (спасибо автору топика):

import os

def rel(*x):

return os.path.join(os.path.abspath(os.path.dirname(__file__)), *x)

* This source code was highlighted with Source Code Highlighter.

#Настроим в качестве СУБД sqlite

DATABASE_ENGINE = 'sqlite3'

DATABASE_NAME = 'db.sqlite'

DATABASE_USER = ''

DATABASE_PASSWORD = ''

DATABASE_HOST = ''

DATABASE_PORT = ''

* This source code was highlighted with Source Code Highlighter.

Для чистоты эксперимента отключим в проекте все лишнее, так как задача стоит довольно простая. :)

В списке MIDDLEWARE_CLASSES и INSTALLED_APPS закомментируем все элементы.

Добавим наше приложение "feedbacks" в INSTALLED_APPS

INSTALLED_APPS =( 'server.feedbacks', )

В список TEMPLATE_DIRS добавим строчку :

TEMPLATE_DIRS = ( rel('templates'), )

Шаблоны xml-ответов

В директории проекта создадим соответствующую директорию "templates"'. С двумя файлами feedback_result.xml:



<r>

<code>{{code}}</code>

<msg>{{msg}}</msg>

</r>

и feedbacks.xml:



<r>

<feedbacks>

{% for row in feedbacks %}

<f>

  <name>{{row.name}}</name>

  <email>{{row.email}}</email>

  <msg>{{row.msg}}</msg>

</f>

{% endfor %}

</feedbacks>

</r>

Файл urls.py

urlpatterns = patterns('', (r'^send/', 'feedbacks.views.send'), (r'^feedbacks/', 'feedbacks.views.feedbacks'), )

Модель базы данных

Опишем модель базы данных в файле "feedbacks/models.py"

# -*- coding: utf-8 -*-

# feedbacks/models.py

from django.db import models

class Feedback(models.Model):

    name = models.CharField(max_length=51, null=True)

    email = models.CharField(max_length=51, null=True)

    msg = models.CharField(max_length=5001, null=True)

* This source code was highlighted with Source Code Highlighter.

Обработчики запросов

И наконец создадим обработчики запросов в файле "feedbacks/views.py"

# -*- coding: utf-8 -*-

from django.views.generic.simple import direct_to_template

from models import Feedback

def send(request):

    data = {'code' : 0}

    name = request.REQUEST.get("name", "")

    email = request.REQUEST.get("email", "")

    msg = request.REQUEST.get("msg", "")

    if (name=="") or (email=="") or (msg==""):

        data['code'] = 1

        data['msg'] = "Необходимо заполните все поля"

    else:

        f = Feedback(name=name, email=email, msg=msg)

        f.save()

    return direct_to_template(request, "feedback_result.xml", data, mimetype="text/xml")

def feedbacks(request):

    data = {}

    data['feedbacks'] = Feedback.objects.all()

    return direct_to_template(request, "feedbacks.xml", data, mimetype="text/xml")

* This source code was highlighted with Source Code Highlighter.

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

manage.py syncdb

После создания базы данных все готово для запуска сервера. Это можно сделать двумя способами: нажав в Aptana кнопку на панели инструментов Run или Ctrl+F11, либо выполнив в каталоге проекта команду:

manage.py runserver 8081

Проверка работоспособности сервера

Перейдем в браузере по ссылке: http://127.0.0.1:8081/send?name=name&email=email&msg=msg

Видим xml файл, значит наш сервер успешно обработал запрос.

<r>

<code>0</code>

<msg></msg>

</r>

Запускаем клиента на Flex и попробуем отправить сообщение через него.

Проверим что у нас накопилось в базе:

Перейдем в браузере по ссылке: http://127.0.0.1:8081/feedbacks

<r>

<feedbacks>

<f>

  <name>name</name>

  <email>email</email>

  <msg>msg</msg>

</f>

<f>

  <name>Александр</name>

  <email>alex@example.com</email>

  <msg>Заработало!</msg>

</f>

</feedbacks>

</r>

Все работает!

Для просмотра полученных сообщений http://127.0.0.1:8081/feedbacks можно сделать еще одно небольшое приложение Flex для администратора.

Заключение

Ну вот и все! Надеюсь кому-нибудь моя статья будет полезна. :)

Благодарю за внимание!

Руководство по созданию глянцевых кнопок в Inkscape

2009-11-26T07:26:00.000-08:00

Давно хотелось научиться делать симпатичные кнопки для веб-страниц. И совсем недавно нашла статью с довольно подробным руководством, как это можно сделать в свободном графическом редакторе Inkscape, чему несказанно была рада. Кстати, в этом редакторе рисовать кнопки намного проще, чем в Photoshop. Ознакомиться с этой статьей можно здесь. А тут я приведу её вольный перевод.

Простая 3D-кнопка

Начнём с простейшей кнопки, которая будет многократно использоваться позже для других стилей кнопок.
Используя инструмент Прямоугольник (Rectangle Tool), нарисуем прямоугольник и заполним его любым приятным цветом. Скруглим углы (радиусом примерно 16px):

Дублируем прямоугольник (Ctrl+D), заполним копию градиентом от частично прозрачного чёрного до полностью прозрачного чёрного. Поместим копию на оригинал.

Снова дублируем прямоугольник, сдвигаем его немного вправо и вниз, сделаем его чёрным, применим небольшое размытие (Объект → Заливка и обводка → Размывание) и передвинем его вниз стека (Объекты → Опустить на задний план либо кнопкой на панели инструментов). Тем самым получим небольшую тень под кнопкой. Это заготовка кнопки

С помощью инструмента Текст (Text Tool) сделаем надпись на кнопке. Выберем шрифт, размер и цвет. Копируем текст, делаем копию чёрного цвета, приеменим фильтр размытия, сдвинем его немного вправо и вниз. Передвиним его вниз под исходную надпись, чтобы она выглядела объёмно, как 3D-текст:

Можно делать множество различных кнопок, только изменив цвет исходного прямоугольника:
Аква-кнопки

Начнем с основного прямоугольника как в простой 3D-кнопке, но радиус скругления углов сделаем больше. Дублируем и заполняем копию градиентом от частично прозрачного чёрного до полностью прозрачного чёрного, но в отличии от предыдущего примера ориентированный сверху вниз. Для создания освещенной области снова дублируем прямоугольник, заполняем его белым цветом, уменьшаем его размер по высоте и помещаем в верхней части кнопки:

Меняем белую область на градиент от частично прозрачного белого до полностью прозрачного белого. Сделаем еще одну освещенную область, закрасим её сплошным белым. Сделаем её ниже по высоте, поместим в нижнюю часть кнопки и применим размытие (Объект → Заливка и обводка → Размывание):

Сделаем тень у кнопки, а также небольшое размытие верхнего блика:

Можно добавить надпись с тенью:

Кристальная кнопка
Применим эффект кристалла или стекла к простой 3D-кнопке.

Начнём с простой кнопки и изменим вертикально ориентированный градиент: Дублируем базовый прямоугольник и заполним его белым цветом. Используя Безье линии (Bézier Lines), нарисуем полигон через верхнюю левую часть и пересечём её с белым прямоугольником (для этого выделим белый прямоугольник и кривую Безье, зажав Shift; в меню выберем Контур → Пересечение).

Приведем в порядок нижнюю грань кривой освещённой области и применим градиент от частично прозрачного белого до полностью прозрачного белого:


Тень снизу

Используем Аква-кнопку без тени. Дублируем закруглённый прямоугольник, заполним его чёрным цветом, изменим высоту и сдвинем в нижнюю часть кнопки. Применим размытие, изменим прозрачность и опустим его вниз под кнопку:



Отражение

Снова начнем с Аква-кнопки без тени. Дублируем цветной закруглённый прямоугольник и сдвинем его вниз под кнопку, он будет отражением:

На цветной прямоугольник наложим градиент от полной непрозрачности до полной прозрачности того же цвета. По желанию можно добавить тень:


Различные состояния кнопок

Для веб-сайта могут быть нужны различные состояния кнопок: активная, неактивная или нажатая.

Начнём с финальной версии Аква-кнопки. Изменим цвет заднего фона (основной цвет кнопки). Выберем тень надписи и трансформируем её в свечение, заменив чёрный цвет на белый и увеличив размытость:

Ниже представлено 3 состояния кнопок: активная, выделенная и неактивная. Неактивная кнопка была получена изменением цвета заднего фона и цвета надписи на серый:




Надеюсь, теперь вы сможете создавать свои кнопки без особых хлопот :)

Сборка OGRE из исходников под Windows, с помощью MinGW и среды Code::Blocks.

2009-07-21T09:06:00.001-07:00

Ogre – это добротный движок рендеринга с открытыми исходниками. Я уже довольно давно посматриваю за его развитием (как и за другими интересными Open Source проектами), периодически собирая его (и вещи на его основе) из исходников, чтобы поиграться с демками. :) Но, к сожалению, до своих проектов, с использованием OGRE, руки пока не доходят.. :(
Однако, рискну поделиться своим скромным опытом в вопросе сборки OGRE с помощью MinGW и черкануть немного об этом, в принципе, достаточно простом процессе. Может кому-то и пригодится (конечно, в первую очередь мне самому).. :)

Для того чтобы собрать OGRE понадобиться:
1.Установленный MinGW (желательно первым способом) и настроенный Code::Blocks.
2.Собственно исходники OGRE. Для начала лучше попробовать архив с последним релизом, т.к.при сборке trunk-версии из репозитория могут быть проблемы требующие вмешательства напильника.. Последний релиз следует искать тут http://www.ogre3d.org/download/source. В моем случае файл OGRE 1.6.2 Source For Windows ( ogre-v1-6-2.zip, 11 April 2009, 46.4Mb ).
3.Архив со сторонними зависимостями (Precompiled Dependencies). Это предварительно скомпилированные сторонние библиотеки. ВНИМАНИЕ, архив зависимостей должен соответствовать вашему компилятору, в нашем случае MinGW (библиотеки для Visual Studio не подойдут). Ищем архив на странице с исходниками http://www.ogre3d.org/download/source. В моем случае Code::Blocks + MingW Precompiled Dependencies (OgreDependencies_CBMinGW_Shoggoth_20090131.zip, 31 January 2009, 21.5Mb ).
4.Если хочется собрать плагин для рендеринга через DirectX (RenderSystem_Direct3D9.dll), то нужно еще установить DirectX SDK (у меня валялся файл DXSDK_Nov08.exe, 507 MB) или просто раздобыть заголовочные файлы от него (библиотечные файлы идут в архиве с зависимостями libd3dx9_30.a, libd3dx9d_30.a, libd3d9.a, а либы для Visual Studio из SDK все равно не подойдут). В принципе можно положить на DirectX болт, так есть еще OpenGL рендер (RenderSystem_GL.dll), который прекрасно собирается без DirectX SDK и позволяет запускать все стандартные демки OGRE. Нужно только пропатчить файл Plugins.cfg в директории с собранными демками перед запуском и закаментить или вообще убрать строчку «Plugin=RenderSystem_Direct3D9».

Прибарахлились. Можно ехать дальше..

Распаковываем архив с исходниками ogre-v1-6-2.zip в какую-нибудь папку. Я буду предполагать, что исходники распакованы в папку «c:\dev».
Распаковываем зависимости OgreDependencies_CBMinGW_Shoggoth_20090131.zip в папку с исходниками OGRE «c:\dev\ogre».
Запускаем Code::Blocks и открываем в нем файл рабочей области «c:\dev\ogre\Ogre.workspace».
Если у вас многоядерная система и есть желание ускорить процесс сборки, проверьте настройки компиятора и укажите сколько процессов использовать для сборки (об этом я писал в конце поста про Code::Blocks). Это делается в меню Code::Blocks «Settings->Compiler and Debugger..->Global compiler settings» на вкладке «Other settings»
Если DirectX SDK установлен пропишите его в путях компилятора. Code::Blocks «Settings->Compiler and Debugger..->Global compiler settings» на вкладке «Search directories» в суб-вкладке «Compiler» добавьте путь к заголовочным файлам DirectX, у меня это «C:\Program Files\Microsoft DirectX SDK (November 2008)\Include».
Если на DirectX Вы забили, то закройте проект RenderSystem_Direct3D9, чтобы не было ругани при попытке его сборки (правой на названии «Close project»).

Все готово к сборке :). Жмем в меню Code::Blocks «Build->Build workspace» и идем пить чай пока идет сборка.

Если во время сборки не было ошибок, то все клево. Идем в папку «c:\dev\ogre\Samples\Common\bin\Release\» и любуемся собранными демками. Если нужно отключаем DirectX в Plugins.cfg.

Если у Вас не пашет пример Demo_BspCollision.exe, то попробуйте добавить строчку «dInitODE();» в начало конструктора OgreRefApp::World::World («c:\dev\ogre\ReferenceApplication\ReferenceAppLayer\src\OgreRefAppWorld.cpp») и пересоберите проект Demo_BspCollision.

Ссылки по теме:
http://www.ogre3d.org
http://www.ogre3d.ru

На сегодня все. Удачной компиляции! :)

P.S. К сожалению, я здесь упустил один момент. В wiki на ogre3d.org есть замечание о том что их тулбокс с mingw использует модифицированную версию библиотеки libstdc++, т.к. при использовании стандартной версии идущей с gcc-g++ при передачи строк между dll возникают проблемы с памятью (из за того что libstdc++ статически линкуется к каждой dll). Насколько я понял это в основном касается OgrePlatform и OgreMain из OGRE 1.4.x. Но по всей видимости в Ogre 1.6.x код из OgrePlatform перекочевал в OgreMain, и возможно проблема уже не актуальна :).. Во избежание неприятных последствий можно перестраховаться и воспользоваться TDM Mingw (где уже сделаны необходимые модификации), либо использовать тулбокс с ogre3d.org обновив пакеты w32api и mingwrt (w32api-3.13-mingw32-dev.tar.gz, mingwrt-3.15.2-mingw32-dev.tar.gz)

Установка Code::Blocks (Nightly builds) в Windows

2009-06-23T09:44:00.000-07:00

Несмотря на наличие на официальном сайте среды Code::Blocks полноценных инсталляторов для множества платформ, разработчики не радуют пользователей регулярностью их обновлений. Интервал между двумя официальными релизами (версией 8.02 и предыдущей) был более 2-х лет. :) Однако, все это время среда разработки продолжала развиваться и обрастать новыми возможностями.

UPD 9.01.2010: Вставил скриншоты которые валялись на компе уже очень давно :).

Очевидно, у команды разработчиков Code::Blocks, просто, нет возможности часто подготавливать полноценные релизы.. Это не удивительно, если учесть то, что разработка ведется энтузиастами в свободное от основной работы (т.е. зарабатывания денег) время.
К сожалению, развитие программы плохо заметно если пробегать официальный сайт http://www.codeblocks.org бегло, т.е. ограничиться посещением страницы с описанием и сразу перейти на страницу загрузки с версией не первой свежести.. Вполне возможно, именно первое знакомство со старыми версиями и отпугивает многих потенциальных пользователей, от того чтобы начать использовать эту среду. Но разработка не стоит на месте и прогресс можно наблюдать, просматривая списки изменений, на форуме http://forums.codeblocks.org/ в разделе Nightly builds, где регулярно выкладываются свежие билды Code::Blocks под Windows на основе последних версий исходников из репозитория. Существует так же неофициальный debian-репозиторий c ночными сборками http://apt.jenslody.de, который можно использовать для установки последних версий в Debian и Ubuntu. Кроме того для самых отчаянных и нетерпеливых всегда существует возможность самостоятельно собрать Code::Blocks из исходников. Для получения последних версий исходников всегда можно обратиться к svn-репозиторию проекта: http://svn.berlios.de/svnroot/repos/codeblocks/trunk
Итак, если Вас не устраивает версия Code::Blocks представленная в секции загрузки на официальном сайте, то рекомендую попробовать последнюю ночную сборку, предварительно установив MinGW. Где искать MinGW, я уже писал ранее.
Смело идем на форум http://forums.codeblocks.org/ в раздел Nightly builds и заходим в последний созданный топик сообщающий о выходе билда.
Например: «The 01 June 2009 build (5616) is out». Из названия следует что успешно вышел билд за 1 июня на основе ревизии 5616 из официального svn-репозитория проекта.
В первом посте топика видим несколько ссылок: ссылка на rss с новостями, инструкцию по работе с ночными сборками и 3 ссылки на файлы архивов в формате 7z. Если Вы впервые качаете ночную сборку, то нужно обязательно загрузить все три файла.
В моем случае это:
wxmsw28u_gcc_cb_wx2810.7z - библиотека wxWidgets специальная сборка для Code::Blocks. Меняется редко если для предыдущей ночной сборки вы уже скачали этот файл, то второй раз качать его не нужно. :)
mingwm10_gcc421.7z - какая то служебная библиотека из состава MinGW, нужна для dll c wxWidgets. :) Меняется еще реже.
CB_20090601_rev5616_win32.7z - свежий билд Code::Blocks. Меняется каждую ночную сборку.. ;)

Создадим папку в которой будет жить среда Code::Blocks и распакуем в нее содержимое всех трех архивов. По старой привычке у меня эта папка имеет незамысловатый путь «c:\codeblocks». ;) Установите MinGW если вы этого еще не сделали.

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

В моем случае Code::Blocks нашел установленный MinGW как GNU GCC Compiller и компилятор из состава Microsoft Visual Studio 2008 Express.
Я выбираю «GNU GCC Compiller», нажимаю «Set as default» и «OK», в дальнейшем MinGW будет использоваться по умолчанию.
Компилятор выбран и программа радостно откроет главное окно и диалог «Tip of the day». Закройте окно с советами (можете снять галочку, чтобы оно не выскакивало при старте программы), к нему всегда можно вернуться через главное меню в разделе «Help». Далее программа спросит хотите ли Вы ассоциировать Code::Blocks с файлами C/C++ (*.c, *.cpp, *.h), файлами проектов Code::Blocks (*.cbp, *.workspace) или даже c файлами проектов других сред разработки DevCPP и Visual Studio.

Я выбираю ассоциации с файлами C/C++ и файлами проектов Code::Blocks, это третья строчка. Нажимаем «OK» и среда уже практически готова к работе, осталось немного подстроить интерфейс под себя и проверить на тестовом проекте.

Закрываем окошко «Scripting console» и размещаем панели инструментов более компактно. Часть панели можно выборочно скрыть через меню «View->Tollbars»
Я размещаю панели в 3 строчки:
1 Строчка - панели Main (значки сохранения, открытия файлов и т.д.), IncrementalSearch и ThreadSearch.
2 строчка - панель CodeCompletion.
3 строчка - панели Compiller и Debugger.

Для проверки попробуем скомпилировать HelloWorld . :) Для этого создадим новый проект «File->New->Project». Откроется окно с выбором шаблонов проектов. Выберите «Console application» - откроется мастер создания проекта.

Первая страница мастера не представляет интереса. На второй нужно указать язык проекта C или C++. На третьей нужно указать название проекта и папку где он будет создан. На четвертой(последней) странице производится выбор компилятора для проекта и настройка папок куда будут складываться результирующие исполняемые и объектные файлы. Жмем Finish - проект создан. В окошке Managment появился новый проект, пока состоящий из одного файла main.cpp (или main.c).

Соберем проект, меню «Build->Build and run» или просто F9 (для компиляции, линковки и запуска проекта).

Если сборка пройдет неудачно или Code::Blocks не найдет MinGW, то в нижней части программы на владке Build log появится сообщение подсвеченное красным.
Например, если не найден MinGW:
-------------- Build: Release in test ---------------
Compiling: main.cpp
Execution of 'mingw32-g++.exe -Wall -fexceptions -O2 -c D:\dev\sandbox\test\main.cpp -o obj\Release\main.o' in 'D:\dev\sandbox\test' failed.
Nothing to be done.

Убедитесь что MinGW установлен. Если он установлен в папку отличную от «c:\mingw» и не определяются Code:Blocks автоматически, то зайдите в настройки компилятора «Settings->Compiler and Debugger..->Global compiler settings». В выпадающем списке «Select compiler» выберите «GNU GCC Compiler», перейдите на вкладку «Toolchain executables» и в поле «Compiler installation directory» укажите путь к MinGW.

Если сборка пройдет успешно Вы увидите перед собой окошко консоли с примерно таким текстом:
Hello world!
Process returned 0 (0x0) execution time : 0.093 s
Press any key to continue.

Это окошко принадлежит пускалке для консольных приложений «cb_console_runner.exe», которая замеряет время выполнения Вашей программы и, ожидая ввода с клавиатуры, не дает пропасть в небытие данным выведеным на консоль, избавляя от извращений типа «getchar()» в конце программы. :)

Ну вот и все, Code::Blocks - готов к работе. :)

На последок, порекомендую так же в настройках компилятора «Settings->Compiler and Debugger..->Global compiler settings» изменить формат лога компиляции и указать максимально количество процессов для параллельной компиляции файлов проекта (дает существенное ускорение компиляции больших проектов на многоядерных процессорах).
Для этого перейдем на вкладку «Other settings». Поставим галочку «Display build progress percentage in log» (это будет отображать в логе компиляции прогресс сборки проекта в процентах). Иногда может быть полезным посмотреть полную информацию о параметрах вызова компилятора, для этого может пригодится установить параметр «Compiler logging» в значение «Full command line» . Изменим число в поле с названием «Number processes for prallel builds» на число равное числу ядер в вашей системе. В принципе это число может быть и больше. Например у меня сборка одного проекта на двухядерной системе в 4 процесса происходила слегка быстрее чем в 2 процесса. Но не увлекайтесь, если поставить совсем неадекватное число то, получите обратный эффект - уменьшение скорости.

На сегодня все. Удачной компиляции! :)

Установка MinGW

2009-06-19T01:50:00.000-07:00

MinGW - это нативный порт компиляторов GCC на платформу Windows. На сегодняшний день является наиболее «вменяемой» бесплатной альтернативной коммерческим компиляторам. Повсеместно применяется для разработки кросс-платформенных приложений. Например, именно MinGW используется в качестве компилятора С++ под Windows в средах разработки Qt Creator, Code::Blocks (в качестве основного), NetBeans и Eclipse.

Ниже я перечислю основные особенности MinGW и опишу несколько способов для его установки.

Для начала перечислю важные (на мой взгляд) особенности MinGW. ;)

Основные достоинства:
+ полностью бесплатен;
+ генерирует хороший быстрый код;
+ непрерывно развивается;
+ удобство и компактность установки.

Основные недостатки:
- Относительно медленная компиляция C++ кода;
- Относительно медленная линковка результирующего файла;
- Несовместимость с, содержащими C++ классы, *.lib и *.dll файлами созданными в MS Visual Studio. По этой причине MinGW и PhysX SDK не дружат друг с другом..

Для того чтобы заполучить на свой компьютер готовый к работе MinGW, существует несколько способов.

Способ 1- использовать автоматический установщик с официального сайта MinGW.
Установщик официальной версии MinGW следует искать на сайте http://mingw.org/
На момент написания этих строк файл установщика называется «MinGW-5.1.4.exe» и его можно загрузить со страницы загрузки.
Установщик состоит из одного файла «MinGW-5.1.4.exe» и имеет мизерный разер (~140 KB). Непосредственно при установке он выкачивает дополнительные архивы с компонентами GCC. По умолчанию MinGW ставиться в папку «c:\mingw» Перед установкой рекомендую поместить «MinGW-5.1.4.exe» в отдельную пустую папку, т.к. все выкаченные архивы кэшируются в папке откуда запущена установка. Если ничего не удалять, то можно все это добро скопировать и устанавливать без интернета, запуская все тот же «MinGW-5.1.4.exe».

Следует отметить, что при установке через «MinGW-5.1.4.exe», можно выбрать версию Mingw (Previous, Current, Candidate), инсталлятор регистрирует установку в системе и предоставляет возможность обновления и удаления текущей установки.
Если MinGW ставится для работы с Code::Blocks, то при установке рекомендую выбрать версию «Candidate», а среди устанавливаемых компонентов должны быть обязательно отмечены «MinGW base tools», «g++ compiller» и «MinGW Make».

Способ 2 - Выкачать нужные пакеты с http://mingw.org вручную или воспользоваться архивами полученными при установки первым способом.
Приведу список файлов которые скачивает официальный установщик MinGW для версии Candidate:

gdb-6.8-mingw-3.tar.bz2
mingw32-make-3.81-2.tar.gz
binutils-2.18.50-20080109-2.tar.gz
gcc-g++-3.4.5-20060117-3.tar.gz
w32api-3.13-mingw32-dev.tar.gz
mingwrt-3.15.2-mingw32-dev.tar.gz
gcc-core-3.4.5-20060117-3.tar.gz

Не нужно даже прибегать к запуску инсталлятора, достаточно просто разархивировать все архивы в одну папку. Для распаковки можно воспользоваться замечательным бесплатным архиватором 7-zip (http://www.7-zip.org/).

И еще, отладчик gdb (который будет очень кстати при работе в среде Code::Blocks) придется качать отдельно в секции загрузки http://mingw.org

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

Примером может служить пакет MinGW С++ Toolbox предлагаемый (в связке с Code::Blocks ;) в качестве альтернативного инструментария для сборки и работы с движком рендеринга Ogre. Никаких специфических ограничений и заточек под Ogre в нем нет, и я давно использовал его просто как удобный «все-в-одном» инсталлятор MinGW. Все было замечательно. :) Но однажды случилось страшное.. В очередной раз решив собрать свежий Ogre, потыкать примеры и заставить себя чего-нибудь на нем слепить, я обнаружил что исходники относительно недавно вышедшего Ogre 1.6.2 у меня просто не собираются этим пакетом инструментов (требуется обновление w32api до версии 3.13). К слову, установка MinGW версии Candidate первым способом позволила решить эту проблему. ;) Хотя данный пакет в целом не плох и ранее всегда справлялся со своими задачами. Если требуется компактный инсталлятор со стабильным MinGW для общих задач, то можно со спокойной душой качать MinGW_Toolbox_Setup_wr1 c ogre3d.org. Будем наедятся что актуальная версия этого пакета появится в скором времени.

Если поискать, то в интернете, можно найти и другие сборки MinGW от энтузиастов. Как правило это просто само-распаковывающихся архивы.

Совсем недавно мне попалась альтернативная сборка последних версий GCC/Mingw32 - TDM-MinGW http://www.tdragon.net/recentgcc/
Она является неофициальной и, как заявляют разработчики, предназначена для экспериментальных целей. Но судя по всему ее можно использовать, если она не вызывает проблем в конкретном проекте. :) Я ее еще не испытывал на сборке крупных вещей, но со временем постараюсь это исправить.
Сборка имеет полноценный инсталлятор. При установки можно выбрать между стабильными и экспериментальными вариантами исполнительных фалов MinGW. Включает в себя все необходимое для сборки и отладки С++ проектов (make,gcc,gdb).
Из плюсов этой сборки несомненным является ее регулярное обновление.
Качать Bundled Installer. Размер около 26 MB.

Способ 4 - скачать среду разработки со встроенным MinGW. :)
Один самый ленивый способ, которым я пользовался когда-то давно. Я ставил Code::Blocks с MinGW в комплекте и накатывал ночные сборки поверх.
Из плюсов можно отметить что отпадает вопрос настройки среды разработки. :) Но в тоже время если поставить Qt Creator или старину wxDevCpp со встроенным MinGW и потом настроить использование его в Code::Blocks получится путаница и последующие лишние телодвижения при удалении и обновлении вышеупомянутых программ. Если в скачиваемой программе MinGW идет в комплекте и никому не мешает, то это прекрасно. Но для остальных программ лучше использовать отдельную инсталляцию MinGW в папку «c:\mingw», т.к. там они его буду искать в первую очередь.

Думаю на сегодня хватит про MinGW.

В ближайшее время постараюсь (как и обещал ранее) написать про установку ночных сборок Code::Blocks и их первичную настройку.

Релиз Jython 2.5

2009-06-18T01:06:00.000-07:00

Наконец то Jython 2.5 разродился релизом. :)
Появился повод пощупать его поплотнее.

Качать: http://downloads.sourceforge.net/jython/jython_installer-2.5.0.jar

Cреда разработки Code::Blocks

2009-06-16T21:24:00.000-07:00

Несколько лет назад я случайно попробовал Code::Blocks и он меня «зацепил». В 20 мегабайтах инсталлятора скрывалась полноценная среда программирования готовая к работе сразу после минутной установки. Ее можно было быстро и без геморроя развернуть на любой подручной машине, в отличие от C++ Builder 6, который я использовал, и MS Visual Studio, на который я заглядывался ,но так и не перелез из-за ненадобности. С тех пор много воды утекло но для своих С++ проектов и экспериментов я стараюсь использовать именно Code::Blocks.

Не претендуя на полноту и оригинальность, я все же расскажу немного об этом добротном инструменте. ;)

Code::Blocks - это интегрированная кроссплатформенная среда разработки для языков С, C++ и D.
На мой взгляд, она хорошо подходит для изучения С/С++ и разработки относительно небольших проектов.

Перечислю главные, на мой взгляд, особенности программы:
+ Code::Blocks написан на С++ с использованием библиотеки wxWidgets, поэтому работает довольно шустро и кушает мало ресурсов системы (в отличие от Eclipse и Netbeans, написанных на Java).
+ Встроенный редактор кода базируется на компоненте Scintilla и предлагает подсветку синтаксиса для десятка языков с возможностью свертывания фрагментов кода. К слову сказать, Scintilla так же используется в редакторах SciTE и Notepad++.
+ Возможность экспорта исходника (с подсветкой синтаксиса) в html, odt, pdf и rtf.
+ Кроссплатформенность. Среда прекрасно работает в Windows и Linux.
+ Хорошо поддерживает разработку программ с использованием wxWidgets.
+ Поддержка множества компиляторов. Кроме GСС/MinGW поддерживаются и компиляторы от Microsoft, Borland, Intel, Digital Mars. Но на мой взгляд, GСС/MinGW интегрированы в среду наиболее плотно и лучше использовать именно их.
+ Интегрированный отладчик. Вполне терпимый.
+ Автодополнение кода. Вполне терпимое. :)
+ Удобные функции поиска по проекту.
+ Богатые возможности по настройке проекта.
+ Простой и удобный интерфейс. Хотя местами возможно деревянный. :)
+ Поддержка плагинов. Можно писать свои модули расширений. Например новые типы редакторов.Множество стандартных плагинов облегчающих жизнь:
* Source code formatter (Astyle) – расставляет отступы в коде и приводит к выбранному стилю. Удобно если вам попался чужой код форматирование которого съехало, либо его изначально не было. ;)
* wxSmith – визуальный редактор форм для проектов на базе wxWidgets.
* DragScroll – позволяет зажав в редакторе кода правую кнопку мыши прокручивать код.
* Profiler, Devpak installer, HexEditor и д.р.
+ Code::Blocks достаточно легко можно собрать из исходников. Это может понадобится если установить плагин от сторонних разработчиков (Например: плагин для поддержки Svn или разработка на Python).
+ Постоянное развитие проекта, регулярно появляются новые фичи. Ночные сборки под Windows (Nights Builds) c последними исправлениями ошибок и новыми возможностями выходят регулярно не реже раза в месяц, а иногда и каждый день. :)

Неплохо для Проекта развивающегося на голом энтузиазме? :)

В Code::Blocks достаточно комфортно можно изучать чужие исходники, активно используя функцию поиска упоминаний выделенного класса или просто текста.
Ночная сборка занимает около 7 мегабайт в архиве, но для нее необходимо устанавливать MinGW отдельно (плюс 19 мегабайт).
В распакованном виде Code::Blocks и MinGW занимают около 100 мегабайт.
Можно смело ставить на нетбук. :)

В следующем посте постараюсь рассказать об установке и настройке ночных сборок под Windows (Nights Builds).

Интересующимся другими бесплатными средами кроссплатформенной разработки на С++ рекомендую посмотреть:
Qt Creator - Хорошая среда для разработки на Qt (написано на C++)
Eclipse C/C++ Development Tooling - CDT - Среда на базе Eclipse (написано на Java).
NetBeans - Среда в основном для Java но имеется поддержка C++ (написано на Java)/

Что еще посмотреть:
http://www.codeblocks.org/downloads – страница загрузки
http://ru.wikipedia.org/wiki/Code::Blocks
http://alenacpp.blogspot.com/2005/10/codeblocks-studio.html
http://wxwidgets.info/tag/codeblocks/

Проверка связи

2009-06-16T10:27:00.000-07:00

Доброго времени суток!
Это мой первый пост в моем первом блоге. :)
Блог будет посвящен различным интересующим меня штукам в основном из области прогаммирования и прочего IT..