{"id":51660,"date":"2021-02-12T03:01:54","date_gmt":"2021-02-11T17:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51660"},"modified":"2021-02-11T19:33:50","modified_gmt":"2021-02-11T09:33:50","slug":"appml-acronyms-hierarchy-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/appml-acronyms-hierarchy-tutorial\/","title":{"rendered":"AppML Acronyms Hierarchy Tutorial"},"content":{"rendered":"
\"AppML<\/a>

AppML Acronyms Hierarchy Tutorial<\/p><\/div>\n

Yesterday’s AppML Acronyms Tutorial<\/a> works in an HTML table by appml-<\/font>repeating<\/font> table cell content elements via an array. What happens if your JSON contains arrays within arrays, like our Acronym data’s “vars” members …<\/p>\n


\n[{\"sf\": \"BHP\", \"lfs\": [{\"lf\": \"benign prostatic hyperplasia\", \"freq\": 12, \"since\": 1992, \"vars\": [{\"lf\": \"benign prostatic hyperplasia\", \"freq\": 8, \"since\": 1992}, {\"lf\": \"Human benign hyperplastic prostate\", \"freq\": 2, \"since\": 1994}, {\"lf\": \"Benign prostatic hyperplasia\", \"freq\": 1, \"since\": 1995}, {\"lf\": \"benign prostate hyperplasia\", \"freq\": 1, \"since\": 1995}]}, {\"lf\": \"tert-butyl hydroperoxide\", \"freq\": 11, \"since\": 1986, \"vars\": [{\"lf\": \"tert-butyl hydroperoxide\", \"freq\": 6, \"since\": 1994}, {\"lf\": \"t-butyl hydroperoxide\", \"freq\": 3, \"since\": 1986}, {\"lf\": \"Tert-butyl hydroperoxide\", \"freq\": 1, \"since\": 1993}, {\"lf\": \"tert.-butyl hydroperoxide\", \"freq\": 1, \"since\": 2003}]}, {\"lf\": \"N-nitrosobis (2-hydroxypropyl) amine\", \"freq\": 7, \"since\": 1985, \"vars\": [{\"lf\": \"N-nitrosobis (2-hydroxypropyl) amine\", \"freq\": 6, \"since\": 1985}, {\"lf\": \"N-Nitrosobis (2-hydroxypropyl) amine\", \"freq\": 1, \"since\": 1993}]}, {\"lf\": \"benign hypertrophy of the prostate\", \"freq\": 6, \"since\": 1988, \"vars\": [{\"lf\": \"benign hypertrophy of the prostate\", \"freq\": 4, \"since\": 1988}, {\"lf\": \"Benign hypertrophy of the prostate\", \"freq\": 2, \"since\": 2003}]}]}]
\n<\/code><\/p>\n

? Well, we just surmised (a table template like) …<\/p>\n


\n<table appml-data=\"appis\">
\n<tr>
\n <th>Meaning<\/th>
\n <th>Frequency<\/th>
\n <th>Since<\/th>
\n <th>Subs<\/th>
\n<\/tr>
\n<tr appml-repeat=\"records\">
\n <td>{{lf}}<\/td>
\n <td>{{freq}}<\/td>
\n <td>{{since}}<\/td>
\n <td>{{vars}}<\/td>
\n<\/tr>
\n<\/table>
\n<\/code><\/p>\n

… might be a good start. It was, the AppML leaving behind comma separated [object Object]<\/i> hardcodings for the submembers of the “vars” array members, and then PHP code like<\/font> …<\/p>\n

<?php
\n
\n $json_output = json_decode(str_replace(\"$@$\", \"\", str_replace(\"}]}]}]\", \"}]}]}\", str_replace(\"$@$[\",\"\", (\"$@$\" . $pageContent))))); \/\/ ,true);
\n
\n $hstuff = str_replace(\"none;\", \"block;\", str_replace(\"><\/th>\", \">   \" . $selname . \"     <\/th>\", $uc));
\n

\n for ($i=0; $i<sizeof($json_output->lfs); $i++) {
\n if (strpos($hstuff, '>' . $json_output->lfs[$i]->lf . '<\/td') === false) {
\n if ($done == \"n\") {
\n for ($ii=1; $ii<sizeof($biarray); $ii+=2) {
\n if (strtoupper($json_output->lfs[$i]->lf) == strtoupper($biarray[$ii])) $done = \"Y\";
\n }
\n }
\n $subhstuff=\"\";
\n $shs=\"\";<\/font>
\n if ($json_output->lfs[$i]->vars) {
\n for ($iij=0; $iij<sizeof($json_output->lfs[$i]->vars); $iij++) {
\n if ($subhstuff == \"\") {
\n $subhstuff=\"<br><table><TBODY><\/TBODY><\/table>\";
\n $shs=\"[object Object]\";
\n } else {
\n $shs.=\",[object Object]\";
\n }
\n $subhstuff=str_replace(\"<\/TBODY>\", \"<tr><th>\" . ($iij + 1) . \"<\/th><th class=thlink>\" . $json_output->lfs[$i]->vars[$iij]->lf . \"<\/th><th>\" . $json_output->lfs[$i]->vars[$iij]->freq . \"<\/th><th>\" . $json_output->lfs[$i]->vars[$iij]->since . \"<\/th><\/tr><\/TBODY>\", $subhstuff);
\n <\/font>}
\n if ($fillin == \"\") { $fillin=\" setTimeout(alat, 5000); \\n } \\n function alat() { \\n var dai=document.getElementsByTagName('table'); \" . \"\\n\"; }
\n $fillin.=\" dai[0].innerHTML=dai[0].innerHTML.replace(\/\" . '\\\"' . \"\/g,'').replace(\\\"\" . $shs . \"\\\", \\\"\" . str_replace(\"<br>\", \"\", $subhstuff) . \"\\\"); \" . \"\\n\";
\n }<\/font>
\n $hstuff = str_replace(\"<\/tbody><\/table>\", \"<tr class='\" . $trclass . \"'><td>\" . ($i + 1) . \".<details><summary>\" . sizeof($json_output->lfs[$i]->vars) . \"<\/summary>\" . str_replace(\" class=\\\"thlink\\\"\", \"\", str_replace(\" class=thlink\", \"\", str_replace(\"<th\", \"<td\", str_replace(\"<\/th>\", \"<\/td>\", $subhstuff)))) . \"<\/details><\/font><\/td><td>\" . $json_output->lfs[$i]->lf . \"<\/td><td>\" . $json_output->lfs[$i]->freq . \"<\/td><td>\" . $json_output->lfs[$i]->since . \"<\/td><\/tr><\/tbody><\/table>\", $hstuff);
\n if ($trclass == \"odd\") {
\n $trclass = \"even\";
\n } else {
\n $trclass = \"odd\";
\n }
\n }
\n $ij = 1 + $i;
\n }
\n<\/code>
\n?><\/p>\n

… replaces those with table within table submember display HTML.<\/p>\n

Along the way we add in Wikipedia<\/a> links and hashtag navigation to swap between the JSON and the Wikipedia and vice versa.<\/p>\n

Like yesterday, you can check out the PHP changed getacronymdata.php<\/a> called by the minor changes of getacronymdata.htm<\/a>‘s acronym web application<\/a> to see (or try) this all for yourself.<\/p>\n

\n

\n

Previous relevant AppML Acronyms Tutorial<\/a> is shown below.<\/p>\n

\"AppML<\/a>

AppML Acronyms Tutorial<\/p><\/div>\n

After yesterday’s AppML Primer Tutorial<\/a> we went looking for an apt inhouse web application that allows an interface to these new AppML framework concepts. Do you remember Acronyms Lookup Wikipedia Tutorial<\/a>?<\/p>\n

We first thought we’d be working in the client half of this web application but found it was much better to just add a new input element (ie. textbox) placeholder, just, here, and do the bulk of the changes needed in the serverside PHP that is Ajax called from the client HTML.<\/p>\n

What most pointed us in the right direction here, with the code, was AppML Data<\/a> whereby that “customers.js<\/font>” web server JSON file arrangement of yesterday, can be localized via PHP (where $pageContent is JSON results for acronym query from third parties, thanks and $appml is true for user flagging they want the AppML output report look) …<\/p>\n

<?php
\n
\n if ($appml) {
\n $mytitle=$selname; \/\/ incoming acronym to look up
\n
\n $aml=\"<!DOCTYPE html>
\n<html lang=\\\"en-US\\\">
\n<link rel=\\\"stylesheet\\\" href=\\\"style.css\\\">
\n<title>Customers<\/title>
\n<script src=\\\"\/\/www.w3schools.com\/appml\/2.0.3\/appml.js\\\"><\/script>
\n<body>
\n
\n<h1>\" . $mytitle . \"<\/h1>
\n
\n<h4>Thanks to <a target=_blank title='AppML via W3Schools, thanks' href='\/\/webdevable.com\/w3schools\/appml\/appml_howto.html'>W3Schools<\/a><\/h4>
\n
\n<table appml-data='appis<\/font>'>
\n<tr>
\n <th>Meaning<\/th>
\n <th>Frequency<\/th>
\n <th>Since<\/th>
\n<\/tr>
\n<tr appml-repeat=\\\"records\\\">
\n <td>{{lf}}<\/td>
\n <td>{{freq}}<\/td>
\n <td>{{since}}<\/td>
\n<\/tr>
\n<\/table>
\n
\n<script>
\n var appis<\/font>=\" . (str_replace('\"JUNKJUNK',\"'\",str_replace('\"sf\": \"' . $selname . '\", \"lfs\": ', '\"records\":', str_replace(\"\\n\",\"\",str_replace(\"}]}]}]\", \"}]}]}\",substr($pageContent,1)) ))) ) . \";
\n<\/script>
\n
\n<\/body>
\n<\/html>
\n\";
\n
\n echo $aml;
\n exit;
\n }
\n<\/code>
\n?><\/p>\n

So, you can check out the PHP changed getacronymdata.php<\/a> called by the minor changes of getacronymdata.htm<\/a>‘s acronym web application<\/a> to see (or try) this all for yourself.<\/p>\n

\n

\n

Previous relevant AppML Primer Tutorial<\/a> is shown below.<\/p>\n

\"AppML<\/a>

AppML Primer Tutorial<\/p><\/div>\n

There are hundreds and perhaps thousands of Framework type applications out there that create HTML output. Some set to a Framework the handling of data, and today we’re trying out one called AppML where we are going to use the W3Schools<\/a> Two Step first tutorial as per …<\/p>\n

\nAppML Explained:
\n<script src=”https:\/\/www.w3schools.com\/appml\/2.0.3\/appml.js”> adds AppML to your page.
\n
\nappml-data=”customers.js” connects AppML data (customers.js) to an HTML element (<table>>).
\n
\nIn this case we have used a JSON file: customers.js
\n
\nappml-repeat=”records” repeats an HTML element (<tr>) for each item (records) in a data object.
\n
\nThe {{ }} brackets are placeholders for AppML data.\n<\/p><\/blockquote>\n

Tokenizing this way (or you could call it substituting) gels with our thinking nearly as much as adding global data attributes as ways to make your HTML more intelligent, and more like that “protocol with glasses”, XML.<\/p>\n

All it took to create today’s “pretty swish” table of a web application<\/a> was …<\/p>\n

    \n
  1. index.html<\/a> HTML<\/li>\n
  2. style.css<\/a> CSS<\/li>\n
  3. customers.js<\/a> JSON<\/li>\n<\/ol>\n

    … that JSON serving as a flat file data source. Interesting, huh?!<\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n