That’s weird.

Recent reading:
Windows 8’s Metro UI Isn’t Very Good Without Touch, But That Doesn’t Really Matter

Windows 8 Metro: Now with mouse support

Further reading: Ars Technica | Adobe Acquires Nitobi

Flash is back to being just Flash

Adobe Flash lost as a web application development standard, and Adobe knows it. They are spending tons of cash right now in a game of catch-up and expect to be the leader in web development again (they were just a short 5 years ago). After their initial, bitter battle with Apple and running Flash apps on iOS, they turned things around and you can now use Adobe tools to deploy apps on iOS. They already released a beta of a complete IDE for building HTML5/JavaScript5/CSS3 applications. It’s called Adobe Edge.

Adobe PhoneGap

With the power and capabilities of Edge growing with every release (because their customers are demanding it) it is most likely that PhoneGap will be tightly integrated as the de facto framework for building applications in the tool. Much like when Appcelerator purchased the Aptana IDE and converted it into Titanium Studio which allows us to code, build and deploy applications from one tool, Adobe Edge will be a complete IDE for HTML/JS/CSS application development.

Further reading: CNET | Adobe Sharpens Edge

Desktop

Now, if you are building desktop apps, PhoneGap is not an option because it is exclusively mobile. It’s the main reason that Titanium Desktop became so successful. Unfortunately, Titanium Desktop seems to be an abandoned, or at least orphaned, child in the Appcelerator roadmap. The few Appcelerator employees that I talked to at the conference two weeks ago did not have any answers as to how their desktop product fit into their future plans. They are currently focused 100% on their mobile application development tools. This is most likely because Appcelerator is resource strapped and simply giving all of its focus to what customers are demanding RIGHT NOW.

Adobe has no such limitations. Their AIR Runtime already allows developers to build HTML/JavaScript applications that can run on any desktop OS. Unfortunately, it could not run on every mobile OS, so it will most likely be abandoned and replaced with the eventual PhoneGap successor for mobile apps. I don’t see Adobe abandoning the desktop because they already have a dedicated presence there, and with the (finally) released information about the Microsoft Windows WinRT API in which you can author complete applications with JavaScript, it plays right into the hands of Adobe.

It’s highly probable that Adobe Edge has AIR integration for desktop applications before the official 1.0 release.

One Source

So what this gives us is more than one option for every environment. The source code for the GUI would continue to be in one language, but then could be built, or interpreted, to any platform. It will be interesting to see what Adobe does with the PhoneGap platform in the next year.

JavaScript

1. WinRT for Windows applications
2. Adobe AIR for Windows/OSX/Linux applications
3. PhoneGap for mobile web apps with native capabilities
4. Titanium for desktop and true, native mobile apps (and now web apps)

I find it interesting when I talk to developers who are focused on Java and .NET platforms about how JavaScript will soon replace a huge chunk of what they currently have to do when making applications with a user interface. I would think it would be a source of jubilation – no more worrying about cross-platform UI issues in compiled code – but I find there’s still a lot of resistance and denial even though the facts are all right in front of us.

This next generation of application development is going to be fun, not only because we can reduce the amount of code we need to write, but also because the entire industry is moving away from the immobile desktop and towards the mobile device platform.

This is a modification to the code found at a blog called Code Bytes. Unfortunately, I can’t credit the developer by name because nowhere on the blog does he/she actually provide a name or bio.

This was developed for version 1.1 of the Titanium framework. If you are using a later version, this may have been fixed.

/*
 * This code augments the Titanium framework code by detecting any element that has the
 * 'isDraggable' class assigned to it.  If that element is dragged, the entire window
 * is dragged correspondingly.  Also, only works on left-mouse click.
 */
var isDraggableWindow = function() {
    this.addEventListener('mousedown', function (e){
        function drag(e) {
            var currentWindow = Titanium.UI.currentWindow;
            var currentPosition = {x:currentWindow.getX(), y:currentWindow.getY()};

            currentPosition.x += e.clientX - mousePosition.x;
            currentPosition.y += e.clientY - mousePosition.y;

            currentWindow.moveTo(currentPosition.x, currentPosition.y);
        };

        if (e.button === 0 && ~e.target.className.indexOf('isDraggable')) {
            var mousePosition = {x:event.clientX, y:event.clientY};

            document.addEventListener('mousemove', drag, false);
            document.addEventListener('mouseup', function (e){
                document.removeEventListener('mousemove', drag, false);
                document.removeEventListener('mouseup', arguments.callee, false);
            }, false);

        }
    }, false);
};

// Then in your main module/application, you simply pass the ID of the top-level element
isDraggableWindow.call(document.getElementById('topLevelHTMLElementInApp'));

We added the following restrictions to the original code.

1. Only works on left-mouse click.
2. Only elements that have been assigned the ‘isDraggable’ CSS class will trigger window drag. This class doesn’t actually have to exist – it just needs to be added to the HTMLElement. Without this restriction, clicking on ANYTHING in the app and dragging will move the window.

Event Link: AMD and CommonJS modules

On October 11th, we’ll be covering Appcelerator’s Titanium framework which is an open-source framework that allows you write an application in JavaScript and then build native apps for iOS and Android (and Blackberry soon). You can also deploy the application to the desktop – whether it be Windows, OSX or Linux. One source code library to deploy to 6 platforms!

Event Link: Appcelerator Titanium Framework

On October 25th, we’ll be discussing how to build a JavaScript application and deploy it in the Adobe AIR runtime. With Adobe AIR, JavaScript developers can use their existing skills and code to build responsive, highly engaging applications that combine the power of local resources and data with the reach of the web.

Event Link: JavaScript and the Adobe AIR runtime

Whatever the reason, if you want to make anything clickable, it’s very simple. Simply add the following listener.

id    : 'myLabel',
xtype : 'label',
html  : '<div class="myHelpLabel"></div>',
listeners : {
    render : function(c) {
        c.getEl().on('click', function(){ this.fireEvent('click'); }, c);
    }
}

Poof. Now you can detect when that element is clicked in your controller (if you’re using the Sencha MVC architecture).

init: function(){
    this.control({
        'sampleView #myHelpLabel' : {
            click : function(c) {
                // Do something brilliant
            }
        },
        ...

When jQuery Attacks!

Well, when I hooked up my laptop and fired up my VMWare instance of Ubuntu, it failed to get an IP address from the DHCP server, so all my “hard” work was for naught. Therefore, I’m simply going to share my code with everyone and have you run it yourself, and anyone else in your office that can hit your machine.

Real-time Communication With Now.js

Now.js is one of the most exciting Node modules I’ve run across. You can hit their website to read more, but this is how they describe what it does.

• NowJS creates a magic namespace “now”, accessible by server and client
• Functions and variables added to now are automatically synced, in real-time
• Call client functions from the server and server functions from client

I have to admit, when I first hit the site, I was thinking, “Yeah, right.” Luckily my healthy skepticism was immediately dashed as I ran their example, and it worked! Without the need to change system settings, or add in a bunch of hoodoo-voodoo code somewhere else to make it look like real-time communication.

Anyway, go to their site, read up on it, and after you’ve run through their examples, come back here and grab my Beer Drinkers & Hell Raisers code from my Github account.

In there is three files, but you only need chat_server.js and beerdrinker.html.

The only modification you need to make is on line 22 of beerdrinker.html where you place the IP address of the machine that has Node running.

<script src="http://{insert IP addy here}:8081/nowjs/now.js"></script>

Now, technically, there’s more than 40 lines of code when you count all the HTML and additional Node code I have in there to enable the file serving… BUT the code that makes my cheesy beer drinking game work is 39 lines of code (amazingly, only 8 lines at the server!).

Once you clone the repo locally, simply execute -

node chat_server.js

And then have your friends hit http://your.ip.address/beerdrinker.html. All you need to do is -

1. Enter your name in the input field and click Register
2. Once everyone is registered, have fun seeing who can drink everyone else under the table.

I’m writing an application with ExtJS 4 and when the user clicks on the close button a Window header, I simply want to close it and reset the state on the parent window. However, when the user clicks on the Save button, I want to perform some other actions and then close the child window and the state of the parent window’s controls will be something else.

My problem is that in the MVC architecture defined in ExtJS 4, I only had the child window’s close event on which I could listen – that event is fired when the user clicks on the header icon, and when I execute window.close() in the save method’s logic.

Anyway, the only way I could capture when the user clicked on the header close icon was to override the Ext.panel.Panel method initTools(). I simply copied the entire method from ext-debug-all.js and changed which method handles the header button click gesture. I then added the headerClose() method which is basically the close() method but with an added event being fired – headerclose.

Ext.define('MyApplication.Child.Window' ,{
   initTools : function() {
      ...
      if (me.closable) {
         me.addClsWithUI('closable');
         me.addTool({
            type: 'close',
            handler: Ext.Function.bind(me.headerClose, this, [])
         });
      }
      ...
   },

   headerClose: function() {
      if (this.fireEvent('beforeclose', this) !== false) {
         this.fireEvent('headerclose', this);
         this.doClose();
      }
   }
};

Now, in my controller I can handle that gesture specifically while handling the more general close event in a different way.

/*
 * Action handler for when the user clicks on the window close button
 * on the child window, while the general close event does nothing
 */
'childWindow': {
   headerclose: function() {
      this.resetParentState();
   },
   close : function() {
      // Just a stub to show nothing is done on close()
   }
},

'saveButton': {
   click : function(button) {
      doSomethingVeryCool();
      button.up('window').close();  // This will not reset the state of parent window
   }
}

Unfortunately, I was on vacation the week before the presentation, so I didn’t get to cover absolutely everything that I wanted to, but I was able to show some great highlights of what can be done with Mongoose. When I first started to look in to it, I was immediately attracted to its syntax and API being very JavaScript friendly.

First things first, though. You can install Mongoose easily by using npm – npm install mongoose.

Then you simply need to include it and create a reference to a local database (if it doesn’t exist, Mongoose will create it for you).

var mongoose = require('mongoose'),
    db = mongoose.connect('mongodb://localhost/test');

Now you’re ready to start working with your database.

One of my favorite things about this system is that you can define, transform, create, and delete all sorts of information without an active database connection. That’s because MongoDB is document based instead of table based.

In the Mongoose API, it all starts with Schemas – something not needed in base MongoDB. A schema is the definition of your document – a rough concept of a table in RDBMS – but instead of all the normalization that goes on in relational systems, documents get embedded in other documents instead of being joined together.

Let’s look at my sample. First, I create an instance of mongoose.Schema and then I create two document schemas – Beer and Type.

var mongoose = require('mongoose'),
    db = mongoose.connect('mongodb://localhost/test'),
    Schema = mongoose.Schema,

    /**
     *  This is the beer type document that is embedded in the beer document
     */
    Type = new Schema({
        name            : String,
        main_ingredient : String
    }),

    /**
     *  This is the beer document which has a sub-document of Type
     */
    Beer = new Schema({
        brand       : String,
        type        : [Type],   // Embed Type into Beer (kinda like join)
        brewery_age : Number,
        rating      : Number
    });

Now that we’ve defined what a beer is, we make a model for it.

BeerModel = mongoose.model('Beer', Beer);

Now that we have a model for beer, we can create instances. Notice that the parameter is simply a JSON object with each property defined… except the Type.

  var Yuengling = new BeerModel({
    brand:'Yuengling',
    brewery_age:105,
    rating: 40
  });

To assign properties to a sub-document you use this syntax.

  Yuengling.type.push({
    name:'Lager',
    main_ingredient:'Malted Barley'
  });

Ok, now that we’ve defined our first beer, let’s save it to the database. No INSERT INTO needed here, it’s absurdly simple. You call the save() method; much more JavaScript friendly syntax. It’s how you would write a save method on any object. Like always in Node – because we never want to block the I/O on our main event loop – you pass an anonymous function that will receive an error message if something went wrong.

Yuengling.save(function(err){
    if (err) { console.log(err); }
  });

Let’s assume, for brevity’s sake – that I’ve added 5 more beers to the database. How would you query it to find beers that have a rating higher than, say, 35? Perhaps the designers of MongoDB live by the K.I.S.S. principle, because you use the find() method. However, the syntax for using operands in the argument list is a bit counter-intuitive.

Let’s find those on our BeerModel.

BeerModel.find({ rating: {$gt: 35} }, function(err, beers) {
   beers.forEach(function(beer){
     console.log(beer);
   });
});

Another feature I really like in Mongoose is you can add methods directly on the schema and then call those methods on any instance. They serve the purpose of a stored procedure in the relational world.

I’m going to modify Beer and create two methods that allow me to increment and decrement the value of it rating property.

    Beer = new Schema({
        brand       : String,
        type        : [Type],   // Embed Type into Beer (kinda like join)
        brewery_age : Number,
        rating      : Number
    }).method('increaseRating', function(){
      this.rating += 1;
      return this.rating;
    }).method('decreaseRating', function(){
      this.rating -= 1;
      return this.rating;
    });

   /**
    * Increase rating of Yuengling
    */
   Yuengling.increaseRating();

   /**
    * Decrese rating of Yuengling
    */
   Yuengling.decreaseRating();

How about a validation trigger? In this case, when you call the save() method with a rating that doesn’t validate, the err argument to the callback function will contain an exception with the message “Rating for beer is not between 10 and 50″.

/**
 * Validate the rating field to be between 10 and 50
 */
Beer.path('rating').validate(function(val){
  return val>10 && val<=50;
}, 'Rating for beer is not between 10 and 50');

These are just scratching the surface of what you can do. At this point in time, the Mongoose API is a bit sparsely documented, but still, if you want to go through the full API you can find everything you need.

You can see my full code on my Github account.

Things to be discovered and discussed will include:

• The Object
• The Function
• The Prototype
• The Arguments
• The this Scope
• The Module
• JSON
• ECMAScript 5

The host will help moderate the timeline and the discussions, but it is intended to be an interactive session with everyone bringing an equal voice so that we can all learn together.

You are encouraged to bring your own code, and be prepared to share it and discuss it.