Iframes have serious tradeoffs you have to consider when building an application. But I see them in use frequently, and sometimes they are even appropriate.

A difficult scenario is when the parent window needs to track user activity within a child iframe, when the child iframe contains content from a different domain.

In a nutshell, browsers’ same origin policy comes into effect, and JavaScript from the parent is blocked from making function calls, sending events, or adding event listeners to the child iframe content. The iframe’s onload event is sufficient for many needs. But if the iframe itself is a single-page AJAX application, then the onload event will not fire after the first load.

The IframeActivityMonitor is a simple JavaScript object that allows you to receive an event periodically while the user maintains activity within any iframe on the page.

Check out the IframeActivityMonitor on github!

You will need to install the Windows 8 Developer Preview on an physical machine, or you can install it on a virtual machine by following the instructions I provide in a previous post. The install includes “Visual Studio 11 Express for Windows Developer Preview.” How’s that for a mouthful? The start screen looks pretty familiar:

I do remember in one of the sessions at BUILD the emphasis on the simplification of the menu bar. Looks nice. Once you click “New Project…” you will see the template selection. We will be creating a blank application for our purposes, but there are several other templates.

I found the dozens of sample applications particularly useful in learning the new WinRT API. Click the “Online” section for access to those. You can also browse them online.

Below you can see that I expanded out the project hierarchy, with the addition of the jQuery file. Upon inspection, I found it to be a true web application. There are several additional JavaScript files that provide the WinRT JavaScript API and the Windows 8 application framework. Other than that stuff, the core files to the app are default.html, default.css, and default.js.

In default.html, I added a script reference to jQuery, a button, and a div.

In default.js, I added a little code to confirm that jQuery indeed works in a Windows 8 app. The existing code from the template I did not modify. What’s happening in there is essentially an event handler for the app’s launch event. Since we are technically building a Windows 8 app and not a web site, the idea of a “launch” event makes sense.

Hitting F5 launches the app in debug mode. Apps run full screen, so the button and div show up at the top left. The default.css provides the Metro look and feel for free. Below is a screenshot after clicking the button, which runs the jQuery-dependent button click handler.

External libraries in Windows 8 applications! What excites me most about this is we can continue to leverage all the web innovation that is occurring outside of Microsoft, not just the framework that Microsoft provides. And there is a lot of it going on. Check out MicroJS.com to see a sampling.

If you are interested in downloading the source code, it is available in a github repository. Don’t worry if you aren’t familiar with github; you can download the code in a zip file.

So I opted for VMWare after a little searching showed that someone had that working. I did not have an ISO – I had the bootable USB key that I received at Microsoft’s BUILD conference. So that may be a little different from other experiences.

1. Download VMWare 8.0 and run the installer.
2. Create a virtual machine, and choose the option to install the operating system later.
3. When given the option to choose an operating system, choose Windows 7.
4. VMWare requires a license key to boot the virtual machine. After clicking the button to get the license key, one of the available options is a key for a 30 day free trial.
5. Now the problem with the USB key. VMWare BIOS cannot boot from USB. So I downloaded a handy little boot manager from plop.at. Put in this ISO file as the CD/DVD drive for the virtual machine, and the boot manager takes over the boot sequence. Don’t forget to stare at the flying stars for a moment, and wonder how fast you are going through virtual space.
6. Insert the USB key and attach it to the running virtual machine. Choose to boot from USB.
7. The Windows 8 installer takes over from there.

P.S. Don’t install the VMWare tools. The result will be a black screen.

In my preparations for the presentation, I spent a lot of time thinking about analogies.  The waterfall vs. agile software development methodology analogy was very relevant.  Another one that I liked was comparing IA to moving into a house.  With certain pieces of furniture, you know where you are going to put before you even move in.  But other things—like the best place to put your keys so you know where to find them—are decisions better left until well after you move in.  It is not until you observe your behavior, how you interact with the house, where you naturally look for your keys, that you can really be confident that a specific location is where your keys “should” go.

My goal was to explain that there are other perspectives in IA, and that SharePoint has features that can contribute to IA in unexpected ways.  My main points were:

1. We do not have to do as much planning up front as we think we do.
2. IA is not a perfect science, but it has its roots in psychology, library science, and design.
3. Every individual is different, and there is no one-size-fits-all way of organizing information.  We should embrace this instead of fighting it.
4. SharePoint has various features that can contribute to a grassroots-driven taxonomy and IA.

Some of the suggestions of features that could be used to individualize SP and allow IA to develop in a grassroots way:

• Search honing – People naturally move to search when they tire from browsing for content.  Use this to our advantage, and really pay attention to the search logs.  As we learn what users are searching for, configure Best Bets, Keywords, and search scopes to match the search behavior we see.
• Tagging – SharePoint 2010 has great support for tagging.  Why not allow users to tag content, and as we see trends, pull the most popular tags into Managed Term Stores?
• Individualized pages – this is such a simple feature, but allowing users to organize pages the way they want to can create a lot of user buy in.
• Control to the business units – I believe that we should embrace governance plans that allow a gradual relinquishing of control from IT to the business units.
• Publish/Subscribe model – Some of our most successful SharePoint engagements have involved a model where we separate the content creators from the content consumers.  Rather than send everyone to the Marketing tab, create a place where the marketing department can create and publish content.  Allow consumption of the content to be opt-in for the most part, and allow the content to be consumed in various locations, depending on context.

Check out Aspenware’s post of the session.  I was happy so many people came!

Here are some disorganized notes that may give you more insight into my thoughts.

My slides are all but useless as a reference, but available if you want them.

Here is a wonderful example. It describes how today’s Martha Graham animation was created by Google. Go to google.com and watch it. Then go to http://www.acumenholdings.com/blog/… and read about it. You might have to refresh a few times–the site is under load.

Conceptually, it’s pretty easy to understand how the thing works. But before today, when it became a thing that GOOGLE did, you could have shown that code to 90% of the developers in the world and been laughed at. Because of how hacky it is. Because of how non-standard it is. There are times that out-of-the-box solutions while coding are bad–where it is essential to follow patterns. And there are times when only by being original and creative that you can accomplish what you set out to do.

I created a simpler interface.  Callers can store an object in the cache with only a key and value, and retrieve that value with only the key.  By default it uses local storage, if available.

The constructor function takes an optional parameter, so that every call to the CacheStorage instance will either use local storage, or not

[js]

/**
 * {Boolean} useLocalStorageIfAvailable - optional, defaults to true.  The CacheProvider object will
 * use the HTML5 localStorage object, if available
 */
function CacheProvider(useLocalStorageIfAvailable) {
    // values will be stored here
    this._cache = {};

    this._useLocalStorage = 'undefined' == typeof(useLocalStorageIfAvailable) ? true : useLocalStorageIfAvailable;
}

[/js]

Usage is much simpler. For getting an object from cache, just pass the key. CacheProvider will determine whether the saved item was a string or object, all under the covers. To save an item to the cache, just pass in the key and value.

[js]

var cache = new CacheProvider();

// a complex object to test object caching
var obj1 = {
    dogs: [
        'fido',
        'rufus'
    ],
    owner: {
        name: 'arod'
    }
};

cache.set('key1', obj1);
var obj2 = cache.get('key1');
console.log(obj2);

cache.set('key2', 'asdfasdfasdfd');
var obj3 = cache.get('key2');
console.log(obj3);

cache.clear('key1');
cache.clear('key2');

[/js]

As for resources from the presentation, I uploaded the slides to slideshare.  See the embedded presentation below, or click here to go to slideshare. 

We spent a good amount of time reviewing some core constructs of JavaScript, the language itself.  The sample code is available on github.  Or you can download the zip directly.

One thing we discussed but did not have time to demonstrate is a sample app written once without a framework, once in dojo, and started in jQuery.  I hope to cover some of this tomorrow (Tuesday, 3/8).  If you are interested, it is also available via github.

Twitterverse is a dojo sample app developed by Peter Higgins.  It demonstrates several features of dojo.  These steps are for you if you do not have git for Windows installed and want to get a local version of twitterverse up quickly.

First thing, you are going to need to get subversion installed.  Don’t worry, it’s easy.  Get the latest subversion for Windows download from http://subversion.tigris.org/servlets/ProjectDocumentList?folderID=91.  I used version 1.6.6.

Now go get the twitterverse source from https://github.com/phiggins42/twitterverse Click Downloads and choose the .zip version.

Extract the zip file to a directory (I extracted to C:).  The contents should look like this:

Drill down into the src folder and download this file: getdojo.bat.  Put it next to getdojo.sh. 

Run getdojo.bat.  It will download all the dependencies.  Go back up one directory, and open index.html in a browser.  You done!

Have fun digging into the source code to see how dojo works.

It was about this time I conceiv’d the bold and arduous project of arriving at moral perfection…But I soon found I had undertaken a task of more difficulty than I bad imagined. While my care was employ’d in guarding against one fault, I was often surprised by another; habit took the advantage of inattention; inclination was sometimes too strong for reason.

I concluded, at length, that the mere speculative conviction that it was our interest to be completely virtuous, was not sufficient to prevent our slipping; and that the contrary habits must be broken, and good ones acquired and established, before we can have any dependence on a steady, uniform rectitude of conduct.

I believe that our habits are an important part of who we are and the type of people we become.  I’ve always liked this quote about the cascading effects of our thoughts and habits–for better or for worse:

Watch your thoughts, they become words.
Watch your words, they become actions.
Watch your actions, they become habits.
Watch your habits, they become your character.
Watch your character, it becomes your destiny.