A mix of PHP, AJAX, and iPhone SDK's stackLayout problem...

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Thetcm
Forum Newbie
Posts: 2
Joined: Wed Aug 13, 2008 10:09 am

A mix of PHP, AJAX, and iPhone SDK's stackLayout problem...

Post by Thetcm »

So I have this web application I am currently doing with the most recent version of the iPhone SDK and it's basically a stackLayout composed of 4 lists and a blank layout. Now the thing is that that's how it works : The first list is a list of stations. The second is a list of cars. The third is a list of tasks, the fourth is a list of media and the last blank page is the chosen media fullscreen'd. For those of you unaware, a stackLayout is basically one page filled with Divs and the page slide when you want to go to another section, showing that div. It's processed trough the iPhone SDK but it outputs regular javascript and HTML...

When I click on a work station, like let's say Station 1, it doesn't mean that every car are registered on my FileMaker database as being in Station 1. So while I have no problem showing my full list of stations, cars, tasks and media(picture, videos and texts related to those tasks), everything must be completely dynamic because Station 1 might show Car 2 and 3, with Car 2 showing 2 Tasks with no media, while Station 3 might also show Car 2 except with 3 different tasks and a media. As you can guess, the request to show the car also includes the ID of the station and my script is heavy on PHP. Also, while I have a working version that doesn't include page slide and was done exclusively with PHP, my boss wants the novelty of having page slides to impress our new client that never worked with an iPod Touch or iPhone before. It's a necessity that it works this way.

Now I'm not a big programmer. I know my share of PHP and Javascript, and while it was easy to load the new content in each page with my old version sending variables trough POST or GET, it's impossible to do here considering everything must be loaded at the same time(the PHP is called first). I assume it's going to take some AJAX, which I'm currently working with. The code I give you currently loads the full list of information at the beginning but if I manage to change, let's say, $StationID before going to the car page(hence my idea to use Ajax), the cars will be loaded with that value. On a side note, I'm working with FileMaker(we also have software versions and this is what we build our softwares with) so if you're unsure about some of the code(It's not that hard, but who knows), just tell me.

Thanks a lot to anyone who can help!

Code: Select all

<?php 
    require_once 'FMSession.php';
    $session = new FMSession();
    require_once 'SWData.php';
    
    if(isset($_GET['from']))
    $from = $_GET['from'];
    else
    $from = 0;
    
if(isset($_GET['length']))
    $length = $_GET['length'];
else
    $length = 100;
    $dataSource = new SWData();
    
    $StationID = "*";
    $ProductionID = "*";
    $TaskID = "*";  
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>-/--\-</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta id="screenwidth" name="viewport" content="width=device-width;"/>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
    <link rel="apple-touch-icon" href="Images/HomeScreenIcon.png">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="Parts/Transitions.css">
    <script type="text/javascript" src="Parts/setup.js" charset="utf-8"></script>
    <!--<script type="text/javascript" src="main.js" charset="utf-8"></script>-->
    <script type="text/javascript" src="Parts/Header.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/utilities.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Transitions.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/StackLayout.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Browser.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Text.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/List.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/PushButton.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/ButtonHandler.js" charset="utf-8"></script>
    <script language="Javascript1.2" type="text/javascript">
    
    StationArray = new Array();
    ProductionArray = new Array();
    TachesArray = new Array();
    MediaArray = new Array();
    
    function getStations(){
        <?
        $stations = $dataSource->getStations($from, $length);
        foreach ($stations as $station){
            print "StationArray.push({cle:\"".$station['Key']."\",nom:\"".$station['Description']."\" });";
        }
        ?>
    }
    
    function getCars(){
        <?
        $cars = $dataSource->getProduction($from, $length, $StationID);
        foreach ($cars as $car){
            print "ProductionArray.push({couleur:\"".$car['Couleur']."\",cle:\"".$car['Key']."\"});";
        }   
        ?>
    }
    
    function getTaches(){
        <?
        $taches = $dataSource->getTasks($from, $length, $ProductionID, $StationID);
        foreach ($taches as $tache){
            print "TachesArray.push({description:\"".$tache['Task']."\",multiKey:\"".$tache['MultimediaKey']."\"});";
            
        }   
        ?>
    }
    
    function getMulti(){
        <?
        $multis = $dataSource->getMulti($from, $length, $TaskID);
        foreach ($multis as $multi){
            print "MediaArray.push({description:\"".$multi['MultiTitle']."\",nomFichier:\"".$multi['NomFichier']."\"});";
            
        }   
        ?>
    }
    
    var listController = {
        // This object acts as a controller for the list UI.
        // It implements the dataSource methods for the list.
        
        numberOfRows: function() {
            // The List calls this dataSource method to find out how many rows should be in the list.
            getStations();
            return StationArray.length;
        },
        
        prepareRow: function(rowElement, rowIndex, templateElements) {
            // The List calls this dataSource method for every row.  templateElements contains references to all elements inside the template that have an id. We use it to fill in the text of the rowTitle element.
            if (templateElements.rowTitle) {
                templateElements.rowTitle.innerText = StationArray[rowIndex].cle + " " + StationArray[rowIndex].nom;
            }
    
            // We also assign an onclick handler that will cause the browser to go to the detail page.
            var self = this;
            var handler = function() {
                var browser = document.getElementById('browser').object;
                // The Browser's goForward method is used to make the browser push down to a new level.  Going back to previous levels is handled automatically.
                browser.goForward(document.getElementById('listCars'), StationArray[rowIndex].nom);
            };
            rowElement.onclick = handler;
        }
    };
    
    var listCars = {
        // This object acts as a controller for the list UI.
        // It implements the dataSource methods for the list.
        
        numberOfRows: function() {
            // The List calls this dataSource method to find out how many rows should be in the list.
            getCars();
            return ProductionArray.length;
        },
        
        prepareRow: function(rowElement, rowIndex, templateElements) {
            // The List calls this dataSource method for every row.  templateElements contains references to all elements inside the template that have an id. We use it to fill in the text of the rowTitle element.
            if (templateElements.nameCar) {
                templateElements.nameCar.innerText = ProductionArray[rowIndex].cle + " " + ProductionArray[rowIndex].couleur;
            }
    
            // We also assign an onclick handler that will cause the browser to go to the detail page.
            var self = this;
            var handler = function() {
                var browser = document.getElementById('browser').object;
                // The Browser's goForward method is used to make the browser push down to a new level.  Going back to previous levels is handled automatically.
                browser.goForward(document.getElementById('listTaches'), ProductionArray[rowIndex].cle + " " + ProductionArray[rowIndex].couleur);
            };
            rowElement.onclick = handler;
        }
    };
    
    var listTaches = {
        // This object acts as a controller for the list UI.
        // It implements the dataSource methods for the list.
        
        numberOfRows: function() {
            // The List calls this dataSource method to find out how many rows should be in the list.
            getTaches();
            return TachesArray.length;
        },
        
        prepareRow: function(rowElement, rowIndex, templateElements) {
            // The List calls this dataSource method for every row.  templateElements contains references to all elements inside the template that have an id. We use it to fill in the text of the rowTitle element.
            if (templateElements.nameTache) {
                templateElements.nameTache.innerText = TachesArray[rowIndex].description;
            }
    
            // We also assign an onclick handler that will cause the browser to go to the detail page.
            var self = this;
            var handler = function() {
                var browser = document.getElementById('browser').object;
                // The Browser's goForward method is used to make the browser push down to a new level.  Going back to previous levels is handled automatically.
                browser.goForward(document.getElementById('listMedia'), TachesArray[rowIndex].description);
            };
            rowElement.onclick = handler;
        }
    };
    
    var listMedia = {
        // This object acts as a controller for the list UI.
        // It implements the dataSource methods for the list.
        
        numberOfRows: function() {
            // The List calls this dataSource method to find out how many rows should be in the list.
            getMulti();
            return MediaArray.length;
        },
        
        prepareRow: function(rowElement, rowIndex, templateElements) {
            // The List calls this dataSource method for every row.  templateElements contains references to all elements inside the template that have an id. We use it to fill in the text of the rowTitle element.
            if (templateElements.nameMedia) {
                templateElements.nameMedia.innerText = MediaArray[rowIndex].nomFichier;
            }
    
            // We also assign an onclick handler that will cause the browser to go to the detail page.
            var self = this;
            var handler = function() {
                var browser = document.getElementById('browser').object;
                // The Browser's goForward method is used to make the browser push down to a new level.  Going back to previous levels is handled automatically.
                browser.goForward(document.getElementById('detailMedia'), MediaArray[rowIndex].nomFichier);
            };
            rowElement.onclick = handler;
        }
    };
    
    var detailMedia = {
    
    };
 
function load()
{
    dashcode.setupParts();
}
    
    function updateOrientation()
        {
            switch(window.orientation)
            {
                case 0:
                    document.getElementById("body").className = "Portrait";
                    document.getElementById("footer").innerHTML = "<img src=\"images/footer1.png\" id=\"img1\"/>";
                    document.getElementById("footer2").innerHTML = "<img src=\"images/footer1.png\" id=\"img2\"/>";
                    document.getElementById("footer3").innerHTML = "<img src=\"images/footer1.png\" id=\"img3\"/>";
                    document.getElementById("footer4").innerHTML = "<img src=\"images/footer1.png\" id=\"img4\"/>";
                    document.getElementById("footer5").innerHTML = "<img src=\"images/footer1.png\" id=\"img5\"/>";
                    document.getElementById("top").innerHTML="<img src=\"images/header1.png\" id=\"img\" />";
                break;
        
                case -90:
                    document.getElementById("body").className = "Landscape";
                    document.getElementById("footer").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img1\" />";
                    document.getElementById("footer2").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img2\"/>";
                    document.getElementById("footer3").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img3\"/>";
                    document.getElementById("footer4").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img4\"/>";
                    document.getElementById("footer5").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img5\"/>";
                    document.getElementById("top").innerHTML="<img src=\"images/header2.png\" style=\"width:480px;\" id=\"img\"/>";
                break;
        
                case 90:
                    document.getElementById("body").className = "Landscape";
                    document.getElementById("footer").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img1\"/>";
                    document.getElementById("footer2").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img2\"/>";
                    document.getElementById("footer3").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img3\"/>";
                    document.getElementById("footer4").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img4\"/>";
                    document.getElementById("footer5").innerHTML = "<img src=\"images/footer2.png\" style=\"width:480px;\" id=\"img5\"/>";
                    document.getElementById("top").innerHTML="<img src=\"images/header2.png\" style=\"width:480px;\" id=\"img\"/>";
                break;
        
                case 180:
                    document.getElementById("body").className = "Portrait";
                    document.getElementById("footer").innerHTML = "<img src=\"images/footer1.png\" id=\"img1\" />";
                    document.getElementById("footer2").innerHTML = "<img src=\"images/footer1.png\" id=\"img2\"/>";
                    document.getElementById("footer3").innerHTML = "<img src=\"images/footer1.png\" id=\"img3\"/>";
                    document.getElementById("footer4").innerHTML = "<img src=\"images/footer1.png\" id=\"img4\"/>";
                    document.getElementById("footer5").innerHTML = "<img src=\"images/footer1.png\" id=\"img5\"/>";
                    document.getElementById("top").innerHTML="<img src=\"images/header1.png\" id=\"img\"/>";
                break;
            }
        }
    </script>
    
<style type="text/css" media="screen">
    body{
        background-color:#afafaf;
        height:100%;
    }
    
    .Portrait {
        margin:0px;
        padding:0px;
        background-repeat:no-repeat;
        font-size:11px;
        font-family:Arial;
        width:320px;
        height:100%;
        overflow:hidden;
        position:relative;
    }
    
    .Landscape{
        margin:0px;
        padding:0px;
        background-repeat:no-repeat;
        font-size:11px;
        font-family:Arial;
        width:480px;
        height:100%;
        overflow:hidden;
        position:relative;
    }
</style>
</head>
 
<body id="body" class="Portrait" onload="load();updateOrientation();" onorientationchange="updateOrientation()">
    
    <div id="browser">
    
        <div id="header">
            <div id="back_button" class="back_button_template dashcode-header-backbutton"></div>
            <div id="top"><img src="Images/header1.png" id="img"></div>
        </div>
        
        <div id="stackLayout">
            
            <div id="listLevel">
                <ul id="list">
                    <li id="listRowTemplate" class="listRowTemplate_template">
                        <div class="rowTitle_template" id="rowTitle"></div>
                        <div id="rowArrow" class="rowArrow_template"></div>
                    </li>
                </ul>
                <div id="footer"><img src="Images/footer1.png" id="img1"></div>
            </div>
            
            <div id="listCars">
                <ul id="list1">
                    <li id="listRowTemplate1" class="listRowTemplate1_template">
                        <div id="nameCar" class="nameCar_template"></div>
                        <div id="arrow" class="arrow_template">
                        </div>
                    </li>
                </ul>
                <div id="footer2"><img src="Images/footer1.png" id="img2"></div>
            </div>
            
            <div id="listTaches">
                <ul id="list2">
                    <li id="listRowTemplate2" class="listRowTemplate2_template">
                        <div id="nameTache" class="nameTache_template"></div>
                        <div id="arrow1" class="arrow1_template">
                        </div>
                    </li>
                </ul>
                <div id="footer3"><img src="Images/footer1.png" id="img3"></div>
            </div>
            
            <div id="listMedia">
                <ul id="list3">
                    <li id="listRowTemplate3" class="listRowTemplate3_template">
                        <div id="nameMedia" class="nameMedia_template"></div>
                        <div id="arrow2" class="arrow2_template">
                        </div>
                    </li>
                </ul>
                <div id="footer4"><img src="Images/footer1.png" id="img4"></div>
            </div>
            
            <div id="detailMedia"><div id="footer5"><img src="Images/footer1.png" id="img5"></div></div>
        
        </div>
    
    </div>
</body>
</html>
Thetcm
Forum Newbie
Posts: 2
Joined: Wed Aug 13, 2008 10:09 am

Re: A mix of PHP, AJAX, and iPhone SDK's stackLayout problem...

Post by Thetcm »

For those of you interested, using ajax to call a php page that would get the necessary information, format it through a foreach loop that would have a javascript push line to include said data into a javascript array and inserted back into that javascript array through eval(xmlHttp.responseText) which was then returned to the index did the job. :) I still have a few bugs to work out but I guess this topic can be considered solved.
Post Reply