function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
     alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(page) {

   // Open PHP script for requests
   http.open('get', page);
   http.onreadystatechange = handleResponse;
   http.send(null);

}

function handleResponse() {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById("div id").innerHTML = response;
      }

   }

}

function repeatloop()
{
sendRequest('page.php');
setTimeout("repeatloop()", 2000);
}

window.onload=function() {
repeatloop();
}

div id is the div in which the page is loaded.
edit “page.php” as the page to load.
change the timeout to your liking. 2000 is 2 seconds.

You may or may not need this, but it could come in handy at one point in time. So lets start..

I will show you the basics here, you may download the source at the bottom of the page.

View the DEMO

index.html

include these into the head section of the page. ajax.js is the Sack js functions. I will get into Sack later.

this goes into the head as well.

var ajax = new Array();

function getTextList(sel)

{

var color = document.getElementById('color').value; //gets value from text input

document.getElementById('colorReturn').options.length = 0;

if(color.length>0){

var index = ajax.length;

ajax[index] = new sack();

ajax[index].requestFile = 'getColor.php?color='+color; //sends the GET to the php page

ajax[index].onCompletion = function(){ createText(index) };

ajax[index].runAJAX();

}

}

function createText(index)

{

var obj = document.getElementById('colorReturn'); //retruns the options from the php page

eval(ajax[index].response);

}

The form

Filter the colors - Start typing black.

Thats it for the index page. pretty straight forward. So now for the fun part.

getColor.php – This page contains the sql and php that returns the

mysql_connect("localhost", "username", "password") or die(mysql_error());

mysql_select_db("database") or die(mysql_error());

$color = $_GET['color'];

if(isset($_GET['color'])){

$result = mysql_query("SELECT color FROM colors WHERE color LIKE '%$color%' LIMIT 0,10")

or die(mysql_error());

while($color = mysql_fetch_array( $result ))

{

echo 'obj.options[obj.options.length] = new Option("'.$color['color'].'","'.$color['color'].'");';

}

}

Its not the most detailed tutorial, but im not a tutorial guy.

View the DEMO

Download the SOURCE

Source Files: DOWNLOAD
Check out the DEMO

The MySQL is simple, just an id, category and text field. There are multiple of the same category so I will start with the mysql connection and the query to pull them into a select using distinct.

dbcommon.php

 	mysql_connect("localhost", "username", "password") or die(mysql_error());
	mysql_select_db("databasename") or die(mysql_error());

Select Boxes.

	    Select a Category
	    
	

main select box query

$result = mysql_query("SELECT DISTINCT category FROM dialogue")
			or die(mysql_error());

			while($cat = mysql_fetch_array( $result )) 

			{        //this syntax highlighter blows, there should be option tags in this echo.
				  echo ''.$cat['category'].'';
			}

JS within the select box page.

getText.php

include('dbcommon.php');

    $category = $_GET['category'];

	if(isset($_GET['category'])){

		$result = mysql_query("SELECT * FROM dialogue WHERE category='$category'")
	    or die(mysql_error());

			 while($text = mysql_fetch_array( $result )) 

			  {
				echo 'obj.options[obj.options.length] = new Option("'.$text['text'].'","'.$text['id'].'");';
			  } 

	}

Im not much for tutorials but you can see the way I did it.

So lets start with the php to pull the info from MySpace. In this example i will be using a form to pull the user.
Get the source files: DOWNLOAD
See the DEMO

name this file “myspace.class.php”

//the function
function myspace(){

//keeps the page clear until the form is submitted.
if($_POST['submit']){ 

  //Gets name or email from the form
  $name = $_POST['name'];
  //Gets the source code from the MySpace page
  $source = implode(file("http://searchservice.myspace.com/index.cfm?fuseaction=sitesearch.results&type=People&qry=".$name.""));
  //Look for

  $search = '
';
  //here is where we seperate everything from the page except the $search value
  $newText = substr($source,strpos($source, $search)+strlen($search), 1000);
  //if the user doesnt exist
  $destroy = strip_tags($newText, '







');
  //If the user doesnt exist it will print the doctype code, the code contains dtd
  if(strstr($destroy, 'dtd')){

    echo "
";
    //if dtd is present lets make it say...
    echo "".$_POST['name'].", Does not exist on MySpace";

    echo "

";

  }else{

    echo "
";
    //otherwise show the search results
    echo strip_tags($newText, '







');

    echo "

";
  }

 }

}

next the form/results page

Enter MySpace username or email:

Add this under the form

   include ('myspace.class.php');
   myspace();

Now for style.css

body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:11px;
}
.searchResults {
float:left;
width:auto;
}
.profilePhoto {
float:left;
overflow:hidden;
padding:13px 25px 13px 7px;
}
.userInfo {
float:left;
line-height:18px;
padding:10px 0;
}
.userInfo a {
font-size:12px;
text-decoration:underline;
}
.vanity {
color:#008800;
}
.profilePhoto img {
width:80px;
}
.pilRealName {
display:none;
}
.doIt {
display:none;
}
.exist {
padding:10px;
font-weight:bold;
}
img {
border:0 none;
}

Now run it, enter a username or email and grab some MySpace User Info. I use this on another site, using thier emails from the database to pull thier user info.

Finished Data Grid: Demo

So lets start, The data used for the grid will be pulled from a MySQL database.

If you don’t have one ready, use this to get an idea.

CREATE DATABASE `flex_grid` ;

CREATE TABLE `flex_grid`.`grid_data` (
`user_id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`user_name` VARCHAR( 22 ) NOT NULL ,
`user_email` VARCHAR( 60 ) NOT NULL ,
`user_phone` VARCHAR( 20 ) NOT NULL ,
`user_mobile` VARCHAR( 20 ) NOT NULL ,
PRIMARY KEY ( `user_id` )
) ENGINE = InnoDB;

INSERT INTO `flex_grid`.`grid_data` (
`user_id` ,
`user_name` ,
`user_email` ,
`user_phone` ,
`user_mobile`
)
VALUES (
NULL , 'Joe Blow', 'joe@blow.com', '123-456-7890', '321-654-0987'
);

Ok, once you get this running or if you have your own lets start.

Step 1: Creating the Flex Project

Open up Adobe Flex if you don’t already have it open…… Got it open? Ok good.

Now navigate to File > New > Flex Project

Next lets set up the project.

Create a project name and choose PHP from the dropdown list.

Hit Next,

Now create a folder where you want the project to be added as well as a URL to the project and click Validate Configuration.

Hit Next, the project will be created. Then simple hit Finish.

Step2: Create Application From Database.

You should now have a project with a blank blue canvas.

Navigate to Data > Create Application from Database…

Click “New” to setup a new connection..

Give the connection a name and hit next…

The MySQL Connection info and hit next..

Now just hit Finish.

From here it will create the grid.

Now, navigate to File > Export > Release Build.

Pretty straight forward from here on.

Finished Data Grid: Demo

I hope this helped you with learning a nice feature of Adobe Flex.

MySQL Table, used for example.

CREATE TABLE IF NOT EXISTS `percent` (
`per_id` int(11) NOT NULL auto_increment,
`per_num` varchar(255) NOT NULL,
PRIMARY KEY (`per_id`)
) ENGINE=InnoDB;

1. Lets start with the MySQL Connection, I named this file dbcommon.php. Besure to change the username, password and database to your own.

mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("databasename") or die(mysql_error());

2. function.php will contains the script for the query and bar. I setup the 4 function examples as in the demo.

function percent_full(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($full = mysql_fetch_array( $result )) {
		echo '





'.($full['per_num']).'%
id:'.($full['per_id']).'


		';
	 } 

}

function percent_button(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($button = mysql_fetch_array( $result )) {
		echo '







		';
	 }

}

function percent_donation_full(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_full = mysql_fetch_array( $result )) {
		echo '



 $'.($donation_full['per_num']).'





		';
	 } 

}

function percent_donation_button(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_button = mysql_fetch_array( $result )) {
		echo '



 $'.($donation_button['per_num']).'





		';
	 } 

}

3. style.css page will control the way the bars are shown.

@charset "utf-8";
#no-margin {
margin:0px;
}
/* Begin Percentage Bar Full */
#bar_wrap_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_full div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_full div.num {
text-align:center;
}

#bar_wrap_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar Button */
#bar_wrap_button {
width:24px;
height:106px;
background: url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_button div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_button div.num {
text-align:center;
}

#bar_wrap_button div.overlay {
background: url(img/stripes.png) bottom;
width:24px;
height:auto;
}

/* End Percentage Bar Button */

/* Begin Percentage Bar Full */
#bar_wrap_donation_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_full div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_full div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar button */
#bar_wrap_donation_button {
width:24px;
height:106px;
background:url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_button div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_button div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_button div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

4. index.php
Lets add the database connection and functions.

include('dbcommon.php');
include('function.php');

in the body we will call the functions.

percent_full();

percent_button();

percent_donation_full();

percent_donation_button();

Visit: www.TheLaw.com

What is TheLaw.com?

TheLAW.com™ is a free friendly, online environment where lawyers and non-lawyers can find and share all types of legal information, including participating in a free legal discussion forum to find others who have shared a similar legal problem or experience, locate legal resources such as free legal help guides and searching New York State laws, find a lawyer to retain or obtain a free case review, find legal jobs, and much more.

TheLAW.com™ was founded in 1994 by Michael M. Wechsler when he was a law school student, hoping to help the general public deal with the significant challenges that our legal system presents to non-lawyers. All too often, people encounter legal problems that are either too small to involve an attorney or do not have the means to afford retaining a lawyer. TheLaw.com is the web site that helps those that need free legal assistance obtain the help they need and connects clients who need professional help in retaining an appropriate attorney.

In February of 2000, TheLAW.com was acquired by a seperate financial investment group featuring the Honorable Mayor Ed Koch, former judge of The People’s Court. The company appeared on the front page of the business section of the New York Times. Later in 2002, TheLaw.com was returned to Mr. Wechsler, who provided it with a new direction that mirrored the founder’s goals. Since then, the site has grown to tens of thousands of members and features a voluminous amount of legal content that is updated regularly.