Мобильный Интернет — один из важнейших развивающихся рынков будущего. Для разработчиков, однако, среда имеет свои подводные камни. В отличие от «PC Web», они сталкиваются с практически неисчислимым количеством аппаратных и программных платформ в мобильном канале. Эта фрагментация может побудить некоторых ограничивать свои проекты конкретными платформами и конечными устройствами. Слишком частым результатом является приложение, разработанное с большими затратами, которое может оптимально отображаться только на очень ограниченном количестве устройств.
Чтобы в полной мере использовать эту статью, вам необходимо зарегистрироваться на 30-дневную бесплатную пробную версию, которая впоследствии преобразуется в бесплатную версию для разработчиков. При регистрации бесплатной учетной записи вам потребуется создать имя пользователя и пароль в дополнение к заполнению следующих обязательных полей: Имя, Компания, Телефон, Страна, Адрес электронной почты и согласиться с Условиями обслуживания Netbiscuits и Политикой конфиденциальности.
Для разработки одного приложения для всех конечных устройств требуется новая технологическая платформа, которая автоматически адаптирует мобильные веб-сайты и контент к конкретным форм-факторам и программным средам различных мобильных устройств и максимально возможного количества мобильных телефонов в мире. В следующей статье описывается разработка мобильного веб-сайта с помощью NetBeans и Netbiscuits, программной платформы, которая обеспечивает разработку и доставку мобильных веб-сайтов практически для всех конечных устройств по всему миру.
Требования
-
NetBeans для Java: http://www.netbeans.org/downloads/index.html
-
Локальный сервер приложений, доступный извне
-
Аккаунт Netbiscuits: http://www.netbiscuits.com/freetrial
Разработка мобильных сайтов
В принципе, нет никакой принципиальной разницы между разработкой мобильного портала и стандартным веб-приложением. В простейшей форме страница XHTML создается с очень скромным дизайном, который хорошо смотрится, прежде всего, на устройствах с низким разрешением. Однако это исключило бы старые устройства, которые могут интерпретировать только WML на основе протокола WAP вместо XHTML. Другие проблемы, такие как отсутствие поддержки определенных графических форматов на некоторых устройствах, также не принимаются во внимание. Следовательно, ручная оптимизация для широкого набора мобильных устройств быстро становится очень дорогой и, в лучшем случае, требует базы данных с информацией обо всех поддерживаемых устройствах.
При создании мобильного веб-сайта с использованием BiscuitML и его доставке через платформу Netbiscuits последняя вносит коррективы практически для всех доступных конечных устройств. Это означает, что разработчик может создать страницу с использованием XML-совместимого языка разметки, не беспокоясь о поддерживаемых выходных данных или графических форматах. База данных устройств, лежащая в основе платформы Netbiscuits, содержит всю необходимую информацию о более чем 6000 конечных устройств по всему миру.
Хотя более новые устройства больше не имеют никаких ограничений, когда речь заходит о поддержке XHTML или различных графических форматах, все же имеет смысл включать различия между устройствами в создаваемые страницы портала. Например, при использовании Rich Internet Features (RIF) или включении мультимедийного контента (например, потоковое видео или загрузка видео).
Развитие мобильного портала иллюстрируется ниже на практическом примере. Для этого в NetBeans будет создан популярный веб-проект на Java. Страницы JSP будут созданы позже для контента, который доставит BiscuitML. Для этой цели можно использовать один из веб-серверов, интегрированных в NetBeans, без необходимости какой-либо специальной настройки. Отдельные шаги подробно описаны в следующих разделах.
Надпись: Создание знакомого веб-приложения
Заголовок: выберите нужный сервер и путь к контенту.
Разработка страницы портала JSPX
Для создания новой страницы портала (здесь: category_1.jspx) сначала необходимо создать файл JSP в папке «Веб-страницы». Мы будем использовать модель XML (JSPX) для нашего примера, хотя стандартная модель также будет работать. Однако важно использовать text / xml в качестве типа контента и кодировку UTF-8 для обеспечения международной совместимости. Кроме того, файл в файле web.xml должен быть задан как файл приветствия, чтобы в дальнейшем он отображался как первая страница при доступе к порталу.
<welcome-file-list>
<welcome-file>category_1.jspx</welcome-file>
</welcome-file-list>
Листинг: извлечение из web.xml
Надпись: структура проекта после создания первой страницы
Следующий код показывает пустой шаблон страницы с простой структурой контейнера:
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<jsp:directive.page contentType="text/xml" pageEncoding="UTF-8"/>
<page title="My Mobile Portal" paging="true">
<container>
<column>
<!—- content biscuits -->
</column>
</container>
</page>
</jsp:root>
Листинг: category_1.jspx
Обычно страница содержит заголовок, содержимое и нижний колонтитул. В большинстве случаев элементы навигации располагаются в области верхнего или нижнего колонтитула, чтобы можно было вызывать нужный контент. Тексты, изображения, мультимедийный контент, такой как видео или карты, а также таблицы или формы могут быть отображены и связаны с ними в области контента.
Netbiscuits предоставляет специальное «печенье» для всего общего содержимого и функциональных элементов веб-сайта. Каждое печенье имеет специальное количество уровней деградации, которые обеспечивают оптимальную адаптацию содержимого каждого отдельного печенья практически к любому конечному устройству. Это гарантирует, что один и тот же мобильный веб-сайт будет оптимально отображаться как на самом последнем iPhone, так и на самой старой Motorola Razr.
Надпись: деградация мобильного веб-сайта на нескольких конечных устройствах
Распределение контента по нескольким страницам — это еще кое-что, о чем разработчику не нужно беспокоиться. Если запрашивающее конечное устройство сталкивается с какими-либо ограничениями в отношении максимального объема данных, который может быть отображен, платформа Netbiscuits автоматически вставляет элемент навигации для разбивки на страницы и распределяет контент по нескольким подстраницам.
Шаблоны кода для содержимого печенья
Рекомендуется использовать функциональность шаблона кода в NetBeans, чтобы обеспечить быстрое и простое создание нужного содержимого. Несколько шаблонов могут быть применены на вкладке Шаблоны кода в Сервис -> Параметры -> Редактор. Их можно вставить на страницу позже, используя комбинацию клавиш. Если вы создадите свой собственный шаблон для печенья, это не только значительно сократит объем записи при создании страниц JSP, но и риск ошибок будет ограничен, поскольку наиболее важные атрибуты уже будут созданы в узлах с правильные имена, и все, что вам нужно будет сделать, это присвоить значения.
Надпись: Создание нового шаблона
Для создания таких шаблонов выберите JSP в качестве языка программирования в вышеупомянутом окне, а затем создайте пустой шаблон с помощью кнопки «Создать» (можно использовать префикс, например «nb», чтобы обеспечить согласованное именование шаблонов печенья : nbtext, nbarticle…). Все, что вам нужно сделать сейчас, это вставить и сохранить код нужного печенья как «расширенный текст». Ссылка BiscuitML (http://www.netbiscuits.com/biscuitmlreference) содержит информацию о том, как это сделать. Каждый отдельный разработчик может решить, останутся ли содержимое и атрибуты бисквита пустыми или им будут присвоены значения по умолчанию.
Созданные шаблоны будут доступны после перезапуска NetBeans.
Надпись: Создание текста шаблона
The example illustrated in this article should contain a home page with a header and footer as well as a few teasers as content. The latter will be linked to article pages later on in order to illustrate the navigation between pages. A few teasers will be inserted into the page first of all via the code template; this is completed by entering the predefined abbreviation for the teaser template and pressing the tab key. All you need to do now is enter the actual values and attributes; the page will then contain its initial content.
Caption: The first portal page
Storing reusable code segments
If parts of the code are to be used equally on several pages, these segments should be placed in separate files and incorporated using the Include command for reasons of structuring and maintainability. As a result of this, subsequent alterations to the design or changes to the text or links need only be made once, they will however affect the entire portal.
To that end, the ‘/includes’ subfolder will be created in Web Pages. In our example, we will create a file with the name of footer.jspx in this folder, which contains the following code:
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<!-- Use items below as footer on all pages -->
<PAGEBEGINFOOTER />
<!-- Footer menu -->
<PIPEDMENU>
<items>
<item>
<link href="category_1.jspx">Home</link>
</item>
<item>
<link href="imprint.jspx">Imprint</link>
</item>
<item>
<link href="contact.jspx">Contact</link>
</item>
</items>
</PIPEDMENU>
<!-- Copyright part -->
<PAGEFOOTER>
<item position="3">
<text>© Netbiscuits, 2009.</text>
</item>
</PAGEFOOTER>
</jsp:root>
Listing: footer.jspx
This code generates two biscuits, which should be displayed as the footer below the page’s current content (a small menu and the portal’s copyright reference in our example). Furthermore, the <PAGEBEGINFOOTER> tag will be used to ensure that all subsequent biscuits will be placed as footers below the separated content for all paginated pages. That way, every partial page will have the same footer, not only the last one.
After that, an Include command must be placed in the home.jspx, below the previously created teasers, in order to ensure the footer’s content is also inserted on the page:
<jsp:include page="includes/footer.jspx" />
The same steps must then be repeated for the header, the first page will then be complete.
Design and layout
The page’s design is defined via style attributes that are based on cascading style sheets (CSS). They can be assigned to both complete pages as well as individual biscuits. Depending on the specific biscuit in use, additional attributes are also available that enhance the standard style set (e.g. active color with tabbed menus or bgcolor2/bgcolor3 for alternating background colors with lists).
<styles>
<style name="padding-top" value="10px" />
<style name="padding-bottom" value="10px" />
<style name="margin-bottom" value="10px" />
<style name="color" value="#0000FF"/>
<style name="link-color" value="#0000FF"/>
<style name="text-align" value="center"/>
<style name="active-color" value="#FFFFFF"/>
<style name="active-bgcolor" value="#C71722"/>
<style name="active-border" value="#C71722"/>
<style name="inactive-color" value="#FFFFFF"/>
<style name="inactive-bgcolor" value="#CCCCCC"/>
<style name="inactive-border" value="#C71722"/>
</styles>
Listing: Menu styles
The code example above shows the design of the header menu. This is illustrated in the following image:
Caption: The styled header menu
With regard to page styles, it can be useful – as with some code parties as well – to place them elsewhere and incorporate them using the Include command. That way, the basic design of the page can be adjusted once without having to change each individual page.
The finished web project
After a few more overview and article pages have been added to the project, the sample portal is complete. The markup has been prepared and we can take a look at the first edition.
Caption: Page structure of the finished example portal
The application can be deployed on an application server integrated into NetBeans, regardless of whether it is Apache Tomcat or GlassFish. This means no additional server needs to be installed and configured. The external accessibility of the server is the only prerequisite. If this is not possible (e.g. for security reasons), the project has to be set up on a system, which is accessible from the Netbiscuits platform via http.
When the local application server is used the project can be launched easily using the Run command and the corresponding URL is called up in the browser.
Caption: BiscuitML in the browser
Delivery via a Netbiscuits custom application
A Netbiscuits custom application is required to transform the BiscuitML code into the final XHTML or WML for the mobile devices. To complete this, register and log in at www.netbiscuits.com and navigate to My Netbiscuits -> My Applications. A new custom application can now be created via the “Create” tab. Initially, only the name, programming language and backend address need to be entered. If the backend is password protected, the required access data can be stored under “Extended Backend Parameters”.
Caption: Creating a Netbiscuits custom application
During the development phase, the local server can be entered as the backend with the externally accessible IP address. After saving the custom application, the page is immediately accessible via a default URL. As soon as the application has been set up on the productive server, one or more friendly URLs can also be added when creating the Netbiscuits application. Such URLs can then be used to deliver the application, if the desired URL is registered and points towards Netbiscuits.
If everything has been configured and implemented correctly, the mobile portal page will be retrieved and, depending on the respective end device, may look like this:
Caption: Version Apple iPhone, Version Nokia N70, Version Samsung D600
Conclusion
The combination of NetBeans and Netbiscuits allows mobile Internet applications to be realized easily and efficiently and delivered optimally to more than 6,000 different end devices worldwide. In doing so, developers can fall back on their experience in the area of web applications and XML, without having to worry about the restrictions posed by different devices. Even testing on various devices is just a pro-forma issue.
At www.netbiscuits.com you can register for a free 30-day trial account. The account will provide you with access to all of the platform’s functionalities. After that, those who do not wish to invest in one of Netbiscuits’ three premium accounts can use the free “developer account”, which offers access to all of the technology platform’s basic functions and includes the delivery of 1,000 mobile page visits per month.
Additional articles on designing sophisticated mobile web services with NetBeans and Netbiscuits explain how to prepare content for a mobile portal using Struts, enhance the portal for various languages, implement interfaces to external applications such as content management systems, ad -servers or web tracking tools, and develop applications for the latest generation of smartphones using Netbiscuits.