oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgraded yui to 2.2.2 and yui-ext to 1.0.1a

Browse source
This commit is contained in:
JT Smith 2007-07-05 04:23:55 +00:00
parent 4d9af2c691
commit 547ced6500
1992 changed files with 645731 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

112
www/extras/yui/examples/connection/abort.html Normal file
View file

@ -0,0 +1,112 @@
<html>
<head>
<script src="../../build/yahoo/yahoo-min.js"></script>
<script src="../../build/connection/connection-min.js"></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
<style>
fieldset {
width: 500px;
}
</style>
</head>
<body>
<h1> Connection Manager Transaction Timeout</h1>
<p>
The following code example provides a step-by-step approach to presetting a transaction timeout.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">
<script src="yahoo.js"></script>
<script src="connection.js"></script>
</textarea></pre>
<h3>The Callback Object</h3>
<p>The callback object includes a new property: timeout. To enable a transaction to automatically timeout, the timeout property must be defined wih a value in millseconds. This example defines timeout with a value of 5000(milliseconds). If the transaction is not complete by 5000ms, it will be aborted.</p>
<pre>
<textarea name="code" class="JScript" cols="60" rows="1">
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "Transaction id: " + o.tId;
div.innerHTML += "HTTP status: " + o.status;
div.innerHTML += "Server response: " + o.responseText;
div.innerHTML += "Argument object: property foo = " + o.argument.foo +
"and property bar = " + o.argument.bar;
}
}
var handleFailure = function(o){
div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
var callback =
{
success:handleSuccess,
failure: handleFailure,
argument: { foo:"foo", bar:"bar" },
timeout: 5000
};
</textarea>
</pre>
<h3>Initiate the Transaction</h3>
<p>
Call YAHOO.util.Connect.asyncRequest to send the request to sync.php. The PHP file will return a string message after a random delay of 0 to 10 seconds, if the transaction was not aborted. If the transaction was successfully aborted, the response object's status property will report -1 and the statusText property will report "transaction aborted".
</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">
var sUrl = "php/sync.php";
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
</textarea></pre>
<div id="container"></div>
<script>
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
div.innerHTML += "<li>Server response: " + o.responseText + "</li>";
div.innerHTML += "<li>Argument object: Object ( [foo] => " + o.argument.foo +
" [bar] => " + o.argument.bar +" )</li>";
}
}
var handleFailure = function(o){
div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
var callback =
{
success: handleSuccess,
failure: handleFailure,
argument: { foo:"foo", bar:"bar" },
timeout: 5000
};
var sUrl = 'php/sync.php';
function makeRequest(){
var obj1 = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
var obj2 = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}
</script>
<form><input type="button" value="Create Two Transactions" onClick="makeRequest();"></form>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

120
www/extras/yui/examples/connection/get.html Normal file
View file

@ -0,0 +1,120 @@
<html>
<head>
<script src = "../../build/yahoo/yahoo-min.js" ></script>
<script src = "../../build/connection/connection-min.js" ></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
</head>
<body>
<h1> Connection Manager GET Transaction</h1>
<p>
To construct a GET transaction using the Connection Manager, you will need to construct a querystring of key-value pairs and append it to the URL.
The following code example provides a step-by-step approach to creating a simple GET transaction.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"><script src="yahoo.js"></script>
<script src="connection.js"></script></textarea></pre>
<h3>Assemble the Querystring</h3>
<p>Construct a querystring with two key-value pairs of <em>username = anonymous</em> and <em>userid = 0</em>:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"> /*
*
* Create a querystring with example key-value pairs of
* username and userid. Remember to encode the querystring
* if and when the string contains special characters.
*
*/
var sUrl = "php/get.php?username=anonymous&userid=0";</textarea></pre>
<h3>The Callback Object</h3>
<p>Create a callback object to handle the response, and pass an object literal to both success and failure as the argument.</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "&lt;li&gt;Transaction id: " + o.tId + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;HTTP status: " + o.status + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Status code message: " + o.statusText + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;HTTP headers: &lt;ul&gt;" + o.getAllResponseHeaders + "&lt;/ul&gt;&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Server response: " + o.responseText + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Argument object: Object ( [foo] =&gt; " + o.argument.foo +
" [bar] =&gt; " + o.argument.bar +" )&lt;/li&gt;";
}
}
var handleFailure = function(o){
if(o.responseText !== undefined){
div.innerHTML = "&lt;li&gt;Transaction id: " + o.tId + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;HTTP status: " + o.status + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Status code message: " + o.statusText + "&lt;/li&gt;";
}
}
var callback =
{
success:handleSuccess,
failure: handleFailure
argument: { foo:"foo", bar:"bar" }
};</textarea></pre>
<h3>Initiate the GET Transaction</h3>
<p>Call YAHOO.util.Connect.asyncRequest to send the request to get.php,
and the PHP file will return the output of $_POST via <strong>print_r()</strong>.
The handleSuccess callback will print the response object's properties, including
the server response data.
</p>
<p>
Note: Caching and GET idempotency.
</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);</textarea></pre>
<div id="container"></div>
<script>
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
div.innerHTML += "<li>Server response: " + o.responseText + "</li>";
div.innerHTML += "<li>Argument object: Object ( [foo] => " + o.argument.foo +
" [bar] => " + o.argument.bar +" )</li>";
}
}
var handleFailure = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
}
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument: { foo:"foo", bar:"bar" }
};
var sUrl = "php/get.php?username=anonymous&userid=0";
function makeRequest(){
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}
</script>
<form><input type="button" value="Send a GET Request" onClick="makeRequest();"></form>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

23
www/extras/yui/examples/connection/index.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Connection Manager</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../docs/assets/examples.css">
</head>
<body>
<div id="doc">
<div id="hd">
<img src="../../docs/assets/logo.gif">
<h1>YUI Library - Connection Manager</h1>
</div>
<div id="bd">
<ul id="examples">
<li><a href="get.html">GET Transaction</a></li>
<li><a href="post.html">POST Transaction</a></li>
<li><a href="weather.html">Retrieving a Y! Weather RSS Feed</a></li>
<li><a href="abort.html">Automatic Transaction Timeout </a></li>
</ul>
</div>
</div>
</body>
</html>

3
www/extras/yui/examples/connection/php/get.php Normal file
View file

@ -0,0 +1,3 @@
<?php
print_r($_GET);
?>

3
www/extras/yui/examples/connection/php/post.php Normal file
View file

@ -0,0 +1,3 @@
<?php
print_r($_POST);
?>

18
www/extras/yui/examples/connection/php/sync.php Normal file
View file

@ -0,0 +1,18 @@
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// always modified
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
// HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
$num = mt_rand(0,10);
sleep($num);
echo('<span>This request responded in '.$num.' seconds. </span>');
?>

19
www/extras/yui/examples/connection/php/weather.php Normal file
View file

@ -0,0 +1,19 @@
<?php
header("Content-Type:text/xml");
$url = 'http://xml.weather.yahoo.com/forecastrss?'.getenv('QUERY_STRING');
function getResource($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$feed = getResource($url);
echo $feed;
?>

102
www/extras/yui/examples/connection/post.html Normal file
View file

@ -0,0 +1,102 @@
<html>
<head>
<script src = "../../build/yahoo/yahoo.js" ></script>
<script src = "../../build/connection/connection-min.js" ></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
</head>
<body>
<h1> Connection Manager POST Transaction</h1>
<p>
To construct a POST transaction using the Connection Manager, you will need to construct a data string as the POST message. The following code example provides a step-by-step approach to creating a simple POST transaction.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"><script src="yahoo.js"></script>
<script src="connection.js"></script></textarea></pre>
<h3>Assemble the POST message</h3>
<p>Construct an example of key-value string of <em>username = anonymous</em> and <em>userid = 0</em>:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">/*
* Remember to encode the key-value string if and when
* the string contains special characters.
*/
var postData = "username=anonymous&userid=0";
</textarea></pre>
<h3>The Callback Object</h3>
<p>Create a callback object to handle the response and pass an array of values to success and failure as the argument.</p>
<pre>
<pre><textarea name="code" class="JScript" cols="60" rows="1">var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "Transaction id: " + o.tId;
div.innerHTML += "HTTP status: " + o.status;
div.innerHTML += "Status code message: " + o.statusText;
div.innerHTML += "&lt;li&gt;HTTP headers: &lt;ul&gt;" + o.getAllResponseHeaders + "&lt;/ul&gt;&lt;/li&gt;";
div.innerHTML += "PHP response: " + o.responseText;
div.innerHTML += "Argument object: " + o.argument;
}
}
var callback =
{
success:handleSuccess,
failure: handleFailure,
argument: ['foo','bar']
};
</textarea></pre></pre>
<h3>Initiate the POST Transaction</h3>
<p>
Call YAHOO.util.Connect.asyncRequest to send the request to post.php, and the PHP file will return the a readable output of $_POST via <strong>print_r()</strong>. The handleSuccess callback will print the response object's properties, including the server response data.
</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
</textarea></pre>
<div id="container"></div>
<script>
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
div.innerHTML += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders + "</ul></li>";
div.innerHTML += "<li>PHP response: " + o.responseText + "</li>";
div.innerHTML += "<li>Argument object: Array ([0] => " + o.argument[0] +
" [1] => " + o.argument[1] + " )</li>";
}
};
var handleFailure = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};
var sUrl = "php/post.php";
var postData = "username=anonymous&userid=0";
function makeRequest(){
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
}
</script>
<form><input type="button" value="Send a POST Request" onClick="makeRequest();"></form>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

183
www/extras/yui/examples/connection/weather.html Normal file
View file

@ -0,0 +1,183 @@
<html>
<head>
<script src = "../../build/yahoo/yahoo-min.js" ></script>
<script src = "../../build/connection/connection-min.js" ></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
<style>
#wform {margin-top:1em;}
</style>
</head>
<body>
<h1> Retrieving a Y! Weather RSS Feed</h1>
<p>
This example demonstrates how to use the Connection Manager and a PHP proxy -- to work around XMLHttpRequest's same-domain policy &mdash; to retrieve an XML document from http://xml.weather.yahoo.com/forecastrss.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file</p>
<textarea name="code" class="JScript" cols="60" rows="1">
&lt;script src="yahoo.js"&gt;
&lt;script src="connection.js"&gt;
</textarea>
<h3>Callback Object and the Weather RSS</h3>
<p>Yahoo! Weather RSS will return an XML document if the transaction is successful. The following callback object with success and failure handlers is used to process the response.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// This is the response display container
var div = document.getElementById('weatherModule');
// This is a reference to the HTML form.
var oForm = document.getElementById('wForm');
/*
* This method will traverse the response XML document and build a
* simple HTML module comprised of data from the following tags:
*
* Data in the first <title> tag in the document.
* Data in the first <lastBuildDate> tag in the document.
* HTML from the second <description> tag in the document.
*
*/
function successHandler(o){
var root = o.responseXML.documentElement;
var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;
// Format and display results in the response container.
div.innerHTML = "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode;
}
/*
*
* This is a simple failure handler that will display
* the HTTP status code and status message if the resource
* returns a non-2xx code.
*
*/
function failureHandler(o){
div.innerHTML = o.status + " " + o.statusText;
}
</textarea>
<h3>Assemble the Querystring and Initiate the Transaction</h3>
<p>The Yahoo! Weather RSS feed requires a simple HTTP GET request, with a base URL and a parameters querystring. In this example, we will use the following parameters:</p>
<ul>
<li>p - location as U.S. Zip Code or Location ID</li>
<li>u - temperature units</li>
</ul>
<p>The following are some example location IDs (do not include the city name):</p>
<ul>
<li>Beijing: <em>CHXX0008</em></li>
<li>Helsinki: <em>FIXX0002</em></li>
<li>London: <em>UKXX0085</em></li>
<li>Moscow: <em>RSXX0063</em></li>
<li>Munich: <em>GMXX0087</em></li>
<li>Paris: <em>FRXX0076</em></li>
<li>Riyadh: <em>SAXX0017</em></li>
<li>Tokyo: <em>JAXX0085</em></li>
</ul>
<p>For more details on the Y! Weather RSS feed and other location IDs, please visit <a href="http://developer.yahoo.com/weather/index.html">http://developer.yahoo.com/weather/index.html</a>.
<p>Function getModule retrieves the input values for location and temperature and creates a querystring.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function getModule(){
// retrieve the field values for the zip code
// input and the unit input.
var sLocation = oForm.elements['zip'].value;
var sUnit = oForm.elements['unit'].value;
// entryPoint is the base URL
var entryPoint = 'php/weather.php';
// queryString is the key-value pairs of zip and unit.
var queryString = encodeURI('?p=' + sLocation + '&' + 'u=' + sUnit);
var sUrl = entryPoint + queryString;
// Initiate the HTTP GET request.
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, { success:successHandler, failure:failureHandler });
}
</textarea>
<h3>Proxy and Response</h3>
<p>
Once weather.php receives the querystring, it will construct and send an HTTP GET using CURL to retrieve the results from the Yahoo! Weather RSS feed. This allows the transaction to succeed while working around XMLHttpRequest's security policy.
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
<?php
// Since the result is an XML document, the Content-type
// header must be set to "text/xml" for the data to be
// treated as XML and to populate responseXML.
header("Content-Type:text/xml");
// $url is the resource path of the Y! Weather RSS
// with the appended querystring of zip code/location id and
// temperature unit.
$url = 'http://xml.weather.yahoo.com/forecastrss?'.getenv('QUERY_STRING');
// This function initializes CURL, sets the necessary CURL
// options, executes the request and returns the results.
function getResource($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
// Call getResource to make the request.
$feed = getResource($url);
// Return the results.
echo $feed;
?>
</textarea>
<form id="wForm">
<fieldset>
<label>Zip Code or Location ID</label> <input type="text" name="zip" value="94089">
<p>Please enter a U.S. Zip Code or a location ID to get the current temperature. The default is Zip Code 94089 for Sunnyvale, California; its location ID is: USCA1116.</p>
</fieldset>
<fieldset>
<label>Unit</label> <input type="text" name="unit" length="1" maxlength="1">
<p>Enter *F* for Fahrenheit or *C* for Celsius temperature unit.
</fieldset>
<div id="weatherModule"></div>
<input type="button" value="Get Weather RSS" onClick="getModule()">
</form>
<script>
var div = document.getElementById('weatherModule');
var oForm = document.getElementById('wForm');
function successHandler(o){
var root = o.responseXML.documentElement;
var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;
div.innerHTML = "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode;
}
function failureHandler(o){
div.innerHTML = o.status + " " + o.statusText;
}
function getModule(){
var iZip = oForm.elements['zip'].value;
var sUnit = oForm.elements['unit'].value;
var entryPoint = 'php/weather.php';
var queryString = encodeURI('?p=' + iZip + '&' + 'u=' + sUnit);
var sUrl = entryPoint + queryString;
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, { success:successHandler, failure:failureHandler });
}
</script>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>