Widgets: Posts

I’ve created a new development repository on Google Code. I wanted to have a separate development environment for people to work on the library without having to work off of the entire CNET Javascript framework repository. I’ll be posting CiUI-only releases there before merging them with Clientside’s repository.
You can also file CiUI specific bugs and feature requests on there. If you’re interested in joining in the development, please come discuss your ideas to our Google group.

CiUI Dev Google Code repository:
http://code.google.com/p/ciui-dev

CiUI Group
http://groups.google.com/group/ciui

Given how the iPhone’s growth has made some ripples in the world of mobile browsing, we here at CNET decided to spend a little time and make an iPhone friendly version of our sites. At first I (Vladimir Olexa) considered the excellent iUI from Joe Hewitt but eventually decided to write our own.

The result is CiUI (CNET iPhone UI) that mimics iPhone UI behavior. It’s already being used on CNET’s iPhone page (http://iphone.cnet.com). It’s been greatly inspired by iUI with a few key differences:

1. AJAX calls are performed after a page slides
2. DOM doesn’t get overloaded with “pages” as they load. Instead, two DIVs are constantly being reused
3. Page titles are set on the source page, not on the destination page
4. Only specified “a” tags are assumed a part of the UI

| Read the rest »

New date picker, Date extentions, Auto-ajax indicator, and Input text hovers

So I just finished pushing out and testing my latest batch of additions to the CNET Libraries and you can download them in our svn. Here's a brief roundup with links to demos and stuff:

• DatePicker got a lot of love including the ability to output a custom format for the date and the ability to choose ranges and enter times
• Extended the Native Date object to add lots and lots of neat-o methods including date comparison, fancy parsing, and about 2 dozen other useful features and methods
• OverText - a new Class that hovers text over inputs until the user clicks into them and changes them
• Waiter - an ajax indicator class that automatically greys out a dom element with a spinner image (you can customize these things) while your Ajax is requesting new HTML for it. Can be used stand alone (i.e. if you need to show a waiting indicator even if it's not Ajax you're using), but it's integrated nicely into Ajax if you are using it.
• Our default DHTML popup html (stickyWinHTML) got an option to add a drag handle to the window

The Waiter class is probably my favorite, but all the Date love is really nice, too. Check it out and play around with it.

Hey gang,

Two new classes in the CNET libraries today.

CNETAPI.js

The first, CNETAPI, is probably not going to be very interesting to those of you reading this who don't work at CNET. Basically, this class makes it super-duper easy to get stuff out of our REST API. For example:

PLAIN TEXT

JavaScript:

//you have to do this only once on your page
//this is my dev key; get your own!
new CNETAPI(19926949750937665684988687810562);
//now our request:
new CNETAPI.TechProduct(32069546).chain(function(){
  dbug.log("got the Ipod, here's the data: ", this.data);
  alert(this.data.Name + ": " + this.data.EditorsRating.$);
});

//you have to do this only once on your page
//this is my dev key; get your own!
new CNETAPI(19926949750937665684988687810562);
//now our request:
new CNETAPI.TechProduct(32069546).chain(function(){
dbug.log("got the Ipod, here's the data: ", this.data);
alert(this.data.Name + ": " + this.data.EditorsRating.$);
});

Pretty snazzy, eh? Props go to Hunter Brown who wrote the guts of this class. I (Aaron) added some flare. More details and examples in the wikitorial.

ObjectBrowser.js

I'm working on some CMS tools for selecting options out of a tree (think genres/ontology) and I needed a tree browser. So I wrote a generic one that can be used to explore just about any kind of javascript object. Rather than paste in a lot of detail here, I'll just point you towards the wikitorial.

There's a nice new article by Jonathan Snook on Adobe AIR that is worth the read. I was about to write all about it here but I see that Ajaxian wrote about it yesterday. I'll, instead, just post what they had to say about it:

It looks like everyone wants to put out some form of Adobe AIR application and Twitter-based apps seem to be all of the rage, possibly because of the ease of integrating with Twitter's API.

Apparently, Jonathan Snook didn't want to be left out of the fun and created his new Twitter app appropriately called Snitter:

I built Snitter for a couple reasons. First off, I wanted to take AIR out for a spin and see what it could do. Secondly, I find using the Twitter web site frustrating at times because it doesn't offer up features that I've always felt could be easily added. So, I've gone ahead and built an app with the features that I've always wanted.

Jonathan definitely has a flare for style and he's brought that over to a really nice looking application:

You'll need the following to run the app:

• A Twitter account (duh!)
• The Adobe AIR runtime
• The Snitter AIR file

Hi gang,

Got some new goodies for you in the ol' svn today. First, the bugs fixed:

• fixPNG: slight tweaks and debugging lines added
• modalizer: cleaned up style syntax a little
• stickyWinFx: updated convention for options management to current methods
• jsonp: added a timeout/retry system, added some dbug lines
• Fx.Sort: fixed a bug in IE6
• element.setPosition: now correctly restores display, visibility, and position values to their previous state,
• element.forms: reverted (and tested) cursor/selection management; IE6 was acting up. fixed a doc typo
• element.pin: fixed a positioning bug
• element.position: now supports elements inside positioned parents (it calculates the relevant offsets); added support for fixed positioned elements;

And thew new widgets:

• Fx.Marquee - a little Fx plugin for announcing status messages
• IconMenu - a menu for managing a bunch of icons in a scrollable workspace
• MooScroller - like regular overflow scrollbars that come with your browser when you use overflow: auto, except done in javascript so the scrollbar is 100% css styleable

Have fun.

Slimbox is awesome and we wanted to use it, but there were a few things I wanted to change about it:

• It should be a class
• You should be able to interact with the options without editing the script itself
• I wanted to have the css assets added to the page automatically

So I made these changes and checked it in. | Read the rest »

So in the last week or so I've been working on a bunch of CMS related tasks. I've added some new stuff and, for the first time, 3rd party scripts are now in our repository. Why? Well, why re-invent the wheel, right? In some cases I've implemented a few changes in these libraries, while in others I've rewritten them a LOT. You'll find working examples and details in the wikitorials and I'll be updating our docs shortly. | Read the rest »

Over on the Mootools forum digitarald (a contributor to Mootools) has posted date.js, a date parsing script that converts just about any date a user could imagine entering into a field into an actual date. I'm probably going to add this to our /mootools.extensions/Native folder and integrate it in with our own date.picker.js.

History Manager

Here's another digitarald script that I'm eyeing with a bit of interest, a state manager for ajax environments. From his site:

“Ajax History”, “Back-Button”, “Ajax Bookmarks”, call it however you like. This is an unobtrusive MooTools plugin to allow history handling for multiple modules, try it out. It can handle back/forward history actions and bookmarks with the location hash.

Features

• Allow users to bookmark your ajaxified application in the current state
• Forward/Backward history browsing for your Accordion and every other
• Save states of One-Page-Applications over sessions
• Change easily default options and customize the behaviour with Events

New Mootools Blog

The Mootools site now has a nifty blog and it's got some great stuff on it already. First up is a quick set of reference links to everything you need to learn javascript. Many of these things are stuff I've linked to in my side-bar or in various posts, but it's a nice collection for sure.

SlickSpeed

You might have seen this show up on Ajaxian, but the Mootools gang released Slickspeed, a set of browser tests for dom selector comparisons for various browsers:

IE Debugger: My DebugBar

Here's a new debugger for IE that looks promising. I haven't fooled around with it yet but if anyone has or does, post a comment with your thoughts!

Google Gears

If you've followed ajaxian in the last two weeks no doubt you've seen this already, but Google launched Google Gears a week or two ago. In their words:

Google Gears (BETA) is an open source browser extension that enables web applications to provide offline functionality using the following JavaScript APIs:

• Store and serve application resources locally
• Store data locally in a fully-searchable relational database
• Run asynchronous Javascript to improve application responsiveness

Sounds promising. Here's a nice little write up from Uriel Katz.

Fx.Morph

Was glancing through the demos at http://demos.mootools.net and stumbled on to Fx.Morph, a short little Fx class that transitions an element's properties from one css class to another. I wrote something like this a few months ago but ultimately decided I didn't really need it but now I'm giving it a second thought.

Mootools 1.1 was released a few weeks ago and I've finally finished re-writing the Mootorial. You'll find executable examples of nearly every function and class found in the library. Just as before, it's a wiki (a wikitorial?) so you can jump in and fix typos or add clarity where you think it needs it.

In addition to this update we've tidied up some of our libraries (in particular the Element extensions) and tested them for compatibility with Mootools 1.1. You can download these files from our SVN server, view the examples of them in action, and look through the docs. | Read the rest »