Posted on Leave a comment

Three Types of WPYUI Themes

Hybrid Child Theme, extended functionalities by WPYUI.com

WordPress.com themes based on Yahoo! UI Library is initiated by Yikwanak Kole and right now being updated after a few months by two other people interested in the work initiated some 10 years ago.

All WPYUI Themes are build based on the Rock-Solid Hybrid Theme Framework by Justin Tadlock.

I know that Justin already developed a new Theme Framework that he calls “Stargazer”, for Yikwanak Kole, the original Hybrid Theme framework is still the best and most logical as well as most expandable theme framework for basic wordpress learners.

WPYUI Themes appear in three major types. The first one is more simple and pure form of YUI WP Themes. Please visit http://yikwanak.com/kole/ to see this simple theme, as well as http:// melanesia.one and http:// papua.one

THis is “SImple YUI” Theme

Another one is primarily based on the YUI Bubbling LIbrary by Caidy Patino some years back. The colour is milky one. Please refer to http:// melanesia.net for this type.

WordPress Bubbling Library Theme
WordPress Bubbling Library Theme

The third one is as can be seen here http://yikwanak.com and http://wpyui.com. This is simple but also based on YUI Bubbling LIbrary, but utilizing YUI.2.2 library.

Wordpress Post Tag on the Top Right of Header by Jhon Kwano www.wpyui.com
WordPress Post Tag on the Top Right of Header by Jhon Kwano www.wpyui.com
Posted on Leave a comment

PHP Ease YUI Class Based WordPress Theme

This WordPress theme framework is a custom implementation of our Page class. Tailor made to simplify the process of creating a WordPress theme, while giving you total flexibility and control afterwards. This class will completely separate your page’s content from it’s layout, freeing you from establishing an ugly foundation of inflexible divs. This framework is the cure for the common divitis.

The PHP Ease WordPress Theme Framework is somewhat stylish in it’s own right, but if you don’t make any changes to suit your fancy then you’re not seeing the big picture. Making changes with this framework is so easy, you’ll be a professional WordPress Theme Designer in no time. I have prepared a sample Child Theme that you can use for your own personal playground.

The WordPress Theme Framework that this author develops is quite interesting. He uses classes for each function.

Posted on Leave a comment

Transcript — Jenny Donnelly: “Hacking with YUI”

Transcript:

Hi everybody, welcome to Hacking with YUI. I’m Jenny Donnelly, and I’m an engineer on the YUI team, and today I want to give you a whirlwind tour of the YUI Library, and give you some ideas of how to use YUI for your hacks, or your rapid prototyping, and leave you with some sample code that you can actually copy and paste right into your page to get started really fast as well.

So let’s just get started. The approach I’m going to take today is to break down YUI into different ways that you might want work with it for your hacks. The YUI library itself is actually a pretty comprehensive framework of utilities and widgets, that’s meant to help you guys, the developers, build rich, interactive web applications. And the way you do that, you can think of it as four different building blocks — to send and receive data; to build actual user interfaces on your page; to display data in a meaningful and interactive way; and to edit data in a roundtrip fashion, from the end user back to your server.

So to start, we’ll talk about how you might use YUI to send and receive data. The Connection Manager‘s kind of a flagship utility that enables in-page Ajax types of data transactions, using the XMLHttpRequest. The great thing about that, of course, is you no longer have to take your user off of a web page to send and receive your data, and it enables a really rich, interactive transaction model, where you have a full application on a web page, and your user can interact with your server application without actually leaving that page.

Now, the Get Utility will dynamically load script nodes onto a page, and also will pull CSS resources as well. And it can do this at runtime, again, without having the end user leave your webpage. You can now go and get these resources at runtime. And the nice thing about the Get Utility is that it kind of bypasses the built-in browser security restrictions, so now you can actually go get resources from third party or external URLs that are not on your domain. So keep that in mind.

And the Data Source Utility is a layer that sits on top of the Connection Manager, or the Get Utility, and it is a value added feature set that can enable caching and pulling of your data requests. And it also provides a widget normalization layer, so you can use the data source to interact with widgets like AutoComplete, DataTable, and Charts, to go and fetch data from a known place, and have all of those widgets interact with a single data source, so maybe share a cache, for instance.

So here’s the YQL console —I don’t know if you guys have had a chance to check it out yet, but this makes it so easy, now, to go and access data, and all kinds of data, from the Yahoo! Network, as well as off the network now, as well. But what I’ve done here is just to give you a sense of how quick and easy it is to go ahead and access this data now. So in that first box, what I’ve done is set up a SQL-like query to go and get some data —this is getting a forecast from the weather feed for a particular zip code. And notice that I can choose to format that data as XML, or JSON, so I’m just going to stick with JSON. And notice that callback function —it’s called “cdFunc” —and that’s the default that you can use, that the console gives me. Keep your eye on that later —that’s the hook through which we’re now going to access the data on our page.

So I’ve set up my query, and this is the data that I’m going to go look for. It’s really easy that you can browse all the different tables of data that YQL has to offer. And up in the top right, there, those are actually pre-canned queries to give you a sense of different types of queries that you can perform now. But the real no-brainer part happens in the rest query, the URL there. That’s the part of the console where you can just copy and paste that part of the URL now, and go and get that data and work with it on your web page. So the idea is, you click the copy URL button, and now you can paste it right into a call to the Get Utilities. So we’re going to call this static method Script and just paste that URL right in there. So now what the Get Utilities going to do is dynamically load a script node pointing to that data —and all we have to do, as developers, is define this callback function. And so you can call that function whatever you want —you can go back to the console and re-name it, if you want, but this is the default so we’ll just go with that for now. So the idea is you can define that function to work with that data payload however you want, and that data payload is passed to you as the O argument there.

So going back to the console, I can see the TreeView version of the data —this is the live data snapshot of what’s going to come back to me —and I can drill down and figure out what parts of the data that I want to use, and figure out how to locate that in my JSON now. So you can see there is an item node, and under there there’s are links, or descriptions —so we can pull out different pieces of data that we want to work with, and given that kind of TreeView structure we can now drill down into the JSON and actually start working with it.

So now I’m going to define the callback function, and drill down into the O —Object. The first thing I do is just a quick sanity check to make sure the data is formatted in the way that I’m expecting—if not, you might want to have some sort of exception case to throw a data error message, or something like that. But so if it passes that sniff test, I can go ahead and drill down into “query.results.channel”—different data tables will have different formats of course—and output that data into a DIV live at runtime on the page. So I’ll just populate the innerHTML of the DIV, and call “data.description” and “data.item.description”—these are little pieces of the weather data feed now, that’s going to come back for my URL that I’ve put in. And all of a sudden you’ve got this really real-time weather forecast module on your page.

And that’s how easy it is, with the Get Utility, to make that cross domain request now, and work with that data on your page. YQL makes that super easy now—you don’t even have to dig around for the data in random places, it’s all in one place. The nice thing, also, of course with YQL, is that you can access the data super easily, but also pull it together—different data tables—and manipulate them within that console. And it’ll spit out that rack URL for you to populate the Get Scripts method.

More HERE
EXAMPLES to Dowlnoad here

Posted on Leave a comment

WordPress – Creating Tab Menus with Yahoo! YUI Tab View

The Yahoo! User Interface Library (YUI) is a set of JavaScript utilities and controls, for building interactive web applications. The YUI Tab View is part of that vast library – – it help you to quickly create and design Tab Menus.
The advantage of Tab Views is that they allow you add more content to your web page whilst occupying less space. If well done they won’t slow down website-browsing.

If you’re using the Ndomche Summary Theme – II Columns for WordPress or Blogger, then the best place to insert this tabbed menu is the header — like on this blog. Don’t bother to contact me for more info.

The Steps, please go Here

Posted on Leave a comment

Beginning AJAX using the YUI Library

Preparation Step:
Create a text file and save it at include.html. Include some basic html in this page.

<h1>Hello World</h1>
<p>This is my first AJAX call</p>

Now, let’s set up our first AJAX web page using the YUI library. Our page will simply include the content from include.html when a button is pressed. Let’s begin….

Step 1: Start a new XHTML document with a typical template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My First Ajax using the YUI Library</title>
</head>
<body>
</body>
</html>

Step 2: Adding script calls to include the YUI library components we will be using.

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" 
   type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" 
   type="text/javascript"></script> 

Notes:

  • As we discussed in the earlier blog entry “Including Javascript in XHTML , you must include the type attribute, but do not include the language attribute.
  • While in production you should put these calls at the end of your body, for this exercise, go ahead and put these in your header (after the meta character type and the title).
  • These scripts include minimized versions of the YUI library. Minimized means that the code base was minimized, with extra characters, comments and spacing removed. This makes the file smaller so the bandwidth is less, but it makes it human un-readable. The full version can be downloaded from The YUI distribution library.

Step 3: Create a <div> with an id in the body of your page and a link that will call the AJAX function. The div will be filled with the response from our AJAX call. Include an onclick event handler in the link. There will be another tutorial soon on using the YUI event utility to dynamically include event handers (separating presentation from the content). Make sure that the link’s href leads to a real page. Web standards and accessibility guidelines state that all links should really be links!

<div id="mydiv>
</div>  
<p><a href="/include.html" onclick="callAJAX(); return false;">
    My first AJAX</a></p>

Step 4: Add a script tag to your page. This is where we are going to put all the javascript AJAX functionality

<script type="text/javascript">
  //<![CDATA[  		

  //]]> 
</script>

This is what we have thus far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My First Ajax using the YUI Library</title>
<script src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv">
</div>
<p><a href="/include.html" onclick="">My first AJAX</a></p>

<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</body>
</html>

Save your file as myfirstajax.html. The script we write will be added between the CDATAopen and closing tag. For more on why we use CDATA, refer to the entry on how toInclude Javascript in XHTML. If you prefer, you can make a single external javascript call and add everything to that external file. If you open it up in a browser all you should see in one link that reads “My first Ajax”. The page should validate.

Step 5: Add the YUI Connection Manager utility line of code that initiates an asynchronous transaction. Put this line of code in your javascript:

var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);

Explanation:

  • The YAHOO.util.Connect.asyncRequest method starts an XMLHttpRequest. It returns a transaction object that has properties that you can use, including status, responseText, responseXML and tId.
  • The first argument is the HTTP method. We will cover POST and GET. The YUI connection manager also supports other HTTP methods, but POST and GET are the most common. Think of the XMLHttpRequest as a form submission: choose the HTTP method the same way you would choose a form submission method.
  • The second argument is the URL to which you are submitting the XMLHttpRequest. Think of it as a form action. It is the response page we are requesting.
  • callback, the third argument, is a series of functions that we will define to handle the server response.
  • The fourth argument is only used if the first method is 'POST'. Since we are using 'GET', we can set it to null or omit it. If we were using POST, the fourth argument would accomodate our POST message.

Step 6: Define the second parameter: the URL.  The second parameter needs to be set to the URL of the file we want to interact with asynchronously.  In this case we are simply going to include our static page — include.html — created in the preperation step before step 1.

var sUrl = "include.html";

Step 7: Define the third argument: the callback. We’ll add alerts so you can test at this point to see if it works. We’ll replace the success function after we test to see if everything is working thus far. success is the handler code that executes when the XMLHttpRequest is successful. failure is the handler code that executes if the XMLHttpRequest is unsuccessful.

var callback = { success: function(o) { alert(“AJAX Works”); //SUCCESS }, failure: function(o) { alert(“AJAX doesn’t work”); //FAILURE } }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>My First Ajax using the YUI Library</title>
 <script src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" type="text/javascript"></script>
 <script src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js" type="text/javascript"></script>
 <script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>
 </head>
 <body>
 <div id="mydiv">
 </div>
 <p><a href="/include.html" onclick="callAJAX(); return false;">My first AJAX</a></p>

<script type="text/javascript">
 //<![CDATA[

var sUrl = "include.html";
 var callback = {
 success: function(o) {
 alert("AJAX Works"); //SUCCESS
 },
 failure: function(o) {
 alert("AJAX doesn’t work"); //FAILURE
 }
 }

var transaction = YAHOO.util.Connect.asyncRequest(‘GET’, sUrl, callback, null);

//]]>
 </script>
 </body>
 </html>

Step 8: Save everything and upload both include.html and myfirstajax.html into the same directory on your server. Open http://www.yourserver.com/yourfolder/myfirstajax.html in a browser. If you have an error in your code or didn’t load include.html and myfirstajax.htmlinto the same directory, you’ll get the “”AJAX doesn’t work” alert. If you copy the code in the box above, and uploaded both files correctly into the same directory on your server, you will get the “AJAX Works” alert. If all is good, continue.

Step 9: Our goal for this project is to make the content from your external file
include.html appear on your page. We’ve created a connection to our file. We created a place holder div in step 3 with <div id="mydiv>
</div>
. We are going to target this div, and insert the content from include.html into the div with innerHTML.

Replace

 success: function(o) {
	alert("AJAX Works"); //SUCCESS 
    },

with

 success: function(o) {
    	document.getElementById('mydiv').innerHTML =  o.responseText;
    },

The left hand side of the above statement uses the DOM to target the content of mydiv.  The function takes the responseText value of the transaction and replaces mydiv’s innerHTML with the content retrieved by the XMLHttpRequest. Save, upload and test again!

Step 10: The power of AJAX is being able to make a XMLHttpRequest and altering the content of the page once the page is already loaded. Let’s change our code so that instead of loading include.html while we load the page, we load it dynamically when we click on our link. We included the onclick event handler in the link in step 3.  In a future tutorial we will use the YUI event library to dynamically attach an event handler to our link, thereby seperating content from presentation.

Encapsulate the javascript into a function.  Our onclick event handler in step 3 reads <a href="/include.html" onclick="callAJAX(); return false;">, so we will call our functioncallAJAX().

function callAJAX(){
	var sUrl = "include.html";
	var callback = { 
		success: function(o) {
			document.getElementById('mydiv').innerHTML =  o.responseText;
			}, 
		failure: function(o) {
			alert("AJAX doesn't work"); //FAILURE
			}
		} 

	var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
}

 

The return is included in the eventhandler, so we don’t need to add it to the function. You could also have written the event handler as:

<a href="/include.html" onclick="return callAJAX();">

and added the return to the callAJAX function right before the function close:

 var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null); 
	return false; 
	}