Текст книги "Разработка Android-приложений в деталях"
Автор книги: Тимур Машнин
Жанр: Компьютеры: прочее, Компьютеры
Возрастные ограничения: +12
сообщить о неприемлемом содержимом
Текущая страница: 15 (всего у книги 20 страниц)
Быстрая адаптация сайта для мобильных устройств с помощью Bootstrap
Возьмем в качестве примера простой шаблон с фиксированной шириной, с меню, боковой панелью, контентом и подвалом.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN» "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang=«en» lang=«en»>
<head>
<title> </title>
<meta http-equiv=«content-type» content=«application/xhtml+xml; charset=UTF-8» />
<meta name=«author» content=«» />
<meta name=«description» content=«» />
<meta name=«robots» content=«index, follow» />
<link rel=«stylesheet» type=«text/css» media=«screen» href="/file/theme/css/screen. css» />
</head>
<body>
<! – header – >
<div id=«header-wrap»> <div id=«header»>
<a name=«top»> </a>
<h1 id=«logo-text»> <a href=«#» title=«»> </a> </h1>
<p id=«slogan»> </p>
<div id=«nav»>
<ul>
<li> <a href=«»> Home </a> </li>
<li> <a href=«#»> Page1 </a>
<ul style=«height: auto; overflow: auto»>
<li> <a href=«#»> Page1—1 </a> </li>
</ul>
</li>
<li> <a href=«#»> Page2 </a>
<ul style=«height: auto; overflow: auto»>
<li> <a href=«#»> Page2—1 </a> </li>
<li> <a href=«#»> Page2—1 </a> </li>
</ul>
</li>
</ul>
</div>
<div id=«google-search»>
<script>
(function () {
var cx = «»;
var gcse = document.createElement (’script’);
gcse. type = ’text/javascript’;
gcse.async = true;
gcse.src = (document.location.protocol == ’https:»? ’https:': ’http:») +
«//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName (’script’) [0];
s.parentNode.insertBefore (gcse, s);
}) ();
</script>
<gcse: search> </gcse: search>
</div>
</div>
</div>
<! – content-outer – >
<div id=«content-wrap» class=«clear»>
<div id=«content»>
<div style=«width:1150px; height:15px; background: url(/file/theme/images/top.png);»>
</div>
<div id=«main»>
</div>
<! – sidebar – >
<div id=«sidebar» style=«width:250px;»>
<div class=«sidemenu»>
<ul>
<li> <a href=«»> Home </a> </li>
<li> <a href=«#»> Page1 </a>
<ul style=«height: auto; overflow: auto»>
<li> <a href=«#»> Page1—1 </a> </li>
</ul>
</li>
<li> <a href=«#»> Page2 </a>
<ul style=«height: auto; overflow: auto»>
<li> <a href=«#»> Page2—1 </a> </li>
<li> <a href=«#»> Page2—1 </a> </li>
</ul>
</li>
</ul>
</div>
<! – /sidebar – > </div>
</div>
<! – /content-out – >
</div>
<! – footer-outer – >
<div id=«footer-outer» class=«clear»>
<div id=«footer-wrap»>
<div style=«margin-left:500px; float: left»>
<p> <strong> <a href=«#top»> Top </a> </strong> </p>
<p style=«margin-left:-100px;»>
© 2015 <strong> </strong>
<strong style=«margin-left:20px;"> E-mail: </strong>
</p>
</div>
</div>
<! – /footer-outer – >
</div>
</body>
</html>
Заменим DOCTYPE на <!DOCTYPE html>.
Атрибут lang в теге html и атрибут charset тега meta уже имеются.
В начало тега <head> добавим:
<! – Latest compiled and minified CSS – >
<link rel=«stylesheet» href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<! – jQuery library – >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<! – Latest compiled JavaScript – >
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
В тег <head> добавим:
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
Обернем заголовок в класс. container и, используя Bootstrap Grid System и Bootstrap Navigation Bar, разместим меню, логотип и форму поиска в шапке.
<div class=«container header»>
<div class=«row»>
<nav class=«navbar navbar-inverse»>
<div class=«container-fluid»>
<div class=«navbar-header»>
<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=«#myNavbar»>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
</button>
</div>
<div class=«collapse navbar-collapse» id=«myNavbar»>
<ul class=«nav navbar-nav»>
<li> <a href="/"> Home </a> </li>
<li class=«dropdown»>
<a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page1 <span class=«caret»> </span> </a>
<ul class=«dropdown-menu inverse-dropdown»>
<li> <a href=«#»> Page1—1 </a> </li>
</ul>
</li>
<li class=«dropdown»>
<a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page2 <span class=«caret»> </span> </a>
<ul class=«dropdown-menu inverse-dropdown»>
<li> <a href=«#»> Page2—1 </a> </li>
<li> <a href=«#»> Page2—2 </a> </li>
<li> <a href=«#»> Page2—3 </a> </li>
<li> <a href=«#»> Page2—4 </a> </li>
<li> <a href=«#»> Page2—5 </a> </li>
</ul>
</li>
<li> <a href=«#»> Contacts </a> </li>
</ul>
</div>
</div>
</nav>
</div>
<a name=«top»> </a>
<div class=«row»>
<div class=«col-sm-6 text-center»>
<h1> <a href="/"> </a> </h1>
<p> </p>
</div>
<div class=«col-sm-4 pull-right»>
<script>
(function () {
var cx = «»;
var gcse = document.createElement (’script’);
gcse. type = ’text/javascript’;
gcse.async = true;
gcse.src = (document.location.protocol == ’https:»? ’https:': ’http:») +
'//cse.google.com/cse. js? cx=' + cx;
var s = document.getElementsByTagName (’script’) [0];
s.parentNode.insertBefore (gcse, s);
}) ();
</script>
<gcse: searchbox-only> </gcse: searchbox-only>
</div>
<style>
.gsc-search-button {
display: none;
}
.gsib_a {
height:40px;
}
.gsc-input-box {
height: 40px;
}
</style>
<div style=«height:15px; background: black;" class=«col-sm-12»>
</div>
</div>
</div>
Уберем боковую панель и свой файл CSS, вместо него добавим CSS стили:
<style>
body {
font-size:18px;
font-famile: Georgia;
color: #000;
margin: 0;
padding: 0;
background: gray;
}
.header {
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+4,fdffff+7,fdffff+7,e1ffff+17,e6f8fd+28,c8eefb+47,bee4f8+68,b1d8f5+100 */
background: #e1ffff; /* Old browsers */
background: -moz-linear-gradient (top, #e1ffff 0%, #e1ffff 4%, #fdffff 7%, #fdffff 7%, #e1ffff 17%, #e6f8fd 28%, #c8eefb 47%, #bee4f8 68%, #b1d8f5 100%); /* FF3.6—15 */
background: -webkit-linear-gradient (top, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* Chrome10—25,Safari5.1—6 */
background: linear-gradient (to bottom, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#e1ffff’, endColorstr=«#b1d8f5», GradientType=0); /* IE6—9 */
}
.inverse-dropdown {
background-color: black;
}
.inverse-dropdown li a {
color: white;
}
.inverse-dropdown li a: hover {
color: black;
}
.content {
background: lightgrey;
}
.footer {
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+86,207cca+93,7db9e8+100 */
background: #1e5799; /* Old browsers */
background: -moz-radial-gradient (center, ellipse cover, #1e5799 0%, #2989d8 86%, #207cca 93%, #7db9e8 100%); /* FF3.6—15 */
background: -webkit-radial-gradient (center, ellipse cover, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* Chrome10—25,Safari5.1—6 */
background: radial-gradient (ellipse at center, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#1e5799», endColorstr=«#7db9e8», GradientType=1); /* IE6—9 fallback on horizontal gradient */
}
.navigation {
margin: 10px 20px; padding-bottom: 10px;
width: 560px;
}
.navigation a: link,
.navigation a: visited {
float: left;
display: block;
margin: 10px 10px 0 0;
padding: 5px 7px;
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
color: #fff;
background: #2C76A6;
border-width: 1px;
border-style: solid;
border-color: #86BBDF #245F86 #245F86 #86BBDF;
}
.navigation a: hover {
background: #FF3399;
border-width: 1px;
border-style: solid;
border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
}
</style>
Таким образом, исключим из шаблона все фоновые изображения, которые могут создавать горизонтальную прокрутку, заменим фоновые изображения на CSS градиенты.
Обернем контент и подвал в класс. container и используем Bootstrap Grid System.
<! – content-outer – >
<div class=«container content»>
<div class=«row»>
<div class=«col-sm-11 col-md-offset-1»>
<span class=«pull-right»>
<img src="/file/theme/add.jpg» alt=«» width=200/>
</span>
<div style=«padding-top:50px;»>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle. js»> </script>
<! – adds – >
</script>
</div>
</div>
</div>
<div class=«row»>
<div class=«col-sm-10»>
<! – content – >
<p>
</p>
</div>
</div>
</div>
<! – /content-out – >
<! – footer-outer – >
<div class=«container footer»>
<p style=«position: fixed; bottom: 12px; right: 5px; opacity: 1; cursor: pointer;"> <a href=«#top» style=«color: white;"> Top </a> </p>
<div class=«row»>
<div class=«col-*-* text-center»>
<script type=«text/javascript» src="//yandex.st/share/share. js» charset=«utf-8»> </script>
</div>
<div class=«row» style=«color: darkblue;»>
<div class=«col-*-* text-center»>
<br/>
<p>
© 2016 <strong> </strong>
<strong> [email protected] </strong>
</p>
</div>
</div>
</div>
<! – /footer-outer – >
Создание кросс-платформенного Backend приложения
Такая задача может возникнуть, если требуется создание для Backend модуля Android приложения полноценного приложения с отдельной функциональностью, которое должно быть как Web приложением, так и мобильным приложением.
Примером такого приложения может быть приложение, предназначенное для управления деятельностью группы сотрудников компании, каждый из которых пользуется своим мобильным приложением. В этом случае лидер группы должен иметь кросс-платформенное приложение со своей функциональностью, предназначенное для администрирования мобильных приложений членов группы.
PhoneGap/Cordova
Скачаем и установим настольное PhoneGap приложение, обеспечивающее визуальное создание PhoneGap проекта (http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/).
Скачаем и установим Android PhoneGap приложение, обеспечивающее тестирование PhoneGap проекта (https://play.google.com/store/apps/details?id=com.adobe.phonegap.app).
Запустим настольное PhoneGap приложение и создадим проект:
При этом запустится Web сервер, идущий с настольным PhoneGap приложением.
В строке браузера наберем адрес http://192.168.0.199:3000:
Запустим Android PhoneGap приложение, при этом мобильное устройство должно быть подключено к той же сети, что и компьютер:
Наберем адрес сервера и нажмем Connect:
Для запуска приложения на мобильном устройстве USB соединение с компьютером не требуется – соединение осуществляется по сети.
Сгенерированная основа приложения будет содержаться в папке www каталога проекта.
Для сборки проекта можно воспользоваться облачным сервисом Adobe PhoneGap Build (https://build.phonegap.com/).
Adobe PhoneGap является дистрибутивом Apache Cordova.
С Apache Cordova можно не использовать облачный сервис Adobe PhoneGap Build, а создавать и собирать проект приложения с помощью инструмента командной строки CLI.
Для создания проекта приложения с Apache Cordova необходимо установить инструмент командной строки cordova command-line interface (CLI).
Для установки Cordova требуется инструмент npm дистрибутива Node. js, потому нужно установить Node. js (https://nodejs.org/).
Для создания проекта инструмент cordova использует git, потому нужно установить git client (http://git-scm.com/).
Для проверки инсталляции в командной строке наберем npm и git.
Далее в командной строке наберем:
npm install -g cordova
Создадим каталог для проектов и создадим проект приложения:
C:Usersuser> cd C:UsersuserCordova
C:UsersuserCordova> cordova create test com. example. test Test
Creating a new cordova project.
Структура созданного проекта будет аналогична проекту, созданному с PhoneGap.
Папка www каталога проекта содержит уже готовое Web приложение. Для сборки Android приложения из проекта сначала нужно установить переменные среды для автоматического вызова инструментов Android SDK:
ANDROID_HOME=C: <installation location> android-sdk-windows
Добавить в системную переменную Path:
;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools;
Набрать в командной строке:
cd C:UsersuserCordovatest
cordova platform add android
cordova build
Для тестирования Android приложения на устройстве наберите:
cordova run android
В результате отладочная версия APK будет установлена и запущена на мобильном устройстве.
Для сборки подписанного APK файла создайте файл release-signing.properties в каталоге platformsandroid:
storeFile=keystore. jks
storeType=jks
keyAlias=alias-name
Здесь хранилище ключей находится в том же каталоге.
И наберите в командной строке:
cordova build android —release
В результате в папке platformsandroidbuildoutputsapk будет создан файл android-release. apk.
Чтобы изменить значки и заставки приложения, создайте набор изображений в каталоге проекта и укажите в файле config. xml:
<platform name=«android»>
<allow-intent href=«market:*" />
<icon src="res/ldpi/ic_launcher.png» density=«ldpi» />
<icon src="res/mdpi/ic_launcher.png» density=«mdpi» />
<icon src="res/hdpi/ic_launcher.png» density=«hdpi» />
<icon src="res/xhdpi/ic_launcher.png» density=«xhdpi» />
<icon src="res/xxhdpi/ic_launcher.png» density=«xxhdpi» />
<icon src="res/xxxhdpi/ic_launcher.png» density=«xxxhdpi» />
<icon src="res/land-hdpi/ic_launcher.png» density=«land-hdpi» />
<icon src="res/land-ldpi/ic_launcher.png» density=«land-ldpi» />
<icon src="res/land-mdpi/ic_launcher.png» density=«land-mdpi» />
<icon src="res/land-xhdpi/ic_launcher.png» density=«land-xhdpi» />
<icon src="res/port-hdpi/ic_launcher.png» density=«port-hdpi» />
<icon src="res/port-ldpi/ic_launcher.png» density=«port-ldpi» />
<icon src="res/port-mdpi/ic_launcher.png» density=«port-mdpi» />
<icon src="res/port-xhdpi/ic_launcher.png» density=«port-xhdpi» />
</platform>
После сборки все эти изображения появятся в каталоге platformsandroidres.
Однако в папках land и port будут еще изображения screen. Удалите их, скопируйте и переименуйте изображения icon в screen, так что будут два одинаковых изображения под именами icon и screen, которые будут служить как значок и заставка приложения.
После сборки проекта новый набор изображений будет включен в файл APK.
Приложения Cordova можно создавать не только в командной строке, но и с помощью среды разработки NetBeans IDE.
В среде NetBeans откроем меню Файл и выберем Создать проект. В открывшемся мастере в разделе HTML5/JavaScript выберем шаблон Приложение Cordova.
После создания проекта приложения, его можно собрать и протестировать на устройстве.
К сожалению, на данный момент среда NetBeans не обеспечивает автоматическое создание подписанного APK файла.
При разработке с Cordova нужно учитывать, что приложение Cordova это приложение SPA (Single Page Application), то есть приложение с одной страницей index.html, весь контент которой обеспечивается кодом JavaScript и CSS. Поэтому разработка Cordova приложения ведется на основе какого-либо JavaScript фреймворка.
Конвертация HTML5 Web сайта в приложение Cordova
Преобразовать HTML5 сайт в Android приложение очень просто.
Для примера скачаем шаблон HTML5 сайта (https://w3layouts.com/free-responsive-html5-css3-website-templates/) и скопируем все файлы шаблона в папку www каталога предварительно созданного Cordova проекта с помощью команды cordova create.
Далее добавим Android платформу:
cordova platform add android
И соберем Android приложение:
cordova build
При тестировании с помощью команды cordova run android на мобильном устройстве увидим тот же шаблон, что и в Web браузере.
Пример кросс-платформенного Backend приложения
Приложение представляет собой панель администратора, руководящего группами торговых представителей.
Приложение позволяет:
– Просмотреть список сотрудников,
– Сформировать из них группы,
– Выбрать маршрут движения сотрудников,
– Просмотреть ранее созданные маршруты,
– Составить текст задания для сотрудников,
– Просмотреть ранее созданные тексты заданий,
– Скомпоновать задание для сотрудников, включив в него группу сотрудников для выполнения задания, маршруты выполнения, описание задания,
– Посмотреть ранее созданные задания.
Выполненное задание содержит фактический трекинг движения сотрудников, отчеты сотрудников о выполнении задания.
Начальный экран приложения представляет собой общую панель, включающую в себя все опции.
<!DOCTYPE HTML>
<html>
<head>
<title> Business Control </title>
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
<script type=«application/x-javascript»> addEventListener («load», function () {setTimeout (hideURLbar, 0);}, false); function hideURLbar () {window.scrollTo (0,1);} </script>
<! – Bootstrap Core CSS – >
<link href=«css/bootstrap. min. css» rel=’stylesheet’ type=’text/css’ />
<! – Custom CSS – >
<link href=«css/style. css» rel=’stylesheet’ type=’text/css’ />
<link href=«css/font-awesome. css» rel=«stylesheet»>
<! – jQuery – >
<script src=«js/jquery. min. js»> </script>
<! – – webfonts – ->
<link href='//fonts.googleapis.com/css? family=Roboto:400,100,300,500,700,900» rel=’stylesheet’ type=’text/css’>
<! – Nav CSS – >
<link href=«css/custom. css» rel=«stylesheet»>
<! – Metis Menu Plugin JavaScript – >
<script src=«js/metisMenu. min. js»> </script>
<script src=«js/custom. js»> </script>
<! – Calendar – >
<script type=«text/javascript» src=«js/bootstrap-datepicker. js»> </script>
<script type=«text/javascript» src="js/bootstrap-datepicker.ru.js» charset=«UTF-8»> </script>
<link href=«css/datepicker. css» rel=«stylesheet»>
</head>
<body>
<div id=«wrapper»>
<! – Navigation – >
<nav class=«top1 navbar navbar-default navbar-static-top» role=«navigation» style=«margin-bottom: 0»>
<div class=«navbar-header»>
<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=".navbar-collapse»>
<span class=«sr-only»> Toggle navigation </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
</button>
<a class=«navbar-brand» href="index.html»> Dashboard </a>
</div>
<! – /.navbar-header – >
<div class=«navbar-default sidebar» role=«navigation»>
<div class=«sidebar-nav navbar-collapse»>
<img src="img/logo.png» />
<ul class=«nav» id=«side-menu»>
<li>
<a href="index.html»> <i class=«fa fa-dashboard fa-fw nav_icon»> </i> Dashboard </a>
</li>
<li>
<a href=«#»> <i class=«fa fa-users»> </i> Сотрудники <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="groups-list.html»> Группы </a>
</li>
<li>
<a href="users-list.html»> Общий список </a>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-truck»> </i> Маршрут <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="route.html»> Выбрать маршрут </a>
</li>
<li>
<a href=«#»> Маршруты <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-routes.html»> Новые </a>
</li>
<li>
<a href="old-routes.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file»> </i> Задание <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="task.html»> Создать задание </a>
</li>
<li>
<a href=«#»> Задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-tasks.html»> Новые </a>
</li>
<li>
<a href="old-tasks.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file-text»> </i> Текст задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="desc.html»> Создать описание </a>
</li>
<li>
<a href=«#»> Описания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-descs.html»> Новые </a>
</li>
<li>
<a href="old-descs.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-android»> </i> Мобильные приложения </a>
</li>
</ul>
</div>
<! – /.sidebar-collapse – >
</div>
<! – /.navbar-static-side – >
</nav>
<div id=«page-wrapper»>
<div class=«graphs»>
<div class = «col_3»>
<div class=«col-md-3 widget widget1»>
<div class=«r3_counter_box»>
<i class=«pull-left fa fa-users icon-rounded»> </i>
<div class=«dropdown»>
<button class=«btn btn-primary dropdown-toggle» type=«button» data-toggle=«dropdown»> Сотрудники
<span class=«caret»> </span> </button>
<ul class=«dropdown-menu»>
<li> <a href="groups-list.html»> Группы </a> </li>
<li> <a href="users-list.html»> Общий список </a> </li>
</ul>
</div>
</div>
</div>
<div class=«col-md-3 widget widget1»>
<div class=«r3_counter_box»>
<i class=«pull-left fa fa-truck icon-rounded»> </i>
<div class=«dropdown»>
<button class=«btn btn-primary dropdown-toggle» type=«button» data-toggle=«dropdown»> Маршрут
<span class=«caret»> </span> </button>
<ul class=«dropdown-menu»>
<li> <a href="route.html»> Выбрать маршрут </a> </li>
<li> <a href="new-routes.html»> Новые маршруты </a> </li>
<li> <a href="old-routes.html»> Архив маршрутов </a> </li>
</ul>
</div>
</div>
</div>
<div class=«col-md-3 widget widget1»>
<div class=«r3_counter_box»>
<i class=«pull-left fa fa-file icon-rounded»> </i>
<div class=«dropdown»>
<button class=«btn btn-primary dropdown-toggle» type=«button» data-toggle=«dropdown»> Задание
<span class=«caret»> </span> </button>
<ul class=«dropdown-menu»>
<li> <a href="task.html»> Создать задание </a> </li>
<li> <a href="new-tasks.html»> Новые задания </a> </li>
<li> <a href="old-tasks.html»> Архив заданий </a> </li>
</ul>
</div>
</div>
</div>
<div class=«col-md-3 widget»>
<div class=«r3_counter_box»>
<i class=«pull-left fa fa-file-text icon-rounded»> </i>
<div class=«dropdown»>
<button class=«btn btn-primary dropdown-toggle» type=«button» data-toggle=«dropdown»> Текст задания
<span class=«caret»> </span> </button>
<ul class=«dropdown-menu»>
<li> <a href="desc.html»> Создать описание </a> </li>
<li> <a href="new-descs.html»> Новые описания </a> </li>
<li> <a href="old-descs.html»> Архив описаний </a> </li>
</ul>
</div>
</div>
</div>
<div class=«clearfix»> </div>
</div>
<div class=«col_1»>
<div class=«col-md-6»>
<div class=«refresh» style=«cursor: pointer; margin-left:22%"> <i class=«fa fa-refresh»> </i> </div>
<div class=«datepicker»> </div>
<script type=«text/javascript»>
var dp = $ (». datepicker’).datepicker ({
language: «ru-RU»
});
$ (".refresh» ).click (function () {
dp. datepicker (’update’);
});
dp. on (’changeDate’, function (ev) {
});
</script>
</div>
<div class=«clearfix»> </div>
</div>
<div class=«span_11»>
<div class=«col-md-12»>
<div class=’row’>
<div class=’col-sm-4»>
<button type=’button’ class=’btn btn-primary btn-mapUpdate’> Обновить карту </button>
</div>
</div>
<div id=«map» style=«height:500px;"> </div>
<script>
var map;
function initMap () {
map = new google.maps.Map(document.getElementById (’map’), {
zoom: 6
});
var infoWindow = new google.maps.InfoWindow ({map: map});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords. longitude
};
infoWindow.setPosition (pos);
map.setCenter (pos);
}, function () {
handleLocationError (true, infoWindow, map.getCenter ());
});
} else {
// Browser doesn’t support Geolocation
handleLocationError (false, infoWindow, map.getCenter ());
}
}
function handleLocationError (browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition (pos);
infoWindow.setContent (browserHasGeolocation?
«Error: The Geolocation service failed.» :
«Error: Your browser doesn’t support geolocation.»);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb9Iir38HyF_E3_hmf3mHHum_tJbgvjXs&callback=initMap"
async defer> </script>
</div>
<div class=«clearfix»> </div>
</div>
<script>
var url = 'http://buisness-control.appspot.com/tracks/?callback=?';
$.ajax ({
type: «GET»,
url: url,
data: {
},
async: true,
jsonpCallback: ’getTracks’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$.each (json.tracks, function (key, val) {
var name = val.name;
var track = val.track;
$.each (track, function (key, val) {
var account=val.account;
var latLng =new google.maps.LatLng(val.lat, val. lng);
var marker = new google.maps.Marker ({
position: latLng,
title: name+" "+account,
map: map
});
map.setCenter (latLng);
map.setZoom (15);
});
});
}
});
$ (".btn-mapUpdate» ).click (function () {
$.ajax ({
type: «GET»,
url: url,
data: {
},
async: true,
jsonpCallback: ’getTracks’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$.each (json.tracks, function (key, val) {
var name = val.name;
var track = val.track;
$.each (track, function (key, val) {
var account=val.account;
var latLng =new google.maps.LatLng(val.lat, val. lng);
var marker = new google.maps.Marker ({
position: latLng,
title: name+" "+account,
map: map
});
map.setCenter (latLng);
map.setZoom (15);
});
});
}
});
});
</script>
<div class=«copy»>
<p> Copyright © 2015 TM SoftStudio </p>
</div>
</div>
</div>
<! – /#page-wrapper – >
</div>
<! – /#wrapper – >
<! – Bootstrap Core JavaScript – >
<script src=«js/bootstrap. min. js»> </script>
</body>
</html>
Начальная страница, помимо разметки, содержит Javascript код инициализации Google карты и код получения трекинга движения сотрудников, выполняющих задания, с отображением трекинга на карте.
Страница «Общий список сотрудников» позволяет получить список сотрудников и отредактировать их персональные данные.
<!DOCTYPE HTML>
<html>
<head>
<title> Business Control </title>
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
<script type=«application/x-javascript»> addEventListener («load», function () {setTimeout (hideURLbar, 0);}, false); function hideURLbar () {window.scrollTo (0,1);} </script>
<! – Bootstrap Core CSS – >
<link href=«css/bootstrap. min. css» rel=’stylesheet’ type=’text/css’ />
<! – Custom CSS – >
<link href=«css/style. css» rel=’stylesheet’ type=’text/css’ />
<link href=«css/font-awesome. css» rel=«stylesheet»>
<! – jQuery – >
<script src=«js/jquery. min. js»> </script>
<! – – webfonts – ->
<link href='//fonts.googleapis.com/css? family=Roboto:400,100,300,500,700,900» rel=’stylesheet’ type=’text/css’>
<! – Nav CSS – >
<link href=«css/custom. css» rel=«stylesheet»>
<! – Metis Menu Plugin JavaScript – >
<script src=«js/metisMenu. min. js»> </script>
<script src=«js/custom. js»> </script>
<! – Calendar – >
<script type=«text/javascript» src=«js/bootstrap-datepicker. js»> </script>
<script type=«text/javascript» src="js/bootstrap-datepicker.ru.js» charset=«UTF-8»> </script>
<link href=«css/datepicker. css» rel=«stylesheet»>
</head>
<body>
<div id=«wrapper»>
<! – Navigation – >
<nav class=«top1 navbar navbar-default navbar-static-top» role=«navigation» style=«margin-bottom: 0»>
<div class=«navbar-header»>
<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=".navbar-collapse»>
<span class=«sr-only»> Toggle navigation </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
</button>
<a class=«navbar-brand» href=«#»> Общий список сотрудников </a>
</div>
<! – /.navbar-header – >
<div class=«navbar-default sidebar» role=«navigation»>
<div class=«sidebar-nav navbar-collapse»>
<img src="img/logo.png» />
<ul class=«nav» id=«side-menu»>
<li>
<a href="index.html»> <i class=«fa fa-dashboard fa-fw nav_icon»> </i> Dashboard </a>
</li>
<li>
<a href=«#»> <i class=«fa fa-users»> </i> Сотрудники <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="groups-list.html»> Группы </a>
</li>
<li>
<a href="users-list.html»> Общий список </a>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-truck»> </i> Маршрут <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="route.html»> Выбрать маршрут </a>
</li>
<li>
<a href=«#»> Маршруты <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-routes.html»> Новые </a>
</li>
<li>
<a href="old-routes.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file»> </i> Задание <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="task.html»> Создать задание </a>
</li>
<li>
<a href=«#»> Задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-tasks.html»> Новые </a>
</li>
<li>
<a href="old-tasks.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file-text»> </i> Текст задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="desc.html»> Создать описание </a>
</li>
<li>
<a href=«#»> Описания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-descs.html»> Новые </a>
</li>
<li>
<a href="old-descs.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-android»> </i> Мобильные приложения </a>
</li>
</ul>
</div>
<! – /.sidebar-collapse – >
</div>
<! – /.navbar-static-side – >
</nav>
<div id=«page-wrapper»>
<div class=«graphs»>
<div class = «col_3»>
<! – Modal – >
<style type=«text/css»>
input {
outline: 1px solid lightgreen;
}
</style>
<div class=«modal fade» id=«profile» role=«dialog»>
<div class=«modal-dialog»>
<! – Modal content – >
<div class=«modal-content»>
<div class=«modal-header»>
<button type=«button» class=«close» data-dismiss=«modal»> × </button>
Профиль
</div>
<div class=«modal-body»>
<form role=«form»>
<div class=«form-group» style=«display: none;»>
<input type=«email» class=«form-control» id=«modal-account»>
</div>
<div class=«form-group»>
<label for=«modal-firstName»> Имя: </label>
<input type=«text» class=«form-control» id=«modal-firstName»>
</div>
<div class=«form-group»>
<label for=«modal-secondName»> Фамилия: </label>
<input type=«text» class=«form-control» id=«modal-secondName»>
Правообладателям!
Это произведение, предположительно, находится в статусе 'public domain'. Если это не так и размещение материала нарушает чьи-либо права, то сообщите нам об этом.
