Поддержка мобильных устройств

1. Поддержка мобильных устройств Чечнев Михаил

2. Применяемые технологии jQuery и jQueryMobile - формирование мобильных интерфейсов мониторинга и оперативного управления webSQL - формирование интерфейсов мониторинга деятельности для пользователя вне зоны доступа, в том числе в целях обеспечения безопасности WEB-сервис очереди отложенной печати – заказ аналитических отчетов и получение результата на мобильное устройство

3. jQueryMobileОбщие сведения • jQuery – Java Script фреймворк (библиотека), обеспечивающий возможности реализовывать: • Лаконичные запросные конструкции к объектной модели HTML документа (DOM) • Обслуживание сложных событийных конструкций • AJAX запросы с применением мощного API, значительно упрощающего взаимодействие с сервером • Анимацию на странице • jQuery Mobile – дополнение jQuery для разработки web-приложений, оптимизированных под исполнение на мобильных устройствах, обеспечивающее: • Платформо-независимыйрендеринг страницы • Масштабируемую вёрстку • Набор виджетов и интерфейсных элементов, спроектированных для работы на Touch-Screen устройствах

4. jQueryMobileОбщие сведения • Преимущества разработчика: • Интеграция с OracleApplicationExpress – разработка в привычной IDE, с поддержкой командной работы • Прямое обращение к данным и API системы – при совместном использовании Oracle APEX и jQueryMobile задача разработчика сводится к настройке навигации и представления данных с применением виджетов пользовательского интерфейса • Кроссбраузерность и поддержка большинства популярных мобильных платформ – разработав одно WEB-приложение, можно использовать его на разных платформах, об остальном заботится jQueryMobile • Преимущества пользователя: • Работа с системой в дружественном интерфейсе • Доступ к данным и функциям, аналитическим отчетам системы вне офиса

5. jQueryMobileПоддерживаемые платформы

6. jQueryMobileПринципы работы

7. jQueryMobileПринципы работы без jQuery jQuery Write less, do more.

8. jQueryMobileПринципы работы AJAX - запрос без jQuery jQuery Write less, do more.

9. jQueryMobileПринципы работы • Набор элементов пользовательского интерфейса, адаптированных для мобильных устройств • Инструменты автоматической AJAX загрузки страниц и настройки сценариев навигации с поддержкой “Back Button” • Автоматическая HTML5-разметка, управляемая ориентацией устройства (портретная, ландшафтная) • Упрощенный доступ к некоторым сенсорам устройства (GPS, гироскоп) jQuery Mobile = jQuery +

10. jQueryMobileПринципы работы HTTP-запрос Обрабатывает запрос и формирует ответ Отображает полученный документ как есть WEB-сервер Браузер HTML-документ без jQueryMobile jQuery Mobile HTTP-запрос Отображает преобразованный документ Обрабатывает запрос и формирует ответ Браузер WEB-сервер jQuery Mobile Автоматическая инициализация виджетов HTML-документ

11. jQueryMobileПринципы работы без jQueryMobile jQuery Mobile HTML 5 DATA- атрибуты jQuery Mobile Автоматическая инициализация виджетов

12. jQueryMobileПринципы работы

13. webSQLОбщие сведения • WebSQL – инструментарий, включенный в спецификацию HTML 5: • Позволяющий хранить в кэше браузера SQLite базу данных • Обеспечивающий возможность кэширования больших объемов данных • Предоставляющий API для обращения к кэшированным данным при отсутствии соединения с сервером

14. webSQLОбщие сведения • Преимущества: • Полнофункциональный SQL-движок (SQLite) • Работа с данными и отчетами системы в условиях отсутствия соединения с сервером • Возможность, находясь в доверенной сети, провести кэширование информации, передача которой по общедоступным каналам невозможна по соображениям безопасности

15. webSQLПринципы работы СЕРВЕР On-Line Off-Line КЛИЕНТ (WEB-браузер) WebSQL DB Приложение (WebSQL DB JS API)

16. webSQLПринципы работы

17. webSQLПоддержка браузерами

18. webSQLАльтернативные технологии • WEB Storage (Local storage/Session storage) • Поддерживается подавляющим большинством браузеров • Очень простой API • Это не БД, это хранилище • Нет схем, таблиц, возможности строить запросы • Данные хранятся по схеме “ключ-значение” • Отсутствие поддержки транзакций • Indexed Database API • Иерархическая NOSQL БД • Индексация • Транзакции • Данные хранятся по схеме “ключ-значение” • Низкая степень поддержки браузерами • Нет возможности строить запросы • Сложный API

19. WEB-сервис очереди отложенной печатиОбщие сведения • WEB-сервис отложенной печати: • Программный интерфейс для работы с сервисом отложенной печати ПП Парус 8. • Сервис отложенной печати: • Инструментарий ПП Парус 8, обеспечивающий постановку пользовательского отчета в очередь печати с заданными параметрами и подготовку файла отчета на сервере, с сохранением результата в БД. Дополненный WEB-сервисом обеспечивает поставку разработанной в системе отчетности на мобильные клиентские устройства.

20. WEB-сервис очереди отложенной печатиОбщие сведения • Преимущества: • Возможность заказать пользовательский отчет на сервере и загрузить его на рабочее место пользователя (в том числе и на мобильное устройство) по готовности • Возможность разработать собственный (помимо штатного) интерфейс пользователя (для любых платформ, любыми средствами) • Пользовательские отчеты, разрабатываемые по “классической” методике становятся доступными мобильным пользователям • Возможность использования уже разработанных аналитических пользовательских отчетов мобильным клиентом

21. WEB-сервис очереди отложенной печатиПринципы работы СЕРВЕР WEB-СЕРВЕР WEB-сервис (постановка в очередь, возврат готовых отчетов) Процесс обслуживания очереди БД ПП Парус 8 (Очередь печати отчетов) Запрос на постановку отчета в очередь Файл готового отчета Файл готового отчета Файл готового отчета КЛИЕНТ (Мобильное WEB-приложение) КЛИЕНТ (Настольное WEB-приложение) КЛИЕНТ (Прочие приложения)

22. Мобильный WEB-интерфейс типового решения “Учет в проектах” • Назначение • Получение аналитической информации из системы где бы Вы не находились • Удаленное выполнение учетных функций • Доступ к демонстрационному примеру • URL http://212.5.81.211:7777/maket/f?p=102 • Пользователь demo • Пароль demo

23. Функциональные возможности • Доступ к сведениям о заказах, с указанием • Учетных характеристик • Рентабельности • Графика финансирования со стороны заказчика • Состояния договоров с поставщиками материалов и ПКИ • Состояния внутреннего соисполнения • Расчет загруженности подразделений заказами • Доступ к штатному расписанию должностей и штатной расстановке сотрудников • Просмотр опубликованных бюджетов • Формирование платежного календаря и просмотр детализации платежей • Заказ и доставка на устройство аналитической отчетности Мобильный WEB-интерфейс типового решения “Учет в проектах”

24. Авторизация и главное менюВход в приложение Для входа в демонстрационную версию используйте организацию “Организация”, пользователь “demo”, пароль “demo”. После указания учетных данных нажмите “Войти” для доступа к функциям приложения. Мобильный WEB-интерфейс типового решения “Учет в проектах”

25. Авторизация и главное менюДоступ к функциям Пункты главного меню приложения – обеспечивают доступ к его функциям. Приложение использует разграничение прав доступа к системе на уровне пользователей и ролей пользователей. Набор пунктов главного меню зависит от прав доступа авторизованного пользователя. Кнопка “Домой” вернет Вас в главное меню из любого раздела приложения. Кнопка “Выйти” доступна из любого раздела приложения, обеспечивает завершение сеанса работы с системой. Каждый пункт меню имеет краткое описание, отражающего функциональную направленность данного пункта. Мобильный WEB-интерфейс типового решения “Учет в проектах”

26. Информация о заказахСписок заказов Контекстный поиск этапов заказов. Введите поисковую фразу и нажмите “Найти”. Нажмите “Сбросить” для очистки условий поиска и просмотра полного списка этапов заказов. Нажмите на элемент списка для получение более детальной информации по этапу заказа. Список этапов заказов с указанием номера заказа и этапа, сроков, заказчика, темы, стоимости этапа, головного исполнителя и содержания работ. Мобильный WEB-интерфейс типового решения “Учет в проектах”

27. Информация о заказах Список заказов Нажмите на кнопку с маркером для фильтрации этапов по состоянию статей структуры цены. “Без отклонений” – отображение этапов не имеющих отклонения по статьям структуры цены (фактические затраты менее 90% от плановых по всем статьям). “Есть перерасход” – отображение этапов имеющих отклонения по статьям структуры цены (фактические затраты превышают плановые по одной из статей). “Все” – сброс фильтрации по состоянию статей структуры цены. “Есть расход более 90%” – отображение этапов имеющих фактические затраты составляющие от 90% до 100% от плановых по одной из статей. Мобильный WEB-интерфейс типового решения “Учет в проектах”

28. Информация о заказах Список заказов Нажмите на кнопку с “замком” для фильтрации этапов по состоянию их исполнения. “Закрытые” – отображение этапов имеющих состояние “Закрыт”. “Все” – сброс фильтрации по состоянию исполнения этапов. “Открытые” – отображение этапов имеющих состояние “Открыт”. Мобильный WEB-интерфейс типового решения “Учет в проектах”

29. Информация о заказах Детали этапа заказа Для просмотра деталей по соответствующему блоку информации следует нажать на его заголовок. Для каждого из этапов доступны данные о его учетных характеристиках в системе, рентабельности, структуре цены, графике финансирования и состоянии договоров с контрагентами и поставщиками материалов и ПКИ. Мобильный WEB-интерфейс типового решения “Учет в проектах”

30. Информация о заказах Детали этапа заказа Раскрытие информационного блока отображает дополнительную информацию по нему. Мобильный WEB-интерфейс типового решения “Учет в проектах”

31. Информация о заказах Детали этапа заказа Некоторые из блоков, детализирующих этап, содержат интерактивные элементы, оформленные в виде кнопок или гиперссылок. Например, нажав на кнопку в списке контрагентских договоров можно получить детализацию по состоянию договора. Для контрагентского договора доступны сведения о его сроках, сумме, состоянии в оперативном учете. Мобильный WEB-интерфейс типового решения “Учет в проектах”

32. Обеспеченность ФОТРасчет Укажите год из списка и система проведет расчет обеспеченности фонда оплаты труда подразделений заказами. Расчет обеспеченности производится на основании данных о выплатах и удержаниях сотрудников подразделений и запланированного для них объема работ на указанный год, согласно планам по себестоимости. Для получения детальных сведениях о подразделении (количество вакансий, ставок, работающие сотрудники, должности и т.п.) нажмите на кнопку “О подразделении”. Нажмите на подразделение для получения более детальной информации о его ФОТ и запланированных объемах работ. Экспресс-анализ наиболее и наименее загруженных заказами подразделений. Мобильный WEB-интерфейс типового решения “Учет в проектах”

33. Обеспеченность ФОТТоп 5 обеспеченности На основе данных расчета обеспеченности ФОТ система строит гистограммы по 5-ти наиболее и наименее обеспеченным заказами подразделениям. Мобильный WEB-интерфейс типового решения “Учет в проектах”

34. Штатные должностиНавигация по подразделениям Нажмите для возврата в корень дерева штатной структуры. Нажмите для доступа к списку должностей подразделения и его дочерних элементов штатной структуры. Нажмите для доступа к детальной информации по подразделению. Нажмите для возврата на вышестоящий уровень штатной структуры. Нажмите на элемент списка для перехода на более низкий уровень штатной структуры (к списку дочерних подразделений). Количество дочерних подразделений. Мобильный WEB-интерфейс типового решения “Учет в проектах”

35. Штатные должностиДолжности подразделения Список должностей подразделения с указанием общего количества ставок, количества занятых и вакантных мест в штатном расписании. Нажмите на элемент списка для перехода к списку исполнений должности (сотрудники занимающие должность). Количество исполнений должности. Мобильный WEB-интерфейс типового решения “Учет в проектах”

36. Штатные должностиДетали подразделения Круговая диаграмма отражающая структуру сотрудников в разрезе типов исполнений (внутренние/внешние совместители, основные исполнения). Круговая диаграмма отражающая структуру сотрудников в разрезе категорий исполнений (рабочие/служащие). Круговая диаграмма отражающая долю подразделения в общей численности сотрудников организации. К списку должностей подразделения. К списку исполнений должностей подразделения. Сводные сведения о подразделении. Мобильный WEB-интерфейс типового решения “Учет в проектах”

37. Штатные должностиСводные диаграммы Круговая диаграмма отражающая структуру сотрудников в разрезе категорий исполнений (рабочие/служащие). Подобные круговые диаграммы отражают долю подразделения в штатной численности организации, структуру типов исполнений должностей, структуру категорий исполнений должностей (данный пример). Мобильный WEB-интерфейс типового решения “Учет в проектах”

38. ШтатИсполнения должностей Нажмите для доступа к контактной информации сотрудника. Нажмите для доступа к данным о выплатах и удержаниях сотрудника. Список сотрудников, исполняющих должности в подразделении. Сведения о сотруднике с указанием должности, количестве занимаемых ставок, окладе. Нажмите для доступа к более подробной информации о сотруднике, с указанием стажа, приказа о приеме, табельного номера, ученой степени и т.п. Мобильный WEB-интерфейс типового решения “Учет в проектах”

39. ШтатДанные ФОТ и оснований выплат Данные о ФОТ сотрудника. Нажмите для закрытия всплывающего окна. Данные о выплатах и удержаниях сотрудника. Мобильный WEB-интерфейс типового решения “Учет в проектах”

40. ШтатКонтактная информация Нажмите для запуска почтового клиента и отправки E-mail сообщения. Контактная информация сотрудника. Нажмите для закрытия всплывающего окна. Нажмите на номер для осуществления вызова (для устройств поддерживающих телефонную связь). Мобильный WEB-интерфейс типового решения “Учет в проектах”

41. БюджетыСписок опубликованных Список бюджетов, сформированных в системе и имеющих признак “Публиковать”. Бюджеты разбиты на группы по типам и уровням детализации. Нажмите на элемент списка для просмотра бюджета. Для каждого бюджета из списка указаны период, уровень детализации показателей, валюта, состояние и дата “по состоянию на”. Мобильный WEB-интерфейс типового решения “Учет в проектах”

42. БюджетыПараметры просмотра Для отображения данных бюджета укажите желаемые параметры просмотра. Масштаб отображения показателей бюджета (например, 1000 – в тысячах рублей). Способ представления бюджета. Каждый из бюджетов может быть отображен в виде иерархии его статей с показателями, в виде набора графиков, в виде отчета MS Excel, доставляющегося на устройство. Просмотр бюджета с указанными параметрами отображения. Статьи бюджета при отображении могут быть отсортированы по виду движения (приходы/расходы) или в том порядке, в котором это задано настройкой бюджета в системе. Показатели бюджета могут быть отображены с заданным уровнем группировки (год, квартал, месяц, неделя, день). Мобильный WEB-интерфейс типового решения “Учет в проектах”

43. БюджетыПросмотр по статьям Нажмите на статью для отображения её показателей. Нажмите для доступа к статьям бюджета, детализирующим данную. Показатели статьи, сгруппированные согласно параметрам просмотра. Заливкой отмечены фактические показатели, согласно дате “по состоянию на”, указанной при формировании бюджета. Статьи в списке могут иметь различный цвет в зависимости от их типа (серые – остатки, зеленые – приходы, синие – сальдо, красные – расходы). Мобильный WEB-интерфейс типового решения “Учет в проектах”

44. БюджетыНавигация по иерархии статей Возврат к статьям первого уровня бюджета. Если значение показателя оформлено в виде гиперссылки, то нажав на него можно получить доступ к списку документов системы, вошедших в показатель. Возврат к родительской статье. Мобильный WEB-интерфейс типового решения “Учет в проектах”

45. БюджетыРасшифровка показателей Список документов детализирующих показатель бюджета с указанием раздела документа, суммы документа вошедшей в показатель, даты документа и его описания. Итог по документам детализирующим показатель в заданном для просмотра масштабе. Мобильный WEB-интерфейс типового решения “Учет в проектах”

46. БюджетыСписок графиков Список диаграмм и графиков бюджета, доступных для отображения. Этот список может быть индивидуальным для каждого из бюджетов и задается его настройками в системе. Нажмите на элемент списка для отображения диаграммы . Мобильный WEB-интерфейс типового решения “Учет в проектах”

47. БюджетыПросмотр графика Группировка показателей диаграмм и графиков зависит от параметров просмотра бюджета. Показатели, отображаемые диаграммой или графиком бюджета, задаются в его настройках. Набор диаграмм и графиков бюджета задается его настройками с системе в разделе “Настройки бюджетов”. Мобильный WEB-интерфейс типового решения “Учет в проектах”

48. БюджетыПросмотр в формате MS Excel Бюджет может быть сформирован в виде таблицы MS Excel, согласно указанным параметрам просмотра и доставлен на устройство как XLS файл. Полученный файл доступен для работы через офисные приложения для Вашей платформы. Мобильный WEB-интерфейс типового решения “Учет в проектах”

49. Платежный календарьФормирование Для формирования платежного календаря укажите период формирования и валюту. Нажмите для формирования платежного календаря в разрезе инструментов оплаты (расчетных счетов) , зарегистрированных в системе. Мобильный WEB-интерфейс типового решения “Учет в проектах”

50. Платежный календарьИнструменты оплаты Список инструментов оплаты, попавших в календарь, с указанием остатка по инструменту на конец периода. Итоговый остаток по всем инструментам. Нажмите на элемент списка для отображения деталей по инструменту (входящих остатков, сумм поступлений и выплат, исходящих остатков). Нажмите на сумму поступлений или выплат для отображения детального списка записей журнала платежей, составивших показатель. Мобильный WEB-интерфейс типового решения “Учет в проектах”