• Home
  • About Me
  • AIR Central
  • AS3 Libs
  • Books
  • Flex Central
  • Resources
  • The Guru's
  •  

    AIR ContextWindow

    October 18th, 2007

    Looking for an easy way to add window controls as a context menu to your AIR windows? Try my new ContextWindow class.

    cw.png
    ‘A’ music in Mp3. - visit this to download mp3 music
    If you didnt find desired track - visin high-quality music site and download it easily
    But if you wish to download mp3 track you can go to new mp3 music site

    OK, so this is not rocket science by any means, it is just a class that extends mx.core.Window and creates a NativeMenu within the constructor and assigns it to the contextMenu property. To use it, simply download the class and create an instance of it just as you would with the regular Window class.

    Here is a sample application file:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute">

        <mx:Script>
            <![CDATA[
                import com.everythingflex.air.components.ContextWindow;
               
                private function createWindow():void{
                    var w:ContextWindow = new ContextWindow();
                    w.width=200;
                    w.height=100;
                    w.open();
                }
            ]]>
        </mx:Script>
        <mx:Button click="createWindow()" label="Create Wndow"
         horizontalCenter="0" verticalCenter="0"/>

    </mx:WindowedApplication>

    Here is the ContextWindow.as class file:

    package com.everythingflex.air.components
    {
        import flash.display.NativeMenu;
        import flash.display.NativeMenuItem;
        import flash.events.Event;
       
        import mx.core.Window;

        public class ContextWindow extends Window
        {
            public function ContextWindow():void{
                super();
                createMenu();
            }
            private function createMenu():void{
              var mainMenu:NativeMenu = new NativeMenu();
                    var minimizeMenu:NativeMenuItem = new NativeMenuItem("Minimize");
                    var maximizeMenu:NativeMenuItem = new NativeMenuItem("Maximize");
                    var restoreMenu:NativeMenuItem = new NativeMenuItem("Restore");
                    var closeMenu:NativeMenuItem = new NativeMenuItem("Close");
                    minimizeMenu.addEventListener(Event.SELECT, handleMenuClick);
                    maximizeMenu.addEventListener(Event.SELECT, handleMenuClick);
                    restoreMenu.addEventListener(Event.SELECT, handleMenuClick);
                    closeMenu.addEventListener(Event.SELECT, handleMenuClick);
                    mainMenu.addItem(minimizeMenu);
                    mainMenu.addItem(maximizeMenu);
                    mainMenu.addItem(restoreMenu);
                    mainMenu.addItem(closeMenu);
                    this.contextMenu=mainMenu;;
             }
             
             private function handleMenuClick(e:Event):void{
              var menuItem:NativeMenuItem = e.target as NativeMenuItem;
                    if(menuItem.label == "Minimize") this.minimize();
                    if(menuItem.label == "Maximize") this.maximize();
                    if(menuItem.label == "Restore") this.restore();
                    if(menuItem.label == "Close") this.close();
             }
        }
    }

    Accordion with Icons

    March 29th, 2007

    accordioniconsimg.jpg

    I built this component to allow an icon to be added to each Accordion Header where the icon is dependent on the current state of the Accordion. There are 3 possible states that are tracked, up, down, and selected. The upIcon is displayed whenever the pane is above the selected pane. The downIcon is displayed whenever the pane is below the selected pane. The selectedIcon is displayed when pane is the selected pane. See the image below.

    accordioniconsdiagram.png

    Sample Syntax (Basic with default icons):

    <eflex:AccordionIcons>
    <mx:Canvas label=”Canvas”/>
    <mx:VBox label=”VBox”/>
    <mx:HBox label=”HBox”/>
    </eflex:AccordionIcons>

    Sample Syntax (Advanced with custom icons and selectedIndex):

    <eflex:AccordionIcons
    upIcon=”@Embed(source=’assets/icons/arrowUp2.gif’)
    downIcon=”@Embed(source=’assets/icons/arrowDown2.gif’)
    selectedIcon=”@Embed(source=’assets/icons/arrowSelected2.gif’)height=”200
    selectedIndex=”1>

    <mx:Canvas label=”Canvas”/>
    <mx:VBox label=”VBox”/>
    <mx:HBox label=”HBox”/>
    </eflex:AccordionIcons>

    Run this demo

    View/Download Source

    Docs


    Flex Tree Map

    December 27th, 2006

    Josh Tynjala has posted the source code for his tree map component.

    Check it out at:

    http://www.zeuslabs.us/archives/110/flex-treemap-subversion-download/

    Great work Josh and thanks for the contribution of the source code.

    Rich


    Flex Scheduling Framework

    October 24th, 2006

    After a long period of anticipation, the Adobe Consulting team have made available an open-source Scheduling Framework for Flex 2. More than just a calendar component, the Scheduling Framework allows you to create and fully customize any number of Scheduling Components. Go get it at http://labs.adobe.com/wiki/index.php/Flex_Scheduling_Framework

    Rich


    Interactive Calendar

    October 18th, 2006

    Many of you already know that the Adobe Consulting team has been working on a calander component.  They have yet to release this component (maybe at Max next week)?  In the mean time Ely Greenfield has posted a prooof of concept calendar component that is very cool.  He has not yet posted the source code but does intend to make it open source and are looking for contributors.  Check it out by visiting is blog at http://www.quietlyscheming.com/blog/components/interactive-calendar/

    Rich