Building a Mac Dock like Menu in AIR with Ajax | August 21st, 2007
So I’ve been cruising on the Adobe AIR Bus across the country this summer and I’m the only guy with a PC, well Ben and Lee were back up for a bit but not consistently enough. So Alexei and I thought it be cool to build a Mac dock type menu for AIR using the Nitobi Fisheye Ajax component.
Mac Dock:
I thought it would be a neat demo too since it’s flashy (nice graphics, animation etc…) and we have some new Dreamweaver Extensions coming out soon which makes it accessible to those aren’t yet full blown “Ajax Engineers”.
First off, so we all know what I’m talking about check this little video of it below:
Here’s how to build it (Dreamweaver + Nitobi Style):
- Use the Nitobi Fisheye Component (Dreamweaver Extension) this set ups the Ajax component on the page, and configures the component by setting the properties for display, animation and images:
- Sets up the Declaration:
…You get the idea, this repeats for all the menu items.
- Includes the script and CSS
- Onload Function
function onLoad()
{
nitobi.loadComponent("myEyeObj"); - Add a a function to call when the a menu item is clicked to open a new AIR window and load a given URL.
function runWindow(wid) {
var bla = window.open("http://" + wid, wid, "width=800, height=600"); }
- Add the capability to click and drag the app around the screen when the bar above the menu is clicked with the mouse.
nitobi.html.attachEvent($("grabby"), "mousedown", function() {window.nativeWindow.startMove();});
....
- Then Package as an AIR application with the System Chrome set to “None” and set it to “Transparent”.
More Info and files. Download the code and AIR file to play around with it.. Check out Alexei’s original Ajax Fisheye post.
Technorati Tags: ajax, air, nitobi, adobe, onairbustour, component, fisheye, macdock, dreamweaver, extension
This entry was posted on Tuesday, August 21st, 2007 at 8:26 pm and is filed under AJAX, components, design, nitobi, Software Development, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
September 17th, 2007 at 12:29 pm
pretty darn cool – thanks for sharing that. i’m going to check it out now.
b.
May 27th, 2009 at 12:28 am
[…] as you see it on the screen. An interesting development is the exposé designer at the bottom, in a Mac-style dock bar which enables you to switch slides easily. No more will you have to end your presentation, select the slide you want, then restart your […]