HTML5 Builder - Get Started (Mobile Application)

Первая часть.

Нам осталось рассмотреть еще два примера по созданию приложений которые приведены в документации по HTML5 Builder - это Server Mobile Application и Client Mobile Application.

Server Mobile Application

Давайте запустим новое приложение New->HTML5 Builder->Server Mobile Application:

 

Перед нами откроется окно Дизайнера с расположенном в центре изображением iPhone (или иного устройства, если вы до этого создавали Mobile Application). Можно выбрать из списка любое устройство или добавить свое с нужными вам параметрами, Данная форма, в виде девайса, является задним фоном которые при желание можно отключить:

Давайте перейдем в Панель Инструментов / Tool Palette, раскроем вкладку Mobile найдем там компоненты MEdit, MLabel, MButton и кинем их на форму:

Через Инспектор объектов / Object Inspector очистим параметр Caption у компонента MLabel, а у компонента MButton того же параметра присвоим фразу "Say Hello":

Теперь давайте зададим алгоритм работе кнопки по нажатию. Выберем нашу кнопку MButton, в Инспектор объектов / Object Inspector перейдем на вкладу Events и дважды щелкнем мышкой по событию OnClick

Теперь нам открылся редактор кода. Пропишем действия:

Теперь давайте протестируем наше приложение через браузер. Нажимаем на молнии вверху среды HTML5 Builder

Введите свое имя в поле Edit и нажмите на кнопку:

Deploy to Mobile - Развертывание Приложения на Мобильнике
Вот теперь будет больше экшена!
Процедура Deploy to Mobile позволяет "перегнать" Ваше приложение в программу для телефона.

Пример мы будем рассматривать основываясь на предположение о том, что в руках у нас скорее окажется смартфон с Android'ом, чем что либо еще.
Как в принципе и у меня, под рукой был только Xperia. Но я обязательно, после того как ко мне будут попадать остальные модели телефонов, буду их тестировать развертывание приложений на них. Но сегодня только Android.

До того как мы пойдем дальше, вам надо вернуться в Дизайнер/Design проекта, выбрать в структуре программы вашу основную форму. Затем в Инспекторе Объектов / Object Inspector спускаемся в самый низ и ищем свойства UseAjax и UseAjazUri .
Свойство UseAjax поставтье в True.
А вот в свойстве UseAjaxUri вам надо будет прописать путь к серверу и скрипту Ваше приложения.
Допустим вы расположили все на сайте http://www.testserver.ru, а имя ваше основного файла unit1.phpб значит и адрес такой пишем http://www.testserver.ru/unit1.php

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

Теперь вернемся в Deploy To Mobile отметим Android и нажмем Next.
Видим форму:

В поле Index page указываете путь к основному скрипту Вашего приложения.

Application name можете писать любое название, но есть запрет на некоторые символы.

Company name говорит самом за себя, это наименование вашей компании.
Заполнили? Если да, то жмем Next>> и наблюдаем за такой формой:

Тут надо указать пути к файлам изображений. Но честно я так и не понял зачем оно. Я создавал картинки всех размеров, но так и не смог понять где же они потом отображаются. На икону программы это не влияет, при запуске не показывает. Как узнаю что это - отпишусь, а пока пропускаем и жмем Next>>

Ага! Перед нами вилка

Release вам надо выбрать если планируете выкладывать Ваше приложение на Market. Но должен напомнить Вам, что сначала придется пройти регистрацию, затем уплатить взнос в размере 25$, и то оплата только с пластиковых карт. Так что если вы не собираетесь выкладывать прям сегодня на Market Ваше детище, то весь это путь на не очень нужен. Но создание релиза, без публикации на в маркете, я опишу, так как там есть некоторые ньюансы. Но потом, а сейчас выбираем а про Debug и кликаем Next>>

Сейчас среда HTML5 Builder сделает свои дела, отэкспортирует файлы и т.д.
По окончанию, если все прошло успешно, снова жмем Next>> и... И снова видим вилку:

Построить Ваше приложение можно двумя путями, либо используя SDK Libraries либо через сервис Phonegap:Build.
Начнем с первого варианта, с SDK. Выбираем его и жмем Next>>

Real Device я не использовал, поэтому выбрал Emulator. Теперь, если вы нажали Next>>, ждите пока не закончиться вся процедура. Сейчас HTML5 Builder соберет Debug версию вашего проекта и запустит ее в эмуляторе. Эмулятор будет готов, когда на экране будет видно обои. До тех пор не надо жмакать на все кнопки!
Запустился эмулятор? Отлично! Разблокируйте экран и запускайте свое приложение, оно будет внизу:

Ну вот и оно наше приложение!
Вбиваем в поле свое имя и нажимаем кнопку "Say Hello". (что бы увидеть результат, должен быть организован выход в интернет, мы же все таки к серверу обращаться будем)


А это окно с уже полученным ответом Wink

Вы думаете это все на сегодня? Отнюдь судари и сударушки! Мы прошли по пути Deploy To Mobile -> Andrioid -> Debug -> SDK libraries -> Emulator, но у нас еще есть альтернативная дорожка Deploy To Mobile -> Andrioid -> Debug -> Phonegap:Build -> Emulator. И он тоже весьма интересен. Smile Допустим мы создали проект и решили залить его на сервис Phonegap. Тогда вот на это шаге выбираем Phonegap:Build:


Примечание:
Для работы с этим сервисом вам потребуется аккаунт на AdobeID. Для этого пройдите по ссылки https://build.phonegap.com/people/sign_up и зарегистрируйтесь. Думаю это вы и сами сможете сделать.

Допустим он у вас уже есть, а значит мы жмем Next->> и в окне

Теперь идет процесс подключения к сервису и если все окей, то начнется отправка файла, и все:

Возник наверное резонный вопрос, а на кой черт мне но надо было (хотя, наверное сначала я должен был сказать, а потом уже в дебри вести вас)?
Если верить описанию и моему плохому английскому, то закачав на этот сервис, можно будет скачать тот же проект но уже на и на остальные платформы.
Честно сказать я проект закаченный как "Android" не пробовал скачать на другие платформы, просто возможности не было. Но в скором времени я это проверю и отпишусь.



Client Mobile Application

Да-да, у нас еще остался не рассмотренный вариант про создание Client Mobile Application )))
Но, не все так плохо. С клиентским вариантом все на много проще. Ведь мы уже прошли моменты как запустить приложение на эмуляторе и как отправить на сервис Phonegap, а в остальном этот тот же пример, только на кнопку вешаем код:

function MButton1Click(event) {
$('#MLabel1').html("Hello, " + $('#MEdit1').val() + "!"); 
}

И самое главное не забудьте у кнопки поменять свойство "Button Type" на "btNormal" иначе устройство будет писать что не может получить данные. Оно и верно, ведь по умолчанию кнопки имеет тип "btSubmit" а она все время пытается отправить данные.

После всех этих малых изменений, можете лить свое ПО на девайс, ведь теперь вы знаете как это сделать!

AltaVista,

vr-online.ru


Версия для печатиВерсия для печати

Рубрики: 

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 0
Заметили ошибку? Выделите ее мышкой и нажмите Ctrl+Enter!

Читайте также