• Tutorials
  • Blog
  • About
  • Contact
  • Check out Brackets.io


    2012 - 06.25

    Adobe has just released a really cool new tool named Brackets. Brackets is an open source code editor for the Web. The primary focus for Brackets is to target HTML, CSS and JavaScript development.

    Brackets has been in development for a few months now (early May-ish). It’s up on GitHub @ https://github.com/adobe/brackets

    What’s cool about Brackets? Well, I’m glad you asked.

    In my humble opinion, the coolest feature within Brackets is the fact that the editor it’s self is written in HTML, CSS and JavaScript. Now it gets weird. It’s actually possible to edit the Brackets editor with Brackets.

    Does this cause a rip in the space-time continuum? A wormhole perhaps?

    I can’t actually say for sure. I was able to accomplish this successfully and I believe that I’m still operating within the same plane of existence but I’m not entirely sure how to confirm this assertion.

    When you first download and fire up Brackets you might get a kick out of playing with the Bracket’s source with Brackets. There it is. All of the editor’s source code, there for the playing with.

    Brackets really lifts up it’s skirt and shows the developer the “full monty”. At first I thought this was a complete gimmick but I’ve come to really appreciate the fact that I can dig in and make changes to my editor with relative ease.

    It’s MIT licensed. It’s on GitHub. It’s ready to be forked.

    Ok, now for a little more details on the application’s actual feature list:

    1. It’s small and it loads fast. (under 40mb)
    2. Minimal UI. It’s not your typical Adobe floating panel application.
    3. Everything is keyboard enabled.
    4. There’s a cool ‘live reload’ type of feature.
    5. Built in break points in the editor.
    6. It’s got some interesting introspection. So it can do things like find styles that apply to tags and display them inline. (hit control e to check it out for yourself because I’m not describing it well)
    7. The editor is modular and extensible. You could make snippets, panels or who-knows what.
    8. Did I mention it’s liberal open source licence?

    Ok, you get the idea. Here’s Bracket’s home on the web:

    Brackets.io

    Go check it out but be sure to stop back by and post some of your favorite feature in the comments.

    Adding View Source to Adobe Air in Flash Builder 4.5 and 4.6


    2012 - 03.15

    Oh jeez. I remember Flex Builder 3 making it easy for people to just right click your application and view source. What’s happened here?

    Quick answer is:

    Listen for the applicationComplete event and add the menu item:

    ViewSource.addMenuItem(this, “www.LinkToYourSource.org/srcview”)

    The long answer is that I spent the better part of an afternoon looking for an easy way to have Flash Builder do what it used to do (generate and show my source code). I was seeing Flash Builder to crazy stuff like rip out the “viewSourceURL” tag from my WindowedApplication. I figure there’s some sort of setting in the project properties that is set to kill stuff like this when doing a production release but I couldn’t seem to find it. Is my hair falling out?

    Oh, and yes, I’m talking about Adobe Air here. I see everything seem to be in order when doing a Flex browser application.

    To generate the view source files I fired up an old version of Flex 3 and when I went to the export wizard it had that old familiar “Enable view source”. I pulled in a more modern compiler but Flex Builder didn’t seem to get the build right. But it did generate the viewable source code. So I took that code and posted it online. Then I switched back to Flex 4.6 and made the actionscript call to add that source menu:

    protected function applicationCompleteHandler(event:FlexEvent):void
    {
    ViewSource.addMenuItem(this, “http://SAMPLE_WEBSITE.ORG/srcview/index.html”);
    }

    So while this solution works, I’m sure there’s some really simple way to get my old familiar wizard back.

    What am I doing wrong here?

    Getting the View Navigator Change Event


    2012 - 02.20

    Maybe you’re googling to find the Flex View Navigator change event? I know I was but I didn’t find it. Here’s the quick fix:

    You can watch for the length to change like this:
    ChangeWatcher.watch(mainNavigator,’length’, mainNavigator_lengthChangeHandler, false, true);
    Take note that we’re using weak reference here.

    Another option that I’m leaning towards is responding to the view navigator’s elementAdd and elementRemove events.
    ViewNavigator id=”mainNavigator”
    firstView=”view.homeScreen.HomeScreenView”
    elementAdd=”mainNavigator_elementAddHandler(event)”
    elementRemove=”mainNavigator_elementAddHandler(event)”

    Some of these blog posts are just so I can find the answer to the same problem later. But I hope they help someone else also :)

    Best of luck,
    Matt

    Center A Popup in Flex Mobile after Orientation change


    2011 - 12.19

    How do you center or re-center a popup in Flex when a user is changing the orientation of the device?

    Maybe a user rotates the device and the view changes from landscape to portrait view and you have a popup that needs to be re-centered. So what to do . . .

    Well, I’m glad you asked. Basically, you need to listen for the Stage to dispatch a StageOrientationEvent.ORIENTATION_CHANGE event. When the orientation does change, you’ll need to wait for the view to update (or whatever magic you’re doing), give Flex a second to redraw the view by waiting a frame then center the popup. (PopUpManager.centerPopUp)

    Additionally you could set a flag and wait for the updateDisplaylist method to be called before centering your popup.

    Ok if that wasn’t clear, maybe a little code would help:

    protected function addedToStageHandler(event:Event):void
    {

    this.stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, stageOrientation_eventHandler);

    }

    protected function showSettingsPopup():void
    {

    PopUpManager.addPopUp(settingsPopup, this, true);
    centerPopup();

    }

    protected function stageOrientation_eventHandler(event:StageOrientationEvent):void
    {

    if(settingsPopup)
    {
    //we call it later so that Flex can layout the app before we center everything.
    // we could also set a flag and override the update display method.
    callLater(centerPopup);
    }

    }

    protected function centerPopup():void
    {

    PopUpManager.centerPopUp(settingsPopup);

    }

    So in this code we’re using a popup called ‘settingsPopup’. You’ll need to make your own popup and have a reference to it in order to center it.

    Best of luck,
    Matt