Christian Noel Blanquera

Dynamic Menu System, URL, Page Generation and MYSQL

2008-12-31T15:07:00.000-08:00

In computing, a Uniform Resource Locator (URL) is a type of Uniform Resource Identifier (URI) that specifies where an identified resource is available and the mechanism for retrieving it (http://en.wikipedia.org/wiki/URL). In a web application environment, pages and URLs are linked to each other in a database. When you request a page based on the URL, the application should "suggest" a page to load.

What I mean by "suggest" is that if the URL is not linked to an actual page the closest possible match to that URL will be viewed instead. What's great about this is that when a user is browsing your website they will not get a pesky "404 Page not found" error. Instead they will get an actual page. An example of this is if the user loads the page "http://www.somesite.com/user/IwantContent/". If "http://www.somesite.com/user/" exists and "http://www.somesite.com/user/IwantContent/" does not exist then "http://www.somesite.com/user/" would be loaded instead. Easy enough.

In MySQL this can be acheived by executing the following query (assuming this table and column exists):
SELECT * FROM {navigation} WHERE url LIKE 'user/' OR url LIKE 'user/IwantContent/' ORDER BY url DESC;

Lets say, "http://www.somesite.com/user/" outputs a list of users and "http://www.somesite.com/user/chris/" outputs some details about the user "chris". In the previous example redirecting to the user list can be acceptable by most developers but clients could bring up an issue that when a user enters "http://www.somesite.com/user/IwantContent/" they would expect a page saying "User not found" and not the list of users. This is where wild cards could help. Instead of storing a URL with "user/IwantContent/" in the database we could store "user/%/" instead where "%" is the wild card character being used.

In MySQL this can be acheived by executing the following query:
SELECT * FROM {navigation} WHERE url LIKE 'user/' OR url LIKE 'user/%/' OR url LIKE 'user/IwantContent/' ORDER BY url DESC;

The huge fundamental problem with this query is that using wild cards opens up countless possibilities of queries and results and not to mention a huge performance hit. If we have "http://www.somesite.com/user/chris/blog/" this would extend the where clause to be "url LIKE 'user/' OR url LIKE 'user/%/' OR url LIKE 'user/chris/' OR url LIKE 'user/%/' OR url LIKE 'user/%/blog' ... " not to mention if we have "http://www.somesite.com/user/chris/blog/URL_Page_Generation/" where "chris" is a user and "URL_Page_Generation" is the blog entry. The thing is "http://www.somesite.com/user/chris/blog/URL_Page_Generation/" logically makes more sense to a user than "http://www.somesite.com/user/blog/chris/URL_Page_Generation/" (putting all the dynamic parts at the end of the URL) and as a developer of course, I want to provide that solution.

The MySQL Solution:
SELECT * FROM {navigation} WHERE 'user/blog/chris/URL_Page_Generation/' RLIKE REPLACE(REPLACE(url, '%', '.*'), '/', '\/')

The most notable thing from the previous query is "WHERE 'user/blog/chris/URL_Page_Generation/' RLIKE REPLACE(REPLACE(url, '%', '.*'), '/', '\/') ". Firstly we need to think about this logic in reverse. Instead of the table URLs stored being the strings to match, that column is turned into a list of expressions. This is why I put the "url" in column in the right operand of the RLIKE operator. RLIKE is used when comparing a value to a regular expression (http://dev.mysql.com/doc/refman/5.1/en/regexp.html) and using REPLACE to change the wild card "%" to ".*" and "/" to "\/" we create a valid expression from "user/%/blog/%/" to "user\/.*\/blog\/.*\/"

With this now you can create a logical menu system that "suggests" a set of pages using only 1 query. Good luck with your "http://www.somesite.com/user/chris/blog/URL_Page_Generation/comment/This_is_Awesome/agree/".

From EAV to Eve

2008-12-26T12:52:00.001-08:00

Since my last post I have done a lot of work and put a lot of time into this. I think I should explain about the formation of my project and my personal life for that matter.

Hello! My name is Christian Blanquera. I am an idealist. I used to work for Cutco as a sales rep for 3 months in college. Although I hated retail, I needed to find quick cash and I apologize to the people that went through my Cutco presentation. At my stay I found a problem of trying to calculate the total cost of knives including package discounts and taxes. It was something a sales rep would have to do by hand and make sure it was accurate. In college I was a computer science major and I decided to write a program that did all the calculations for me which I kept expanding and eventually became a windows application. This was my first real life application and I knew I wasn't ment to sell knives and is destined for greatness. I quit immediately.

Hello! My name is Christian Blanquera. I have an idea. I wanted to know more about my powers as a programmer and started going to Borders and Barnes & Noble on a daily basis. Before school, after school, on the weekends. I program for countless hours with no work experience in programming and for no specific goal but to learn. I found a way to gain a little income in making World of Warcraft guild websites for my friends and created a system that I could use over and over. I used phpBB to make these websites with forums, blogs, profiles and itemizer. This was my first content management system I learned to use. I knew right away I could create such a better system that I could use in the future that dealt with any type of website. My goal was simple. Create a content management system people could install and add things using an interface without the need to program.

Hello! My name is Christian Blanquera. I was poor. I came from a normal family and like all families had financial issues. I went to college first relying on my mom for money and eventually doing it on my own. I worked for Geek Squad for a year and in the evenings programmed. I did not do my taxes, I ignored my credit score and lived from paycheck to paycheck. I got into a lot of financial trouble that it put a stop to my life so much that I ended up living in my car sleeping in parking lots and at friends houses. I never told anyone about it because I was embarrassed. My girlfriend and I broke up because I did not have the heart to open up to her about what was happening and I started changing in a bad way. All I thought was I need to prove to everyone that I can be a man. I was depressed and eventually moved backed to my mom's house where I tried very hard to get a job but was unsuccessful. Suicide was an option for me. I drowned myself in programming in the basement in the dark and shut the rest of the world out. My sister called me from San Francisco and a week later decided to take a vacation there.

Hello! My name is Christian Blanquera. I was given a second chance. I only had 1 luggage with all my things and went to San Francisco. While vacationing I started applying for jobs here and amazingly I received responses. Having nothing means that I have nothing to lose. I went out and pursued a job in web development. Interview after interview I was so happy that I even had interviews. I felt better about myself with each one and got an offer to work for the company that was on the top of my list.

Hello! My name is Christian Blanquera. I am a web developer for Solutionset. Solutionset is a brand technology company that specializes in branding and web application technology. In Solutionset I get to do what I always dreamed about doing creating web sites using the latest and greatest technologies and sometimes create our own. The bonus is that I feel my ideas are being heard and I sometimes have a chance to implement them in my current project/s. I have since excelled my skills to a level I thought impossible. During my stay I have since been fixing all the broken things in my life one at a time both personally, emotionally and financially.

Hello! My name is Christian Blanquera. I am experienced. I program for 18 hours everyday and sometimes weekends. Keeping my simple idea as my main goal I have also added a lot of core solutions. I have gone through over 20 versions of my content management system because I cannot take less than perfection. It's not even a content management system anymore. I have experimented and implemented with all the major open source content management systems and JavaScript frameworks. I am living the dream and near completion.

Hello! My name is Christian Blanquera. This is my development website. http://eve.blanquera.com/

New Personal Project

2008-11-16T20:25:00.000-08:00

I call it EAV. In the database world, this is short for Entity-Attribute-Value. This concept is one of many solutions for adding, editing, deleting custom fields to a table without altering the existing table. Please read the wiki: http://en.wikipedia.org/wiki/Entity-Attribute-Value_model/ . EAV in this scope is a Site Management System that builds on the EAV database concept.

Already developed some of my recursive thoughts. http://eav.blanquera.com/eav/ this is the documentation of EAV. The actual web application that generates the content for this documentation parses code comments from PHP and JS files in the EAV diractory and is written using EAV. That's a mouthful.

If you live in San Francisco, and are a PHP or JS developer and like to hear my stupid pitch about EAV, I can use all the help I can get.

Drupal 6 Le sigh

2008-11-03T10:48:00.001-08:00

Back to work from a long vacation. Work asks me if I know Drupal? I say yes I have used Drupal before back in version 3 or 4.7. They say they have a project for me. Getting back to work was an easy adjustment because while in the Philippines I dreamed about coding.

Here we go!

Case Study:
Client wants to extend create an event functionality to include timezones, the option to choose a duration or an end time and set how many people can RSVP to it. Client also wants me to build an RSVP module in the front end attached to events.

Problem: Extending Drupal Modules; Despite what some people think, drupal is not Object oriented. It relies on virtual function callbacks (not methods) which in PHP cannot be overloaded.

I found this conversation to be really funny.
http://drupal.org/node/15943

I thought "Well maybe Drupal has another way of extending modules?" This is false. Searching on google I came to a consensus that the way to extend module functionality is to customize the module you want added functionality for and when an upgrade comes for that module by the original author, "Good Luck."

WAMP Server with SVN

2008-08-21T17:08:00.000-07:00

Been looking around for a tutorial on this. I have a great idea of creating a secure mp3 repository only I have access to update all my computers (1 desktop and 3 laptops)

Note: If any links are broken consider this post depricated.


** Download Svn1ClickSetup-1.3.3.exe
** Execute “WampServer2.0c.exe” - When you get to the “Select Destination Location” Step remember the location (ie. C:\wamp). This will bee the {WampServer2.0c.exe install directory} in this instructions

** Download WampServer2.0c
** Execute “SvnClickSetup-1.3.3.exe” - When you get to the “Repository Location” Step remember the location (ie. C:\svnrepos). This will be the {Repository Location} in this instructions

** Download mod_dav_svn.so
** Download mod_authz_svn.so
** Copy “mod_dav_svn.so” and “mod_authz_svn.so” to {WampServer2.0c.exe install directory}\bin\apache\apache2.2.8\modules\

** Download libdb44.dll
** Download intl3_svn.dll
** Copy “libdb44.dll” and “intl3_svn.dll” to {WampServer2.0c.exe install directory}\bin\apache\apache2.2.8\bin\

** Execute {WampServer2.0c.exe install directory}\wamp\wampmanager.exe (a white half circle will show up on the right side of the task bar)

** Left click the white half circle -> Apache -> httpd.conf (this opens the file)

** Find:
#LoadModule dav_module modules/mod_dav.so
#LoadModule dav_fs_module modules/mod_dav_fs.so

** and add in new line after:
#LoadModule dav_svn_module modules/mod_dav_svn.so
#LoadModule authz_svn_module modules/mod_authz_svn.so

** Right click the white half circle -> Exit

** Execute {WampServer2.0c.exe install directory}\wamp\wampmanager.exe (a white half circle will show up on the right side of the task bar)

** Left click the white half circle -> Apache -> Apache Module -> dav_module
** Left click the white half circle -> Apache -> Apache Module -> dav_fs_module
** Left click the white half circle -> Apache -> Apache Module -> dav_svn_module
** Left click the white half circle -> Apache -> Apache Module -> authz_svn_module

** run cmd (Start -> run: cmd )
** run in cmd
C:\{WampServer2.0c.exe install directory}\bin\apache\apache2.2.8\bin\htpasswd.exe -c C:\{WampServer2.0c.exe install directory}\bin\apache\apache2.2.8\passwd {Whatever username you want (ie. myuser)}

** It will ask you for a “New Password”: Make up your own
** It will ask you to “Re-type new password”: repeat

** Left click the white half circle -> Apache -> httpd.conf (this opens the file)

** Find:
</IfModule>

Include

** and add in new line after:
<Location /svn>
DAV svn
SVNPath C:/{Repository Location}
Order allow,deny
Allow from all
AuthType Basic
AuthUserFile passwd
AuthName “Internal area”
require valid-user
</Location>

** Left click the white half circle -> Restart All Services

OOP in Javascript... Don't be fooled.

2008-06-18T12:33:00.000-07:00

In JavaScript, "new" does not mean you get a clean instance of a class. class properties still have a link reference to the prototype. Here is an example of the problem.


  //example class
  var testClass = function(){};
  //class definition
  testClass.prototype = { arr: [], obj: {} };
 
  /*
   * This example shows how instance 2
   * indirectly gets instance1's array
   */
 
  //new instance 1
  var instance1 = new testClass();
  //push some stuff in the array
  instance1.arr.push('this is data 1 for instance 1');
  instance1.arr.push('this is data 2 for instance 1');
  instance1.arr.push('this is data 3 for instance 1');
 
  //new instance 2
  var instance2 = new testClass();

  //instance2 has instance1's array!
  alert(instance2.arr);
 
 
  /*
   * This example shows how instance 1
   * indirectly gets instance2's object
   */
  //put some stuff in instance2's obj
  instance2.obj['one'] = 'this is data 1 for instance 2';
  instance2.obj['two'] = 'this is data 2 for instance 2';
  instance2.obj['three'] = 'this is data 3 for instance 2';
 
  //instance1's obj was changed to instance2's obj!
  alert(instance1.obj.one + ' ' + instance1.obj.two + ' ' +  instance1.obj.three);

The solution that works is using Object.clone(new testClass) after instantiation, however not very optimal. So in the end I made sure in my constructor class, I manually reset arr and obj (this.arr = []; this.obj = {}). It's important that if you use "new testClass" you are not making a real instantiation, it's more like a simulated one. Plan on manually resetting array and object properties in your constructor so this won't happen to you!

Event Handlers ... and the winner is ...

2008-05-27T05:18:00.000-07:00

Quirksmode 's archive posts Mr.jQuery John Resig Winning a new addEvent, removeEvent function. Found Here

The code is as follows:


function addEvent( obj, type, fn )
{
 if (obj.addEventListener)
  obj.addEventListener( type, fn, false );
 else if (obj.attachEvent)
 {
  obj["e"+type+fn] = fn;
  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  obj.attachEvent( "on"+type, obj[type+fn] );
 }
}

function removeEvent( obj, type, fn )
{
 if (obj.removeEventListener)
  obj.removeEventListener( type, fn, false );
 else if (obj.detachEvent)
 {
  obj.detachEvent( "on"+type, obj[type+fn] );
  obj[type+fn] = null;
  obj["e"+type+fn] = null;
 }
}

I actually used this code to help build my framework and under further testing since it manages events using an associative, this method would not work for wrapper functions like lets say Prototype's bindAsEventListener because once you remove event it will remove everything with that wrapper.

Proof of concept:


var someFunction1 = function(one, two, three){alert(two)};
var someFunction2 = function(one, two, three){alert(three)};
var someWrapper = function(func){
 var __method = func; args = [0,1,2];
 return function() {
  __method.apply(this, args);
 }
}
addEvent(element, 'click', someWrapper(someFunction1));
addEvent(element, 'click', someWrapper(someFunction2));
removeEvent(element, 'click', someWrapper(someFunction2));

//onclick addEvent(element, 'click', someWrapper(someFunction1))
// will not work

Sorry I know it's 2008 but that post is still in the top google. I wanted to get that clarified with everyone. Chris says no to Associative array in this manner.

The Best JS Framework in the world?

2008-05-23T15:32:00.000-07:00

Okay I been on this question for a really long time now. I first implemented PXP using Prototype in early 2007. This was back when 1.5 was out and I realized that jQuery looked better and had more of functionality that I wanted. I suddenly switched to jQuery and was excited that I finally had the chance to call simple JS to build my epic application. I soon realized most of the plugins (or UI) weren't fully developed and/or not working as I expected them to. Also I reviewed my code when I finally got draggable boxes, menus and tab features up and running and saw that it was real spaghetti. about 3 months later I found that prototype had updraded to 1.6 with promises of a brighter future.

I delete my jQuery code and defected back to Prototype and it was good! I loved the new code structures I was coming out with but the "look and feel", cross browser and styling this mofo became where most of my time went to. As a product developer all you want to be concerned with are higher level thoughts. I'm not a designer nor want to be. I am a programmer mastering my craft!

After 3 more months with working with prototype and getting frustrated with my design templates not working out, I began my search for a new framework. I remember Nate Koechley from Yahoo came to my work about a month ago with promotions of YUI. I looked at YUI long before that but was unimpressed with the framework and the support for it. For someone like me, I don't like posting a question in the group and waiting for a response. I need fast support. It was only recently that I found YUI had blown up to a lot of features built around many fundamental practices. The framework still didn't impress me but the massive widgets that were already "skinned" gave me no choice but to switch to it. I always dreamed of a library with styled widgets! Again I dump my prototype code and switched to YUI and in 2 weeks of coding I was able to go as far in my product than I ever had in a year!

Of course after 4 weeks I start hating the "YUI Sam Skin" and look for other skins. After 22 pages of google searches I concluded there were no other YUI skins in this world, which made me sad considering my direct competitors had awesome styling. I also noticed that my epic application basically requires to use every single freaking thing that YUI offers and I noticed a performance drain because of the large files (even though they were compressed) and yes I was using the YUI Loader to load scripts only when it was needed. It wasn't that, I also realized that in YUI they have made executive decisions on how to implement their widgets without giving clear documentation on how to rawly access their core widget functions. I call it being "bloated". Also, although YUI code is organized their dependency list per file is spaghetti. So imagine if you will a widget that requires 4 functions of a utility class made up of 5000 lines of code.

MY OWN FRAMEWORK

I was tired of YUI but there really isn't anything better that fit my project needs. I started searching for maybe other libraries that matched up to YUI and thought "You know what? I should just make a library!" and I did! It was the coolest thing I ever did in JS and I only say that because it was my own code and I finished the framework in less than 900 lines of code. It had Selectors, Events Manager, Element Traversing, AJAX Management with caching and abort features, Class creation/extending and Namespace Management. I loved my framework. The only thing that turned me off of it was Effects! I hate coding effects. So really what is the best framework out there?

Please don't say ExtJs. I don't want to get started there. Mootools maybe, but I need widgets pertaining to a software application and I just don't think Mootools has it. So I guess it's YUI for now at least for my needs and I'm really not happy with that decision.

Anyways this weekend will be a power weekend for me. It's a 3 day weekend and no Girlfriend. Happy Memorial Day to everyone.

PXP Admin Development

2008-05-14T21:49:00.000-07:00

Switched the admin JS library from Prototype to YUI. I was able to get alot more done in a shorter amount of time.

Just Letting you guys know that I'll be closing my admin demo on March 23. You can view it now at http://www.dev.blanquera.com/admin/ . I know there's an extra comma somewhere in te js that's stopping it from loading in IE, but it works in FF. Let me know what you think.

In a rush because I'm still programming. Thanks for reading...

Draggable Resizable Box with Rounded Corners Part: 2

2008-05-05T19:31:00.000-07:00

In this next section of this tut I will be going over the CSS implications. To read Part 1 click here. This example will use the current Prototype 1.6 Library so if you don't like prototype this tut is not for you. To just skip to the example you can look here.

2.The Look and Feel
First lets go over the skeleton. Box needs to be absolute, no surprise there. The important thing here is that we make sure we set the positioning to relative for each section of the box (top, middle bottom) for this we can now absolute position elements within the box.


.box {
 position: absolute;
}
.box .top {
 background: transparent url(images/left-corners.png) no-repeat scroll 0pt 0pt;
 padding-left: 6px;
 position: relative;
}
.box .middle { 
 background: transparent url(images/left-right.png) repeat-y scroll 0pt;
 padding-left: 6px;
 position: relative;
}

.box .bottom {
 background: transparent url(images/left-corners.png) no-repeat scroll 0pt bottom;
 padding-left: 6px;
 position: relative;
}

The top right styles need to fit in with the sliding doors technique to prevent the title from breaking the title lets set the ".center" overflow to hidden. There aren't any whiz bang features here as well.


.box .top .right {
 background: transparent url(images/right-corners.png) no-repeat scroll right 0pt;
 padding-right: 6px;
}
.box .top .center {
 background: transparent url(images/top-bottom.png) repeat-x scroll 0pt 0pt;
 overflow: hidden; 
 color: #15428B;
 font-weight: bold;
 padding: 5px 0pt 4px;
 width: 100%;
}

Okay I lied there isn't much to the CSS besides the sliding doors technique. Two last points...
1. Set your ".middle .center .content" to "overflow: auto" to enable a scrollbar in your middle.. Looks pretty sexy!


.box .middle .center .content {
 background:transparent none repeat scroll 0% !important;
 border-color: #3168D5;
 border-style:solid;
 border-width:1px;
 overflow: auto;
 position: relative;
}

2. With the current CSS you will be able to absolute position the handles to different parts of the box.



.box .top_handle {
 background:transparent url(images/top-bottom.png) repeat-x scroll 0pt 0pt;
 cursor:n-resize;
 height:6px;
 left:0;
 top:0;
 width:100%;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .bottom_handle {
 background:transparent url(images/top-bottom.png) repeat-x scroll 0pt bottom;
 bottom:0;
 cursor:s-resize;
 height:6px;
 left:0;
 width:100%;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .left_handle {
 background:transparent url(images/left-right.png) repeat-y scroll 0pt;
 cursor:w-resize;
 height:100%;
 left:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden;
 position:absolute;
}
.box .right_handle {
 background:transparent url(images/left-right.png) repeat-y scroll right 0pt;
 cursor:e-resize;
 height:100%;
 right:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .top_left_handle {
 background:transparent url(images/left-corners.png) no-repeat scroll 0pt 0pt;
 cursor:nw-resize;
 height:6px;
 left:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden;
 position:absolute;
}
.box .top_right_handle {
 background:transparent url(images/right-corners.png) no-repeat scroll right 0pt;
 cursor:ne-resize;
 height:6px;
 right:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .bottom_left_handle {
 background:transparent url(images/left-corners.png) no-repeat scroll 0pt bottom;
 bottom:0;
 cursor:sw-resize;
 height:6px;
 left:0;
 width:6px;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .bottom_right_handle {
 background:transparent url(images/right-corners.png) no-repeat scroll right bottom;
 bottom:0;
 cursor:se-resize;
 height:6px;
 right:0;
 width:6px;
 line-height:6px;
 overflow:hidden;
 position:absolute;
}

Handles are a go! in this next part we will be discussing the JS implications.

Draggable Resizable Box with Rounded Corners Part: 1

2008-05-05T17:09:00.000-07:00

So I tried to Google this and see if there was a tut available. I couldn't find one that had this type of box. Here's my attempt for this type of box. This example will use the current Prototype 1.6 Library so if you don't like prototype this tut is not for you. To just skip to the example you can look here.

Requirements:

Rounded Corners
Resizable in all directions
Draggable
Tableless design

To perform this feet you need to be familiar with the sliding doors technique (http://www.alistapart.com/articles/slidingdoors/). Although this technique is for tabs I will show you how this applies to this box example.

1. The HTML
I want to start off with building out a general skeleton of the box. A box has a top (or a header) for the title usually and the delete icon. The middle is where the main content for that box goes and the footer is to make the box complete (usually used for status text but in my example i wont be using that).


<!-- Box top, middle, bottom -->
<div class="box">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Here's where the sliding doors technique comes into play. Each part of the skeleton will have sliding doors applied. It just so happens that sliding doors is built to stretch and this is the reasoning why the box could be resizable now with rounded corners.


<!-- The Box with sliding doors -->
<div class="box">
  <div class="top">
    <div class="right">
      <div class="center"></div>
   </div>
  </div>
  <div class="middle">
    <div class="right">
      <div class="center"></div>
    </div>
  </div>
  <div class="bottom">
    <div class="right">
      <div class="center"></div>
    </div>
  </div>
</div>

Lets add content wrappers for the top title and middle section


<!-- The Box with sliding doors -->
<div class="box">
  <div class="top">
    <div class="right">
      <div class="center">
        <div class="title"> Box Title </div>  
        <div class="close"></div>  
      </div>
    </div>
  </div>
  <div class="middle">
    <div class="right">
      <div class="center">
        <div class="content"> This is my Box content. </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="right">
      <div class="center"></div>
    </div>
  </div>
</div>

Lastly we need to attach handles for every outer area of the box.
Lets add content wrappers for the top title and middle section


<div class="box">
  <div class="top">
    <div class="right">
      <div class="center">
        <div class="title"> Box Title </div>  
        <div class="close"></div>  
      </div>
    </div>
  </div>
  <div class="middle">
    <div class="right">
      <div class="center">
        <div class="content"> This is my Box content. </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="right">
      <div class="center"></div>
    </div>
  </div>
  <div class="top_handle"></div>
  <div class="bottom_handle"></div>
  <div class="left_handle"></div>
  <div class="right_handle"></div>
  <div class="top_left_handle"></div>
  <div class="top_right_handle"></div>
  <div class="bottom_left_handle"></div>
  <div class="bottom_right_handle"></div>
</div>

Great the HTML is ready! in this next part we will be discussing the CSS implications.

YUI Review

2008-05-04T21:28:00.000-07:00

Okay last weekend I worked with the Google Web Toolkit and I thought that was amazing. This weekend I took the time and actually looked and implemented some of the things in YUI and I have to say I'm honestly impressed how far it's gotten since Nate Koechley gave a talk about YUI at my work . A lot of the things we can do better as JS programmers have been addressed in YUI and I HIGHLY recommend everyone to sit down and take a look at it. Prototype could be easily ported into YUI like bind and extend (honestly I think that's the only thing where prototype wins over YUI as of today). I implemented some code using YUI, actually alot but here's a small list of some hot things worthy of note....

Assuming we have the bind .function from prototype... if not I created my own version of it.


//okay i can't live without this.
Function.prototype.bind = function() { 
 //lets get the args for this.
 var i, length = arguments.length, args = [];
 for(i = 0; i < length; i++)
 {
  args.push(arguments[i]);
 }
 //this is the function that bind attached to
 var __method = this, object = args.shift();
 delete i, length;
 //now lets run this function
 return function() {
  //lets concat the arguments from the old one 
  //and the new one
  var i, length = arguments.length, args2 = [];
  for(i = 0; i < length; i++)
  {
   args2.push(arguments[i]);
  }
  return __method.apply(object, args2.concat(args));
 }
}

Aborting AJAX requests and responding to similar requests..
This is a server request method I created. Which addresses similar requests.


    /*
     * sends a request with a response
     * use BIND !!! Woot!
     */
request: function(param, response, raw) {
        param = raw ? params : '?__ajax='+params;
        //there's a transaction with this param being requested lets just add on to the response
        if(this.transactions[param])
        {
            this.transactions[param][0].push(response);
        }
        //lets create a new transaction
        else
        {
            var callbacks = {
                success: function(response){
                    if(this.transactions[param])
                    {
                        //if there are other objects waiting for this transaction lets give the data to them as well
                        for(var i = 0, length = this.transactions[param][0].length; i < length; i++)
                        {
                            this.transactions[param][0][i](response.responseText);
                        }
                        //lets remove this transaction
                        delete this.transactions[param];
                    }
                }.bind(this, param),
                failiure: function(){},
                timeout: this.requestTimeout || 1500
            };
            this.transactions[param] = [[response], YAHOO.util.Connect.asyncRequest('POST', '/', callbacks, param)];
        }
        
        return this.transactions[param][1];
    }

Including JS and CSS after load
This manages what we included and what we should do when it loads. No duplicates will be added. The Beta Version of YUI Loader still outputs duplicate includes.


     /*
      * include a css or js script
      */
     include: function(url, actions)
     {    
             if(this.includes[url])
             {
                     return this;
             }
             this.includes[url] = true;
             if(url.indexOf('.css') != -1)
             {
                     YAHOO.util.Get.css(url,actions);
             }
             else
             {
                     YAHOO.util.Get.script(url,actions);
             }
     }

New Event Listeners
YUI offers 3 new Event Listeners

1. onAvailable: onAvailable targets a single element and fires when that element is available (when it responds to document.getElementById()) — but you can't count on the element's children having been loaded at this point.
2. onContentReady: When you care about not just your target element but its children as well, use onContentReady. This method will tell you that your target element and all of its children are present in the DOM.
3. onDOMReady: Some DOM scripting operations cannot be performed safely until the page's entire DOM has loaded. onDOMReady will let you know that the DOM is fully loaded and ready for you to modify via script.

Here is my implementation to use any of those as well as the standard type for calls


     /*
      * faster way to listen
      * use BIND !!! Woot!
      */
     listenTo: function(el, type, response) {
             var event = null;
          
             if(type == 'ready')
             {
                     event = YAHOO.util.Event.onContentReady(el, response);
             }
             else if(type == 'available')
             {
                     event = YAHOO.util.Event.onAvailable(el, response);
             }
             else
             {
                     event = YAHOO.util.Event.on(el, type, response);
             }
             return event;
     }

One other thing of note is the container class. This class apparently addresses some things with modules and overlays.... the examples can be found here http://developer.yahoo.com/yui/examples/container/index.html
But why YUI? Look at their widget collection! I swear it gets substantially larger every month. A lot of people in the community have been custom making their versions of YUI because of the long YUI namespaces. I just thought it would be sweet to just create a loader (A factory pattern [lol]) to wrap all these classes as well... for example the SS loader !


//Initial Area building.
ss.load('Events').onPageLoad(function() {
     //request for the login, create a div, append the response to the div
     ss.request(ss.serialize({'__ajax':LoginModule}, function(r){ss.newEl('div', {id:'login'}, r, document.body)});
     //once this is loaded lets get the js for this
     ss.listenTo('login', 'available', ss.include('form.js'));
});

//Lets start getting the js for the Top Modules
ss.load('Events').onPageLoad(function() {
     ss.include('/include/js/yui/menu/assets/skins/sam/menu.css');
     ss.include('/admin/modules/TopMenuAdminModule/TopMenuAdminModule.js');
     ss.include('/admin/modules/TopTabAdminModule/TopTabAdminModule.js');
});

okay that looks wicked sick. The whole YUI community is flourishing and there are going places fast. A lot of the EXTJS community has defected already as well because of the EXTJS Licensing issue.
Anyways that was my weekend...