Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iOS Dynamic content in StackLayout(2 choices don't show the same thing...)

T

Thetcm

macrumors newbie
Original poster
Aug 12, 2008
17
0
So I have this web application I am currently doing with the most recent version of Dashcode and it's basically a stackLayout 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.

But 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 compeletely dynamic because Station 1 might show Car 2 and 3, with Car 2 have 2 Tasks with no media, while Station 3 might also 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. I will not post it RIGHT NOW because it's heavy on mistakes and it doesn't work at all but I should be posting a working(but not how I want it) version in the upcoming hours. 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, but I'm not a big programmer and since I was the one put on the project(the other guy with me was sent to another project after 2 weeks of failure), I figured I might aswell ask around. If anything, you can just link me to a tutorial that show how to do that.

Thanks a lot.
 
T

Thetcm

macrumors newbie
Original poster
Aug 12, 2008
17
0
My code

So as you can see, the PHP variables $StationID, $ProductionID and $TaskID are an integral part of what is shown. If I hard code a value into $StationID into one of my for each loop, it will only show the cars and tasks recorded in that station instead of every single one of them. So I need a way to refresh a PHP variable halfway troughout the execution of the program. I guess that's what Ajax comes in...

Code: 
<?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()
// Called by HTML body element's onload event when the web application is ready to start
//
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>
 
T

Thetcm

macrumors newbie
Original poster
Aug 12, 2008
17
0
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom