В этой статье я расскажу как разрабатывать приложения с использованием ранее установленного IBM Worklight. Установка. для дизайна возьмем Jquery Mobile HTML5 UIFramework. Для того чтобы нам можно было использовать Jquery Mobile необходимо скачать его вот отсюда -> Jquery Mobile.
Создаем Worklight-приложение. После установки Worklight в Eclipse на верхней панели появился значек, на него и нажимаем. Вот как выглядит значек:
Теперь нам необходимо скопировать наш скачаный Jquery Mobile в наше приложение. Я создал в папках css и js дополнительно папки jquery.mobile ( опять же для удобства ).
Копируем файл jquery.mobile-1.1.0.min.css и папку images в папку common/css/jquery.mobile.
Файлы jquery-1.7.1.min.js и jquery.mobile-1.1.0.min.js копируем в common/js/jquery.mobile.
После всех копирований струкрута папок в приложении выглядит вот так:
Для подключения и использова jquery mobile нам необходимо открыть файл Start.html и подключить наши файлы.
После подключения файл Start.html будет выглядеть вот так:
Создаем Worklight-приложение. После установки Worklight в Eclipse на верхней панели появился значек, на него и нажимаем. Вот как выглядит значек:
Появляется следующее окно, где мы можем выбрать тип нашего будущего проекта. Выбираем hybrid. Называем проект ( В моем случае Worklight Started ). Должно быть вот так:
Нажимаем next. Далее появляется окно в котором мы указываем название нашего приложения.
Мое название Start. Не подключаем при создании никаких библиотек ( это все мы сделаем чуть позже ). Жмем finish - наше приложение создано. Вот картинка:
Копируем файл jquery.mobile-1.1.0.min.css и папку images в папку common/css/jquery.mobile.
Файлы jquery-1.7.1.min.js и jquery.mobile-1.1.0.min.js копируем в common/js/jquery.mobile.
После всех копирований струкрута папок в приложении выглядит вот так:
Для подключения и использова jquery mobile нам необходимо открыть файл Start.html и подключить наши файлы.
После подключения файл Start.html будет выглядеть вот так:
<!DOCTYPE html> <html> <head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /><title>Start</title><linkrel="shortcut icon"href="images/favicon.png"/><linkrel="apple-touch-icon"href="images/apple-touch-icon.png"/><linkrel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/jquery.mobile/jquery.mobile-1.1.0.min.css" /> <link rel="stylesheet" href="css/Start.css" /></head> <bodyonload="WL.Client.init({})" id="content" style="display: none"> <!-- application UI goes here --> <script src="js/jquery.mobile/jquery-1.7.1.min.js"></script> <script src="js/jquery.mobile/jquery.mobile-1.1.0.min.js"></script> <script src="js/Start.js"></script> <script src="js/messages.js"></script> <script src="js/auth.js"></script></body> </html>
Теперь приступим к написанию наших страниц. Так как мы используем jquery mobile нам нужно сделать следующее:
<!DOCTYPE html> <html> <head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /><title>Start</title><linkrel="shortcut icon"href="images/favicon.png"/><linkrel="apple-touch-icon"href="images/apple-touch-icon.png"/><linkrel="stylesheet"href="css/reset.css"/><linkrel="stylesheet"href="css/jquery.mobile/jquery.mobile-1.1.0.min.css"/><linkrel="stylesheet"href="css/Start.css"/></head> <bodyonload="WL.Client.init({})"id="content"style="display: none"> <div data-role="page" id="first"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> Start </div> <div data-role="footer"> <h1>Footer</h1> </div> </div><!-- application UI goes here --><scriptsrc="js/jquery.mobile/jquery-1.7.1.min.js"></script> <scriptsrc="js/jquery.mobile/jquery.mobile-1.1.0.min.js"></script> <scriptsrc="js/Start.js"></script> <scriptsrc="js/messages.js"></script> <scriptsrc="js/auth.js"></script></body> </html>
Для того чтобы у нас footer был footer-ом и располагался внизу страницы необходимо в файле Start.css дописать вот такие строки:
//...[data-role=page]{height:100% !important;position:relative !important;}[data-role=footer]{bottom:0;position:absolute !important;top:auto !important;width:100%;}//...
Выглядит все это вот так:
Теперь добавим на нашу страницу кнопку и добавим страницу на которую мы будем переходить.
Наш файл Start.html теперь будет выглядеть вот так:
//... <bodyonload="WL.Client.init({})"id="content"style="display: none"> <divdata-role="page"id="first"> <divdata-role="header"> <h1>Header</h1></div> <divdata-role="content">Start<ahref="#second"data-role="button">Second Page</a> </div> <divdata-role="footer"> <h1>Footer</h1> </div></div> <divdata-role="page"id="second"> <divdata-role="header"> <h1>Header</h1> </div> <divdata-role="content">Second Page<ahref="#first"data-role="button" data-revers="true">First Page</a></div></div> // ... </body>
Теперь создадим Android и iPhone приложения в Worklight. Для этого нажимаем правой кнопкой мыши на проекте и выбираем New->Worklight Environment.
Вот как выглядит:
В появившемся окне выбираем Android, iPhone Environment. Выглядит окно вот так:
Для проверки нашего приложения на Android эмуляторе нам нужно сначала собрать наше приложение. Для этого нажимаем првой кнопкой мыши по папке Start->Run As->Build All and Deploy. После того как все соберется мы можем проверить приложение на Android эмуляторе. Вот куда нужно нажать для "билда" приложения:
Для запуске на Android нужно нажать правой кнопкой мыши по папке Worklight SartedStartAndroid->Run As-> Android Application.
Вот так приложение будет выглядеть на Android:
На iPhone выглядит вот так:
Вот пожалуй и все, что я хотел в этой статье показать и рассказать о написании приложений с использованием Worklight.
Комментариев нет:
Отправить комментарий