What is Netbiscuits?
Netbiscuits is a platform for the development and delivery of next generation web apps across all mobile and connected devices.
In other words, It is a platform that helps you in developing and delivering mobile device specific websites or webapps. In order to develop webapps using netbiscuits platform, you will have to develop your pages in a specific format of XML suggested by Netbiscuits, which they call as BML or Biscuit Markup Language or BiscuitML.
How does Netbiscuits work?
When a mobile device requests a URL of a Custom Application (mobile portal) this HTTP request will be routed to and processed by the NetBiscuits platform. In the first step, NetBiscuits will forward the HTTP request to your Web-Application Server (e.g. Apache, Tomcat, IIS, etc.) which hosts the BiscuitML Application. As in a normal web application, you will process the request and retrieve content from a Content Management System or database for example. Instead of creating HTML output, your application has to send a HTTP response back containing a valid BiscuitML document. The BiscuitML markup will then be processed by the NetBiscuits platform and be transcoded into the right markup (XHTML MP, WML etc.), specifically optimized for the mobile device that sent the initial request.
The following diagram shows the system architecture of Netbiscuits.
Setting up an application on Netbiscuits
Setting up an application is quite easy task.
- Login to netbiscuits.com using your credentials.
- Create a New Custom Application.
- Configure your custom application and Provide application name, programming language used, backend-url etc.
Pl note that your backend-url should point to a default document like index.aspx etc which contains BML data.
Eg: http://demospace.com/yourapp/index.aspx
You can access your page using the application url that Netbiscuits provide after you create the custom application.
What is BML, Biscuit Markup Language or BiscuitML ?
BML or Biscuit Markup Language is an XML based markup language used to build mobile web pages with the Netbiscuits Platform.
It is as easy as writing an XML file but the only thing to keep in mind is that you need to follow the BiscuitML rules. We’ll talk more about the rules etc in a while.
Following is an example of a section of BiscuitML code
<container>
<column>
<TEXT>
<headline>Welcome!</headline>
<richtext>
This is a simple website written in
[i]BiscuitML[/i]![br][br]
</richtext>
</TEXT>
</column>
</container>
How to create BiscuitML pages ?
BiscuitML pages have a structure of their own but since it basically is XML, it becomes very easy to understand them.
Structure of a BiscuitML page
As BiscuitML is an XML markup, we start it off with an XML header:
<?xml version="1.0" encoding="ISO-8859-1"?>
Unlike HTML, there is no <body> tag for a BiuscuitML page. Instead, the root node of the XML is the “<page>” tag. It defines the start and the end of a BiscuitML page. All other tags would be wrapped inside opening and closing <page> tag like the following :
<page> ... </page>
Once the opening and closing <page> tag is written, all the further tags and Biscuits(widgets given by Netbiscuits) would be wrapped inside the <container> and <column> tags. For eg :
<?xml version="1.0" encoding="ISO-8859-1"?>
<page xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:noNamespaceSchemaLocation='http://www.netbiscuits.com/schema/netbiscuits-1.13.xsd' title="Home">
<container>
<column>
<SOMEBISCUIT/>
<SOMEBISCUIT/>
</column>
</container>
</page>
The <container> and <column> tags are very important in BiscuitML as every other tag would be wrapped under these.
Rules for Nesting the Container and Column
The <container> tag is always the parent tag. And the <column> tag must come as a child of the <container> tag. A <column> can contain multiple containers under it. But a <container> can contain only 2 <column> under it. For e.g. :
<!-- Multiple containers under Column -->
<container>
<column>
<container>….</container>
<container>….</container>
<container>….</container>
</column>
</container>
<!-- Two Columns under single container -->
<container>
<column>...</column>
<column>...</column>
</container>
Mixing elements under <container>
You cannot mix containers, columns and Biscuits; a column or container may only directly contain one type of element, for example:
<!-- Valid code -->
<container>
<container id="c1"> ...</container>
<container id="c2"> ...</container>
<container id="c3"> ...</container>
</container>
<!-- Valid code -->
<container>
<column id="c1">
<SOMEBISCUIT/>
<SOMEBISCUIT/>
</column>
<column id="c2">
<container id="c3"> ...</container>
</column>
</container>
<!-- Invalid code -->
<container>
<column id="col1">
<SOMEBISCUIT/>
<SOMEBISCUIT/>
</column>
<container id="c1"> ...</container>
<container id="c2"> ...</container>
</container>
What are Biscuits?
Well in the context of Netbiscuits, “Biscuits” do not refer to an edible cookie instead it refers to a widget or a pre-defined tag which generates a specific type of layout. They are always written in capital case. Biscuits are not allowed directly inside a <container>, they must be wrapped inside a <column>.
Rules of Nesting Biscuits
Please note that Nesting of Biscuits are not possible and they should be used individually.
A Biscuit can not be nested inside other Biscuit. Which means we can not have a Biscuit as a child node of other Biscuit.
Netbiscuits provides us with a collection of different Biscuits that can help you during development.
Lets take a look at few Biscuits.
<TEXT> Biscuit
The simplest way to put text into your page is through use of the Text Biscuit. It accepts a number of different node types. For example, you can add a headline and some short text with a little formatting:
<?xml version="1.0" encoding="ISO-8859-1"?>
<page title="Home">
<container>
<column minwidthpx="50">
<TEXT>
<headline>Welcome!</headline>
<richtext>
This is a simple website written in
[i]BiscuitML[/i]![br][br]
</richtext>
</TEXT>
</column>
</container>
</page>
The <richtext> tag also supports BBCode (Bulletin Board Code). Some of the BBCode that BiscuitML supports are :
[b]Bold text[/b] -> Bold text [i]Italic text[/i] -> Italic text [u]Underlined text[/u] -> Underlined text [br] - a line break [hr] - a horizontal ruler (<hr/>; where supported) [color="colorvalue"]colored text[/color] [url="someurl"]inline link[/url] -> inline link [icon="someicon.jpg"]alt text[/icon] -> - a non-scaled image
<IMAGE> Biscuit
You can add images using the <IMAGE> Biscuit. For e.g:
<IMAGE> <img src="/images/Banner.png" format="PNG" alt="Banner" class="myAd" href="ads.aspx"/> </IMAGE>
Linking an Image in BiscuitML
The image tag in BML also supports href and it also requires the image format to be mentioned. Like in HTML it also supports class attribute.
How to use CSS on a BiscuitML page ?
NetBiscuits supports CSS and it can be included in two ways.
- Through an external css file using the <external> tag : For e.g
<external type="css" file="css/main.css" />
- By defining the CSS within the page using the <styles> tag: For e.g
<!-- Defining style for the entire page --> <styles> <style name="link-color" value="#CC5500"/> <style name="color" value="#414141"/> <style name="bgcolor" value="#FFFFDD"/> <style name="border-color" value="#996633"/> </styles> <!-- Defining a Class and its properties --> <class name="myClass1"> <style name="color" value="#000000"/> <style name="bgcolor" value="#DDDDDD"/> </class>
Containers, columns and Biscuits can be given classes and ID.
E.g.
<container class="myClass1" id="myId1">
<column id="myId2">
<TEXT>
<richtext class="redText">Hello !</richtext>
</TEXT>
</column>
</container>
How to use Javascript on a BiscuitML page ?
Like CSS, Netbiscuits also supports Javascript and can be included in the following two ways:
- Through an external javascript file using the <external>tag :
<external type="script" file="js/script.js" />
- By defining the Script within the page using the <event>tag:
<!-- The following code will attach 'onclick' event to an element with id "myId1" and call the "setClass" Netbiscuits action. --> <event type="onclick" id="myId1"> <action name="setClass"> <param name="id" value="myArticle" /> <param name="class" value="active" /> </action> </event>
Defining javascript functions in BiscuitML
Netbiscuits’ scripting engine allows you to define functions within a script block. These functions can be called again and again without writing the whole function code again. E.g
<script>
<function name="myFunction">
<action name="hide">
<param name="id" value="teaserOne" />
</action>
<action name="hide">
<param name="id" value="teaserTwo" />
</action>
</function>
</script>
Calling a function declared using the call element
The call element allows calling a defined function by its name. E.g :
<event type="onclick">
<call function="myFunction" />
</event>
You can also write Custom Scripts to use your own JavaScript Code, which you define in an external file using the eval action. E.g :
<!-- This is how you call a custom user defined function from an external javascript file. -->
<action eval="myOwnFunction('parameter');" />
BiscuitML Resources on the Net
Netbiscuits has apparently stopped the BiscuitML services and hence there are no more resources that are available. I’ve leaving this article here for a reference though.
The core technology for managing the long tail of devices is very strong, as long as you stay within the BML rules. If you want to do something slightly different than you’re into a lot of customization and then Netbiscuits can’t guarantee it across all devices.
Also be aware at the systems level that response times will become significant, especially for enterprise applications where multiple round trips to build a page are necessary. Netbiscuits has already had problems with this in Asia, as their SaaS platforms are located in USA/UK. They might say this isn’t an issue, but you need to do some testing to make sure.
I have also heard rumours that there is a ‘security flaw’ in the customer access/admin portal. Be aware and ask questions of the technical team!