Tuesday, February 3, 2009
How to display any database table in a Flex 3 Datagrid
The project described in this post is made to display any table from a PostgreSQL or MySQL database in Adobe Flex 3.
(note: only text based database info will work, so it won’t work with e.g. pictures stored in a database)
Here’s an overview of the technologies used in this project:
It works as follows:
1. The Flex 3 application sends out a HttpRequest to a php webpage.
2. The php script queries the database and selects all elements from a table
3. The same php script outputs the table as a XML-formatted page and returns this to the Flex application
4. The Flex application interprets the XML page and creates a table output using a Datagrid.
Download here all the source files. In order to make it work with your site do the following:
Make sure you have a webserver running PHP and MySQL or PostgreSQL
- Copy DataSmart.swf and DataSmart.html to your webdirectory
- Copy either GetDataSmart_MySQL.php or GetDataSmart_PostgreSQL.php to your webdirectory, depending on the database technology you’re using.
- Rename the .php to GetDataSmart.php
- Edit the .php page to connect to your database and to query the table you want to display.
open DataSmart.html in your webbrowser and everything should work (Adobe Flash plugin needed!)
Friday, January 30, 2009
Adobe FLEX 3 .mxml code to display xml data in a datagrid table
This post contains .mxml code which reads in a xml file and outputs a table showing all information.
The xml file should look like this: (see my previous post to see how to dynamically generate such a xml file from a PostgreSQL or MySQL database using PHP)
<?xml version=\"1.0\" encoding=\"iso-8859-1\"?> <entries> <entry><column_1_name>column_1_row_1_value</column_1_name><column_2_name>column_2_row_1_value</column_2_name> .......... </entry> <entry><column_1_name>column_1_row_2_value</column_1_name><column_2_name>column_2_row_2_value</column_2_name> .......... </entry> ........ ........ </entries>
Here is the FLEX code:
(the xml data used in this example is dynamically generated by GetDataSmart.php)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" horizontalAlign="left" verticalAlign="top" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.http.HTTPService;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.collections.XMLListCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.utils.StringUtil;
import mx.collections.ArrayCollection;
private function init():void {
data_service.addEventListener("result", httpResult);
data_service.addEventListener("fault", httpFault);
data_service.send();
}
[Bindable]
public var datalist:XMLListCollection;
public function httpResult(event:ResultEvent):void {
var x:XML = event.result as XML;
var xl:XMLList = XMLList(x.children());
datalist = new XMLListCollection(xl);
list.columns=generateCols(datalist.copy(), false);
list.rowCount=datalist.length;
list.dataProvider=data_service.lastResult.entry;
}
public function httpFault(event:FaultEvent):void {
var faultstring:String = event.fault.faultString;
Alert.show(faultstring);
}
private function generateCols(input:XMLList, useAttributes:Boolean = false):Array {
var e1:XML = input[0];
var columns:Array = [];
var children:XMLList ;
if (useAttributes) {
children = e1.attributes();
}
else {
children = e1.children();
}
for each(var child:XML in children) {
var col:DataGridColumn = new DataGridColumn();
col.dataField = child.name();
columns.push(col);
}
return columns;
}
]]>
</mx:Script>
<mx:HTTPService id="data_service" url="GetDataSmart.php" showBusyCursor="true" resultFormat="e4x"/>
<mx:Panel width="100%" id="pp" resizeEffect="Resize" height="90%" layout="absolute" title="List of database: DD - Table: short02" horizontalAlign="left" verticalAlign="top">
<mx:DataGrid id="list" width="100%" enabled="true" editable="false" textAlign="center" variableRowHeight="false" wordWrap="false" y="0" sortableColumns="true" resizableColumns="true" minColumnWidth="150" x="0" rowCount="1">
</mx:DataGrid>
<mx:Spacer x="0" y="445"/>
</mx:Panel>
<mx:Spacer/>
<mx:Button label="Reload Data" id="Reload" click="data_service.send()" width="165" height="35"/>
</mx:Application>
Thursday, January 29, 2009
PHP scripts for outputting a complete database table to xml (PostgreSQL and MySQL)
The first php scripts below connects to a postgres database, queries a full table and outputs this table as an XML page.
The second script is similar but implements a MySQL database.
The goal of creating an XML from a table is that XML files are an easy way to communicate data to Adobe Flex (and Flash)
Both PHP scripts will output a xml page that looks like this:
<?xml version=\"1.0\" encoding=\"iso-8859-1\"?> <entries> <entry><column_1_name>column_1_row_1_value</column_1_name><column_2_name>column_2_row_1_value</column_2_name> .......... </entry> <entry><column_1_name>column_1_row_2_value</column_1_name><column_2_name>column_2_row_2_value</column_2_name> .......... </entry> ........ ........ </entries>
Here is the php script using PostgreSQL:
<?php
session_start();
header("Cache-control: private");
//connect to the database.
$link = pg_connect("dbname=database user=databaseuser password=databasepassword");
//Get the data
$Query = "SELECT * from tablename";
$Result = pg_query($Query); //Execute the query
$XML = "";
$NumFields = pg_num_fields($Result);
$XML .= "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<entries>\n";
$row = true;
while ($row = pg_fetch_row($Result)){
$XML .= "<entry>";
for ($i=0; $i < $NumFields; $i++)
{
$XML .= "<" . pg_field_name($Result, $i) . ">" . $row[$i] . "</" . pg_field_name($Result, $i) . ">";
}
$XML .= "</entry>\n";
}
$XML .= "</entries>";
echo ($XML);
pg_free_result($Result);
pg_close();
?>
Here is the php script using MySQL:
<?php
session_start();
header("Cache-control: private");
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "user" );
define( "DATABASE_PASSWORD", "password" );
define( "DATABASE_NAME", "database" );
//connect to the database.
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//Get the data
$Query = "SELECT * from table";
$Result = mysql_query( $Query );
$XML = "";
$NumFields = mysql_num_fields($Result);
$XML .= "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
$XML .= "<entries>\n";
$row = true;
while ($row = mysql_fetch_row($Result)){
$XML .= "<entry>";
for ($i=0; $i < $NumFields; $i++)
{
$XML .= "<" . mysql_field_name($Result, $i) . ">" . $row[$i] . "</" . mysql_field_name($Result, $i) . ">";
}
$XML .= "</entry>\n";
}
$XML .= "</entries>";
echo ($XML);
mysql_free_result($Result);
mysql_close();
?>
Saturday, January 17, 2009
Adobe Flex 3: How to automatically display the current date in a Datefield component
The following code automatically fills in the current date in a Datafield object in Flex 3.
so you have this: 
instead of this: 
The full mxml code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="displayDate()">
<mx:Script>
<![CDATA[
public function displayDate():void {
var now:Date = new Date();
var day_int:int = now.getDate(); //gets day of the month
var month_int:int = (now.getMonth()+1); // gets month. Months are given from 0 to 11, so you need to do +1 here
var year_int:int = now.getFullYear(); // gets year
var day_string:String;
//display always 2 digits for a month, so '02' instead of just '2' for February
if (day_int < 10) {
day_string = "0" + day_int.toString();
}
else {
day_string = day_int.toString();
}
var month_string:String;
//display always 2 digits for a day, so '02' instead of just '2'
if (month_int < 10) {
month_string = "0" + month_int.toString();
}
else {
month_string = month_int.toString();
}
var year_string:String = year_int.toString();
// note: this is displaying the date in the DD/MM/YYYY format, this same format is also set for the Datefield below!
DateSelect.text = day_string + "/" + month_string + "/" + year_string;
}
]]>
</mx:Script>
<mx:DateField id="DateSelect" formatString="DD/MM/YYYY"/>
</mx:Application>
Thursday, October 9, 2008
the 1-Key-Keyboard project
Click here to download the complete sourcecode of this project (including .hex and Flash demo program)
Introduction:
The idea for a 1-key keyboard comes from the need as an interaction designer to make “cheap, quick and dirty prototypes.” When creating a quick screen-based demo in e.g. Adobe Flash, a common way of quickly prototyping physical actions is to assign actions to certain key presses on a keyboard. In more advanced prototypes, physical hacks to the circuit board from a keyboard are also often used to interface custom buttons and switches with a computer. (see http://wiki.arcadecontrols.com/wiki/Keyboard_Hacks)
What this project does is to create a keyboard hack that is smaller and cheaper and better reproducible than what one would get when hacking a keyboard circuit; a perfect solution for when you only want to use one switch in your prototype. (Note: 3 IO ports from the microprocessor are still unused, so it’s very easy to add 3 more switches. If you want to interface more than 4 switches, I suggest having a look here: http://www.obdev.at/products/avrusb/hidkeys.html)
To maximize the functionality of the 1-key keyboard, I implemented having a different key being sent to the computer for a key-down and a key-up event. This can be useful when you create for example a prototype that has to detect whether a physical object is pushing down a switch or not.
This project implements AVR-USB from Objective Development to emulate a standard USB keyboard using an Atmel AVR microcontroller. This project has been heavily inspired by the EasyLogger Reference project.
What does it do?
This 1-Key-Keyboard can be plugged into any computer and will be recognised as a standard USB keyboard.
When closing the switch, the keystroke ‘]’ will be sent.
When opening the switch, the keystoke ‘[’ will be sent.
That’s all.
What do we need:
1x Atmel ATTiny45-20PU or ATTiny85-20PU microcontroller (I used a ATTiny85, which has more memory than the ATTiny45 but the program will fit the ATTiny45 too)
2x Diodes (0.5W) (ordinary 1N4148 are sufficient)
2x 68 ohm resistors
1x 1.5K resistor
1x 0.1 uF capacitor
1x switch
a piece of prototype-board (striped 2.54mm single-sided)
a programmer for the Atmel AVR
the .hex file from the 1-Key-Keyboard project (Download it here)
Instructions:
First program the microcontroller with the .hex file (don’t forget to set the fuses first to 0xFF 0xDF 0xC1)
Link: Instructions for how to set up the Atmel AVR STK500 programmer to program an 8-pin ATTiny
Link: Instructions for setting up AVR studio for using the Atmel STK500 programmer
Link: Instructions for programming a .hex file with AVR Studio
With the programmed ATTiny, build the following circuit:
To keep the costs low, you can make a usb-plug from strip board (veroboard) see the pictures below
Now it’s time to test the 1-Key-Keyboard! you can test it by opening a text editor and press and release the switch a couple of times. If everything went well, you should see a series like this being typed: ][][][][][
Creating a demo-program in Adobe Flash
Here’s the actionscript 3.0 code for a demo-program which detects whether the switch is pressed or not. If the switch is pressed, the movie-clip ‘onSwitch’ is visible. When released, the movie-clip ‘offSwitch’ is visible.
//actionscript 3.0 source file
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
offSwitch.visible = true;
onSwitch.visible = false;
function reportKeyDown(event:KeyboardEvent):void {
switch (String.fromCharCode(event.charCode)) {
case ']' :
offSwitch.visible = false;
onSwitch.visible = true;
break;
case '[' :
offSwitch.visible = true;
onSwitch.visible = false;
break;
default :
break;
}
}
// end of source file
Try it out by clicking here and press/release the switch on your 1-Key-Keyboard.
or click here to download a .zip file with the .fla and .swf files
Click here to download the complete sourcecode of this project (including .hex and Flash demo program)
Feedback
Please feel free to leave comments on my 1-key-keyboard project!