Home >
The promise of JavaScript/CSS libraries like the free, BSD-licensed Yahoo! User Interface (YUI) Library is that they make it easier to create rich interfaces in the browser. In this article, we'll explore the creation of a simple web app using YUI and look closely at the YUI paradigm.
Getting Started
YUI consists of several CSS components and nearly three dozen JavaScript components, all of which are designed to empower the rapid creation of web applications that run in all the major web browsers. Yahoo! uses a Graded Browser Support approach in which we "white-list" a subset of browsers that we'll fully support — we call these the "A-Grade browsers," and, taken together, they represent more than 90% of traffic on Yahoo!'s network worldwide. YUI is tested and supported in all A-Grade browsers (including current versions of Safari, Opera, Firefox and Internet Explorer).
The best way to think about YUI and what it does for you is to consider the difference between the user interface language of the browser as compared with the desktop. In the browser, the "default" language is relatively limited. You have form elements (buttons, select menus, text inputs) and hyperlinks. On the desktop, you expect much more: Tabs, sliders, cascading menus, dialogs, tooltips, data grids, rich text editing, drag and drop, animation, autocompletion, and so on. Here's one way to visualize this difference, with the browser's native UI elements on the left and the richer set of desktop-style UI elements on the right:
In the browser, everything on the right side of this diagram requires some hard work. YUI, like other JavaScript/CSS libraries, aims to make that work less hard.
Getting to Know YUI
The best way to get to know YUI is to take a quick tour of the YUI website at http://developer.yahoo.com/yui/. You'll find that YUI contains four CSS components, a light JavaScript core engine (containing powerhouse elements like DOM normalization and an event system), JavaScript utilities (components like Drag & Drop that enable you to build rich interactions), widgets (fully-encapsulated user interactions like a Calendar date-picker), and developer tools.
CSS Components
JavaScript Core
Utilities
For each YUI component, you'll find on the website the following resources to help you get started:
User's Guide: Every YUI building block is fully documented with a User's Guide that steps through the most basic use cases. These documents also provide information about common configuration options, component-level events, customization strategies, and UI styling/skinning.
Cheat Sheets are printable one-page documents that summarize a component's API, configuration options, and common use cases. You can download the full cheat sheet packet from the YUI website — it makes for a useful desk reference as you work through YUI-based projects.
API Documentation: YUI's full, searchable API is available for review, including method, property, event, and source references.
Examples: Every YUI component ships with a full complement of examples covering common use cases.
Building Your First Application
The best way to get the feel for YUI is to build a sample application — so let's get started. In our sample application, we'll use the YUI AutoComplete Control powered by the Yahoo! Search web service to supercharge a standard site-search form. As a user types a search on our site (or sites), AutoComplete will query Yahoo! Search for possible results; when it finds pages that match the query, it will open a suggestion container with a menu of results for the user to choose from. This is equivalent to having the first page of search results come back on-the-fly. The user doesn't have to navigate to the results page; s/he doesn't even need to finish typing in the search terms, in some cases.
Once the container is open, the user can click on a result or arrow to a result using the keyboard; in the latter case, the enter key sends the user to the selected page.
Here's a screenshot of the app in its finished state:
Here are our requirements and the YUI components we need to meet those requirements:
Armed with this knowledge about our dependencies, we can go to the YUI Configurator on the YUI website and let it determine the full list of YUI files we'll need for our implementation.
Take the output of the Configurator and put the stylesheet and script information in the element of your document. Now we're ready to start writing our application.
Setting Up the Markup
The markup for our application is simple: We need a form, a text input, and a submit button for the basic form, and we need an element to serve as the suggestion container to be populated by AutoComplete. We'll add some Yahoo! Search-specific hidden fields to our form to ensure that, if submitted, results will only be returned for the sites we've selected:
Adding AutoComplete to Your Search Form
From the functioning markup base, we can begin implementing the YUI components that we added to the head of the page. In any AutoComplete implemenation, we begin by creating a DataSource — effectively, establishing the pool of "suggestions" that AutoComplete can choose from in populating its suggestion container. You can read about the various kinds of AutoComplete DataSources on the AutoComplete User's Guide — they include basic JavaScript arrays, custom JavaScript functions, and XMLHttpRequest-based services, and script-node sources. (If you're playing around with this code, you may also want to print out a copy of the AutoComplete Cheat Sheet.) In this application, we'll use the script node solution which allows us to access cross-domain data from Yahoo! Search without using a server-side proxy. (Security note: You should never access cross-domain JavaScript from untrusted sources. In this case, we're trusting the Yahoo! Search webservice not to return a malicious script.)
Here's our code to set up the DataSource:
The schema array is important; these fields map to fields passed in by the JSON web service we are using, and we'll reference these when we format the results for our suggestion container in a moment. Note that Yahoo! Search gives us a literal URL for the result page and a "click URL". The click URL is the URL we should send users through to reach a search result, as it aids Yahoo! Search in evaluating the quality of results and in sorting results more intelligently for future searches.
With our DataSource in place, we can set up our AutoComplete instance. We need to pass four arguments to AutoComplete's constructor:
Here's the annotated code for setting up the AutoComplete instance with some rational configurations applied for this kind of application:
None of these settings are sacred; feel free to play around with different configurations.
Next up, we need to format the results that AutoComplete puts in our suggestion container; we do that in our instance's formatResult function which is called for each result item. Nothing fancy in the markup...we'll simply use tags to specify page titles.
In the code above,
The function we just wrote populates the suggestion container. When a user selects an item from this container, the itemSelectEvent is fired. That's our cue to take the user to the page they selected from the search results. Let's subscribe to the itemSelectEvent and use that event to trigger navigation to the selected page:
We've snuck in a little hack here for Opera, which does not honor
One more bit of business remains before we test out our application. AutoComplete, true to its name, wants to automatically complete the text being typed in the input field when an item is selected in the suggestion container. We don't want that here. Rather, we want the input field to remain untouched while item selection takes us to the designated page. To accomplish this, we're going to customize our AutoComplete instance by overriding one of its core methods:
At this point, we've looked at:
Although each YUI component has its own set of configurations and events, you'll find that this set of implementation concerns is consistent throughout the library. Use the User's Guides, API docs, and Cheat Sheets to identify the patterns used by each component.
We're using elements of YUI's default "skin", so we will apply the controlling class name for invoking that skin (
As with most applications, there are some final touches to be made in our code to get our implementation in line with the comp we looked at earlier in this article. Here are the requisite changes to add in the footer and to correctly position the suggestion container:
With that code in place, our implementation is complete. You can check out the working example in the file
Summary
YUI is a comprehensive frontend toolkit — we've just looked at a tiny subset of its functionality here. But don't be daunted by YUI's comprehensiveness. It is, at heart, a straightforward framework on top of which you can build robust, scalable web applications that work across all the A-Grade browsers.
As you begin developing with YUI, you should consider joining the YUI community forum and subscribing to YUIBlog. In the community forum, you'll be joined by nearly 10,000 felow YUI users, many of whom have developed (and generously share) a deep expertise in specific aspects of the library. On the blog, you'll find articles and videos from the core YUI engineering team and links out to YUI resources in the community at large.
Getting Started
YUI consists of several CSS components and nearly three dozen JavaScript components, all of which are designed to empower the rapid creation of web applications that run in all the major web browsers. Yahoo! uses a Graded Browser Support approach in which we "white-list" a subset of browsers that we'll fully support — we call these the "A-Grade browsers," and, taken together, they represent more than 90% of traffic on Yahoo!'s network worldwide. YUI is tested and supported in all A-Grade browsers (including current versions of Safari, Opera, Firefox and Internet Explorer).
In the browser, everything on the right side of this diagram requires some hard work. YUI, like other JavaScript/CSS libraries, aims to make that work less hard.
Getting to Know YUI
The best way to get to know YUI is to take a quick tour of the YUI website at http://developer.yahoo.com/yui/. You'll find that YUI contains four CSS components, a light JavaScript core engine (containing powerhouse elements like DOM normalization and an event system), JavaScript utilities (components like Drag & Drop that enable you to build rich interactions), widgets (fully-encapsulated user interactions like a Calendar date-picker), and developer tools.
CSS Components
JavaScript Core
Utilities
- Animation Utility
- Browser History Manager
- Connection Manager
- Cookie Utility
- DataSource Utility
- Drag and Drop Utility
- Element Utility
- Get Utility
- ImageLoader Utility
- JSON Utility
- Resize Utility
- Selector Utility
- The YUI Loader Utility
- AutoComplete
- Button
- Calendar
- Charts
- Color Picker
- Container
- DataTable
- ImageCropper
- Layout Manager
- Menu
- Rich Text Editor
- Slider
- TabView
- TreeView
- Uploader
For each YUI component, you'll find on the website the following resources to help you get started:
Building Your First Application
The best way to get the feel for YUI is to build a sample application — so let's get started. In our sample application, we'll use the YUI AutoComplete Control powered by the Yahoo! Search web service to supercharge a standard site-search form. As a user types a search on our site (or sites), AutoComplete will query Yahoo! Search for possible results; when it finds pages that match the query, it will open a suggestion container with a menu of results for the user to choose from. This is equivalent to having the first page of search results come back on-the-fly. The user doesn't have to navigate to the results page; s/he doesn't even need to finish typing in the search terms, in some cases.
Once the container is open, the user can click on a result or arrow to a result using the keyboard; in the latter case, the enter key sends the user to the selected page.
Here's a screenshot of the app in its finished state:
Here are our requirements and the YUI components we need to meet those requirements:
- The search control should work without JavaScript, taking the user to the standard Yahoo! Search results page.
- The search suggestion container should have full arrow-key and mouse support; the YUI AutoComplete Control provides this functionality.
- The suggestion container should be animated; AutoComplete has intrinsic support for this if we include YUI's Animation Utility.
- We want to avoid using as server-side proxy (as would be required in traditional XHR/Ajax-style applications). Instead, we'll use a JSON-based webservice from Yahoo! Search and leverage YUI's Get Utility for this proxyless solution. AutoComplete implements the Get Utility for its proxyless, script-node based DataSource, so we'll make use of that.
Armed with this knowledge about our dependencies, we can go to the YUI Configurator on the YUI website and let it determine the full list of YUI files we'll need for our implementation.
Take the output of the Configurator and put the stylesheet and script information in the element of your document. Now we're ready to start writing our application.
Setting Up the Markup
The markup for our application is simple: We need a form, a text input, and a submit button for the basic form, and we need an element to serve as the suggestion container to be populated by AutoComplete. We'll add some Yahoo! Search-specific hidden fields to our form to ensure that, if submitted, results will only be returned for the sites we've selected:
You can test out the markup portion of the application in the file
1-markup.html. The expected behavior is that submitting the form takes you to Yahoo! Search, where the two designated sites are searched for results. In this article, we're using the two sites dedicated to YUI (developer.yahoo.com/yui and yuiblog.com). You can easily change this setting to specify one or more sites relevant to your own work; just keep in mind that the sites must be open to Yahoo! Search indexing.Adding AutoComplete to Your Search Form
Here's our code to set up the DataSource:
/* First, we'll create our DataSource, using the Script
Node DataSource constructor. We pass in the base URL
and the schema that we'll use to map the returned
data. */
this.oDataSource = new YAHOO.widget.DS_ScriptNode("http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&site=developer.yahoo.com&site=yuiblog.com®ion=us", ["ResultSet.Result","Title","Url","ClickUrl"]);
With our DataSource in place, we can set up our AutoComplete instance. We need to pass four arguments to AutoComplete's constructor:
- The ID of the text input element (
searchinput); - the ID of the suggestion container element (
searchcontainer); - the DataSource instance (created above;
oDataSource); - and any configurations we want to make on our AutoComplete instance for things like animation (which we'll pass in as an object literal; a list of configuration options can be found in the AutoComplete API documentation).
Here's the annotated code for setting up the AutoComplete instance with some rational configurations applied for this kind of application:
/* With all of the pieces in hand, we can now instantiate
and configure our AutoComplete instance: */
this.oAutoComp = new YAHOO.widget.AutoComplete(
"searchinput", // the input field's ID
"searchcontainer", // the suggestion container's ID
this.oDataSource, // the DataSource
{ // here, we begin our configuration options:
autoHighlight: false, //We don't want the first
//result highlighted by default.
animVert: true, //Yes, animate the suggestion
//container...
animHoriz: false, //but only vertically, not
//horizontally.
animSpeed: 0.3, //The animation should last
//0.3 seconds.
minQueryLength: 4, //Don't search for results until
//the user has entered at least
//4 characters in the input field.
useShadow: true, //Build in a drop-shadow.
prehighlightClassName: "yui-ac-prehighlight"
//Use a different highlight style
//for mouse-over than for arrow-to.
});
Next up, we need to format the results that AutoComplete puts in our suggestion container; we do that in our instance's formatResult function which is called for each result item. Nothing fancy in the markup...we'll simply use tags to specify page titles.
/* Formatting your result is the key to having a customized
look-and-feel for your AutoComplete implementation. Here,
we do a very simple markup for the result title and the
URL for the result. */
this.oAutoComp.formatResult = function(oResultItem, sQuery) {
return "<em>" + oResultItem[0] + "</em><br />" + oResultItem[1];
};
oResultItem passed to formatResult is comprised of the fields we specified in our DataSource schema: Title, Url, and ClickUrl.The function we just wrote populates the suggestion container. When a user selects an item from this container, the itemSelectEvent is fired. That's our cue to take the user to the page they selected from the search results. Let's subscribe to the itemSelectEvent and use that event to trigger navigation to the selected page:
/* What do we want to do when an item in the suggestion container
is selected (either by arrowing and hitting enter or by clicking)?
We'll subscribe to the itemSelectEvent and when it fires use its
arguments to set a new location for the current page. */
this.oAutoComp.itemSelectEvent.subscribe(function(type, args) {
/* this line works around Opera's preventDefault
bug: */
YAHOO.util.Dom.get("searchsubmit").disabled = true;
/* now, we go off to the destination page chosen by
the user from the AutoComplete suggestion list: */
location.href = (args[2][2]);
});
preventDefault in all cases; by disabling the submit button on our form when an item is selected, we can work around that bug while still allowing the form to submit normally when no item is selected via AutoComplete.One more bit of business remains before we test out our application. AutoComplete, true to its name, wants to automatically complete the text being typed in the input field when an item is selected in the suggestion container. We don't want that here. Rather, we want the input field to remain untouched while item selection takes us to the designated page. To accomplish this, we're going to customize our AutoComplete instance by overriding one of its core methods:
/* Here we'll hack AutoComplete a little bit. AutoComplete is
designed to put the selected item's primary value in the
input field. In this case, that would be the result's Title
field. We don't really want that -- we're using AutoComplete
not to do type-ahead but to map to instant results. So, we'll
suppress the standard behavior by overriding a private method
on this specific AutoComplete instance: */
this.oAutoComp._updateValue = function() {
return true;
}
- How to configure a YUI implementation and put YUI on the page;
- How to set up the markup for a progressively-enhanced YUI widget;
- How to instantiate and configure a YUI widget;
- How to subscribe to and make use of the "custom events" provided by a YUI widget;
- And how to override default behavior to get a bespoke implementation that maps to our requirements.
Although each YUI component has its own set of configurations and events, you'll find that this set of implementation concerns is consistent throughout the library. Use the User's Guides, API docs, and Cheat Sheets to identify the patterns used by each component.
With this code in place, our implementation is functional (though not as pretty as we want just yet, and not quite complete). We can look at this partial code milestone in 2-partial.html. Don't worry about how it looks yet — just note that it's functional and ready for some finishing touches.
Finishing Touches
To get the final look-and-feel from our requirements document, we need to add some CSS styling. We're going to center the search control in the middle of its host element; Jenny Han Donnelly, AutoComplete's author, has a nice tutorial on the CSS and JS customizations required for this purpose.
Here's the CSS portion:
<style type="text/css">
#sitesearch {text-align:center; position:relative;}
#searchinput {position:static;width:30em; font-size:11px; font-weight:bold; width:30em;}
#searchcontainer {text-align:left; width:34em; }
#searchcontainer .yui-ac-bd {font-size:10px; color:#666; background-color:#E1E7F3; text-align:left;}
#searchcontainer li {overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
#searchcontainer em {font-style:normal; font-weight:bold; color:#000033;}
.yui-ac-ft {padding:3px; font-size:10px; text-align:right;}*/
</style>
yui-skin-sam) at the top level of our document (it need only be a parent element of the skinned control, but if you are only using one skin on a given page it is convenient to place the style on the document's <body> element. You can read more about skinning YUI on the YUI website.As with most applications, there are some final touches to be made in our code to get our implementation in line with the comp we looked at earlier in this article. Here are the requisite changes to add in the footer and to correctly position the suggestion container:
/* We want to have, at the bottom of the search container, a
link making it obvious to the user how s/he can find *all*
results for the current query. We'll use AutoComplete's
built-in footer mechanism for that, adding a link to which
we'll wire a form-submit event: */
this.oAutoComp.setFooter("<a id='sitesearchshowall' href='#'>View all search results.</a>");
/* Here's the wiring for the form submission on our footer link.
Note that we use the YUI Event Utility to add this listener --
this is part of YUI Core. */
YAHOO.util.Event.on("sitesearchshowall", "click", function(e) {
/* The Dom Collection's get method is similar to
document.getElementById in this instance: */
YAHOO.util.Dom.get("sitesearchform").submit();
});
/* We'll use one of AutoComplete's built-in events to position the
suggestion container directly below the input field. AutoComplete
handles this for you in non-centered implementations; for notes
on the centered implementation shown here, see Jenny Han Donnelly's
tutorial: http://developer.yahoo.com/yui/examples/autocomplete/ac_ysearch_json.html */
this.oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
var pos = YAHOO.util.Dom.getXY(oTextbox);
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
YAHOO.util.Dom.setXY(oContainer,pos);
/* Workaround for an IE6 rendering bug: */
document.getElementById("searchcontainer").style.overflow = "visible";
return true;
};
3-complete.html.Summary
YUI is a comprehensive frontend toolkit — we've just looked at a tiny subset of its functionality here. But don't be daunted by YUI's comprehensiveness. It is, at heart, a straightforward framework on top of which you can build robust, scalable web applications that work across all the A-Grade browsers.
As you begin developing with YUI, you should consider joining the YUI community forum and subscribing to YUIBlog. In the community forum, you'll be joined by nearly 10,000 felow YUI users, many of whom have developed (and generously share) a deep expertise in specific aspects of the library. On the blog, you'll find articles and videos from the core YUI engineering team and links out to YUI resources in the community at large.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Thanks, nice article.
You just have a duplicated paragraph at: Although each YUI component has its own set of configurations and events, you'll find that this set of implementation concerns is consistent throughout the library. Use the User's Guides, API docs, and Cheat Sheets to identify the patterns used by each component.
Very well researched and well written article. Although I personally have used YUI Autocomplete in the past, I'll be sharing it with folks around the office. Thanks!
Nice article, but the layout, font choice, and font size were horrific.
@Bobby -- Sorry for the formatting issues. I don't have much control over those. I hope you found some good infromation, nonetheless, about YUI and what the project offers to developers. Warm regards, Eric
One minor detail that perhaps needs addressing: When there's no search results returned, there's no autocomplete dropdown shown so there's no messaging back to the user that their search failed. That leaves things in a somewhat vague state, from a UI perspective. The user's only/natural option then is to click the submit button, which takes them to the actual SRP, which then shows "no results found". How can we display a message to the user to let them know to try different search terms?
@Jim G -- Thanks for the suggestion; I hear what you're saying. Like you, I don't see the search-suggest or "instant search" functionality replacing the search results page (SRP), and entering a search term and pressing enter/return or clicking on the submit button should take you to a full SRP. (Using the Yahoo Search API on the server side, you could build a SRP housed in your own site chrome, too.) But while the user is typing, I wouldn't want to display a "no results found" message for a couple of reasons. The most important is that the suggestion container's contents will lag behind the typing of a fast typer -- and so a "no results" message might be misleading. As I was considering what you wrote, though, it did occur to me that an activity icon, one that showed when autocomplete was actively looking for results, would be a good addition and would help signal to users that the control was actively trying to help them. Regards, Eric
Eric, thanks for the response and the additional info. Along the lines of a "no results found" message -- what I was thinking of is how at www.yahoo.com and search.yahoo.com a "No suggestions for your search." message is displayed if no results are available. However, the functionality there is intended to provide search suggestions, not search results, so I see your point regarding this example as well. I like the idea of an activity icon or similar. Thanks again!
Dear Eric,
Do you still own a pair of golf shoes? Please write if you get this.
Sincerely,
Karen
Very nicely written and detailed article. No doubt, I would be emailing this article link to my technology group.
p.s. Extensive list of links that would help.
Abhijeet | My Page
Hello sir, do we have any fisheye component implemented by yahoo or anyone else using Yui ?!
@Rasmin -- No, I am not aware of any "fisheye" effect component built using YUI. -Eric
Well, Eric, do you still own golf shoes? The internet needs to know!
@Andy -- Well, if it's important -- yes.
I found the YUI really intimidating until I read your article.
Many Thanks
Thanks for this excelent article. I really enjoy it. Now I have some trouble whit autocomplete using YUI. I can't find the way to do 2 or 3 colums, like the yahoo suggestion slide. Do you have a script that do this thing or do you know where I can find some information?
Many thanks !!
PD: if you've found some error in my poor english... sorry. =)
Thanks for sharing this information and the very useful linklist. Exactly, what I've been looking for...
i was good until I got to this paragraph: "Here are our requirements and the YUI components we need to meet those requirements:"
#1 says to not use JavaScript ?????
#4 what is a server side proxy??
thanks,
-aman
@Matias,
Thanks for the question.
I don't have a specific example that fits what you're asking, but think of it as a markup/CSS problem. Look at the examples on the YUI website (http://developer.yahoo.com/yui/examples/autocomplete ) that use the formatResult function. You'll just want to separate each "column" into a separate div for each result, styled in CSS to have a specific width.
Regards,
Eric
simply super.I am Nageswara Rao. i am a fresher, just completed my graduation and joined as devoleper.fortunatly i have been assigend to work on struts with yui interfaces.for some nights it is a nightmare to me.i don't know how to deal this tasks.i asked all of my friends abt this,finally my boss told me to follow this example.after seeing and i have done this example.now i am the one with more confidence to these issues.now i am the one to explain this implemetation to all of my team mates.i am thankful to u.
Nageswara Rao Mothukuri
@Aman,
Regarding #1, see http://en.wikipedia.org/wiki/Progressive_enhancement on Progressive Enhancement. We want the solution to work functionally without JavaScript. But, of course, we're enhancing it and making it work a little bit better for folks who do have JavaScript enabled in their browser.
Regarding #4, a server side proxy is a file on your server that proxies a request out to a third party server and then returns that response to the client. The client talks to the third party server via the proxy file on your server. This is necessary for XHR transactions due to the Same Origin Policy, but it's not required for script-node-based solutions like the one we use in this article.
Regards,
Eric
@Nageswara,
You are very kind -- thank you for the generous sentiment.
-Eric
Good article, Eric.
Typo: "We want to avoid using as (sic) server-side proxy (as would be required in traditional XHR/Ajax-style applications)."
That should be "...a server-side proxy..."
This is great article I will be using it on http://www.localindya.com soon.
Hi Eric,
a really nice article... came across this as searching for some integration application with one of my application Opentext Livelink. I may have lost in the middle but before I dwell further ,could you tell me does YUI provides any API functions that I can use to integrate into a 3rd party bespoke application. If yes, can you give an example of any integration you did...
Manish -- I'm not sure I understand the question. What do you want to integrate? What kinds of APIs or services are you looking for? -Eric
I've been struggling to build charts for my websites using some Ajax ready scripts but some failed in different browsers. However i didn't notice the same with yui may be because they fix cross browser issues quickly. Anyway i'm planning to use the components to build a chart on chemotherapy drugs and trial phase stuff on http://www.chemotherapyfacts.com soon. Thanks for the directions..
Thanks Eric for getting back....I actually plan to built some data summary on mywebsite .This will actually be a a hidden section for my private use where I need to display data from a different application site. I plan to use the webservices from that application website to extract data.Hence I need to know if there is any ready API..Sorry not sure if I was able to put forward my views but it is getting very complex and I'm now exploring some other ways to implement it.
Can anyone tell me how to parse a simple xml file (from cross domain) in YUI. I tried lots of things but no sucess , Please help....
A very simple example will work most probably using DataSource utility.
Thanks Eric for this post. I have one question though, what would you suggest me to do when I want to start with YUI?
Best regards, Tom
The best way to think about YUI and what it does for you is to consider the difference between the user interface language of the browser as compared with the desktop. In the browser, the "default" language is relatively limited. You have form elements (buttons, select menus, text inputs) and hyperlinks. On the desktop, you expect much more: Tabs, sliders, cascading menus, dialogs, tooltips, data grids, rich text editing, drag and drop, animation, autocompletion, and so on. Here's one way to visualize this difference, with the browser's native UI elements on the left and the richer set of desktop-style UI elements on the right: Kirsten from how to grow taller guide.
follow this example.after seeing and i have done this example.now i am the one with more confidence to these issues.now i am the one to explain this implementation to all of my team mates. I used the same for the VCP-310 once but nothing happened.
Well written Eric.
Regards, Alex
This is an excellent written article.
I will link and blog abt it at http://www.freeuniquearticles.com
Thanks.. Iw ant myself to be very proficient in YUI component. Great resource for m. Just bookmarked it.
Yahoo is taking step in every field now. And now with YUI, you can build applications as well. Thats really nice. And i have seen the steps in this article and it is not very difficult and i think in future everyone will go for YUI applications.
Cheers Gary Winnick
Wow, I really loved this tutorial. Now I know how to write my own application. Thanks again. Mike at learn how to jump higher guide.
Your article explains YUI in a very detailed manner. It's luck for me that I read your article. Garry from car rentals
Your article explains YUI in a very detailed manner. It's luck for me that I read your article. Garry from car rentals
In the browser, everything on the right side of this diagram requires some hard work. YUI, like other JavaScript/CSS libraries, aims to make that work less hard. I think that it is the reason why we should use it. the jump manual guide.
Thats exactly what ive been searching for. Thanks alot for taking the time to write the article because its helped me alot.
Alan - internet business
I understand that YUI includes graded browser support, in which there is a white list of fully supported browsers, but what about the Flock browser? That is a truly Web 2.0 browser and it would be awesome to have that kind of integration. Any word on when that might happen?
Bill,
Graded Browser Support (http://developer.yahoo.com/yui/articles/gbs/ ) is designed specifically to accommodate browsers like Flock -- ones that are based on high-quality engines and that perform well across the open web. It's also designed to protect developers from having to test every one of those browsers, which is an unmanageable expense. So, Flock is considered under GBS to be an X-Grade browser, one whose testing is covered by testing Firefox (based on the same engine). We recommend that developers deliver their full, rich web applications to Flock, but we regard it to be Flock's responsibility (not that of every web developer around the world) to make sure that their browser performs at par with the browser from which it's derived.
-Eric
This is exactly what I was looking for. Great info. This really helped!
I was banging my head against a wall here until I started thinking that maybe the problem I'm facing is not my own stupidity. Long story short, copy the 3-complete.html example and it will execute fine. Change all references of 2.5.1 to 2.7.0 and it doesn't work. The error is
YAHOO.util.DataSourceBase.TYPE_JSON is null or object not defined. I think for some reason the whole DataSourceBase object is missing. I get this error from the Yahoo server-provided code as well as from a local download.
Going backards to see where it broke, 2.6.0 does not work but 2.5.2 does!
I'm a long-time developer but completely new to YUI. From what I'm seeing it looks like something changed since this article was written. For someone to make use of this fine article a small revision is in order.
I hope newcomers see this note at the bottom of this page before agonizing like I did.
Your tips and code are very great, easy to understand for me, a newbie. I will build an application for myself tonight.
Thank you very much.
NHV
I dont think i'll ever get the hang of this yahoo interface stuff. I'm sure its not hard and will be easier with your post but im just struggling being a complete newbie to it all.
John
elottery
Great Stuff! Thanks. Just followed your tutorial and got my first YUI application up and running. Awesome. I like the fact that for each YUI components there is a dedicated webpage help for it :) John, Utility Warehouse Distributor
Great guides, anyone try it and success? I am not a programer but I like technology, and this look easy, I will try it to make a first program.
---------------
Ezinez
Great guides, thanks !
Thanks Eric thats a very nice and well explained tutorials.
I want to know if I can translate it in French and publish at my website?
Please let me know.
Jessica @ Old english font
Jessica,
InsideRIA owns the content, so you'd have to get in touch with them to authorize a translation -- check out the "contact us" link at the bottom of the page.
-Eric
Thank you
Great guides, anyone try it and success? I am not a programer but I like technology
I don't have a specific example that fits what you're asking, but think of it as a markup/CSS problem. Look at the examples on the YUI website (http://developer.yahoo.com/yui/examples/autocomplete ) that use the formatResult function. You'll just want to separate each "column" into a separate div for each result, styled in CSS to have a specific width.
Regards,
Ebel
I might try in future I learned programming at highschool.:) anyway great articles thanks Gina owner of Literal Videos Literal Videos
The real-world questions that will be answered by this year's 140+ sessions are those that currently preoccupy working developers, web hosting architects, IT managers and business line managers. The 2008 tracks include:
Enterprise RIAs and AJAX
Rich-Web Case Studies and Mash-Ups
Enterprise Web 2.0 & Social Applications
Event-Driven Web
iPhone Developer Summit
Diamond Track
Thank you for a great article - your explanation of YUI is very clear and detailed. Stoked I came across your site!
Thanks for putting the time and effort into sharing this information
Ben!
http://idigibuzz.com
Looks very cool guides, I love Y!M very much, I will design and build a nice application then share it for everyone this weekend.
Thank for share!
Cheap domain name registration
I found the YUI really intimidating until I read your article.
Thanks,
Daniel Steiger
I'm hoping the YUI helps me design an application I was wanting to incorporate in a future project of mine.
Pat from Learn How To Jump Higher Now
Thanks for putting the time
Great guides
I'm learning about coding stuffs. I really want to improve my web development skil.
Though I am a blogger but related to the software development. The first time I heard about YUI from my development team in the meetings, and started searching on various articles in YUI, out of which this one is first.
UKite | My UKite blog
Very nicely written and detailed article. No doubt, I would be emailing this article link to my technology group. web design timisoara
Apologies - I had two browser windows open and commented in the wrong one! This comment was meant for the post on Google Wave at http://www.insideria.com/2009/06/new-poll-what-are-you-most-cur.html.
Interesting technology, I was wondering what IDE would be best for using YUI? Any recommendations?
@John -- We've done integration work with Dreamweaver CS4, and Aptana has excellent support as well. But most developers around here use Vim or an equivalent or TextMate on the Mac. Lots of options. -Eric
Thanks for this article I just started to get into user side and server side scripting. I like how nowadays anyone can be a programmer. I you need to do is learn the basics and use script files as cheat sheets to basically create anything you like.
This was neat, but maybe a little over my head.
Guess I'll be heading back to the wikipedia! Gotta do some more research!
Yeah great article, unfortunately a little over my head also back to the drawing board.
hi ...
can anyone teach me the basics of YUI with few simple programs and how to establish it....
give me step by step instructions...
thanks in advance.....
This is good information that I plan on using with some of my other projects. Thank you for resource.
php resources
Great guide, you tell me all steps, just connect all of them together and we will have a great application.
Thank you very much.
Your guide is very great, very easy to follow, build a YUI application now is very easy for every programmers.
Thank you very much.
YUI application is very easy to write now after read your guide.
Thank you very much.
Dreamhost promo code
How can I find similar articles about this subject and could you please help me to understand the last paragraph?
Your article explains YUI in a very detailed manner.
I also find some examples on the YUI website developer.yahoo.com/yui/examples/autocomplete
web design timisoara
Followed all your guides now I have an application for myself.
Thank you.
thanks for this topic
goooooooooooooooooooooooooooooooooooooooood
This was great, now I can write my own application. Thanks again.
Sarah from plyometric workout
Thank you for the resource. I have been looking for this type of application for my alarm companies website.
All I can say is Wow! This guide is extremely detailed, I love it. I wrote a simple Mmorpg script on here and it worked wonderfully thanks to your step by step guide.
It's unbelievable. Great article nevertheless. I wish you could see gambar awek seksi. Thanks for the great insight
Yahoo User Interface is a good application. I've been trying to master it for the past months. But I still couldn't get the full feel of it though. gerald at metal retractable badge holder
me too gerald.struggling with it for past few days.if you can give more tips on it atleast you have a few month experience,anyways...brilliant article.glad that I took a visit here
me too gerald.struggling with it for past few days.if you can give more tips on it atleast you have a few month experience,anyways...brilliant article.glad that I took a visit here
Good guide.
Thanks for the guide.
Thanks.
Thanks.
jump manual review
Great!
chest workout
Thanks for this excelent article. I really enjoy it. Now I have some trouble whit autocomplete using YUI.
I found the YUI really intimidating until I read your article.
I love it.
white yoga pants
Nice Guide!
Thanks for the CSS Codes.
David Sheann from
OPL Consultoria
Great stuff. buy kinesio tape
Very well written and presented. However, the auto complete does not work for me in Safari 4, Firefox 3.5, or Firefox 3. All on Mac OS X 10.5 and 10.6. Haven't tried other browsers.
Also, the comments are getting rather spammy!
Thanks very much.
Great article!
The finished link
"3-complete.html"
does not seems to work on ie8, or firefox 3.5.
Well said!
the jump manualy
Pretty decent article in fact tutorial; it worth reading for me. I think it gona work for me, am a software graduate but working in the field of seo and web hosting from last two year, i never pay any attention to enhance my coding abilities, after reading your tutorial it seems pretty easy for me to get grip over coding as well.
I've always overlooked YUI. Cheers for the article, will probably start giving it a go to expand my skillset.
baby safety monitors
This might be interesting to try, I did a little programming back in university, but it seemed so complex back then. This makes it look very manageable.
Brilliant well said,
Want to know how to tell the difference between genuine and fake uggs?... fake uggs
Thanks for the overview on YUI. I was looking for more info on YUI when I found this post. You have made it into somewhat a good tutorial. The Yahoo developers who created this approach made sure that thinking about how different browsers handle things doesn't need to be on my list of concerns when coding. It really makes life a lot easier.
Liam
Excellent overview and tutorial. YUI could be one of the few saving graces for Yahoo and a fantastic change of direction. using YUI empowers you to create applications that you really need, not ones that other think you need!
Hi Eric,
I am using DS_ScriptNode
My response is coming from Solr
I am getting an error - in firebug
invalid label
looks like JSONP - issue
The Response is not enclosed in ()
Please help--
Ankit
Good information. Thanks a lot.
I Just Want to say thank you, it's a great guide and i used it when i wrote my First YUI Application...
Excellent summary and how-to. YUI is one of the more useful applications for Yahoo and a step in the right direction. Although I am a SEO Consultant by trade, I also perform UI tasks and using YUI empowers you to create applications that you really need in how to jump higher, not ones that other think you need!
Yeah great article, unfortunately a little over my head also back to the drawing board.
This is cool, i just followed the way you instructed.
When you set up the initial DataSource, you used the YAHOO.widget.DS_ScriptNode. Given that you needed to set a DataSource in the AutoComplete Control, can you please explain how you found the DS_ScriptNode object?
Wow. This is a great article, thanks for sharing.
white nightstands
this is just way over my head. Itried but I just can't seem to get it,.
Public Records
User Interface (YUI) Library is that they make it easier to create rich interfaces in the browser. In this article, we'll explore the creation of a simple web app using YUI and look closely at the YUI paradigm.
Learn Holy Quran
This is a great tutorial. I've been thinking about building an application, and I'll be sure to reference this as I try over break.
Amy from Wedding Postage Stamps
Great Tutorial, took 20 mins to read about but is surely gonna help me.
Thanks a ton for the share.
Regards, James from Tech Frog
Great article I will place it in my article directory
Great article man!!
Ki David from Free rs membership
Great article man!!
Ki David from Free rs membership
Thanks for the really useful info!!
Sry for double posting, my internet screws up sometimes.
Ki David from Free rs membership
Great article!!!
Free rs membership
Great article!!!
Free rs membership
Great article with great and useful info
thanks
credito rapido
This article made a lot of sense, now the YUI doesn't seem so daunting thanks.
John from pink mobile phones.
The YUI was quite frightening but I feel more confident now i've read your guide, thanks.
Dave | legal music download sites.
FAIL!!!!
Great article!!!
free runescape membership
Cool!
free xbox 360
Awesome!!
free xbox live gold
Cool stuff, nice to see yahoo putting out some good stuff.
Colorado dispensaries
Very interesting! I am quite interested in making a YUI Application so will definately try and write one!
Twitter Video Blog
Very interesting! I am quite interested in making a YUI Application so will definately try and write one!
Twitter Video Blog
This is just a little over my head I am looking to simplify this a little more.
Internet Monitoring Software
Thanks so much for this post. Very informative. phoenix accident lawyer
Excellent article.. Very informative.Refreshes me about yui application link building
Thank you for this, I was struggling to find such a detailed post about YUI as I wanted someone to hold me by my hand and guide me through the motions. Like I said, that this was really helpful for someone new like myself. Only thing I found not helpful was the fonts and colours, but as you have mentioned earlier that you have no control over this so all is cool....Thanks
Amir aka wealthy affiliate
Now I understand the YUI jquer for Wordpress. I'm waiting for this a long time. Thanks a lot.
May I translate this post fro Geld Verdienen?
This is a very good post. Everything is explained in detail.
Great Job!
Does anyone know how to write applications for iphone. I mean I would like to have my own application and would like to upload it and sell through apple store. Is that possible? How about unlock iphone applications? Can I sell those apps through iTunes and Apple store?
Great. YUI absolutely is awesome!
Thanks.
las vegas escorts
That leaves things in a somewhat vague state, from a UI perspective. The user's only/natural option then is to click the submit button, which takes them to the actual SRP, which then shows "no results found". How can we display a message to the user to let them know to try different search terms?
web video
Great post.Looking forward to reading more from you.
SEO Company India
I found this informative and interesting blog so i think so its very useful and knowledge able.I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me.
Great post! As a newbie in web programming, I can use these information for my job. The article is as important as the college paper about the same topic that I just read. Thanks for the share!
I read your this article it is informative.
EMR
does google's chrome come under A grade...?
It's true he best way to get to know YUI is to take a quick tour of the YUI website . You can get right in to it and find out what you need to know.
A good informative and interesting which is very useful .
Thank you for the efforts you have made in writing this article.
It was a help to me.
Great advice on getting the feel for YUI by building a sample application.
It's the best way to get into it.
http://incomeunlimited.biz/uk-unique.html" title=" Great Article
Well worth the read!
Some of you will already know more than others about fmowery. But it's important to learn as much as possible about it. So, the more information you can lay your hands on, the better it is.
This is one more proof that Yahoo offers lot of useful content. I'm not sure that we can find these great things on other search engines. Even this is very good explained I still do not understand how to apply all this on my website www.fedeltapos.com which I have to fix... Perhaps I should read this article once more...
That is what I call a useful information! Real fortune from Eric to us, for free! Thanks! :) Yanick
A very good tutorial. It will help me when building my new applications. I have bookmarked this and will tweet about this post. Thank you.
HMT
great blog thanks!
chris
I'd be interested to know if there are any decent yui applications for wordpress - I've only found this so far: http://wordpress.org/extend/plugins/wp-yui-menu/
Be useful to integrate into my voucher code site.
Yahoo has a wealth of innovative code developments, Yahoo pipes being another very good example as a way to unblock any coding hangups. It will be interesting to see whether all this is allowed to continue when the Microsoft tie up is completed or whether a business review will see it dropped / turned into a subscription service. The web would be poorer without Yahoos innovation.
Hey Guys,
Author of More Servlets and JSP, Marty Hall is coming to Bangalore this April to speak on Choosing an Ajax/JavaScript Toolkit: A Comparison of the Most Popular JavaScript Libraries, Pure Java Ajax: An Overview of GWT 2.0, Integrated Ajax Support in JSF 2.0 and Ajax Support in the Prototype JavaScript Library. You can get more information on developersummit dot com
The integrated CSS and JS libraries are such an important component, YUI applications are a step forward compared to similar framework
Thanks for this first introduction for me into YUI, with it i have completed my first steps and i hope to finish it also.
Regards,
Doc | MyPage
its really nice guidelines. Nice way to get success. Thanks for sharing.
Minneapolis Criminal Attorney
I think it's not easy to ever get hang of this YUI stuff. But your writing and huge lists surely made me easier to learn since I'm just struggling being a complete newbie to it all.
webthesurfi rugs webdesign
Great tutorial for YUI, well done!!!
Tagged it on xixxi.de!
Regards, Marion
How can I find similar articles about this subject and could you please help me to understand the last paragraph?
проститутки
These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post.
mcitp
mcpd
I m really impressed .I m waiting for your next post.. Its so interesting and attractive. I like it so much.Thanks.
mcse
mcts
Thanks for the useful information. With your tutorial I've found all the info I need to start building my own YUI application.
Greetings, John Horloges
Thanks for helping me in my first steps in YUI!
Regards, Flieger
I'm wondering if this YUI tutorial is something like using Google search in personal websites? Honestly, I rarely ever use Yahoo for anything but my email. Interesting article, great tutorial. Probably wouldn't hurt to try and follow the tutorial and see what I come up with. I've noticed that Yahoo has indexed many more of my pages of my Discount Fragrances site than Google anyways! Might be worth a shot. Thanks.
Your post explains YUI in a very detailed manner. It's luck for me that I read your article. Josh, webmaster tools
I want to create a website on onlinebusiness purpose.I do't know about css and javascript.Please help me.CNA Training
I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me.
This article, exploration of a simple web app using YUI issues can help college students with writing term papers on YUI paradigm topics.
That was some sort of good solution - there are some other good solutions available into the market but this sems to be the best so far.. .free cna training
The best way to think about YUI and what it does for you is to consider the difference between the user interface language of the browser as compared with the desktop. In the browser, the "default" language is relatively limited but it can be enhanced by adding some more features. FSC
I was thinking about this programming language. I'll be able to write first application for YUI.
Low T
YUI is cool it is one of the great Javascript library. I have been using Jquery along with JqueryUI. Very recently I did a testing with YUI and really impressed. YUI is smarter than JqueryUI.
atlanticOptimize
This new site is a multi-angle, interactive BJJ training system created by fourth degree black belt Vinicius "Draculino" Magalhaes. Be sure and check it out, especially the free video samples.
http://www.draculinobjjtraining.com/
This new site is a multi-angle, interactive BJJ training system created by fourth degree black belt Vinicius "Draculino" Magalhaes. Be sure and check it out, especially the free video samples.
http://www.draculinobjjtraining.com/
I think it's not easy to ever get hang of this YUI stuff. program de gestiune But your writing and huge lists surely made me easier to learn since I'm just struggling being a complete newbie to it all.
JavaScript has seen a resurgence in popularity in the last five years. What was once almost written off in the early 2000s is now a hot skill to have for any web developer. The landscape has changed a lot over those years, and JavaScript developers have a number of options at their disposal to make development much much easier.
I'm so not ready for this. I tried to have a conversation about it last year with my development team and got nowhere. It's very frustrating. The good news is that I have a bigger budget now and can get this stuff done. Your tutorial is great for learning to talk the talk when trying to figure out how to outsource this type of thing. I mostly lean towards wordpress now for all my sites and Imagine really good pluggins are not too far off. I hate having to pay developers for that stuff.
Alex
I am really impressed.I am waiting for your next post.
hostgator coupon
As the name implies, a Cascading Style Sheet, or CSS, is a document that describes the visual style of your content. Web designers have been leveraging Cascading Styles Sheets as a tool to control content placement and text presentation in web pages for over ten years.
Dyson Ball Vacuum
Eureka 71A Hand Held Vacuum
I found this is an informative and interesting post so i think so it is very useful and knowledgeable. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing ability has inspired me. Really the article is spreading its wings rapidly...
sonnerie gratuite pour portable
very interesting but very complicated am trying to understand it .
Even I am a painter of Orthodox icons which means that I am somewhat old fashioned and traditional lady I like these stuffs. As an artist I am very interested in web design and now I am learning about CSS. I thought that CSS is pretty simply but now I see that I have to learn lot... Specially I did not know that there is any connection between CSS and Java. However, I will study hard so I hope I'll be able to make beautiful and useful sites :)
The YUI ("wy-yoo-eye" NOT as many speak it "yoo-ee") is a collection of JavaScript prototypes that perform generalized actions that recur frequently. These are behaviors that developers need to perform over and over again but shouldn't need to re-develop every time. The YUI library provides a (free!) means to incorporate standardized, reusable code for handling client-side JavaScript interactions. The whole theme is very Design Patterns oriented.
THANKS
Johnathan Dedeke
The concept of developing a web user interface that is as complex as that of the desktop is great. The problem I always found to be troubling is the nonstandard approach that Microsoft has always taken to its browser code. As a graphic designer who turned to the Web in the late nineties, I found it frustrating to constantly accommodate Microsoft's browser eccentricities.
I like the fact that there are modular components available for creating a complex but clearly user-friendly Web application. Thanks for an easily understood post on YUI. I would love to have you submit a similar article on the subject of designing aps in YUI to my article directory - didarticles.com
One question I have to ask is how do you integrate the Web 2.0 widgets into your YUI application? Twitter, Facebook and even Youtube all are creating aps to integrate in XHTML and PHP sites.
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Also I found many useful information here in the post. Thanks for sharing. Wicked Tickets
Can anyone tell me how to parse a simple xml file (from cross domain) in YUI. I tried lots of things but no sucess..? mark @ lottery syndicate world
A very simple example will work most probably using DataSource utility.
YUI is indeed very different from jQuery. The fact that it is supported by certainly plays in its favor, but although jQuery is a man show it is still very powerful
-----
Bilal
Téléchargez gratuitement votre pilote d'imprimante sur Imprimante Info.
The tutorial is a great walkthrough of both how to build the application and also leverage YUI’s extensive documentation. It also touches on some great points such as: How to configure a YUI implementation and put YUI on the page! Thanks!
Joseph, Senior Developer at Bet365
Nice Post.Enjoyed Reading it. I think I'll try to delve into YUI
Alan, from PCTV Software
we are looking to start creating quite a few android apps at the moment, the apple market seems to be quite saturated, any advice to help me on my way (the wheres, who and hows)
Cheers Rattan
The concept of developing a web user interface that is as complex as that of the desktop is great. The problem I always found to be troubling is the nonstandard approach that Microsoft has always taken to its browser code. As a graphic designer who turned to the Web in the late nineties, I found it frustrating to constantly accommodate Microsoft's browser eccentricities.
I like the fact that there are modular components available for creating a complex but clearly user-friendly Web application. Thanks for an easily understood post on YUI. I would love to have you submit a similar article on the subject of designing aps in YUI to my
seo company
The best way to think about YUI and what it does for you is to consider the difference between the user interface language of the browser as compared with the desktop. In the browser, the "default" language is relatively limited. You have form elements (buttons, select menus, text inputs) and hyperlinks. On the desktop, you expect much more: Tabs, sliders, cascading menus, dialogs, tooltips, data grids, rich text editing, drag a
The best way to think about YUI and what it does for you is to consider the difference between the user interface language of the browser as compared with the desktop. In the browser, the "default" language is relatively limited but it can be enhanced by adding some more features. Greetings from London.
This is probably one of the best posts on the topic. Although language is kinda limited, I will post this on delicious if possible and in on my cna training site as well.
Excellent YUI post!! Just wish I could get my head round it properly :-) . This post certainly helps.
Thanks
Willow Tree
This is a great article. YUI apps are fun to develop and this one got me started. Thanks, Mitch