How-To Tutorials - Cross-Platform Mobile Development

  Rhomobile Beginner's Guide Step-by-step instructions to build an enterprise mobile web application from scratch         Read more about this book       (For more resources on this topic, see here.) What is ORM? ORM connects business objects and database tables to create a domain model where logic and data are presented in one wrapping. In addition, the ORM classes wrap our database tables to provide a set of class-level methods that perform table-level operations. For example, we might need to find the Employee with a particular ID. This is implemented as a class method that returns the corresponding Employee object. In Ruby code, this will look like: employee= Employee.find(1) This code will return an employee object whose ID is 1.   Exploring Rhom Rhom is a mini Object Relational Mapper (ORM) for Rhodes. It is similar to another ORM, Active Record in Rails but with limited features. Interaction with the database is simplified, as we don't need to worry about which database is being used by the phone. iPhone uses SQLite and Blackberry uses HSQL and SQLite depending on the device. Now we will create a new model and see how Rhom interacts with the database.   Time for action – Creating a company model We will create a model company. In addition to a default attribute ID that is created by Rhodes, we will have one attribute name that will store the name of the company. Now, we will go to the application directory and run the following command: $ rhogen model company name which will generate the following: [ADDED] app/Company/index.erb[ADDED] app/Company/edit.erb[ADDED] app/Company/new.erb[ADDED] app/Company/show.erb[ADDED] app/Company/index.bb.erb[ADDED] app/Company/edit.bb.erb[ADDED] app/Company/new.bb.erb[ADDED] app/Company/show.bb.erb[ADDED] app/Company/company_controller.rb[ADDED] app/Company/company.rb[ADDED] app/test/company_spec.rb We can notice the number of files generated by the Rhogen command. Now, we will add a link on the index page so that we can browse it from our homepage. Add a link in the index.erb file for all the phones except Blackberry. If the target phone is a Blackberry, add this link to the index.bb.erb file inside the app folder. We will have different views for Blackberry. <li> <a href="<%= url_for :controller => :Company %>"><span class="title"> Company</span><span class="disclosure_indicator"/></a></li> We can see from the image that a Company link is created on the homepage of our application. Now, we can build our application to add some dummy data. You can see that we have added three companies Google, Apple, and Microsoft. What just happened? We just created a model company with an attribute name, made a link to access it from our homepage, and added some dummy data to it. We will add a few companies' names because it will help us in the next section. Association Associations are connections between two models, which make common operations simpler and easier for your code. So we will create an association between the Employee model and the Company model.   Time for action – Creating an association between employee and company The relationship between an employee and a company can be defined as "An employee can be in only one company but one company may have many employees". So now we will be adding an association between an employee and the company model. After we make entries for the company in the company model, we would be able to see the company select box populated in the employee form. The relationship between the two models is defined in the employee.rb file as: belongs_to :company_id, 'Company' Here, Company corresponds to the model name and company_id corresponds to the foreign key. Since at present we have the company field instead of company_id in the employee model, we will rename company to company_id. To retrieve all the companies, which are stored in the Company model, we need to add this line in the new action of the employee_controller: @companies = Company.find(:all) The find command is provided by Rhom, which is used to form a query and retrieve results from the database. Company.find(:all) will return all the values stored in the Company model in the form of an array of objects. Now, we will edit the new.erb and edit.erb files present inside the Employee folder. <h4 class="groupTitle">Company</h4><ul> <li> <select name="employee[company_id]"> <% @companies.each do |company|%> <option value="<%= company.object%>" <%= "selected" if company.object == @employee.company_id%> > <%=company.name %></option> <%end%> </select> </li></ul> If you observe in the code, we have created a select box for selecting a company. Here we have defined a variable @companies that is an array of objects. And in each object we have two fields named company name and its ID. We have created a loop and shown all the companies that are there in the @companies object. In the above image the companies are populated in the select box, which we added before and it is displayed in the employee form. What just happened? We just created an association between the employee and company model and used this association to populate the company select box present in the employee form. As of now, Rhom has fewer features then other ORMs like Active Record. As of now there is very little support for database associations.  

The Rhomobile family Rhomobile Inc. is a computer software company that provides leading products for building the new generation of mobile applications. It offers an open-source Ruby-based mobile development framework for business mobility solutions through its four major products Rhodes, RhoSync, Rhohub, and RhoGallery. Rhodes Rhodes is an open source framework by Rhomobile. It develops native applications for almost all smart phones. The applications built through Rhodes are pure native applications and use device capabilities such as GPS, PIM contacts and calendar, camera, native mapping, push, barcode, signature capture, and Bluetooth. Rhodes accelerates the development of mobile applications without compromising on its portability. This framework is similar to the popular Rails framework. It is based on Model view Controller and has inbuilt Object Relational Manager (ORM) called Rhom that is similar to active Record in Rails. Most user interface customization can be done in HTML templates (ERB, eruby files). A single set of source written with Rhodes can be compiled to run across all of the supported smart phones. This means that we will have the same code base for all your devices. RhoSync RhoSync is a standalone mobile sync server that keeps enterprise application data up to date and available on users' smart phones. Enterprise apps require local synchronized data to be used most of the time. The information is stored locally on a users' device and is available to them even in offline mode. It is very easy to write a source adapter as RhoSync generates most of the code while creating the source adapter. The source adapter can also be used to Create, Read, Update, and Delete (CRUD) operations on a model. Rhosync uses Redis, which is a NoSql Key Value store for data caching. This makes Rhosync more scalable. RhoSync performs its push-based sync using the native smartphone push SDKs. It uses new advanced BlackBerry Enterprise Server and iPhone 3.0 SDKs for Push. It uses BES Push and iPhone Push for synchronization, allowing real-time updates of backend application information. RhoHub RhoHub is a hosted development environment for Rhodes and Rhosync. The RhoSync application will be deployed on the famous Ruby cloud Heroku with the interface of RhoHub. RhoHub enables git-powered source control and collaboration with your team. It allows us to directly build an application for different smart phones without installing SDKs. It makes the process of the build very smooth since we don't have to install any development toolkits. It is only a one click process that automatically creates a build for most of the smart phones. Rhohub provides us with the following functionalities: Creating a build for a Rhodes application Deploying the Rhosync application to the cloud Providing version control with git Managing collaborators RhoGallery RhoGallery provides a hosted mobile app management solution. It allows administrators to manage the set of apps exposed to their users. It also makes it easy for them to get mobile apps onto their devices. It enables users to launch all of their important enterprise apps from a single place. RhoGallery consists of a management console for "app galleries" on RhoHub, as well as a RhoGallery App that users load onto their devices. Even for an individual developer with one or a few apps, RhoGallery makes it easy to expose those apps to their users. RhoGallery handles inviting the users and determining the appropriate downloads to provide to them. RhoGallery provides the following functionalities: Administrator management of exposed apps to end users Central user launching of exposed apps Automatic provisioning of appropriate apps for end users Why Rhomobile is cutting edge The following features give a cutting edge to Rhomobile in mobile application development: Model View Controller: Most of the other frameworks available in the market are based on HTML and JavaScript. However, as Rhodes is a Ruby-based framework and its structure is similar to the popular framework Rails, it also supports Model View Controller, so code written with Rhodes is more structured and easy to understand. Cross Platform Support for All Devices: Rhodes supports the following devices: Android, Windows Mobile, BlackBerry, and iphone. The best thing is you have a single code base from which you can build applications for different smart phones. It does not work in a traditional way in that we have to write separate code for different types of phones. Offline Capabilities using Rhosync: Rhomobile supports local synchronization of data. As we can synchronize the data using Rhosync it provides offline Capabilities. It can work even if you are offline. Object Relational Manager: Rhodes provides an inbuilt Object Relational Manager called Rhom. It is similar to Active Record in Rails but with basic functionality only. It helps us to write queries without thinking about which database is being used by phone. Rapid Development: One of the most interesting features of Rhodes is that it imposes some fairly serious constraints on how you structure the applications that help us for rapid development. Rhomobile products are properly structured and well organized, which enforce us to do rapid development. Rhodes is very comfortable, familiar, and massively productive. Scalable Sync Server: The Sync Server uses a NoSql Database which makes it scalable. Specifically, it is the only sync server that has a built-in "no SQL" Redis key value store, making it more scalable than other sync servers which offer internal relational database servers for caching. RhoSync also performs its push-based sync using the native smart phone push SDKs, which no other sync server does. Liberal use of code generation: Rhodes/RhoSync can write a lot of code for you. For example, when you need a class to represent a table in your database, you don't have to write most of the methods. Rhodes even offers an application generator that creates an initial app based on the structure of your models or business objects in your app. It's very similar to the scaffolding offered by most modern web frameworks with basic list/create/read/update/delete objects functionality. For each basic CRUD action, views in HTML are also offered. You'll find that you're writing only a fraction of code compared to other frameworks. Metadata: Every enterprise application that is used to run a company's core business has a different schema for its business objects. For example, every application has a varying and customized structure that changes with time. It is not possible to install the client application again and again for a small change. The Metadata framework provides a way to handle the view from the Rhosync server. It also provides validation and a custom template. Hosted Development and Build: Rhomobile also provides a hosted management and Build through Rhohub. We can deploy a Rhosync app and build our Rhodes code for different phones with it.

  Rhomobile Beginner's Guide Step-by-step instructions to build an enterprise mobile web application from scratch         Read more about this book       (For more resources on this topic, see here.) Q: Does Rhomobile create a pure Native Application? A: Yes. Rhomobile creates a pure Native Application. This Application is similar to an Application available in i-store. This application can use device capabilities such as GPS, PIM contacts and calendar, camera, native mapping, push, barcode, signature capture, and Bluetooth. These are much faster than Browser-based applications.   Q: I am new to Ruby should I use Rhomobile? A: Although you need to know Ruby to write Rhodes applications, we realize that many folks learn both Ruby and Rhomobile at the same time. As Rhomobile products require an elementary level of Ruby knowledge, this will not affect your learning curve. But I recommend that you go to any Ruby tutorial online.   Q: Is Rhomobile Free? A: Rhodes is free and open source under MIT Licence. To use RhoSync, you must purchase a commercial license when development commences or you must open source your app under the GPL license. The pricing and details can be found at www.rhomobile.com.   Q: Is support available for Rhomobile? A: Yes. However, you have to purchase a Rhodes Enterprise License and the Rhodes Commercial License to get commercial support. Apart from the Rhomobile support, there are various webinars and tutorials available on www.rhomobile.com. Another good support resource is the Rhomobile Google group, where Rhomobile experts are there to help you.   Q: What about Rhomobile security? A: Both Rhodes and RhoSync support use of https as a transport. In fact it is easier with Rhodes than with native code. You just list the https URL and Rhodes will connect to the backend appropriately. This is simple in contrast to underlying SDKs where significantly different code is written to connect to an https URL.   Q: Does Rhomobile support HTML5? A: Yes, Rhomobile supports HTML5 tags provided the device you are targeting also supports them.   Q: Can we write unit test case for the code? A: Yes, we can write unit test case in Rhodes.   Q: Can we use Ruby gems with Rhodes? A: Yes, we can use Ruby gems with Rhodes. We have to include them in the Rhodes configuration file.   Q: Do we need to have knowledge of different device databases? A: No, we don't need to have prior knowledge of those databases, Rhodes will take care of this. We write our query using Object-relational mapping (ORM) called Rhom and it is the work of ORM to shape the query.   Summary In this article we saw some of the most frequently asked questions on Rhomobile. Further resources on this subject: An Introduction to Rhomobile [Article] Getting Started with Internet Explorer Mobile [Article] jQuery Mobile: Organizing Information with List Views [Article] jQuery Mobile: Collapsible Blocks and Theming Content [Article] Fundamentals of XHTML MP in Mobile Web Development [Article]

  jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development Trying to communicate and provide information in an effective way can be a little trickier when we are targeting mobile devices; their screens are relatively small (ridiculously small if we think about our 24 inch iMac resting on our office desk), and we have already understood that we cannot display content in the way we used to, back in the days when desktop computers were the only way to access data on the Internet. With the advent of mobile browsing, new solutions had to be found. The jQuery Mobile framework provides a number of tools, widgets, and components which are extremely helpful in formatting our content and make it look elegant and put-together even on our beloved smaller-screen devices – well, especially for them! In fact, the difficulty in designing, formatting, and correctly showing a page on a mobile device is going to become a no-brainer using the set of elements jQuery Mobile provides in order to allow for an easy styling of our web application content. How content is displayed Yes, there is nothing wrong in just writing down what our website or web application is about in the HTML file. It's always worked and always will. The actual point here is taking advantage of the tools jQuery Mobile offers us to format our information, specifically for mobile devices. For example, there are occasions in which the need for multiple columns may arise: we can use a layout grid, which is nothing more than some CSS-based columns. Or, on a completely different note, we might just need to hide/show a block of content: collapsible blocks have been designed for this, and can be easily implemented in our site layout. But before we begin analyzing any of the methods in which we are able to format our content according to our liking, we should take a look at how content is displayed in its basic HTML formatting. Based upon the "light hand approach" (as they call it), jQuery Mobile lets the browser rendering take precedence over any other third-party styling, with exceptions made for the following little tweaks the framework applies to any page by default: Adding a bit of padding for a better readability Using the theming system to apply fonts and colors This particular approach to styling by default should make the designers really happy, as they often find themselves fighting with preset colors schemes, default fonts, weird margin, and padding values and usually end up resetting everything and starting again from scratch. Thankfully, the default padding value looks quite right and, as far as theming goes, we are able to easily customize (and create new) themes through CSS files and a theming framework which is extremely versatile and flexible. Default HTML markup styling So, what happens if we just write some HTML markup and want some text to be bold, emphasized, or hyper-linked? jQuery Mobile applies some basic styling to the elements and makes their look consistent with the simple and clean layout we have already seen in action. The following screenshot represents how headings and standard paragraphs are displayed and generated by the following code: <!DOCTYPE html> <html> <head> <title>Default HTML markup styling</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/ jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile- 1.0a2.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="content"> <h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6> <p>This is a paragraph. <strong>Lorem (bold)</strong> <em>ipsum (emphasized)</em> <a href="#">dolor (link)</a> sit amet, consectetur adipiscing elit.</p> <blockquote>Blockquote containing a <cite>cite</cite></ blockquote> <p>This is a paragraph. <strong>Lorem (bold)</strong> <em>ipsum (emphasized)</em> <a href="#">dolor (link)</a> sit amet, consectetur adipiscing elit.</p> </div> </div> </body> </html> The result is shown in the following screenshot: Similarly, the following code produces a preview of what lists and tables look like: <!DOCTYPE html> <html> <head> <title>Default HTML markup styling</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/ jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile- 1.0a2.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="content"> <ul> <li>Unordered list item 1</li> <li>Unordered list item 2</li> <li>Unordered list item 3</li> </ul> <ol> <li>Ordered list item 1</li> <li>Ordered list item 2</li> <li>Ordered list item 3</li> </ol> <table> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">City</th> <th scope="col">Phone</th> </tr> </thead> <tfoot> <tr> <td colspan="5">Table foot</td> </tr> </tfoot> <tbody> <tr> <th scope="row">David Green</th> <td>New York City, NY</td> <td>555-0123</td> </tr> <tr> <th scope="row">Martha White</th> <td>Los Angels, CA</td> <td>555-0188</td> </tr> <tr> <th scope="row">Bobby Brown</th> <td>Washington, D.C.</td> <td>555-0110</td> </tr> </tbody> </table> </div> </div> </body> </html>

jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development          The reader would benefit by referring the previous article on How to Use jQuery Mobile Grid and Columns Layout. A note on collapsible blocks On a completely different note, jQuery Mobile provides an easy-to-use and visually-appealing solution to hide and show content, namely, the so-called collapsible blocks. Collapsible blocks should be already well-known to the web designers out there, and they have gained in popularity especially after the advent of JavaScript libraries and frameworks like jQuery, which have made writing the necessary code a matter of minutes to obtain a pane which shows its content once a button (or any kind of element, actually) is clicked. The following screenshot shows how jQuery Mobile renders, by default, any collapsible block we include into our web page: So, how do we create a (set of) collapsible block(s)? Collapsible blocks are obtained by assigning a container the data-role="collapsible" attribute. As easy as that. <div data-role="collapsible"> <!-- this is a collapsible block --> </div> The jQuery Mobile framework needs a heading element to be present inside the container. The heading (which can be from h1 through h6) will be styled like a clickable button, and a plus (+) symbol will be added to its left to indicate it's expandable. Once we click the header/button and the content shows, a minus (-) symbol will replace the plus to indicate it's collapsible. Where do I put the heading? The heading can be placed anywhere inside the container. Remember that jQuery Mobile will use as a header the very first h-element it finds inside the container, and remove it from its original position. Once the required header is provided, you can add any other h-element to the container and it will not be processed (that is, it will behave like a normal heading would). <div data-role="collapsible"> <h3>Collapsible block header</h3> <p>Lorem ipsum dolor sit amet etc....</p> </div> We used an h3 heading in this example, but any other heading would have looked just the same: jQuery Mobile changes completely the style of the heading to match a button's style. We can specify whether we want a collapsible block to be expanded on page load or not by adding the data-collapsed="true" attribute to the container: <div data-role="collapsible" data-collapsed="true"> <h3>This block will be collapsed (does not show content)</h3> <p>Lorem ipsum dolor sit amet etc....</p> </div> <div data-role="collapsible"> <h3>This block will expand on page load</h3> <p>This text is visible right away!</p> </div> Nested collapsible blocks Collapsible blocks can also be nested, resulting in a series of blocks which control various paragraphs and content: To create a set of nested collapsible blocks, we only need to insert a block into another block, which will be its container: <!-- Top level collapsible block --> <div data-role="collapsible"> <h3>Collapsible block header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <!-- nested collapsible block --> <div data-role="collapsible"> <h3>Nested collapsible block</h3> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div> </div> We may have any number of collapsible blocks nested; for example, here is another one: <!-- Top level collapsible block --> <div data-role="collapsible"> <h3>Collapsible block header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <!-- nested collapsible block --> <div data-role="collapsible"> <h3>Nested collapsible block</h3> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <!-- nested into a nested block --> <div data-role="collapsible"> <h3>Nested into a nested collapsible block</h3> <p>Integer lectus eros, accumsan eget ultrices vel, sagittis volutpat odio.</p> </div> </div> </div>  

jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development You might have noticed that the vast majority of websites built using jQuery Mobile have their content laid out in very similar ways; sure, they differ in the design, colors, and overall feel, but they all have a list-based layout. There is a way in which we can organize our information and take advantage of each and every space in the browser: information is displayed vertically, one piece under another. There are no sidebars of any kind and links are organized in lists – for a cleaner and tidy look. But list views are also used to actually be a list of information. Some examples may be lists of albums, names, tasks, and so on: after all, our purpose is to build a mobile web application and the majority of services and pages can be organized in a way which closely resembles a list. Basics and conventions for list views Due to the particular nature of lists, list views are coded exactly the same way a standard HTML unordered list would. After all, the purpose of list views is to organize our information in a tidy way, presenting a series of links which are placed one under another; the easiest way to grasp their usefulness is, in my opinion, imagining a music player application. A music player would need a clean enough interface, listing the artists, albums, and songs by name. In order to play a song, the user would need to select an artist, and then choose the album in which the song he wishes to play has been released. To create our first view (artists), we would use the following code. Make sure you add the data-role="listview" attribute to the unordered list tag: <ul data-role="listview"> <li><a href="astra.html">Astra</a></li> <li><a href="zappa.html">Frank Zappa</a></li> <li><a href="tull.html">Jethro Tull</a></li> <li><a href="radiohead.html">Radiohead</a></li> <li><a href="who.html">The Who</a></li> </ul> The jQuery Mobile framework automatically styles the list elements accordingly, and adds a right arrow icon. List elements fill the full width of the browser window: Whenever an item is selected (click/tap event), jQuery Mobile will parse the code inside the list element and issue an AJAX request for the first URL found. The page (obtained via AJAX) is then inserted into the existing DOM and a page transition event is triggered. The default page transition is a slide-left animation; clicking the back button on the newly displayed page will result in a slide-right animation. Choosing the list type as per your requirements A somewhat large variety of lists are available for us to choose from in order to make use of the type of list view that is best suited to our needs. Below are listed (sorry, no pun intended!) the different types of list views along with a brief description of how to use them and what part of code we need to change in order to obtain a certain list view. Nested lists Bearing in mind that list views elements are based on the standard HTML unordered list element, we might be wondering what would happen if we try and create a second list inside a list view. By nesting a ul element inside list items, jQuery Mobile will adopt a different kind of behavior to our list items. Our first step toward the creation of a nested list is removing any link present in the list item, as a click event will show the nested list instead of redirecting to another page. The child list will be put into a new "page" with the title of the parent in the header. We're now implementing nested list elements into our sample music player interface by changing our markup to the following. This way, we are able to browse artists and albums. Please note that we have removed any links to external pages: <ul data-role="listview"> <li>Astra <ul> <li><a href="astra_weirding.html">The Weirding</a></li> </ul> </li> <li>Frank Zappa <ul> <li><a href="zappa_hotrats.html">Hot Rats</a></li> <li><a href="zappa_yellowshark.html">Yellow Shark</a></li> </ul> </li> <li>Jethro Tull <ul> <li><a href="tull_aqualung.html">Aqualung</a></li> <li><a href="tull_thick.html">Thick as a Brick</a></li> </ul> </li> <li>Radiohead <ul> <li><a href="radiohead_ok.html">OK Computer</a></li> <li><a href="radiohead_rainbows.html">In Rainbows</a></li> <li><a href="radiohead_kol.html">The King of Limbs</a></li> </ul> </li> <li>The Who <ul> <li><a href="who_next.html">Who's Next</a></li> <li><a href="who_q.html">Quadrophenia</a></li> <li><a href="who_tommy.html">Tommy</a></li> </ul> </li> </ul> If we clicked on the Radiohead element, we would then be able to see the following page: By default, child list will be given a Swatch B theme to indicate they are at a secondary level of navigation; we can select a different color swatch by specifying a data-theme attribute on the child list element. We can see the header turned blue, and the artist name is used as the header. We have a choice to go back to the previous page (artists) or click again onto a list item (album) to view more. Numbered lists Our music player interface has reached the point in which we need to list the tracks contained in an album. Of course, tracks have a sequence, and we want to give the user the possibility to see what track number is without having to count them all – and without writing numbers manually, that would be terrible! In a very similar fashion, we can use ordered list elements (ol) to obtain numbering: jQuery Mobile will try to use CSS to display numbers or, if not supported, JavaScript. The following code lists all of the tracks for an album: Note there is no limit to the number of lists you can nest. <ul> <!-- ... --> <li>Radiohead <ul> <li><a href="radiohead_ok.html">OK Computer</a></li> <li><a href="radiohead_rainbows.html">In Rainbows</a></li> <li>The King of Limbs <ol> <li><a href="play.html">Bloom</a></li> <li><a href="play.html">Morning Mr. Magpie</a></li> <li><a href="play.html">Little by Little</a></li> <li><a href="play.html">Feral</a></li> <li><a href="play.html">Lotus Flower</a></li> <li><a href="play.html">Codex</a></li> <li><a href="play.html">Give Up the Ghost</a></li> <li><a href="play.html">Separator</a></li> </ol> </li> </ul> </li> <!-- ... --> </ul>