AppStudio Blog

Update Oct 6, 2014: The latest version of this is here.

This blog post has been updated with additional findings by Leslie Peaker.

jQuery Mobile comes with three themes: a, b and c. To use different colors, fonts, etc. in your jQuery Mobile controls, you can create your own theme using the ThemeRoller Mobile tool. You can have a different theme for each control, or set up a theme to use on all your controls, giving you a consistent look and feel.

Here’s how to use it:
Continue reading “Creating your own jQuery Mobile Themes (updated)”

While it’s much nicer to create buttons in the IDE, sometimes you need to create them at runtime. It’s not that hard to do. Keep in mind, though, that you will have to do some of the work that the IDE takes care of.

Here’s some sample code to create 9 buttons in a row. Each will be 20×20 and have their number displayed on them:

Function btnMake10Buttons_onclick()
  'To make 9 text boxes, change type=button to type=text
  Dim i, btn, s
  For i=1 To 9
    btn=document.createElement("div")
    s="<input id='btn" & i & "' type=button "
    s+="style='position:absolute; "
    s+="width:24px; height:24px; top:360px; "
    s+="left:" & (243+i*30) & "px;' "
    s+="value=" & i & ">"
    btn.innerHTML=s
    Form1.appendChild(btn)
  Next
End Function

What we’re doing is defining the buttons using HTML, then adding them to your running app within a DIV. Here is how it looks:

You can do fancier formatting on the buttons by changing the HTML definition of the button.

This technique can be used for much more than buttons. If you change the type=button to type=text, you will create a group of input boxes.

Plus: One event for all your buttons!

Now that you have n buttons on your form, do you really want to add n _onclick() functions? Here’s a single onclick function you can use for all your buttons:

Function Form1_onclick(event)
  MsgBox event.target.id
End Function  

This function will display the id of the button (or any other control on your form) that is clicked. It will handle buttons you created dynamically as well as the ones you set up in the IDE.

Deleting Buttons

You can delete the buttons once you create them as follows:

btn1.parentNode.removeChild(btn1)

Edited 3/28/16: corrected variable name

PHP has built in support for MySQL and SQLite. If you have a database on your server, it’s easy to query it and return the result to your app. Here’s a very simple example of accessing MySQL:

<?php

$host = "localhost";
$databasename = "myDatabaseName";
$username ="myUsername";
$password = "myPassword";

$con = mysql_connect($host,$username,$password) or die(mysql_error());
mysql_select_db($databasename) or die(mysql_error());
$query = file_get_contents("php://input"); 
$results = mysql_query($query);

if (mysql_errno()) { 
  header("HTTP/1.1 500 Internal Server Error");
  echo $query.'n';
  echo mysql_error(); 
}
else
{
  $rows = array();
  while($r = mysql_fetch_assoc($results)) {
    $rows[] = $r;
  }
  echo json_encode($rows);
}
?>

You’ll want to address security with this. There is no parsing of the incoming query string, so someone could conceivably put some malicious code in there and you may want to determine that the person requesting the info is authorized to do so.

Contributed by Graham Barlow, New Zealand

The App Studio Code:

  EmailText = EmailText & vbCRLF & "Date: " & FormatDateTime(Date,"dd/mm/yy")
  Url = "/ajaxEmailRegister.php/?EmailTo=gotnomates@farmmates.com"
  req=Ajax(Url,"POST",EmailText)
  If req.status=200 Then 'success
    MsgBox("Confirmation email sent.")
  Else 'failure
    MsgBox("Error sending email " & req.err)
  End If

…and the PHP script that gets called (“ajaxEmailRegister.php”):

<?php
  // Get the data from the client.
  $myText = file_get_contents('php://input');
  $to = $_GET['EmailTo'];
  $subject = "New Mate registration confirmation";
  $body = $myText;
  $headers = "From: gotnomates@farmmates.com";
  mail($to, $subject, $body, $headers);
?>

A lot of the discussion in this Tech Note has been ways to get around Same Origin Policies. Can we get rid of this restriction? We can, but there’s a catch.

To allow a PHP script on your server to give its results to apps which were not loaded from your server, add this line as the first line of your script.

header('Access-Control-Allow-Origin: *');

The catch is that now anyone with an internet connection can run your PHP script, even if their browser is compliant with access control.