dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #34374
[Branch ~dhis2-documenters/dhis2/dhis2-docbook-docs] Rev 1182: Plugin docs updated.
------------------------------------------------------------
revno: 1182
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2-docbook-docs
timestamp: Wed 2014-12-03 15:47:32 +0100
message:
Plugin docs updated.
modified:
src/docbkx/en/dhis2_user_man_web_api.xml
--
lp:~dhis2-documenters/dhis2/dhis2-docbook-docs
https://code.launchpad.net/~dhis2-documenters/dhis2/dhis2-docbook-docs
Your team DHIS 2 developers is subscribed to branch lp:~dhis2-documenters/dhis2/dhis2-docbook-docs.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-documenters/dhis2/dhis2-docbook-docs/+edit-subscription
=== modified file 'src/docbkx/en/dhis2_user_man_web_api.xml'
--- src/docbkx/en/dhis2_user_man_web_api.xml 2014-08-29 07:48:12 +0000
+++ src/docbkx/en/dhis2_user_man_web_api.xml 2014-12-03 14:47:32 +0000
@@ -2141,9 +2141,9 @@
<screen><!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v215/ext/resources/css/ext-plugin-gray.css" />
- <script src="https://dhis2-cdn.org/v215/ext/ext-all.js"></script>
- <script src="https://dhis2-cdn.org/v215/plugin/table.js"></script>
+ <link rel="stylesheet" type="text/css" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
+ <script src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
+ <script src="//dhis2-cdn.org/v217/plugin/table.js"></script>
<script>
var base = "https://apps.dhis2.org/demo";
@@ -2163,7 +2163,11 @@
// Referring to an existing table through the id parameter, render to "table1" div
- DHIS.getTable({ url: base, el: "table1", id: "R0DVGvXDUNP" });
+ DHIS.getTable({
+ url: base,
+ el: "table1",
+ id: "R0DVGvXDUNP"
+ });
// Full table configuration, render to "table2" div
@@ -2204,9 +2208,9 @@
two files are the Ext JS javascript library (we use the DHIS 2 content delivery network in
this case) and its css stylesheet. The third file is the Pivot table plug-in. Make sure the
path is pointing to your DHIS server installation.</para>
- <screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v215/ext/resources/css/ext-plugin-gray.css" />
-<script src="http://dhis2-cdn.org/v215/ext/ext-all.js"></script>
-<script src="http://dhis2-cdn.org/v215/plugin/table.js"></script></screen>
+ <screen><link rel="stylesheet" type="text/css" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
+<script src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
+<script src="//dhis2-cdn.org/v217/plugin/table.js"></script></screen>
<para>To authenticate with the DHIS server we use the same approach as in the previous section. In the header of the HTML document we include the following Javascript inside a script element. The <emphasis role="italic">setLinks</emphasis> method will be implemented later. Make sure the <emphasis role="italic">base</emphasis> variable is pointing to your DHIS installation.</para>
<screen>var base = "https://apps.dhis2.org/demo/";
@@ -2349,7 +2353,11 @@
</table>
<para>We continue by adding one pre-defined and one dynamic pivot table to our HTML document. You can browse the list of available pivot tables using the Web API here: <ulink url="http://apps.dhis2.org/demo/api/reportTables"/>.</para>
<screen>function setLinks() {
- DHIS.getTable({ url: base, el: "table1", id: "R0DVGvXDUNP" });
+ DHIS.getTable({
+ url: base,
+ el: "table1",
+ id: "R0DVGvXDUNP"
+ });
DHIS.getTable({
url: base,
@@ -2389,9 +2397,9 @@
<screen><!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v215/ext/resources/css/ext-plugin-gray.css" />
- <script src="http://dhis2-cdn.org/v215/ext/ext-all.js"></script>
- <script src="http://dhis2-cdn.org/v215/plugin/chart.js"></script>
+ <link rel="stylesheet" type="text/css" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
+ <script src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
+ <script src="//dhis2-cdn.org/v217/plugin/chart.js"></script>
<script>
var base = "https://apps.dhis2.org/demo";
@@ -2411,7 +2419,11 @@
// Referring to an existing chart through the id parameter, render to "chart1" div
- DHIS.getChart({ url: base, el: "chart1", id: "R0DVGvXDUNP" });
+ DHIS.getChart({
+ url: base,
+ el: "chart1",
+ id: "R0DVGvXDUNP"
+ });
// Full chart configuration, render to "chart2" div
@@ -2453,9 +2465,9 @@
two files are the Ext JS javascript library (we use the DHIS 2 content delivery network in
this case) and its stylesheet. The third file is the Visualizer plug-in. Make sure the path
is pointing to your DHIS server installation.</para>
- <screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v215/ext/resources/css/ext-plugin-gray.css" />
-<script src="http://dhis2-cdn.org/v215/ext/ext-all.js"></script>
-<script src="http://dhis2-cdn.org/v215/plugin/chart.js"></script></screen>
+ <screen><link rel="stylesheet" type="text/css" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
+<script src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
+<script src="//dhis2-cdn.org/v217/plugin/chart.js"></script></screen>
<para>To authenticate with the DHIS server we use the same approach as in the previous section. In the header of the HTML document we include the following Javascript inside a script element. The <emphasis role="italic">setLinks</emphasis> method will be implemented later. Make sure the <emphasis role="italic">base</emphasis> variable is pointing to your DHIS installation.</para>
<screen>var base = "https://apps.dhis2.org/demo/";
@@ -2633,7 +2645,11 @@
</table>
<para>We continue by including two pre-defined charts and to dynamic charts to our HTML document. You can browse the list of available charts using the Web API here: <ulink url="http://apps.dhis2.org/demo/api/charts"/>.</para>
<screen>function setLinks() {
- DHIS.getChart({ url: base, el: "chart1", id: "R0DVGvXDUNP" });
+ DHIS.getChart({
+ url: base,
+ el: "chart1",
+ id: "R0DVGvXDUNP"
+ });
DHIS.getChart({
url: base,
@@ -2674,11 +2690,11 @@
<screen><!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v215/ext/resources/css/ext-plugin-gray.css" />
- <script src="http://dhis2-cdn.org/v215/ext/ext-all.js"></script>
- <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
- <script src="http://dhis2-cdn.org/v215/openlayers/OpenLayers.js"></script>
- <script src="http://dhis2-cdn.org/v215/plugin/map.js"></script>
+ <link rel="stylesheet" type="text/css" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
+ <script src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
+ <script src="//maps.google.com/maps/api/js?sensor=false"></script>
+ <script src="//dhis2-cdn.org/v217/openlayers/OpenLayers.js"></script>
+ <script src="//dhis2-cdn.org/v217/plugin/map.js"></script>
<script>
var base = "https://apps.dhis2.org/demo";
@@ -2695,7 +2711,11 @@
});
function setLinks() {
- DHIS.getMap({ url: base, el: "map1", id: "ytkZY3ChM6J" });
+ DHIS.getMap({
+ url: base,
+ el: "map1",
+ id: "ytkZY3ChM6J"
+ });
DHIS.getMap({
url: base,
@@ -2726,11 +2746,11 @@
delivery network in this case) and its stylesheet. The third file is the OpenLayers
javascript mapping framework (<ulink url="http://openlayers.org"/>) and finally we include
the GIS map plug-in. Make sure the path is pointing to your DHIS server installation.</para>
- <screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v215/ext/resources/css/ext-plugin-gray.css" />
-<script src="http://dhis2-cdn.org/v215/ext/ext-all.js"></script>
-<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
-<script src="http://dhis2-cdn.org/v215/openlayers/OpenLayers.js"></script>
-<script src="http://dhis2-cdn.org/v215/plugin/map.js"></script></screen>
+ <screen><link rel="stylesheet" type="text/css" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
+<script src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
+<script src="//maps.google.com/maps/api/js?sensor=false"></script>
+<script src="//dhis2-cdn.org/v217/openlayers/OpenLayers.js"></script>
+<script src="//dhis2-cdn.org/v217/plugin/map.js"></script></screen>
<para>To authenticate with the DHIS server we use the same approach as in the previous section. In the header of the HTML document we include the following Javascript inside a script element. The <emphasis role="italic">setLinks</emphasis> method will be implemented later. Make sure the <emphasis role="italic">base</emphasis> variable is pointing to your DHIS installation.</para>
<screen>Ext.onReady( function() {
@@ -2927,7 +2947,11 @@
</table>
<para>We continue by adding one pre-defined and one dynamically configured map to our HTML document. You can browse the list of available maps using the Web API here: <ulink url="http://apps.dhis2.org/demo/api/maps"/>.</para>
<screen>function setLinks() {
- DHIS.getMap({ url: base, el: "map1", id: "ytkZY3ChM6J" });
+ DHIS.getMap({
+ url: base,
+ el: "map1",
+ id: "ytkZY3ChM6J"
+ });
DHIS.getMap({
url: base,
@@ -2961,11 +2985,11 @@
<title>Creating a chart carousel with the carousel plug-in</title>
<para>The chart plug-in also makes it possible to create a chart carousel which for instance can be used to create an attractive front page on a Web portal. To use the carousel we need to import a few files in the head section of our HTML page:</para>
<screen>
-<link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v213/ext/resources/css/ext-plugin-gray.css" />
-<link rel="stylesheet" type="text/css" href="https://apps.dhis2.org/demo/dhis-web-commons/javascripts/ext-ux/carousel/css/carousel.css" />
-<script type="text/javascript" src="https://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/ext-all.js"></script>
-<script type="text/javascript" src="https://apps.dhis2.org/demo/dhis-web-commons/javascripts/ext-ux/carousel/Carousel.js"></script>
-<script type="text/javascript" src="https://apps.dhis2.org/demo/dhis-web-commons/javascripts/plugin/plugin.js"></script></screen>
+<link rel="stylesheet" type="text/css" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
+<link rel="stylesheet" type="text/css" href="//apps.dhis2.org/demo/dhis-web-commons/javascripts/ext-ux/carousel/css/carousel.css" />
+<script type="text/javascript" src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
+<script type="text/javascript" src="//apps.dhis2.org/demo/dhis-web-commons/javascripts/ext-ux/carousel/Carousel.js"></script>
+<script type="text/javascript" src="//apps.dhis2.org/demo/dhis-web-commons/javascripts/plugin/plugin.js"></script></screen>
<para>The first file is the CSS stylesheet for the chart plug-in. The second file is the CSS stylesheet for the carousel widget. The third file is the Ext JavaScript framework which this plug-in depends on. The fourth file is the carousel plug-in JavaScript file. The fifth file is the chart plug-in JavaScript file. The paths in this example points at the DHIS 2 demo site, make sure you update them to point to your own DHIS 2 installation.</para>
<para>Please refer to the section about the chart plug-in on how to do authentication.</para>
<para>To create a chart carousel we will first render the charts we want to include in the carousel using the method described in the chart plug-in section. Then we create the chart carousel itself. The charts will be rendered into <emphasis role="italic">div</emphasis> elements which all have a CSS class called <emphasis role="italic">chart</emphasis>. In the carousel configuration we can then define a <emphasis role="italic">selector</emphasis> expression which refers to those div elements like this:</para>
