Nokia E61: как открыть локальный HTML-файл
Cкоро пойдет третий год, как я занимаюсь разработкой ПО, используя в качестве рабочего места не только обычный компьютер, но и смартфон Nokia E61. Теперь для полноценной работы над программой мне незачем таскать с собой ноутбук — и редактировать исходники, и компилировать их я могу, имея при себе только смартфон. Учитывая то, что я разрабатываю софт для мобильных, это решение оказалось для меня почти идеальным. Мобильное рабочее место стало прекрасным средством персонального тайм-менеджмента — позволив мне заниматься работой тогда, когда у других время тратится на стояние в длинных очередях или попытку изобразить сон в метро. Я не трудоголик. Перенеся работу на «мусорное», пропавшее бы иначе впустую, время, я освободила вечера и выходные ДЛЯ ЖИЗНИ.
Впрочем, хватит лирики. Речь пойдет не о плюсах или минусах работы в дороге. Приведенный ниже способ пригодится любому, кому потребуется посмотреть на смартфоне локально сохраненный HTML-файл.
Любoмy пpoгpaммиcтy, кaк бы xopoшo oн ни влaдeл cвoeй oблacтью, вpeмя oт вpeмeни пpиxoдитcя зaглядывaть в дoкyмeнтaцию. Хорошо, если вашим рабочим местом является персональный компьютер. Но я ежедневно 2-3 часа дороги между домом и офисом работаю на смартфоне. Hecкoлькo paз мнe пpиxoдилocь пpиocтaнaвливaть paбoтy нaд пpoгpaммoй тoлькo пoтoмy, чтo нyжнo былo вcпoмнить пapaмeтpы кaкoгo-тo мeтoдa, a y мeня нe былo вoзмoжнocти пocмoтpeть co cмapтфoнa дoкyмeнтaцию.
Я paбoтaю c J2ME, ee дoкyмeнтaция пpeдcтaвляeт coбoй нaбop лoкaльныx HTML-фaйлoв. Дaжe cкoпиpoвaв фaйлы нa флэшкy Nokia E61, мнe нe yдaлocь иx oткpыть вcтpoeнным тeлeфoнным бpayзepoм. Фaйлoвый мeнeджep X-plore xoть и пoзвoляeт пpocмoтpeть HTML-cтpaницy, нo нe дaeт xoдить пo ccылкaм.
Bcпoмнив o кoгдa-тo нeпoнpaвившeмcя мнe и yдaлeннoм c тeлeфoнa бpayзepe Oпepa, я cкaчaлa c oфициaльнoгo caйтa и cнoвa ycтaнoвилa нa тeлeфoн пpoбнyю вepcию мобильной Oпepы (не путать с Оперой-мини!).
Оказалось, что Oпepa пpeкpacнo oткpывaет локальныe фaйлы, пoзвoляя иcкaть тeкcт нa oткpытыx cтpaницax и пepexoдить пo ccылкaм нa дpyгиe cтpaницы. Чтобы открыть локальный файл, в строке браузера в качестве URL укажем местонахождение файла в следующем формате:
file://localhost/E:/Documents/JavaDoc/API/MIDP/index.html
Если же ввести просто file://localhost/E:/ , браузер позволит проити по каталогам телефонной флэшки и указать желаемый файл «в интерактивном режиме». Coxpaнив в зaклaдкax ccылки нa нaибoлee чacтo тpeбyющиecя cтpaницы «xeлпa», я пoлyчилa вecьмa yдoбнyю cпpaвoчнyю cиcтeмy нa бaзe Oпepы.
Основы разработки мобильных приложений на HTML5 для устройств Nokia
HTML5 — новая технология, которая позволяет создавать приложения различного уровня сложности. Конечно, не все мобильные браузеры поддерживают HTML5 в полном объеме.
Новые модели Nokia поддерживают html5.
Онлайн, офлайн и LocalStorage
Самой лучшей особенностью HTML5 я считаю , является поддержка работоспособности онлайн и офлайн, и конечно же LocalStorage.
Поддержка офлайн. Т.е вы сможете запустить приложение и использовать его без необходимости подключения к интернету.
Сейчас мы рассмотрим один из важных инструментов при создании приложений — AppCache. AppCache позволяет хранить информацию локально на устройстве, и разрывы в соединении не повлияют на работоспособность приложения. Для обеспечения данной поддержки нужно создать особый файл (Манифест), содержащий список файлов для хранения локально.
CACHE MANIFEST CACHE: /system/js/jquery-1.7.min.js /system/css/style.css NETWORK: /system/php/login.phpПараметром CACHE мы говорим браузеру, что эти файлы нужно скачать. NETWORK – указывает что здесь нам необходим интернет. Т.е вы пользовались приложением, в этот момент возникла необходимость перейти на страницу login.php, приложение автоматически подключится к интернету, и вы спокойно продолжите использование.
Но создать манифест это еще не все, нужно дать понять браузеру, что он существует. Для этого его нужно привязать к странице с помощью тега . Значение атрибута manifest- путь к файлу-манифесту.
Идем дальше.
LocalStorage — вот это очень хорошая фишка HTML5, которая позволяет хранить данные в локальной БД браузера. Кто-то может сказать, что LocalStorage похож на cookies. Но это не так, он намного удобнее и функциональнее. Суть в чем, вы на javascript прописали несколько функций и работаете как с базой данных.
Данный код создаст локальную базу, которую вы видите на скриншоте выше.
var DB; var shorlName='TestBase'; var versionBase='1.0'; var DisplayName='TestBase'; var maxsize=65536; DB=openDatabase(shorlName,versionBase,DisplayName,maxsize); DB.transaction( function(transaction) < transaction.executeSql( 'CREATE TABLE IF NOT EXISTS sites'+ '(url TEXT NOT NULL,'+ 'name TEXT NOT NULL);' ); >); Параметром openDatabase() мы указываем, что нужно создать базу, по указанным параметрам.
Дальше с помощью transaction мы создаем необходимые таблицы. Весь принцип работы я показывать не буду, тут используется Sql, который как заявлено в спецификации поддерживает любые sql команды. Покажу еще, как добавить данные:
transaction.executeSql('INSERT INTO testbase (text, name) VALUES ("Значение 1","Значение 2")');
Данная строка добавит данные в таблицу, если конечно она существует.
JavaScript
Для разработки мобильного приложения, можно использовать Jquery(Jquerymobile).
Jquerymobile — это фреймворк, который слепили на основе jQuery и jQuery UI, и самое главное с поддержкой HTML5. Jquerymobile отлично работает с внешними и внутренними ссылками.
Например, при переходе на другую страницу – contact.php, Jquery выдернет href и сформирует ajax запрос, если произойдет ошибка, появится окошко, оповещающее об этом.
Внутренние ссылки должны бить построены следующим образом: Ссылка
Важным атрибутом при построении страниц, является data-role. Именно по нему Jquery, будет отыскивать нужные элементы.
Foo – это уникальный идентификатор, который будет использовать Jquery. Что еще хотелось бы отметить по Jquerymobile, это поддержка тем. По сути это Css файлы, уже содержащие стилизацию для элементов интерфейса.
Приведу небольшой код:
Заголовок
Контент
The Footer
Как мы видим – это стандартная разметка, ничего нового нет, кроме атрибута data-role.
Железо телефона.
У многих наверное возникает вопрос, но как же написать приложение на HTML5 которое сможет использовать железо телефона(камера, память и т.д). Тут к нам на помощь приходит PhoneGap. Полный принцип работы в нем я не буду рассматривать, лишь опишу некоторые особенности.
PhoneGap – фреймворк с открытым исходным кодом, который позволит получить доступ к железкам телефона. С чем позволяет работать PhoneGap:
1. Акселерометр
2. Камера
3. Компас
4. Устройство(сбор сведений об устройстве)
5. Geolocation
6. Уведомление (Визуальные, звуковые уведомления на устройстве)
7. Сеть (Быстрая проверка состояния сети, а так же информация о сети.)
8. Capture(Захват медиафайлов.)
9. Контакты (Работа с адресной книгой устройства)
10. Файлы (Работа с файловой системой)
11. Storage
12. Media(Запись и воспроизведение аудио файлов)
Фреймворк поддерживает следующие платформы: iPhone, Android, OS, WebOS, WP7, Symbian, Bada,
С появлением новых платформ этот список расширяется. Хотя все платформы нас не интересуют. Проект находится в стадии постоянной разработки, поэтому определенные свойства некоторые системы не поддерживают, что видно на скриншоте (хотя возможно он немного устарел).
Мы видим, что Symbian не поддерживает 3 свойства, будем надеяться, что это вскоре исправят. Строка Symbian показывает, что поддерживаются не только устройства с данной системой, но и их обновления(Anna, Belle… список постоянно пополняется). Как же работает PhoneGap?
Основы разработки мобильных приложений на HTML5 для устройств Nokia
HTML5 — новая технология, которая позволяет создавать приложения различного уровня сложности. Конечно, не все мобильные браузеры поддерживают HTML5 в полном объеме.
Новые модели Nokia поддерживают html5.
Онлайн, офлайн и LocalStorage
Самой лучшей особенностью HTML5 я считаю , является поддержка работоспособности онлайн и офлайн, и конечно же LocalStorage.
Поддержка офлайн. Т.е вы сможете запустить приложение и использовать его без необходимости подключения к интернету.
Сейчас мы рассмотрим один из важных инструментов при создании приложений — AppCache. AppCache позволяет хранить информацию локально на устройстве, и разрывы в соединении не повлияют на работоспособность приложения. Для обеспечения данной поддержки нужно создать особый файл (Манифест), содержащий список файлов для хранения локально.
CACHE MANIFEST CACHE: /system/js/jquery-1.7.min.js /system/css/style.css NETWORK: /system/php/login.phpПараметром CACHE мы говорим браузеру, что эти файлы нужно скачать. NETWORK – указывает что здесь нам необходим интернет. Т.е вы пользовались приложением, в этот момент возникла необходимость перейти на страницу login.php, приложение автоматически подключится к интернету, и вы спокойно продолжите использование.
Но создать манифест это еще не все, нужно дать понять браузеру, что он существует. Для этого его нужно привязать к странице с помощью тега . Значение атрибута manifest- путь к файлу-манифесту.
Идем дальше.
LocalStorage — вот это очень хорошая фишка HTML5, которая позволяет хранить данные в локальной БД браузера. Кто-то может сказать, что LocalStorage похож на cookies. Но это не так, он намного удобнее и функциональнее. Суть в чем, вы на javascript прописали несколько функций и работаете как с базой данных.
Данный код создаст локальную базу, которую вы видите на скриншоте выше.
var DB; var shorlName='TestBase'; var versionBase='1.0'; var DisplayName='TestBase'; var maxsize=65536; DB=openDatabase(shorlName,versionBase,DisplayName,maxsize); DB.transaction( function(transaction) < transaction.executeSql( 'CREATE TABLE IF NOT EXISTS sites'+ '(url TEXT NOT NULL,'+ 'name TEXT NOT NULL);' ); >); Параметром openDatabase() мы указываем, что нужно создать базу, по указанным параметрам.
Дальше с помощью transaction мы создаем необходимые таблицы. Весь принцип работы я показывать не буду, тут используется Sql, который как заявлено в спецификации поддерживает любые sql команды. Покажу еще, как добавить данные:
transaction.executeSql('INSERT INTO testbase (text, name) VALUES ("Значение 1","Значение 2")');
Данная строка добавит данные в таблицу, если конечно она существует.
JavaScript
Для разработки мобильного приложения, можно использовать Jquery(Jquerymobile).
Jquerymobile — это фреймворк, который слепили на основе jQuery и jQuery UI, и самое главное с поддержкой HTML5. Jquerymobile отлично работает с внешними и внутренними ссылками.
Например, при переходе на другую страницу – contact.php, Jquery выдернет href и сформирует ajax запрос, если произойдет ошибка, появится окошко, оповещающее об этом.
Внутренние ссылки должны бить построены следующим образом: Ссылка
Важным атрибутом при построении страниц, является data-role. Именно по нему Jquery, будет отыскивать нужные элементы.
Foo – это уникальный идентификатор, который будет использовать Jquery. Что еще хотелось бы отметить по Jquerymobile, это поддержка тем. По сути это Css файлы, уже содержащие стилизацию для элементов интерфейса.
Приведу небольшой код:
Заголовок
Контент
The Footer
Как мы видим – это стандартная разметка, ничего нового нет, кроме атрибута data-role.
Железо телефона.
У многих наверное возникает вопрос, но как же написать приложение на HTML5 которое сможет использовать железо телефона(камера, память и т.д). Тут к нам на помощь приходит PhoneGap. Полный принцип работы в нем я не буду рассматривать, лишь опишу некоторые особенности.
PhoneGap – фреймворк с открытым исходным кодом, который позволит получить доступ к железкам телефона. С чем позволяет работать PhoneGap:
1. Акселерометр
2. Камера
3. Компас
4. Устройство(сбор сведений об устройстве)
5. Geolocation
6. Уведомление (Визуальные, звуковые уведомления на устройстве)
7. Сеть (Быстрая проверка состояния сети, а так же информация о сети.)
8. Capture(Захват медиафайлов.)
9. Контакты (Работа с адресной книгой устройства)
10. Файлы (Работа с файловой системой)
11. Storage
12. Media(Запись и воспроизведение аудио файлов)
Фреймворк поддерживает следующие платформы: iPhone, Android, OS, WebOS, WP7, Symbian, Bada,
С появлением новых платформ этот список расширяется. Хотя все платформы нас не интересуют. Проект находится в стадии постоянной разработки, поэтому определенные свойства некоторые системы не поддерживают, что видно на скриншоте (хотя возможно он немного устарел).
Мы видим, что Symbian не поддерживает 3 свойства, будем надеяться, что это вскоре исправят. Строка Symbian показывает, что поддерживаются не только устройства с данной системой, но и их обновления(Anna, Belle… список постоянно пополняется). Как же работает PhoneGap?