<!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 &quot;PC Web&quot;, 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>&lt;welcome-file-list&gt; 
    &lt;welcome-file&gt;category_1.jspx&lt;/welcome-file&gt;
&lt;/welcome-file-list&gt;</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>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;

&lt;jsp:root xmlns:jsp=&quot;http://java.sun.com/JSP/Page&quot; version=&quot;2.0&quot;&gt;

&lt;jsp:directive.page contentType=&quot;text/xml&quot; pageEncoding=&quot;UTF-8&quot;/&gt;

&lt;page title=&quot;My Mobile Portal&quot; paging=&quot;true&quot;&gt;

    &lt;container&gt;

        &lt;column&gt;

            &lt;!-- content biscuits --&gt;

        &lt;/column&gt;

    &lt;/container&gt;

&lt;/page&gt;

&lt;/jsp:root&gt;</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 &quot;biscuits&quot; 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
-&gt; Options -&gt; 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 &quot;nb&quot;,
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 &quot;expanded text&quot;.
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 &gt; Editor &gt; 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>
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;jsp:root xmlns:jsp=&quot;http://java.sun.com/JSP/Page&quot; version=&quot;2.0&quot;&gt;

    &lt;!-- Use items below as footer on all pages --&gt;

    &lt;PAGEBEGINFOOTER /&gt;

    &lt;!-- Footer menu --&gt;
    &lt;PIPEDMENU&gt;
        &lt;items&gt;

            &lt;item&gt;
                &lt;link href=&quot;category_1.jspx&quot;&gt;Home&lt;/link&gt;
            &lt;/item&gt;

            &lt;item&gt;
                &lt;link href=&quot;imprint.jspx&quot;&gt;Imprint&lt;/link&gt;
            &lt;/item&gt;
            &lt;item&gt;
                &lt;link href=&quot;contact.jspx&quot;&gt;Contact&lt;/link&gt;
            &lt;/item&gt;

        &lt;/items&gt;
    &lt;/PIPEDMENU&gt;

    &lt;!-- Copyright part --&gt;
    &lt;PAGEFOOTER&gt;
        &lt;item position=&quot;3&quot;&gt;
            &lt;text&gt;&amp;#169;Netbiscuits, 2009.&lt;/text&gt;
        &lt;/item&gt;
    &lt;/PAGEFOOTER&gt;
&lt;/jsp:root&gt;</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>&lt;PAGEBEGINFOOTER&gt;</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>&lt;jsp:include page=&quot;includes/footer.jspx&quot; /&gt;</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>&lt;styles&gt;
    &lt;style name=&quot;padding-top&quot;      value=&quot;10px&quot; /&gt;
    &lt;style name=&quot;padding-bottom&quot;   value=&quot;10px&quot; /&gt;
    &lt;style name=&quot;margin-bottom&quot;    value=&quot;10px&quot; /&gt;
    &lt;style name=&quot;color&quot;            value=&quot;#0000FF&quot; /&gt;
    &lt;style name=&quot;link-color&quot;       value=&quot;#0000FF&quot; /&gt;
    &lt;style name=&quot;text-align&quot;       value=&quot;center&quot; /&gt;
    &lt;style name=&quot;active-color&quot;     value=&quot;#FFFFFF&quot; /&gt;
    &lt;style name=&quot;active-bgcolor&quot;   value=&quot;#C71722&quot; /&gt;
    &lt;style name=&quot;active-border&quot;    value=&quot;#C71722&quot; /&gt;
    &lt;style name=&quot;inactive-color&quot;   value=&quot;#FFFFFF&quot; /&gt;
    &lt;style name=&quot;inactive-bgcolor&quot; value=&quot;#CCCCCC&quot; /&gt;
    &lt;style name=&quot;inactive-border&quot;  value=&quot;#C71722&quot; /&gt;
&lt;/styles&gt;</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 &mdash; as with some code
parties as well &mdash; 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 -&gt; My
Applications</I>. A new custom application
can now be created via the &quot;Create&quot; 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 &quot;Extended Backend Parameters&quot;. 
</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 &quot;developer account&quot;,
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>