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
- Use HTML code to specify a container with a unique id
<div id="unique_id"> ... some html used if JS doesn't work ... </div>
- 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>
- 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
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
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
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