<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
<HTML> | |
<HEAD> | |
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8"> | |
<TITLE>Developing Mobile Websites with NetBeans IDE and Netbiscuits</TITLE> | |
<META NAME="AUTHOR" CONTENT="Martin Schreiner, Lars Hartkopf, Netbiscuits GmbH"> | |
<link rel="stylesheet" href="../../netbeans.css" type="text/css"> | |
</HEAD> | |
<BODY> | |
<H1>Developing Mobile Websites with NetBeans IDE and Netbiscuits</H1> | |
<p><em>by Martin Schreiner, Mobile Application Developer, Netbiscuits</em></p> | |
<!--<div style="float:right"><p><a href="http://www.netbiscuits.com/c/document_library/get_file?folderId=17218&name=DLFE-4201.pdf">Download article (PDF)</a></p></div>--> | |
<H2>Requirements</H2> | |
<OL> | |
<LI><P><A HREF="https://netbeans.org/downloads/index.html">NetBeans IDE for Java</A></P> | |
<LI><P>Local application server, externally accessible</P> | |
<LI><P><A HREF="http://www.netbiscuits.com/freetrial">Netbiscuits account</A></P> | |
</OL> | |
<H2>The Mobile Internet</H2> | |
<P> | |
The mobile Internet is one of the most important growth markets of | |
the future. For developers, however, the medium does have its | |
pitfalls. In contrast to the "PC Web", they are faced with a | |
virtually incalculable number of hardware and software platforms in | |
the mobile channel. This fragmentation might encourage some to limit | |
their projects to specific platforms and end devices. The all too | |
frequent result is an application developed with great expense, which | |
can only be displayed optimally on a very limited number of devices.</P> | |
<P> | |
In order to develop <I>one</I> application for <I>all</I> | |
end devices, a new technology platform is required that automatically | |
adapts the mobile websites and content to the specific form factors | |
and software environments of the various mobile devices and as many | |
of the world’s mobile phones as possible. The following article | |
describes the development of a mobile website with the aid of | |
NetBeans and Netbiscuits, a software platform that enables the | |
development and delivery of mobile websites for virtually all end | |
devices worldwide.</P> | |
<H2>Developing Mobile Websites</H2> | |
<P> | |
Basically, there is no fundamental difference between the development | |
of a mobile portal and a standard web application. In the simplest | |
form, an XHTML page is created with a very modest design, which looks | |
good, above all, on low resolution devices. However, this would | |
exclude older devices that can only interpret WML based on the WAP | |
protocol instead of XHTML. Other problems, such as the lack of | |
support for certain graphics formats on some devices, are also not | |
taken into account. Consequently, manual optimization for a broad set | |
of mobile devices quickly becomes very expensive and, in the | |
best-case scenario, requires a database with information on all | |
devices that are supported.</P> | |
<P> | |
When creating a mobile website using BiscuitML and delivering it via | |
the Netbiscuits platform, the latter makes adjustments for virtually | |
all available end devices. This means the developer can create a page | |
using an XML-compliant markup language, without having to worry about | |
the supported output or graphics formats. The device database | |
underlying the Netbiscuits platform contains all the essential | |
information on more than 6,000 end devices worldwide.</P> | |
<P> | |
Although newer devices no longer have any limitations when it comes | |
to XHTML support or various graphics formats, it still makes sense to | |
include device-specific differences on the portal pages that are | |
created. For instance, when using Rich Internet Features (RIF) or | |
incorporating multimedia content (e.g. video streaming vs. video | |
download).</P> | |
<P> | |
The development of a mobile portal is illustrated | |
below using a practical example. For this purpose, a popular <I>Java | |
web project</I> will be created in NetBeans | |
first of all. JSP pages will be created later on for the content, | |
which will deliver BiscuitML. One of the web servers integrated into | |
NetBeans can be used for this purpose without the need for any | |
special configuration. The individual steps are described in detail | |
in the following sections.</P> | |
<P class="valign-middle, align-center"><IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_m28baf924.png" alt="New Web Application Project dialog" ALIGN=BOTTOM BORDER=0><br><em>Creating a familiar web application</em></P> | |
<P class="valign-middle, align-center"><IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_m7cfb0c3b.png" alt="Server and Settings dialog" ALIGN=BOTTOM BORDER=0><br><em>Select | |
the desired server as well as the content path</em></P> | |
<H2>Developing a JSPX Portal Page</H2> | |
<P> | |
In order to construct a new portal page (here: <tt>category_1.jspx</tt>), | |
a JSP file must first be created in the Web Pages folder. We will use | |
the XML model (JSPX) for our example, the standard model would also | |
work though. It is important, however, to use <tt>text/xml</tt> as the content | |
type and <tt>UTF-8</tt> encoding in order to ensure international | |
compatibility. Furthermore, the file in the <tt>web.xml</tt> | |
must be set as a welcome file, so that it will be shown as the first | |
page when accessing the portal later on.</P> | |
<p> | |
<pre><welcome-file-list> | |
<welcome-file>category_1.jspx</welcome-file> | |
</welcome-file-list></pre><br><em>Listing: extract from the web.xml file</em></P> | |
<p><br></p> | |
<P class="valign-middle, align-center"> | |
<IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_23cd3501.png" NAME="Grafik 12" ALIGN=BOTTOM BORDER=0><br>Project structure after creating the first page | |
</P> | |
<P> | |
The following code shows a blank page template with a simple | |
container structure:</P> | |
<pre><?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></pre> | |
<P><em>Listing: category_1.jspx</em></P> | |
<P> | |
Typically, a page contains a header, content and a | |
footer. In most cases, navigation elements are located in the header | |
or footer area so that the desired content can be called up. Texts, | |
images, rich media content, such as video or maps, | |
as well as tables or forms can be displayed and linked to in the | |
content area. | |
</P> | |
<P><A NAME="OLE_LINK1"></A> | |
Netbiscuits provides special "biscuits" for all common content | |
and functional elements of a website. Each biscuit has a special | |
number of degradation levels, which ensure the content of each | |
individual biscuit can be optimally adapted to virtually any end | |
device. This ensures that the one and the same mobile website will be | |
displayed optimally on both the latest iPhone as well as on the | |
oldest Motorola Razr.</P> | |
<P class="valign-middle, align-center"><IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_154ecbb9.jpg" alt="screen content of mobile devices" ALIGN=BOTTOM BORDER=0><br><em>Degradation of a mobile website across several end devices</em></P> | |
<P> | |
The distribution of content across several pages is something else | |
that the developer does not need to worry about. If the requesting | |
end device encounters any limitations with regard to the maximum data | |
volume that can be displayed, the Netbiscuits platform automatically | |
inserts a navigation element for paging and distributes the content | |
across several sub-pages.</P> | |
<H2>Code Templates for Content Biscuits</H2> | |
<P> | |
The <em>Code Template</em> | |
functionality of NetBeans is recommended in order to ensure the | |
desired content can be created quickly and easily. Several templates | |
can be applied via the Code Templates tab under <I>Tools | |
-> Options -> Editor.</I> These can | |
be inserted into the page later on using a key combination. If you | |
create your own template for the common biscuits, this will not only | |
reduce the amount of writing considerably when creating the JSP | |
pages, the risk of errors will also be limited because the most | |
important attributes will already have been created in the nodes with | |
the correct names, and all you will need to do is assign values.</P> | |
<P class="valign-middle, align-center"> | |
<IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_m5a3411d5.png" alt="new code template dialog" ALIGN=BOTTOM BORDER=0><br><em>Creating | |
a new template</em></P> | |
<P> | |
To create such templates, select JSP as the | |
programming language in the above-mentioned window, then create an | |
empty template using the New button (a prefix, such as "nb", | |
could be used in order to ensure consistent naming of the biscuit | |
templates : nbtext, nbarticle...). All you need to do now is insert | |
and save the code of the desired biscuit as "expanded text". | |
The BiscuitML reference (<A HREF="http://www.netbiscuits.com/biscuitmlreference">http://www.netbiscuits.com/biscuitmlreference</A>) | |
provides information on how to complete this. Each individual | |
developer can decide whether the content and attributes of the | |
biscuit will remain empty or if default values will be allocated to | |
them. | |
</P> | |
<P> | |
The templates that have been created will be available after | |
restarting NetBeans.</P> | |
<p class="valign-middle, align-center"><IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_3e109465.png" alt="Option > Editor > Code Templates window" ALIGN=BOTTOM BORDER=0><br><em>Creating template text</em></P> | |
<P> | |
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. | |
</P> | |
<P class="valign-middle, align-center"> | |
<a href="../../images_www/articles/netbiscuits/Netbiscuits_html_574223ea.png"><IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_574223ea.png" alt="netbeans editor window" ALIGN=BOTTOM BORDER=0></a><br><em>The first portal page (click to enlarge)</em></P> | |
<H2>Storing Reusable Code Segments</H2> | |
<P> | |
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.</P> | |
<P> | |
To that end, the '<tt>/includes</tt>' subfolder will be created in | |
Web Pages. In our example, we will create a file with the name of | |
<tt>footer.jspx</tt> in this folder, which | |
contains the following code:</P> | |
<pre> | |
<?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>&#169;Netbiscuits, 2009.</text> | |
</item> | |
</PAGEFOOTER> | |
</jsp:root></pre> | |
<P><em>Listing: footer.jspx</em></P> | |
<P> | |
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 <tt><PAGEBEGINFOOTER></tt> 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.</P> | |
<P> | |
After that, an Include command must be placed in the <tt>home.jspx,</tt> | |
below the previously created teasers, in order to ensure the footer’s | |
content is also inserted on the page: | |
<pre><jsp:include page="includes/footer.jspx" /></pre> | |
</P> | |
<P> | |
The same steps must then be repeated for the header, the first page | |
will then be complete. | |
</P> | |
<H2>Design and Layout</H2> | |
<P> | |
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). | |
</P> | |
<pre><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></pre> | |
<p><em>Listing: Menu styles</em></p> | |
<P> | |
The code example above shows the design of the header menu. This is | |
illustrated in the following image:</P> | |
<P class="valign-middle, align-center"> | |
<IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_m501ba3fc.png" alt="styled text boxes" ALIGN=BOTTOM BORDER=0><br><em>The styled header menu</em></P> | |
<P> | |
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. | |
</P> | |
<H2>The Finished Web Project</H2> | |
<P> | |
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. | |
</P> | |
<P class="valign-middle, align-center"> | |
<IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_m35b1b846.png" alt="Project structure in netbeans window" ALIGN=BOTTOM BORDER=0><br><em>Page structure of the finished example portal</em></P> | |
<P> | |
The application can be deployed on an application | |
server integrated into NetBeans, regardless of whether it is Apache | |
Tomcat or the GlassFish server. 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.</P> | |
<P> | |
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. | |
</P> | |
<p class="valign-middle, align-center"><a href="../../images_www/articles/netbiscuits/Netbiscuits_html_564d71b6.png"><IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_564d71b6.png" alt="web browser window" ALIGN=BOTTOM BORDER=0></a><br><em>BiscuitML in the browser (click to enlarge)</em></p> | |
<H2>Delivery Via a Netbiscuits Custom Application</H2> | |
<P> | |
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 | |
<A HREF="http://www.netbiscuits.com/">www.netbiscuits.com</A> | |
and navigate to <I>My Netbiscuits -> My | |
Applications</I>. 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". | |
</P> | |
<P class="valign-middle, align-center"> | |
<a href="../../images_www/articles/netbiscuits/Netbiscuits_html_1e99604e.png"><IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_1e99604e.png" alt="My Netbiscuits home page" ALIGN=BOTTOM BORDER=0></a><br><em>Creating a Netbiscuits custom application (Click to enlarge)</em></P> | |
<P> | |
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.</P> | |
<P> | |
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:</P> | |
<TABLE WIDTH=631 border=0 CELLPADDING=7 CELLSPACING=0 valgin="center" align="center"> | |
<TR VALIGN=TOP> | |
<TD WIDTH="32%"> | |
<P ALIGN=CENTER> | |
<IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_43020165.png" NAME="Grafik 20" ALIGN=BOTTOM BORDER=0></P> | |
<P ALIGN=CENTER>Version Apple iPhone</P> | |
</TD> | |
<TD WIDTH="32%"> | |
<P ALIGN=CENTER> | |
<IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_m3e0ab7d6.png" NAME="Grafik 19" ALIGN=BOTTOM BORDER=0></P> | |
<P ALIGN=CENTER>Version Nokia N70</P> | |
</TD> | |
<TD WIDTH="32%"> | |
<P ALIGN=CENTER> | |
<IMG SRC="../../images_www/articles/netbiscuits/Netbiscuits_html_mf6909df.png" NAME="Grafik 18" ALIGN=BOTTOM BORDER=0></P> | |
<P ALIGN=CENTER>Version Samsung D600</P> | |
</TD> | |
</TR> | |
</TABLE> | |
<H2>Conclusion</H2> | |
<P> | |
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.</P> | |
<P> | |
At <A HREF="http://www.netbiscuits.com/">www.netbiscuits.com</A> | |
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.</P> | |
<P> | |
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.</P> | |
<H2>Related Links</H2> | |
<OL> | |
<LI><P><A HREF="http://www.netbiscuits.com/freetrial">Netbiscuits 30 day trial access</A></P> | |
<LI><P><A HREF="http://www.netbiscuits.com/biscuitmlreference">Netbiscuits BiscuitML Reference</A></P> | |
<LI><P><A HREF="http://www.netbiscuits.com/downloads">Netbiscuits download area with additional code examples and tutorials</A></P> | |
</OL> | |
</BODY> | |
</HTML> |