I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.
My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.
Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).
While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”
In my last post, I discussed the YUI imYUILogin widget that I created. In this post, I will demonstrate how to log in ajaxally using the imYUILogin widget with CakePHP and the AuthComponent. I’m assuming that you have already read the Simple ACL Controlled Application and have the AuthComponent configured correctly. I’m also assuming that you are familiar with the Yahoo User Interface Library.
The YUI Depency Configurator is a tool that eliminates the need to try to remember which YUI files to load.
Select the components that you that you need by clicking on buttons labeled with each component ((interface widgets, css, utilities, etc) and the Configurator will create a url string that will load both js and css files.
So instead of:
<link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="lib/yui/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="lib/yui/assets/skins/sam/skin.css"> <link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" /> <link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="lib/yui/datatable/assets/skins/sam/databale.css" /> <link rel="stylesheet" type="text/css" href="lib/yui/accordionview/accordionview.css"> <link type="text/css" rel="stylesheet" href="lib/yui/autocomplete/assets/skins/sam/autocomplete.css"> <script type="text/javascript" src="lib/yui/utilities/utilities.js"></script> <script type="text/javascript" src="lib/yui/container/container-min.js"></script> <script type="text/javascript" src="lib/yui/resize/resize-min.js"></script> <script type="text/javascript" src="lib/yui/layout/layout-min.js"></script> <script type="text/javascript" src="lib/yui/menu/menu-min.js"></script> <script type="text/javascript" src="lib/yui/button/button-min.js"></script> <script type="text/javascript" src="lib/yui/tabview/tabview-min.js"></script> <script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script> <script type="text/javascript" src="lib/yui/datasource/datasource-min.js"></script> <script type="text/javascript" src="lib/yui/autocomplete/autocomplete-min.js"></script> <script type="text/javascript" src="lib/yui/animation/animation-min.js"></script> <script type="text/javascript" src="lib/yui/json/json-min.js"></script> <script type="text/javascript" src="lib/yui/datatable/datatable-min.js"></script> <script type="text/javascript" src="lib/yui/connection/connection-min.js"></script> <script type="text/javascript" src="lib/yui/selector/selector-min.js"></script> |
You can use the YUI Dependency Configurator to create::
<!-- Combo-handled YUI CSS files: --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts/reset-fonts.css&2.8.0r4/build/assets/skins/sam/skin.css"> <!-- Combo-handled YUI JS files: --> <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/tabview/tabview-min.js"></script> |
Another advantage of using the YUI Dependency Configurator is that the these files are not loaded from your server. You can select to link to files in either the Yahoo or Google CDN’s.
You can also bookmark or email the configuration. JQuery UI Themeroller has a similar process. The major difference is that the ThemeRoller combines all selected components into a single file that is downloaed.
To create...