Changing listviewer format in App Inventor

I am trying to create an app with App Inventor which allows you to see files from a server and also download and share them.

I created 3 listviewers one that opens the file, the second allows to share it and the last allows you to download it. And It looks like this:

enter image description here

But I am looking to put all of this in the same column like this app do: enter image description here

Does any one know what I have to do create a format like that?

Thanks.

Solution

Finally thanks to www.jquerymobile.com and some Taifun's tutorials I could create an interface similar to what I was looking for. I also achive how to recover he index selected by the user. Here I post the jquery code:

<!DOCTYPE html> 
<html> 
<head> 
    <title>0</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <style>
    .split-custom-wrapper {
    /* position wrapper on the right of the listitem */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.split-custom-button {
    position: relative;
    float: right;   /* allow multiple links stacked on the right */
    height: 100%;
    margin:0;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    moz-border-radius: 0;
    webkit-border-radius: 0;
    border-radius: 0;
    moz-box-shadow: none;
    webkit-box-shadow: none;
    box-shadow: none;
}

.split-custom-button span.ui-btn-inner {
    /* position icons in center of listitem*/
    position: relative;
    margin-top:50%;
    margin-left:50%;
    /* compensation for icon dimensions */
    top:11px; 
    left:-12px;
    height:40%; /* stay within boundaries of list item */
}
    </style>
</head> 
<body> 

<div data-role="page">  
    <div data-role="content">   
    <div id="searchPickPlace">
    <script>
    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.getWebViewString().split("\n");
    // split at comma

    var doc = document;
    var fragment = doc.createDocumentFragment();
    document.write('<ul data-role="listview" data-filter="true">');
    for(i=0;i<(urlArray.length-1);i++){   
      j = i + 1; //+1 because app invetor array start at position 1
      var rowArray = urlArray[i].split(",");
        html = '<li> \
                <a id="R_'+j+'" onClick="reply_click(this.id)" href="#">\
                    <h3>'+rowArray[1]+" "+j+'</h3>\
                    <p>description</p>\
                </a>\
                <div class="split-custom-wrapper">\
                    <a id="D_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="arrow-d" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
                    <a id="S_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
                </div>\
            </li>';
        document.write(html);
    }
    document.write('</ul>');

    function reply_click(clicked_id)
    {
        //alert(clicked_id);
        window.document.title = clicked_id;
        setTimeout(function(){window.document.title = "0";}, 500);  
    }

    </script>
    </div>
    </div><!-- content -->
</div><!-- /page -->

</body>
</html>

With this code I get this interface:

enter image description here

When you click a button the text label change to the number of the index you have clicked with a prefix depending if you have clicked the main area or the other buttons. The text label only change during less than a secon so if during this time you click again the interface wont recive the click. I think this is work perfect for what I want to do becaus I don't want any one that spam the button but If want an app where you can spam a button you will have to figure it out an other solution.

To do that you will need a clock. In thsi example I have obtained the table from my web site but you can create your own table with a text variable separeting the columns by comas and each line by "\n". I post the app invetor blocks down here:

enter image description here

I am aware that maybe there is a better solution if any one can find it out, I am open to listen new sugestions.

Thanks