Статьи

Создание кнопок сенсорной панели инструментов Sencha

Январь 31, 2018

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

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

  • Создать веб-страницу для размещения приложения
  • Напишите функцию Ext.setup
  • Создание различных типов кнопок панели инструментов
  • Создать обработчик нажатий для кнопок
  • Создать и настроить панели инструментов
  • Создать панель и закрепить панели инструментов

Настройка приложения Sencha Touch

Чтобы начать, вам нужно создать HTML-страницу для размещения вашего приложения. Эта страница будет ссылаться на библиотеку Sencha Touch и ваши собственные скрипты:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
     <link rel="stylesheet" href="ext/resources/css/ext-touch-debug.css" type="text/css"/>     
     <script type="text/javascript" src="ext/ext-touch-debug-w-comments.js"> </script>     
     <script type="text/javascript" src="js/toolbar-buttons-1.js"> </script>
</head>
<body>
</body>
</html>

Теперь давайте сосредоточимся на файле toolbar-buttons-1.js. Первым шагом должна быть настройка значков и начальных экранов приложения. Вы можете сделать это внутри функции Ext.setup ():

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false
});

Ext.setup () — это встроенная функция, которая заботится о настройке вашей страницы, поэтому она отлично смотрится на разных мобильных платформах и устройствах. Он также содержит функцию onReady (), в которой вы будете настраивать объекты приложения.

Создание различных типов кнопок панели инструментов Sencha Touch

В onReady () ваше первое назначение — добавить пару массивов конфигураций кнопок. Эти массивы содержат кнопки для верхней и нижней панелей инструментов:

var buttonsSpecTop = [
    { ui: 'back', text: 'Back' },
    { xtype: 'spacer' },
    { ui: 'forward', text: 'Forward' }
]

var buttonsSpecBottom = [
    { ui: 'normal', text: 'Normal' },
    { ui: 'round', text: 'Round' },
    { ui: 'action', text: 'Action' },
    { ui: 'confirm', text: 'Confirm' }              
]

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

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

var tapHandler = function (btn, evt) {
    alert("Button '" + btn.text + "' tapped.");
}

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

var dockedItems = [{
    xtype: 'toolbar',
    title: 'Buttons',
    ui: 'dark',
    dock: 'top',
    items: buttonsSpecTop,
    defaults: { handler: tapHandler }
}, {
    xtype: 'toolbar',
    ui: 'dark',
    dock: 'bottom',
    items: buttonsSpecBottom,
    defaults: { handler: tapHandler }
}]

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

Собираем все вместе

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

new Ext.Panel({
    id: 'buttonsPanel',
    fullscreen: true,
    dockedItems: dockedItems
});

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

Можно управлять пристыкованными предметами, используя ряд функций. Вы можете использовать функции addDocked () и removeDocked () для добавления или удаления закрепленных элементов, а также onDockedAdd () или onDockedRemove () для выполнения действий после добавления или удаления закрепленных элементов. Метод getDockedItems () возвращает массив подключенных в данный момент компонентов.

Вот полный исходный код:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function () {

        var buttonsSpecTop = [
            { ui: 'back', text: 'Back' },
            { xtype: 'spacer' },
            { ui: 'forward', text: 'Forward' }
        ]

        var buttonsSpecBottom = [
            { ui: 'normal', text: 'Normal' },
            { ui: 'round', text: 'Round' },
            { ui: 'action', text: 'Action' },
            { ui: 'confirm', text: 'Confirm' }              
        ]

        var tapHandler = function (btn, evt) {
            alert("Button '" + btn.text + "' tapped.");
        }

        var dockedItems = [{
            xtype: 'toolbar',
            title: 'Buttons',
            ui: 'dark',
            dock: 'top',
            items: buttonsSpecTop,
            defaults: { handler: tapHandler }
        }, {
            xtype: 'toolbar',
            ui: 'dark',
            dock: 'bottom',
            items: buttonsSpecBottom,
            defaults: { handler: tapHandler }
        }]

        new Ext.Panel({
            id: 'buttonsPanel',
            fullscreen: true,
            dockedItems: dockedItems
        });
    }
});

Вот оно Я надеюсь, что это руководство поможет вам в ваших проектах Sencha Touch. 

Помните, что предоставленная мною информация основана на общедоступной бета-версии Sencha Touch 0.97. Вы должны ожидать увидеть различия с первым выпуском библиотеки.

31
Share: