src/content/kb/articles/netbiscuits.html - netbeans-website-cleanup - Git at Google

 <!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>
	<!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>