Scribd Logo
Upload

Welcome to Scribd!

  • App Inventor Tutorials and Examples - Dynamic Table Layout - Pura Vida Apps PDF

    Uploaded by

    Adewale Raji
    1K views4 pages
    App Inventor Tutorials and Examples_

    Original Title

    App Inventor Tutorials and Examples_ Dynamic Table Layout _ Pura Vida Apps.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    App Inventor Tutorials and Examples_

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1K views4 pages

    App Inventor Tutorials and Examples - Dynamic Table Layout - Pura Vida Apps PDF

    Uploaded by

    Adewale Raji
    App Inventor Tutorials and Examples_

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    (./index.

    php) App Inventor and


    HTML/JavaScript with Input Parameters
    App Inventor and Dynamic Table Layout
    This is the App Inventor example, it also is available for App Inventor Classic here (./table2.php).
    Thank you Christopher for being the sponsor of the App Inventor 2 version!
    It was asked in the App Inventor Forum (https://groups.google.com/d/topic/programming-with-app-
    inventor/zopD9HkBnWA/discussion), how to display a table in App Inventor without knowing how many rows will be supplied.
    And let me add to this requirement, without knowing how many columns will be supplied!
    App Inventor together with embedded HTML/JavaScript can do that!
    Thank you Craig! (http://stackoverflow.com/users/525558/craig) Your JavaScript example
    (http://stackoverflow.com/questions/8749236/create-table-with-jquery-append) helped me to set up this solution.
    You can use this example for your projects without need to adjust anything in the HTML document. And: it works with any desired
    number of rows and/or columns! Well, if you do not like the colors etc., there are lots of possibilities you can adjust with CSS
    (http://www.w3schools.com/css/css_table.asp) in the header of the HTML document.
    App Inventor Blocks
    Download the html file
    The HTML file table.html will be downloaded on first run of the app and stored on the sd card of the device using a modified version
    of the Webprefetch File by File (filebyfile.php) example.
    Display the table
    We pass the urlencoded (http://en.wikipedia.org/wiki/Urlencode) table in csv format as parameter to the html file and use a
    webviewer component to display it. That's all...
    Screenshot
    Pura Vida Apps (index.php) Apps (apps.php) Snippets (snippets.php)
    Tutorials (tutorials.php) News (news.php) Forums (forum.php)
    Links (links.php) Search (search.php) Contact (contact.php)
    HTML/JavaScript
    <!doctype html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Table Layout</title>
    <!--more layout possibilities see here: http://www.w3schools.com/css/css_table.asp (http://www.w3schools.com/css/css_table.asp)-->
    <style type="text/css">
    table { border-collapse:collapse; }
    table,th,td { border:1px solid green; }
    th { background-color:green; color:white; }
    </style>
    <script>
    function urldecode(str) {
    return decodeURIComponent((str+'').replace(/\+/g, '%20'));
    }
    </script>
    </head>
    <body>
    <div id="myTable"></div>
    <script>
    // split at new line
    var urlArray = location.search.slice(1).split("%0A");
    var doc = document;
    var fragment = doc.createDocumentFragment();
    for(i=0;i<urlArray.length;i++){
    var tr = doc.createElement("tr");
    // split at comma
    var rowArray = urlArray[i].split("%2C");
    for(j=0;j<rowArray.length;j++){
    if ( i == 0) { var td = doc.createElement("th"); }
    else { var td = doc.createElement("td"); }
    td.innerHTML = urldecode(rowArray[j]);
    tr.appendChild(td);
    fragment.appendChild(tr);
    }
    }
    var table = doc.createElement("table");
    table.appendChild(fragment);
    doc.getElementById("myTable").appendChild(table);
    </script>
    </body>
    </html>
    Note
    The limit to display a table is around 2 MB (max. length of an URI) (http://stackoverflow.com/a/417184/1545993).
    Questions and Answers
    Q1: How would you use this example and populate it with a list of lists?
    A: So your question is: how to convert a list of lists into a table in csv format? This is very easy: just use the list to csv table
    (http://appinventor.mit.edu/explore/content/list-blocks.html#list%20to%20csv%20table) block for that.
    Download
    Home (./index.php) | Apps (./apps.php) | Snippets (./snippets.php) | Tutorials (./tutorials.php) | News (./news.php) | Forums (./forum.php) |
    Links (./links.php) | Search (./search.php) | Contact (./contact.php)
    Site Content 2014 Pura Vida Apps (http://puravidaapps.com) using the Foundation Framework (http://foundation.zurb.com/).
    Portions of this page are modifications based on work created and shared by Google (http://code.google.com/policies.html) and used according to
    terms described in the Creative Commons 3.0 Attribution License. (http://creativecommons.org/licenses/by/3.0/) Android is a trademark of Google
    Inc.
    If you find this example helpful and you are using it in one of your projects,
    be nice and donate a small amount!

    Thank you! Taifun

    Download aia file for App Inventor (sourceforge.php?name=table.aia)
    Back to top of page ...
    (http://creativecommons.org/licenses/by-sa/3.0/)
    This work by Pura Vida Apps (http://puravidaapps.com) is licensed under a Creative Commons Attribution-ShareAlike 3.0
    Unported License (http://creativecommons.org/licenses/by-sa/3.0/)
    with attribution (name=Pura Vida Apps (http://puravidaapps.com) and link to the source site) required.

    You might also like