Interesting Web Development with the Yahoo!

 User Interface Library
Malak Mohammad al­mojaly
Information technology department
King Saud University

:Abstract

 The libraries generally useful in human life, it's one of the most important sources to get information in various
.fields, also, in web there are special programming libraries for users
 These programming libraries at web live for designers, programmers' sites and web developers become a
 catalyst in the design and programming positions , such as JavaScript library that includes  many codes and
 classes that  Help them to make designing  and programming sites more easier and effective than
 . programming without using these libraries
 During my research I will sail in one of these libraries for JavaScript and CSS, It's called Yahoo! user interface
 (YUI) library  which written to help people with a basic knowledge of JavaScript and web design principles to
 . quickly get up to speed with the UI library developed by Yahoo

Keywords: JavaScript library, CSS components, Yahoo! user interface library.

.Introduction: 1

 With the increasing popularity of the World Wide Web, scripting languages and other Dynamic languages are
 currently experiencing a renaissance. Whole new generations of programmers are growing up with languages
.such as JavaScript
 So, I will discuss in this paper JavaScript library that contains several codes that Help programmers and
 developers for preparation sites. Among most famous JavaScript libraries that I will discuss it is Yahoo user
 interface library that's a great library containing the codes and classes for each JavaScript and CSS
 .Languages
:Then the structure of the paper is as follows
 section2 An overview of the JavaScript libraries, what's mean? And their importance in the lives of developers
 and designers of sites also Why Yahoo! User Interface Library is the best library? , section3 present the
 methodologies to explore the meaning of Yahoo! user interface library (YUI) and who can use this library also,
 what's the Library Topography? , section4 illustrate how to use Yahoo! user interface library (YUI), how to work
 with it in your own web pages and What Else Does Yahoo! provide to its user?, section5 my experiment of
.using these libraries

:Background and related work
 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
1
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©
 Because these libraries are for designer and programmer sites so, an understanding of JavaScript, HTML,
.and CSS is assumed
 
JavaScript library .2

 What JavaScript library mean 2.1
       A JavaScript library is a library of pre­written JavaScript controls that's a collection of subroutines or 
classes used to develop software. It contains code and data that provide services to independent programs
Also, it allows for easier development of JavaScript­based applications, especially for AJAX and other web­
centric technologies. [2]

2.2 The JavaScript Data Components
      (JSDC) are open source libraries (General Public License), made to give developers of dynamic web 
pages an easy and fast way of making their applications more powerful using datasets, master­detail relations, 
dataset­events, conditions and data­aware components. Implementing AJAX­technologies, it is able to 
connect to servers and download data from them. [3]

feature for using JavaScript library 2.3
:There are many features for using JavaScript library some of these are
.a) Make JavaScript bearable
.b) Gets the job done fast
.c) Simplifies cross­browser support
Using any JavaScript library can save you great amounts of time and frustration when coding by hand, and 
can allow you to implement features that you may not have the knowledge or skill to make use of.
Also, some JavaScript libraries allow for easier ties between JavaScript and other languages, such as CSS, 
PHP, and Java. This is to ensure that JavaScript applications will be able to run seamlessly with other, lower­
level languages.

 Why Yahoo! User Interface Library the best library 2.4
"There are some libraries out there that have been developed which seek to alter the JavaScript language 
itself, building capabilities into the language that the developers felt should already have been present and 
extending the language in new and interesting ways."[1]

"While these libraries can provide additional functionality at a deeper and more integrated level, their use can 
often be hampered by technical implementation difficulties that will be too difficult to overcome for all but the 
most advanced and seasoned developers."[1]

The YUI is not like these; it is extremely well documented, stuffed full of examples, and is extremely easy to 
use. It doesn't get bogged down in trying to alter the JavaScript language at a fundamental level, YUI Library 

 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
2
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©
is compatible with and extended by many other frontend libraries and instead sits on top of it as a 
complimentary extension.

Yahoo user interface library .3

.overview of (YUI) library 3.1
           The Yahoo! User Interface (YUI) Library is a free collection of utilities and controls, written primarily in 
JavaScript for achieving dynamic, interesting and cross­platform web pages. It makes extensive use of 
advanced DOM scripting, DHTML and AJAX , this means it's uses a collection of technologies used together 
to create interactive and animated web sites by using a combination of a static markup language (such as 
HTML), a client­side scripting language (such as JavaScript), a presentation definition language (such as 
CSS), and the Document Object Model  also, it's uses a group of interrelated web development techniques 
used for creating interactive web applications or rich Internet applications , it has been produced by the expert 
developers at Yahoo! to make your life easier as a web developer or front­end user interface designer.[4]

 It consists of a series of JavaScript and CSS components that can be used to quickly and easily build the rich
.and highly interactive applications that today's web consumer expects and demands

 The YUI wraps both sets of code up into one object that can be used programmatically with one constructor,"
 so instead of dealing with different sets of code for different browsers, you deal with the library and it makes
]the different calls depending on the browser in use." [1

 Another important aspect of the library that I should mention at this point is its respect for the Global"
 Namespace. All objects created by the library and its entire code run within, and can only be accessed
 .through, the YAHOO Global Namespace object
 This means that the entire library, including every utility and every control, and its numerous classes, create
.just one namespace object within the Global Namespace
 The Global Namespace is the global collection of JavaScript object names, and it is very easy to litter it with
 potentially conflicting objects, which can become a problem when code is shared between applications. Yahoo
 minimizes its impact on the Global Namespace and so shall we; all of the code that we'll write throughout the
]course of this book will reside within its own namespace object." [1
?Who use this library 3.2
 The YUI is aimed at and can be used by just about anyone and everyone, from single­site hobbyists to"
 creators of the biggest and best web applications around. Developers of any caliber can use as much or as
]little of it as they like to improve their site and to help with debugging."[1

3.3 Sites powered by YUI library
YUI has been integrated into practically all of Yahoo's properties, including the Yahoo! home page, Yahoo! 
Mail, and Flicker, many companies like LinkedIn, Mint, target, SugarCRM, wikia and PowerReviews who have 
adopted YUI as their front end platform.

3.4 The Library Topography

 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
3
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©
 The library is currently divided into four distinct sections; the library core files, a series of utilities, a set of       
 controls, and some excellent CSS tools. There are a total of 33 different components, at the time of writing,
]and the library is continually growing and being refined. [1

3.4.1 The Core Files
The core of the library consists of the following three files:
a) YAHOO Global Object.
b) DOM Collection.
.c) Event Utility

a) The Global object "provides a single global namespace within which all YUI Library code resides. It must 
be included on every page that utilizes the YUI Library, and it must appear before any of the other YUI 
component.  The YAHOO Global Object also contains a number of methods that are used throughout the 
library." [5]

 b) The DOM Collection "provide a series of convenience methods that make working with the Document
 Object Model much easier and quicker. It adds useful selection tools, such as those for obtaining elements
 based on their class instead of an id, and smoothes out the inconsistencies between different browsers to
]make interacting with the DOM programmatically a much more agreeable experience."[1

 c)  The Event utility "provides a unified event model that co­exists peacefully with all of the A­grade browsers
 in use today and offers a consistent method of accessing the event object. Most of the other utilities and
]controls also rely heavily upon the Event utility to function correctly."[1

The Utilities 3.4.2
 The utilities provide you with different sets of user­interface functionality that you can implement within"       
 your web pages. They provide programming logic and deal specifically with the behavior and interactions
]between your visitors and the different objects and elements on your pages." [1
Some set of utilities included in the current release of the library (which is constantly changing and growing) 
are as follows:
a) Animation Utility
b) Drag and Drop Utility
c) Get Utility
d) Image Loader Utility 

The Controls 3.4.3
 The controls on the other hand are a collection of pre­packaged objects that can be placed directly on"       
]the page as they are, with very little customization. Your visitors can then interact with them." [1
Some of controls currently included with the library are:
a) Button Control.
b) Calendar Control.
c) Color Picker Control.
d) Container.

 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
4
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©
e) Menu Control.
The CSS Tools 3.4.4
The CSS Tools form the smallest, but by no means the least useful, component of the library"       
 The utilities and controls are designed to be used almost independently (although some of the files do depend
 on other files in the library to function properly), but the CSS tools are designed to be used together (although
]they can also be used separately if desired). "[1
The following four tools make up the current CSS section of the library:
a) Reset CSS.
b) Fonts CSS.
c) Grids CSS.
.d) Base CSS

How to work with Yahoo! Interface library .4 
How to install YUL 4.1
 The YUI is not an application in its own right, and it doesn't need to be installed as such. Getting started with
 the YUI is extremely simple; you first choose whether to download all of the source files from Yahoo and use
 them locally as part of your web sites' hierarchy, or whether to use the URLs provided on the YUI developer
 .pages to reference the library files stored on Yahoo's web server

4.2 How to use Yahoo! User interface library in website?

There is only one file that must be used in every implementation of any of the various components "the 
YAHOO Global Object". As explained in advance. It must appear before any of the other library files because if 
references to other component files appear before the Global Object, none of the namespaces used will be 
recognized by your script. This will cause a JavaScript error stating that YAHOO is undefined.

4.2.1 Hosting files 

"When user downloads the YUI Library, the YUI build directory contains three types of JavaScript files for each 
component:

a) Minified (e.g. "animation­min.js"): The minified file has been stripped of comments, white space, and 
some line breaks to make it as compact as possible.
b) Standard (e.g. "animation.js"): The fully commented file, formatted for readability.
c) Debug (e.g. "animation­debug.js"): The fully commented file, including debug statements that output 
to the Logger interface if present."[5]

4.2.2 Terms of Use

 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
5
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©
       (YUI) library consists on many files for each JavaScript and css so, when user wants to use these files in 
his website, YUI provides two ways to load its components, you can do it directly via <script> and <link> tags 
or you could use the YUI Loader .

4.2.2.1 by using <script> and <link> tags directly 
YUI provides Filepaths for its Component Files, Individual files for each component are available for inclusion 
via the following <script> and <link> tags.
For example of these files that provided by yahoo (see figure 1).

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts­min.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/grids/grids­min.css">  
<!­­CSS for some Controls ­­>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> 
by using YUI Loader 4.2.2.2
<! ­­ Some YUI Core ­­>
 The YUI Loader Utility is a client­side JavaScript component that allows you to load specific YUI components"
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo­min.js"></script>
 and their dependencies into your page via script. YUI Loader can operate as a holistic solution by loading all
<! ­­ Some Utilities ­­ >
 of your necessary YUI components, or it can be used to add one or more components to a page on which
]some YUI content already exists." [5
:YUI Loader adds value in the following ways

a) Reliable, sorted loading of dependencies: YUI Loader understands which components depend on one 
another, and based on this knowledge it ensures that the right resources are loaded in the right order.
b) Safe, efficient mechanism for adding new components to a page on which YUI may already be 
present.
c) Automatic use of rolled­up files. YUI Loader knows about all of the built­in rollup files that ship with 
YUI — like the yahoo­dom­event.js file that contains the Yahoo Global Object, the Dom Collection, 
and the Event Utility together.  The YUI Loader helps you reduce HTTP requests and thereby keep 
your page as efficient as possible.[5]

 Using the YUI Loader is slower than including the library files directly since none of the files will even start to
 load until after the Loader itself has loaded and decided what to do. If performance is an issue, then it is better
.to load components directly

What Else Does Yahoo! Provide 4.3
 There are some additional resources that are available courtesy of Yahoo! to help you use the library to its"
 maximum potential. There are a series of very helpful "Cheat Sheets" that you can view online from any of the
 individual component's information pages. These resources provide a useful and centralized reference manual
 which lists the key methods, properties, and syntax patterns of each of the fully released components and
 gives some basic examples of their implementation. There is also a section of the YUI site where you can look
 ]at the implementations of the library by other people and on other web sites….etc of resources."[1

.My experiment of using these libraries .5 

 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
6
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©
 After using the Yahoo! user interface library I discovered many of the features provided by Yahoo to its user
 from programmers and web designers and developers to facilitate the work sites, and from my simple
  .experiment was able work of several simple pages using this large library
 To see an example of a simple page that using several of these Library Codes to display some stores with
)many pages as tabs also, spotlight for stores picture . (see figure2
.So, I think that (YUI) library in the best library for everyone want to design website

Figure 2: Example of using Yahoo! User interface library

 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
7
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©
Conclusion: .6 

 From the end of my research that shows an overview of the JavaScript libraries, what's mean? And their
 importance in the lives of developers and designers of sites also Why Yahoo! User Interface Library is the best
. library? and how to use this library in your own web pages
 I hope that I give you the basic keys to learn more about YUI library from resources, and would highly suggest
.this read as a starting point
 
:Also, I'm looking future for several things
 First, I wish from developer and designer of sites to be useful to bring codes from libraries that help him a lot
.at designing and developing website

 .Second, I hope to work programming library in the future such asYahoo! user interface library

Resources: .7

 Wellman Dan, Learning the Yahoo! User interface library, Packt Publishing Ltd, Nikhil Bangera, Bhupali ] ]1[ 
.Khule, Mithil Kulkarni,page 8­23, UK, March 2008

 :wikipedia. Located on the Internet at http://en.wikipedia.org/wiki/JavaScript_library. Last visited]2[ 
.December, 2008 8

 Wikipedia. Located on the Internet at http://en.wikipedia.org/wiki/Javascript_Data_Components. Last ]3[
.visited: 8 December, 2008

 :Wikipedia. Located on the Internet at http://en.wikipedia.org/wiki/Yahoo!_UI_Library. Last visited ]4[
.December, 2008 8

:Yahoo! developer network. Located on the Internet at http://developer.yahoo.com/yui/. Last visited ]5[
.December, 2008 11

 Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
8
 copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
.page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission
)The First Mini­Conference in Web Technologies and Trends (WTT
Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia 2009 ©