Написание приложения Sencha Touch, часть 1

В этой серии мы создадим приложение Sencha Touch, которое позволит пользователям делать заметки и сохранять их на устройстве, на котором запущено приложение. Попутно мы углубимся в следующие области:

• Строительные блоки приложения Sencha Touch
• Отображение информации с использованием списка
• Редактирование информации с использованием элементов формы
• Постоянство данных на стороне клиента в сеансах браузера
• Навигация в приложении с несколькими представлениями

Особенности применения

Мы после этого простого набора функций:

• Возможность создавать заметки
• Возможность редактировать существующие заметки
• Возможность удалять заметки
• Возможность сохранять заметки на устройстве, на котором запущено приложение, в сеансах браузера

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

Проектирование основных видов

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

Как бы вы создали редактор заметок, используя компоненты Sencha Touch? Взгляните на это:

Нам также нужно представление, которое отображает список существующих заметок. Этот список заметок будет основным видом приложения, и он должен быть связан с редактором заметок. Вот как должен выглядеть список заметок:

И это компоненты Sencha Touch, которые мы будем использовать:

Есть еще один дополнительный компонент, который, хотя и не виден, жизненно важен для приложения. Этот компонент будет функционировать как видовой экран приложения, и он будет заботиться о рендеринге и управлении навигацией между списком заметок и редактором заметок. Чтобы играть эту роль, мы выберем Panel, настроенную с макетом карточек, где списки заметок и редактор заметок будут карточками макета:

Строительные блоки приложения Sencha Touch

В трех разных файлах будут размещаться части нашего приложения: index.html, app.js и app.cs:

Index.html — файл, используемый для запуска приложения. В этом файле нам нужно включить ссылки на инфраструктуру Sencha Touch, а также файлы app.js и app.cs:

<script src="../../../senchatouch/1.1.0/sencha-touch-debug.js" type="text/javascript"></script>
<link href="../../../senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>

В свою очередь, app.js и app.css будут содержать исходный код javascript и стили, используемые приложением. В файле app.js самое первое, что мы сделаем, это создадим экземпляр Application:

var App = new Ext.Application({
    name : 'NotesApp',
    useLoadMask : true,
    launch : function () {

    }
})

Класс Ext.Application представляет приложение Sencha Touch. Как описано в документации к классу Ext.Application , создание нового приложения автоматически создает глобальную переменную NotesApp вместе со следующими пространствами имен:

• NotesApp
• NotesApp.views
• NotesApp.controllers
• NotesApp.models
• NotesApp.stores

Функция launch () запускается только один раз. Здесь мы создадим область просмотра нашего приложения:

launch: function () {

	NotesApp.views.viewport = new Ext.Panel({
		fullscreen: true,
		html:'This is the viewport'
	});
}

Окно просмотра нашего приложения — Ext.Panel. На этой панели будет размещен список заметок и редактор заметок. Когда мы устанавливаем параметр полноэкранной конфигурации в значение true, мы даем указание панели принять всю доступную ширину и высоту. Это также установит для конфигурации monitorOrientation значение true, что позволит панели прослушивать события изменения ориентации.

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

Если вы перейдете на страницу index.html с помощью устройства или симулятора, наше приложение будет выглядеть следующим образом:

Создание контейнера списка заметок

Список заметок — это представление, которое будет представлено нашим пользователям при запуске приложения. Как определено в макете, это представление будет состоять из панели инструментов и списка заметок. Давайте построим это один шаг за один раз.

Во-первых, нам нужна панель, которая будет содержать панель инструментов и список заметок:

Мы назовем эту панель notesListContainer, и вот как мы ее создадим:

NotesApp.views.notesListContainer = new Ext.Panel({
    id : 'notesListContainer',
    layout : 'fit',
    html: 'This is the notes list container'
});

Прежде чем мы добавим панель инструментов и список заметок на эту панель, давайте отобразим ее в окне просмотра следующим образом:

var App = new Ext.Application({
    name: 'NotesApp',
    useLoadMask: true,
    launch: function () {

        NotesApp.views.notesListContainer = new Ext.Panel({
            id : 'notesListContainer',
            layout : 'fit',
            html: 'This is the notes list container'
        });

        NotesApp.views.viewport = new Ext.Panel({
            fullscreen : true,
            layout : 'card',
            cardAnimation : 'slide',
            items: [NotesApp.views.notesListContainer]
        });
    }
})

Обратите внимание, как мы добавили параметры конфигурации layout и cardAnimation в область просмотра. Это связано с тем, что мы будем использовать макет карты, где контейнером списка заметок и редактором заметок являются карточки. Как и во многих популярных мобильных приложениях, эти карты будут отображаться с использованием слайд-анимации.

Быстрая проверка на симуляторе или устройстве должна подтвердить наличие контейнера Notes List:

Чего нам не хватает в этом представлении? Панель инструментов и список заметок. Мы позаботимся о панели инструментов дальше.

Добавление панели инструментов Sencha Touch на панель

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

NotesApp.views.notesListToolbar = new Ext.Toolbar({
    id: 'notesListToolbar',
    title: 'My Notes'
});

Добавление панели инструментов к нашему notesListContainer — это простой шаг. Нам просто нужно использовать опцию конфигурации dockedItems:

NotesApp.views.notesListContainer = new Ext.Panel({
    id: 'notesListContainer',
    layout: 'fit',
    html: 'This is the notes list container',
    dockedItems: [NotesApp.views.notesListToolbar]
});

var App = new Ext.Application({
    name: 'NotesApp',
    useLoadMask: true,
    launch: function () {

        NotesApp.views.notesListToolbar = new Ext.Toolbar({
            id: 'notesListToolbar',
            title: 'My Notes'
        });

        NotesApp.views.notesListContainer = new Ext.Panel({
            id: 'notesListContainer',
            layout: 'fit',
            html: 'This is the notes list container',
            dockedItems: [NotesApp.views.notesListToolbar]
        });

        NotesApp.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            cardAnimation: 'slide',
            items: [NotesApp.views.notesListContainer]
        });
    }
})