Сегодня, я хочу рассказать об очень интересном фреймверке — Cappuccino. С его помощью можно легко создавать передовые веб-приложения. Основными преимуществами являются: использование Objective-J, удобные инструменты для управления проектом и уникальный коструктор интерфейсов.

Cappuccino построена на стандартных веб-технологий, как JavaScript, и реализует большую часть API, знакомых с GNUstep и Apple Cocoa.

Попробуем создать небольшое приложение.

Капучино поддерживается на следующих платформах:

• Платформа: Поддерживаемые функции
• Mac OS: X Toolchain, Interface Builder
• Linux: Toolchain
• ОС Windows: Toolchain с установкой Cygwin

Это руководство написано на основе Mac OS X, с заметками о любых разногласиях с другими платформами.

Загрузка и запуск примера приложения

Если вы еще не успели, загрузите пакет Cappuccino Starter. Этот zip файл содержит: пример приложения(NewApplication), лицензию, скрипт, с помощью которого можно загрузить все остальные инструменты Cappuccino,и README.

Запуск NewApplication

После того как вы скачали и распаковали пакет Cappuccino Starter, откройте папку NewApplication и найдите файл index.html. Затем просто откройте этот файл в вашем любимом браузере, дважды щелкнув по нему, или просто перетащив его в верхнюю часть вашего браузера. У вас должно получиться что-то, похожее на это (в Safari):

Замечание. Это будет работать не во всех браузерах. Обычно вам нужно также запустить веб-сервер.

Исходный Код

Код приложения расположенный ниже очень прост. В архиве несколько файлов, но AppController.j — единственный, который нам интересен в данный момент. Другие также необходимыми, но вам не нужно ничего изменять в них, чтоб запустить ваше первое приложение

Вы можете заметить на картинке выше, что включена мы подсветка синтаксиса в TextMate. Вы можете включить её, установив соответствующий режим, подробнее об этом — Руководство по установке.

Простые изменения

Теперь давайте посмотрим, что нужно, чтобы сделать простое дополнение к NewApplication. Мы добавим кнопку, которая переключает текст на экране между «Hello World!» И «Goodbye!». После строки, содержащей [contentView addSubview:label] (строка 31), добавьте следующий фрагмент кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var button = [[CPButton alloc] initWithFrame: CGRectMake(
                CGRectGetWidth([contentView bounds])/2.0 - 40,
                CGRectGetMaxY([label frame]) + 10,
                80, 24
             )];
 
[button setAutoresizingMask:CPViewMinXMargin |
                            CPViewMaxXMargin |
                            CPViewMinYMargin |
                            CPViewMaxYMargin];
 
[button setTitle:"swap"];
 
[button setTarget:self];
[button setAction:@selector(swap:)];
 
[contentView addSubview:button];

Теперь, обновите страницу в браузере, и вы увидите кнопку справа внизу «Hello World!». Она пока не будет работать, потому что мы не определили, что делать, когда кнопка нажата. Прежде, чем мы это сделаем, давайте быстро посмотрим, что каждая из предыдущих строк делает:

1
2
3
4
5

var button = [[CPButton alloc] initWithFrame: CGRectMake(
                CGRectGetWidth([contentView bounds])/2.0 - 40,
                CGRectGetMaxY([label frame]) + 10,
                80, 24
             )];

Эта строка создает новый объект CPButton, и помещает его на 40 пикселей влево от центра родительского элемента, и на 10 пикселов ниже нижней метки над ним. Это 80 пикселей в ширину и 24 пикселей в высоту. CGRectMake является основным способом создания CGRect, который является объектом, который описывает размер и положение каждого представления в Cappuccino. [contentView bounds] возвращает представление CGRectof, но без информации о местоположении. [label frame] возвращает метку CGRect содержащую информацию о местоположении.

1
2
3
4

[button setAutoresizingMask:CPViewMinXMargin |
                            CPViewMaxXMargin |
                            CPViewMinYMargin |
                            CPViewMaxYMargin];

Флаги автоматических изменений размеров определяют, как изменяется вотображение, когда будет изменен размер у родительского элемента (во всех случаях, вплоть до изменения размеров окна). В данном случае, это означает, что объект хотел бы иметь гибкое пространство сверху, снизу, справа, и слева. Другими словами, быть в центре, и не менять размер.

1

[button setTitle:"swap"];

Установить название кнопки «swap».

1
2

[button setTarget:self];
[button setAction:@selector(swap:)];

В Cappuccino, как и в OpenStep и Cocoa, такие элементы управления, как кнопки использовать механизм цели/действие для определения их поведения. Считайте это эквивалентом OnClick DOM элементов, но гораздо более мощный. В приведенном выше примере, мы устанавливаем self (например AppController), чтобы быть нашей целью, и swap: чтобы быть нашим действием. Это означает, что при нажатии кнопки, мы отправим swap: сообщение на self, которое было бы эквивалентно записи [self swap:button]. Вы заметите, swap: принимает один параметр. По умолчанию, действия обычно имеют один параметр, вызванный sender, потому вы можете знать, кто запрашивает эти действия (в данном случае это кнопка). Это может обеспечить полезную в условиях, когда несколько кнопок или представлений имеют одинаковые цели и действия.

1

[contentView addSubview:button];

Наконец, в этой последней строке мы добавляем нашу кнопку, как вложенную в окно отображения контента. Окно отображения контента это корневой вид окна, и поэтому в первую очередь нужно положить любые дополнительные представления.
В нынешнем виде, label является областью, которая существовует в течение applicationDidFinishLaunching:, это означает, что она не будет доступна в swap: или любых других методах. Таким образом, вместо того, чтобы создавать эти локальные переменные, давайте сделаем экземпляр переменной AppController. Для этого нужно просто добавить его в наш класс заменив:

1
2
3

@implementation AppController : CPObject
{
}

на:

1
2
3
4

@implementation AppController : CPObject
{
    CPTextField label;
}

Теперь, давайте возьмем переменную в изначальном определении label:

1

var label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];

становится:

1

label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];

Теперь нам нужно добавить метод swap:. Добавьте следующий код после закрытия скобки applicationDidFinishLaunching: метода

1
2
3
4
5
6
7

- (void)swap:(id)sender
{
    if ([label stringValue] == "Hello World!")
        [label setStringValue:"Goodbye!"];
    else
        [label setStringValue:"Hello World!"];
}

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

Теперь вы можете запустить этот новый код, сохранив AppController.j и обновив окно в браузере. Нажмите кнопку, и вы должны увидеть изменение строки туда-обратно между «Hello World!» И «Goodbye!!».

И последнее, добавьте эту строку после создания label в applicationDidFinishLaunching::

1

[label setAlignment:CPCenterTextAlignment];

Теперь текст будет в центре, и переключаться туда и обратно. Все приведенные выше изменения, вы можете скачать в этой копии AppController.j.

На этом завершаю краткое введение в пакет Cappuccino Starter. Теперь, когда вы знаете больше, вы можете перейти к более продвинутому руководству.

Оригинал статьи — http://www.cappuccino-project.org/learn/starter.html