Mobile Age - Component - List

A generic front-end component to display server data in a list format. The list could be an unordered (bulleted) html-list or when using the template mechanism the list can be displayed in any other list format, e.g. an ordered list, definition list or even as a data table. The template mechanism work together with front-end framewoks like bootstrap etc.

How to create a list

  1. Use HTML code to specify a container with a unique id
    <div id="unique_id"> ... some html used if JS doesn't work ... </div>
  2. Use a JavaScript array to initialize your list with the required options, e.g. the data server's url etc.
    <script> var options = { xhrMethod: "GET", xhrSource: 'https://mobileage.ftb-esv.de/frontend/php/data.list.php', xhrQuery: { city: "zaragoza", rows: "5" } }; <script>
  3. Create a new list object, where as first parameter is the selector specifing the html container. The second parameter is the array of the actually used options.
    <script> new MobileAge.Component.List("unique_id", options); <script>

Example 1: A simple list

This example is using server data just to print out a simple unordered list. The data is received from a server as a simple JSON-coded array.

Code

<div id="example_list_1"> ... unobtrusive code ... </div> <script> var options_1 = { xhrMethod: "GET", xhrSource: 'https://mobileage.ftb-esv.de/frontend/php/data.list.php', }; new MobileAge.Component.List("example_list_1", options_1); </script>

Result

... unobtrusive code ...

Example 2: A list using a template

This example is using more complex server data to print out a table of data. Some parameter data for the server requests are coded in a server query (xhrQuery). The path to the requested data in the returned object is set to "result" and the amount of data is limited to 5 items. The Component uses two templates, one for the whole list and one for the list items.

Code

<div id="example_list_2"> ... unobtrusive code ... </div> <script> var options_2 = { xhrMethod: "GET", xhrSource: 'https://mobileage.ftb-esv.de/frontend/php/data.restaurants.php', xhrQuery: { point: "676840.375,4613966.0", rows: "5" }, dataPath: "result", dataLimit: 5, templateListWrapper: "<table class='table table-hover'><thead>" + "<tr>" + "<th>Id</th>" + "<th>Logo</th>" + "<th>Name</th>" + "<th>Adress</th>" + "<th>Link</th>" + "</tr></thead>" + "<tbody><%%></tbody>" + "</table>", templateListItemWrapper: "<tr><%%></tr>", templateListItem: "<th><%id%></th>" + "<td><img src='<%logo%>' alt='Logo of <%title%>' style='max-width:100px;max-height:75px'/></td>" + "<td><%title%></td>" + "<td><%streetAddress%></td>" + "<td><a href='<%url%>'><img src='../assets/images/symbols/page.png' alt='Link to <%title%>' aria-hidden='true'></a></td>" }; new MobileAge.Component.List("example_list_2", options_2); </script>

Result

... unobtrusive code ...

Example 3: A complex list

This example is using server data to print out a colmplex list. The list items using data depending templates

Code

<div id="example_list_3"> ... unobtrusive code ... </div> <script> var options_3 = { bem: true, bemBlock: "teaserlist", bemElement: "", bemModifier: "restaurants", xhrMethod: "GET", xhrSource: 'https://mobileage.ftb-esv.de/frontend/php/data.restaurants.php', xhrQuery: { point: "676840.375,4613966.0", rows: "5" }, dataPath: "result", dataLimit: 5, onDataItem: function(item) { if (!item['comment']) item['comment'] = "There is no description available for this restaurant, sorry!" return }, onTemplateListItem: function(item) { if (item['image']) li = "<li><div class='clearfix'><h4><a href='<%url%>'><%title%></a> </h4><p><%streetAddress%></p><p><img src='<%image%>' alt='Picture of <%title%>' style='max-width:140px;max-height:80px'/> <%comment%></p></div><p class='more'> <a href='<%url%>'>more information</a></p></li>"; else li = "<li><h4><a href='<%url%>'><%title%></a></h4><p> <%streetAddress%></p><p><%comment%></p><p class='more'> <a href='<%url%>'>more information</a></p></li>" return li } }; new MobileAge.Component.List("example_list_3", options_3); </script>

Result

... unobtrusive code ...

Options

For a full list of available options, please refer to the Documentation for List

Specific components (non-generic)

If a data provider would like to offer code snippets next to the actual open data, he can derive his own specific javascript classes from the generic MobileAge classes. This javacript classes and the code snippet can be used by other website owners on their webpages.

Example

The provider of a restaurant database would like to offer a code snippet to print out a list of restaurants nearby. He derives the javascript class RestaurantsNearLocation from the MobileAge class MobileAge.Component.List and predefines the class' options.

(function() { var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, hasProp = {}.hasOwnProperty; MobileAge.Component.List.RestaurantsNearLocation = (function(superClass) { extend(RestaurantsNearLocation, superClass); function RestaurantsNearLocation(element, options) { var dataLimit, defaultOptions; limit = options && options.limit ? options.limit : 10; point = options && options.point ? options.point : "676840.375,4613966.0"; defaultOptions = { templateList: "<div><h4>Restaurants nearby:</h4><ul><%%></ul></div>", templateListItem: "<li><a href='<%url%>'><%title%></a></li>", autorequest: true, xhrMethod: "GET", xhrSource: "https://mobileage.ftb-esv.de/frontend/php/data.restaurants.php", xhrQuery: { point: point, rows: limit }, dataPath: "result", dataLimit: dataLimit, bem: true, bemBlock: "headerlist", bemElement: "", bemModifier: "restaurants" }; RestaurantsNearLocation.__super__.constructor.call( this, element, this._assignOptions(defaultOptions, options) ); } return RestaurantsNearLocation; })(MobileAge.Component.List); }).call(this);

Code

A wesite owner, e.g. a hotel, can use the following code to include the list of restaurants on a webpage

<div id="example_list_4"> ... </div> <script> new MobileAge.Component.List.RestaurantsNearLocation( "example_list_4", {"point":"676333.007,4610815.0"} ); </script>

Result

...

Options

For a full list of available options, please refer to the Documentation for RestaurantsNearLocation