Design Code Execute

An iPhone Application we recently produced had a order form on it. We needed to create a function that would run through all our UItextFields, extract their values, loop through, alert the user if a UITextField wasn't completed, and execute a function (our ajax request) if all checks out.

What 's involved in this function

• alertview - a pop up that lets the user know they missed a required field
• array - a list of all the UITextField values
• int - a variable that increment everytime time a UITextField Checks out
• for loop - Loops through the Array
• if statement - Check the array count to the increment count

This function assumes you know a bit about the iphone, have declared and linked your IBOutlet UITextFields, and have linked your submit button in the Interface Builder to  -(void)textFieldCheck:(id) sender; (which would be declared in your header file).

When dealing with user form, I was looking for the best way to form check. Coming from a web background, I'm used to doing it with javascript/ajax requests. In an if elseif statement that activate a button with all input field are not !== ""

To access the inputed iphone text from a uitext field:

myUITextField.text

To compare that input text to a string

[myUITextField.text isEqualToString:@"This String"]

I'm starting to fall in love with apples objective-c in the xcode environment, Apple got it right.

When the the form checking is complete we will post the code.

PNG's kick ass, that being said, sometimes JPGs are smaller when compressed. Below is an except from Addison Wesley's iphone cook book.

"Xcode automatically optimizes your PNG images using the pngcrush utility shipped with the SDK. (You’ll find the program in the iPhoneOS platform folders in /Developer. Run it  from the command line with the –iphoneswitch to convert standard PNG files to iPhone- formatted ones.) For this reason,use PNG images in your iPhone apps where possible as your preferred image format."

Now go batch resize your image catalogs into PNG format, now.

In your HTML HEADER add this code

<script type="text/javascript">
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
</script>

In your html input tag add this code

onfocus="clearText(this);"

Upon installing spanish on the front end, I recieved an error in yellow about not having the correct files for the language spanish, yet the front end spanish worked. To fix the problem download this zip, unzip and drop the admin folder into your root zen directory. Then push all the files to the server.

Download Admin Spanish Pack for Zen Cart 1.3.8 Now

<script type="text/javascript" language="javascript">

function changeColor(str)
{
document.getElementsByTagName("BODY")[0].style.background = str;
}

function changeFont(str)
{
document.getElementsByTagName("body")[0].style.fontFamily = str;
}

function changeSize(str)
{
document.getElementsByTagName("p")[10].style.fontSize = str;
document.getElementsByTagName("p")[2].style.fontSize = str;
document.getElementsByTagName("p")[3].style.fontSize = str;
document.getElementsByTagName("p")[5].style.fontSize = str;
document.getElementsByTagName("p")[6].style.fontSize = str;
document.getElementsByTagName("p")[7].style.fontSize = str;
document.getElementsByTagName("p")[8].style.fontSize = str;
document.getElementsByTagName("p")[9].style.fontSize = str;
}
function hide(){
var jet = document.getElementById('jetscram').style;
jet.visibility="hidden";

}

</script>

<style type="text/css">
div#jetscram{ background:url(http://jetscram.com/images/logo.gif) top left no-repeat; background-color:#ffffff; border:6px #333 solid; font-family:Helvetica, Arial, sans-serif; color:#333; height:28px; padding-left:65px; padding-top:12px; position:fixed; bottom:0; width:594px; left:50%; margin-left:-342px; z-index:5;}
#jetscram select{ width:120px;}
* HTML div#jetscram{ margin-left:0px;}

</style>

<div id="jetscram">
Font <select name="fontchange" onchange="changeFont(this.value)">
<option value=""Gill Sans MT", Gill Sans, Gill,Arial, Sans" selected="selected">Gill Sans MT</option>
<option value="Arial, Sans">Arial</option>
<option value="Verdana, Sans">Verdana</option>
<option value="Helvetica,"Helvetica LT", Sans">Helvetica</option>
<option value="Georgia, Sans">Georgia</option>
</select>
Font Size
<select name="fontsize" onchange="changeSize(this.value)">
<option value="12px">12</option>
<option value="13px">13</option>
<option value="14px">14</option>
<option value="15px">15</option>
<option value="16px" selected="selected">16</option>
<option value="18px">18</option>
</select>
Background Color
<select name="backgroundcolor" onchange="changeColor(this.value)">
<option value="#008ed7">0%</option>
<option value="#005fb2">33%</option>
<option value="#012f8b" selected="selected">66%</option>
<option value="#010066">100%</option>
</select>
<a href="#" onclick="hide()" >hide</a>
</div>

This javascript script resizes all image on the page, it can be controlled by the variable i and the greater than clause in the for loop. i=0 means it starts from the first image, change i=3 it will start from the forth image. The greater than clause will resize x amount of images. right now it resizes 10 images. The first 100 seen decides if the image is under 100 pixels wide not to resize it to 100, the second is what to resize the image too.  comment any questions

<script language="javascript" type="text/javascript">
<!--
function resize_images()
{
for (i = 0; i < 10; i++)
{
while ( !document.images[i].complete )
{
break;
}
if ( document.images[i].width > 100 )
{
document.images[i].width = 100;
}
}
}
//-->
</script>

To implement the function on the page use this as your body tag

<body onLoad="resize_images()">