Статьи

Создание мобильного HTML5-приложения с помощью App Framework

Декабрь 10, 2018

Что такое App Framework?

App Framework — это библиотека JavaScript для разработки мобильных приложений на HTML5. Он позволяет создавать простые, насыщенные и полные мобильные приложения на HTML5 / JavaScript. Это краткое руководство представляет собой введение в платформу приложений и представляет основные понятия и основные понятия.

Библиотека App Framework основана на jQuery. App Framework может создавать мощные интерфейсы для мобильных устройств, таких как Android или iOS. App Framework состоит из трех элементов: библиотека запросов и управления событиями, библиотека графического интерфейса и плагин для библиотеки WebKit.

Библиотека функционально богаче, чем jQuery Mobile. Еще одна сильная сторона App Framework — это то, что ему требуется всего 3 КБ памяти против 35 КБ для jQuery. Скрипты также в три раза быстрее, чем jQuery для Android, и в 2,2 раза быстрее для iOS.

Конкурирующие рамки

Есть несколько конкурирующих фреймворков для App Framework. Эти платформы имеют более или менее ту же функциональность, что и платформа приложений. Среди наиболее известных можно упомянуть: jQuery Mobile, Sencha Touch, jQTouch. Самым большим преимуществом App Framework является его вес и скорость выполнения. App Framework — самое мощное решение для мобильных фреймворков HTML 5.

Предпосылки

Создание прокси

Для конкретных нужд учебника нам нужно будет делать междоменные запросы через Ajax. Для обработки этих запросов необходим сервер Apache и PHP. Поскольку JavaScript напрямую не управляет междоменными запросами, мы настроим небольшой прокси через php. Скопируйте и вставьте следующий код в файл server.php, расположенный там же, где и наша HTML-страница. Модуль php_curl должен быть включен в php.ini. 

<? php
$ url1 = $ _GET ["url"];
$ ch1 = curl_init () / / Check that the php_curl extension is enabled in php.ini
curl_setopt ($ ch1, CURLOPT_URL, $ url);
curl_setopt ($ ch1, CURLOPT_HEADER, false);
curl_setopt ($ ch1, CURLOPT_RETURNTRANSFER, true);
$ xml1 = curl_exec ($ ch1);
echo $ xml1;
curl_close ($ ch1);
?>

App Framework

App Framework представляет собой мобильную адаптацию jQuery, поэтому обе платформы используют один и тот же синтаксис. Для этого урока лучше иметь некоторые знания о jQuery. Платформу приложений можно скачать по этому адресу . Скопируйте и вставьте в каталог вашего сайта следующие папки и файлы:

  • кухонная мойка
  • плагины
  • щ

Примечание. Для тестирования необходим браузер, совместимый с webkit и HTML5.

Руководство

На этом примере мы покажем, как вы можете использовать App Framework для создания своего мобильного приложения. Вкратце, наш пример будет основан на концепции небольшого читателя RSS-каналов. Это просто, чтобы дать вам базовые знания о App Framework. Сначала мы создадим наш графический интерфейс с помощью jqUI и реализуем некоторые функции с помощью App Framework.

Создать страницу

В качестве первого шага мы создадим нашу страницу и настроим нашу платформу приложений. Вот скелет приложения App Framework: 

 <html>
<head>
<meta content="text/html; http-equiv="Content-type" charset=utf-8"/>
<script src="//cdn.app-framework-software.intel.com/2.0/appframework.min.js" type="text/javascript"> 
</script><script type="text/javascript" charset="utf-8"src="./ui/appframework.ui.min.js"> 
<link rel="stylesheet" type="text/css" href="css /af.ui.css"title="default" />
</script><script>
$.ui.ready (function ( ) {
            $.ui.backButtonText ="Back". / / We override the back button text to always say" Back"
} ) ;
       
        if (! ( (window.DocumentTouch && document instanceof  DocumentTouch ) |  | ' ontouchstart ' in window )) {
            var script = document.createElement (" script");
            script.src =" plugins/af.desktopBrowsers.js" ;
            var tag = $ (" head" ). append ( script) ;
            $.os.android = true;. / / let 's make it run like an android device
            $.os.desktop = true. ;
        }
 </script>
</head>
<body>
   <div id="afui">
   </ div>
</ body>
</ html>

Создайте страницу «index.html» в корне вашего сервера и добавьте приведенный выше код. Этот код является основой нашей страницы, он импортирует скрипты, необходимые для использования App Framework. Наше приложение будет разбито на два компонента: страницу, ее содержимое и меню. С помощью App Framework, чтобы создать страницу, мы создадим несколько div внутри div «content» нашего HTML-файла.

Мы начнем с создания нашей главной страницы «RSS». Она будет содержать вход, позволяющий пользователю ввести ссылку RSS, и панель со списком заголовков в потоке RSS. В div «afui» мы добавим div «content». Именно в этом конкретном div мы создадим разные страницы нашего приложения. Наша первая страница будет называться «RSS». 

 <div id="afui">
       <div id="content">
           <div title='RSS' class="panel" id="rss" style ="overflow: hidden" >
           </ div>
       </ div>
      </ div>

Мы добавим на нашу страницу элемент ввода, метку и кнопку отправки, которая позволяет пользователю вводить URL. Мы будем использовать тег HTML5 «fieldset».

Элемент позволяет группировать поля ввода в логические категории (тематические). 

 </fieldset><fieldset>
    <legend> RSS 2.0  
        <form id="parser" onsubmit="return false">
          <label for="links"> Enter  rss 2.0 url  <br />
          <input type="text"id="links" name="links" class='jq-ui-forms'/>
            <input type="submit" class="button" value="Submit" onclick=" Rssparse ()"/>
     </ form>
</ fieldset>

Теги input и label являются классическими тегами HTML, к которым мы добавили классы, предоставляемые непосредственно afui. Функция «Rssparse ()» будет реализована позже.

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

 <fieldset>
        <legend> Rss Feed 
            <ul id="flux">
            </ul>
</ fieldset>

Мы добавили HTML-тег «ul», потому что наш контент представляет собой список заголовков. App Framework вставит теги «li».

Создание меню

Мы собираемся создать меню для нашего приложения. App Framework может легко создать два типа меню. Первая — это панель навигации внизу приложения. Второе — меню в левой части нашего приложения. Второе меню постоянно отображается на больших экранах, но убирается на меньших экранах (смартфон). Мы создадим этот второй тип меню.

Сначала мы начнем с создания второй страницы нашего приложения. Просто создайте второй div с классом «панель». 

 <div title="Project" class="panel" id="test">

Теперь мы добавим наше меню через тег «nav». Этот тег должен быть размещен за пределами #content. Меню создается автоматически afui. Класс «title» позволяет нам определять заголовок раздела. В afui ссылки между внутренними страницами приложения указываются по их идентификатору. Таким образом, вызов нашего теста страницы будет выполнен с помощью href = ”# test”. 

 <nav>
             <div class='title'> Business </div>
<ul>
             <li class="BusinessHome">
                     <a href="#rss"> Home </a>
             </li>
              <li >
                   <a href="#test"> test </a>
             </li>
</ul>
</nav >

Запрос и модификация DOM

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

селекторы

В качестве первого шага мы собираемся восстановить действие пользователя, когда этот подтвердит URL в нашей форме. При создании этой формы мы определили кнопку отправки следующим образом: 

 <input type="submit" class="button" value="Submit" onclick=" Rssparse ()"/>

Когда пользователь нажимает кнопку отправки, Rssparse() Таким образом, мы должны реализовать это. Теперь перейдем к JavaScript. Мы реализуем parserRss() Первоначально эта функция будет отображать URL-адрес, подтвержденный пользователем. 

 <script>
function Rssparse ()
{
alert ($ ("# link1").val ())
}

Синтаксис такой же, как у jQuery. Эти селекторы позволят нам получить различные объекты DOM, по их идентификатору, классам или типу тега.

Помните, что при создании нашей формы мы присваивали вводу типа текст id = ссылка. Вызывая селектор $ («# link1 ″), это наш входной текст, содержащий URL-адрес, введенный пользователем, который возвращается. Как только этот элемент был выбран, мы вызываем функцию val (), которая возвращает нам значение выбранного элемента. $ (”# Link1 ″) .val () возвращает URL, введенный пользователем!

Запрос Ajax

Как и jQuery, App Framework может выполнять запросы Ajax. Из-за междоменных ограничений браузеров, App Framework, как и jQuery, не позволяет делать междоменные запросы Ajax. В нашем случае, чтобы получить RSS-канал с URL, мы хотим сделать запрос на сервере. это не наше. Чтобы сделать этот запрос, мы будем использовать наш прокси (см. Предварительные требования). 

 function Rssparse ()
{
$. ajax ( {
url : ' ? server.php url =' + $ ("# link1" ).val ( ),
success : function ( data) {
alert (" ok");
},
error: function () {alert ("fail");}
} ) ;
}

Здесь мы делаем промежуточный запрос на наш прокси, указывая ему истинный URL запроса. Затем наш прокси-сервер позаботится о том, чтобы сделать запрос и отправить нам результат.

XML-парсер и динамическая модификация DOM

Собрав наши данные XML, мы теперь должны с ними разобраться. App Framework предоставляет нам метод с именем parseXML, который позволяет из текста xml создавать объект DOM Document. Мы можем вызвать непосредственно объект, полученный в результате функции parseXML, такие методы, как getElementsByTagName. 

 function Rssparse ()
{
$. ajax ( {
url : ' ? server.php url =' + $ ("# link" ) val ( ).
success : function ( data) {
var xmld = $.parseXML (data) ;
var nodes =xmld.getElementsByTagName ("item" ) ;
$("# flux" ).empty ();
 
for (i + + var i = 0 ; i < nodes.length )
{
var  titles= nodes[ i ].getElementsByTagName ("title" );
var dom = $ ("# flux" ).append (" <li> <a href=' ' >" + titles [0] childNodes [0]. nodeValue +"< / li >"...) ;
}
}
error: function () {alert ("fail");}
} ) ;
}

Вывод

App Framework предлагает большинство функций jQuery, адаптированных для мобильных устройств. Его богатые библиотеки и непревзойденная производительность делают его всеобъемлющей мобильной HTML5-фреймворком. Эта структура позволит вам создавать мобильные приложения в очень короткие сроки.

Вы можете найти документацию здесь http://app-framework-software.intel.com/documentation.php .

68
Share: