CHAPTER 7 - Extension Components (Linking Components)

We just looked at the basic Extension components; next, this chapter will introduce EZoApp Extension components that are used to create links to databases. These components are used mainly to help us read JSON files. In later chapters, we will use these components to explain the linking processes in detail.

Here are EZoApp's Extension Linking Components:

1. imggallery

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5735341625442304 )

This is a photo album component. If you provide an image list in JSON format, this component can help you to directly arrange and display these images in a photo album format. When we drag-and-drop this component onto the screen, we will discover that some code is also generated in the JS tab in the code-editing area. You can see that var img is just a series of JSON data. We will explain how to use this component to link to a photo album API later.

$(document).on("gkComponentsReady", function (w) {
  var $ele = $("#gk-106T9gC");  // automatically generated id
  if ($ele.length > 0) {
    var img = [{
      "data-src": "image url"
    }, {
      "data-src": "image url"
    }, {
      "data-src": "image url"
    }];
    $ele.gk("model", img);
    $ele.gk("onclick", function (e) {
      alert(e.target);
    });
  }
});

2. json-listview

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=6275221564686336 )

From its name, you can see that this is a component used to link JSON, and it displays the data in a listview format. When you drag-and-drop this component onto the screen, you can see there are a few "{{ }}" where certain values can be entered. This means if the JSON code contains these attributes, they will be created in them automatically. A later chapter is dedicated to explaining how to load JSON data. Once this component is added to the screen, a section of JS code will also be generated. It uses the getJSON method to read JSON files. (Note: reading JSON directly is not allowed by browsers, since it must go across domains! However, in apps, there will be no cross-domain issues.)

$(document).on("pageinit", "#home", function () {
  var $ele = $("#gk-108GZmp"),  // automatically generated id
    url = $ele.attr("service");
  if (url) {
    $.getJSON(url).complete(function (data) {
      $("#gk-108GZmp").gk("model", $.parseJSON(data.responseText));
    });
  }
});

3. page-listview

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=6244700990210048 )

page-listview and json-listview are quite alike. They both consume JSON data. However, the advantage of page-listview is that, when the amount of data is large, it will only display data that would fit on a page and show additional data when we scroll the page. Nevertheless, our own tests have shown that it does not take all JSON data; perhaps the data need to be in a particular format. If you are interested, you can try it out yourself. (Note: reading JSON directly is not allowed by browsers, since it must go across domains! However, in apps, there will be no cross-domain issues.)

4. rss-news

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5680037747490816 )

This is a component used specifically to show RSS. Unlike JSON, which must go across domains, RSS can be read directly and displayed on a webpage. You just need to enter the RSS address in the service field in the property panel.

5. simple-weather

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5667927550328832 )

This is a very interesting weather component. You can set the location, temperature unit, and update frequency from within the property panel. With this component, you can easily create a weather app.

6. google-sheets-listview

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5104977596907520 )

Before using this Google Sheets component, you need to do a few things first. You will only be able to use the Google Sheets component successfully when these things are done. First, we need to build the spreadsheet in Google Drive. Then, set the permission of this spreadsheet to "Everyone who has the link."

So, once the spreadsheet is created, you only need to remember this key and gid to use the Google Sheets component! (Since more detailed explanation will be available in a later chapter, we will only introduce four basic Google Sheets components here.)

Google spreadsheets having only two fields of title and content can be directly shown with the listview method using the title and corresponding contents. It supports Chinese field names. If your spreadsheet does not contain Location and Name, just change the values in "{{ }}". Note: "{{" and "}}" are needed.

7. google-sheets-chart-pie

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=6524766412341248 )

If your spreadsheet has only two fields (for example, name and score, candidate and support, etc.), you can easily create a pie chart using this Google Sheets pie chart component.

8. google-sheets-chart-bar

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=4810789785436160 )

This component can be used in the same way as the google-sheets-chart-pie. The only difference is that one creates a bar chart and the other creates a pie chart.

9. google-sheets-chart-bar

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5472262530531328 )

This is different from the components above in that you need to use a table component to manage multiple columns, since your spreadsheet contains more than just two fields. Nevertheless, you can easily display your spreadsheet with a table in exactly the same way as before. Its detailed modifications and display settings will be explained later.

Continue reading Chapter 8 - Extension Components (Chart Components)
Or Return to Table of Contents