Andre’s Blog

Click To Play

Here’s how to build it (Dreamweaver + Nitobi Style):

1. 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:
2. Sets up the Declaration:

   <ntb :fisheye="" id="myEyeObj" growpercent="200" opendirection="down" expanddirection="center" iconwidth="54">

   </ntb><ntb :menuitem="" imagesrc="images/blinklist.png" label="Blinklist" onclick="runWindow('www.blinklist.com');"></ntb>

   <ntb :menuitem="" imagesrc="images/blogger.png" label="Blogger" onclick="runWindow('www.blogger.com');"></ntb>

   …You get the idea, this repeats for all the menu items.

3. Includes the script and CSS
   
   <link type="text/css" rel="stylesheet" href="osx/fisheye.css">

   
   <script language="javascript" src="nitobi.toolkit.js"></script>

   
<script language="javascript" src="nitobi.fisheye.js"></script>
</link>

4. Onload Function
   function onLoad()
{
nitobi.loadComponent("myEyeObj");
5. 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"); }
6. 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();});
....
<img src="images/grabby.png" style="cursor: move;" id="grabby" />
7. 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

| Del.icio.us

This entry was posted on Tuesday, August 21st, 2007 at 8:26 pm and is filed under AJAX, Software Development, Technology, components, design, nitobi. 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.