In this post we’ll continue Nuno’s series on Content Validation and create a GUI Extension using the Anguilla framework to validate a Component’s field content while exploring little-seen Anguilla JavaScript methods to inspect the field content and validate the Save events from the GUI.  Big thanks to Nuno Linhares for writing this article and allowing me to be the Editor.

Solution on Github:  https://github.com/rcurlette/ValidateTitleFieldPart2/

Summary:  Validate that the Component Title field contains an Uppercase letter as the first character after pressing the Save button and show a warning message if a number or lowercase letter is the first character.  We will use Anguilla JavaScript for the field validation.  The estimated time to complete this tutorial is around 90 minutes.  Here is what it will look like in the end:

Overview

  1. Create the Visual Studio Project , Folders and Files (empty)
  2. Create the GUI Extension configuration and setup IIS
  3. Add the Anguilla JavaScript code to Validate the Title Field
  4. Debugging

Create the Visual Studio Project and setup the file structure

We’re going to do this using the CME API (Anguilla) with a javascript alert, and we will extend the following 3 CME commands: “Save”, “Save and Close” and “Save and New”.
Let’s start by creating a Visual Studio Project for our requirements. I tend to start with an Empty Solution, then add the the “Editor” project.  In the next part of this tutorial we will also use a  “Model” project but not in this tutorial. (note that I use the project type “ASP.NET Empty Web Application”).

Delete the first project that Visual Studio always creates.

Now add 1 new project: ValidateTitleFieldEditor

Again, use the “Empty ASP.NET solution” template.

Let’s create the skeleton of our extension. In the Editor project, add the following folders:

  • Commands
  • Config

Under commands, let’s create a file named “ValidateTitleFieldCommand.js” – Visual Studio seems to believe people still use Jscript, let’s not get bothered by it.

Under Config create a file named “ValidateTitleFieldEditor.config”.  This will be used to configure our GUI Extension to ‘listen’ to the Save events.

You should have something similar to this in your project now:

Create the GUI Extension configuration and setup IIS

Here we will add the configuration to the ValidateTitleFieldEditor.config and much of it will not make any sense.  Please follow along and we will be at the fun part in no time.

Open the Configuration ValidateTitleFieldEditor.js file.

If you haven’t learned how to yet, make sure you add the Tridion Schemas to this editor. Right click anywhere on the config file, select properties.

Click on the … button for the Schemas, and add all schemas from [Tridion]\Web\WebUi\Core\Schemas

Tip: you may want to add these schemas to the default Visual Studio schemas, under “C:\Program Files (x86)\Microsoft Visual Studio 10.0\Xml\Schemas”

Let’s build our configuration file with the following:

<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge"
               xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration"
               xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions"
               xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">
  <resources cache="true">
    <cfg:filters />
    <cfg:groups>
      <cfg:group name="ValidateTitleField.CommandSet">
        <cfg:fileset>
          <cfg:file type="script">/Commands/ValidateTitleFieldCommand.js</cfg:file>
          <cfg:file type="reference">ValidateTitleField.Interface</cfg:file>
        </cfg:fileset>
        <cfg:dependencies>
          <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
          <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
        </cfg:dependencies>
      </cfg:group>
    </cfg:groups>
  </resources>
  <definitionfiles />
  <extensions>
    <ext:dataextenders />
    <ext:editorextensions>
      <ext:editorextension target="CME">
        <ext:editurls />
        <ext:listdefinitions />
        <ext:taskbars />
        <ext:commands />
        <ext:commandextensions>
          <ext:commands>
            <ext:command name="Save" extendingcommand="ValidateTitleField"/>
          </ext:commands>
          <ext:dependencies>
            <cfg:dependency>ValidateTitleField.CommandSet</cfg:dependency>
          </ext:dependencies>
        </ext:commandextensions>
        <ext:contextmenus />
        <ext:lists />
        <ext:tabpages />
        <ext:toolbars />
        <ext:ribbontoolbars />
      </ext:editorextension>
    </ext:editorextensions>
  </extensions>
  <commands>
    <cfg:commandset id="ValidateTitleField.Interface">
      <cfg:command name="ValidateTitleField" implementation="Company.Extensions.ValidateTitleFieldCommand"/>
    </cfg:commandset>
  </commands>
  <contextmenus />
  <localization />
  <settings>
    <defaultpage />
    <editurls />
    <listdefinitions />
    <itemicons />
    <theme>
      <path />
    </theme>
    <customconfiguration>
    </customconfiguration>
  </settings>
</Configuration>

What are we doing in this configuration?

We’re defining 1 group of files:

<cfg:group name="ValidateTitleField.CommandSet">
        <cfg:fileset>
          <cfg:file type="script">/Commands/ValidateTitleFieldCommand.js</cfg:file>
          <cfg:file type="reference">ValidateTitleField.Interface</cfg:file>
        </cfg:fileset>
        <cfg:dependencies>
          <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
          <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
        </cfg:dependencies>
      </cfg:group>

The group is a “CommandSet” and we’re basically telling Tridion to treat these files as a group, and that the files have dependencies on other Tridion items.

We’re also saying that this extension targets an existing editor: CME

<ext:editorextension target="CME">

 

And within this, we’re extending the “Save” Command with our own CommandSet.  Note:  This is where we wire up to the Save, Save and Close, and Save and New commands.

<ext:commandextensions>
          <ext:commands>
            <ext:command name="Save" extendingcommand="ValidateTitleField"/>
	    <ext:command name="SaveClose" extendingcommand="ValidateTitleField"/>
	    <ext:command name="SaveNew" extendingcommand="ValidateTitleField"/>
          </ext:commands>
          <ext:dependencies>
            <cfg:dependency>ValidateTitleField.CommandSet</cfg:dependency>
          </ext:dependencies>
        </ext:commandextensions>

 

And finally we’re registering a new CME Command:

<commands>
    <cfg:commandset id="ValidateTitleField.Interface">
      <cfg:command name="ValidateTitleField" implementation="Company.Extensions.ValidateTitleFieldCommand"/>
    </cfg:commandset>
  </commands>

That “implementation” attribute is the name of the Anguilla Class that we will use to implement the command.

 

Adding the extension to IIS and registering in Tridion

Let’s add our extension as a Virtual Directory to the CME’s “Editors” folder. I tend to point these directly to my development folder so that all code changes are immediate.

As you can see in the screenshot, the physical path should match the start of your “Editor” project.

Tridion Content Manager Explorer Configuration
The Tridion CME uses a file to hold all the editor and model configurations (plus quite a lot of other settings). You will find this file under [Tridion]\Web\WebUI\WebRoot\Configuration\System.Config

1. Make a backup copy of this file, and edit it with a proper XML Editor (like Visual Studio).
2. Find the Element named “<editors default=”CME”>” (around line 1000 in my system.config).
3. Add one editor configuration element with YOUR values to change the path:

<editor name="ValidateTitleFieldEditor">
      <installpath>D:\Tridion 2011\ValidateTitleField\ValidateTitleFieldEditor</installpath>
      <configuration>Config\ValidateTitleFieldEditor.config</configuration>
      <vdir>ValidateTitleField</vdir>
    </editor>

4. Restart IIS (iisreset) and reload the Tridion Content Manager Explorer.

Summary
We’re done with the boring part.  Now we can have some fun with the JavaScript action and doing something in the GUI.

 

Creating the JavaScript  for the Anguilla Save Event – The Command

Let’s create our Command. Open the “ValidateTitleFieldCommand.js” file.

For now, all that we want is to get our extension loading (and being able to verify it), so let’s add the following code:

Type.registerNamespace("Company.Extensions");

Company.Extensions.ValidateTitleFieldCommand = function ValidateTitleFieldCommand() {
    Type.enableInterface(this, "Company.Extensions.ValidateTitleFieldCommand");
    this.addInterface("Tridion.Cme.Command", ["ValidateTitleFieldCommand"]);
};

Company.Extensions.ValidateTitleFieldCommand.prototype._isAvailable = function ValidateTitleFieldCommand$_isAvailable(selection) {
    console.debug("Is Available called");
    return $cme.getCommand("Save")._isAvailable(selection);
};

Company.Extensions.ValidateTitleFieldCommand.prototype._isEnabled = function ValidateTitleFieldCommand$_isEnabled(selection) {
    console.debug("Is Enabled called");
    return $cme.getCommand("Save")._isEnabled(selection);
};

Company.Extensions.ValidateTitleFieldCommand.prototype._execute = function ValidateTitleFieldCommand$_execute(selection, pipeline) {
    console.debug("Execute called");
    return $cme.getCommand("Save")._execute(selection, pipeline);
};

This implements the _isAvailable, _isEnabled, and _execute functions required for every command. As you can see, all we’re doing is logging that the code was invoked (so we can verify it was loaded) and telling Tridion to go ahead and execute the “Save” Command.  The console.debug statement will write the output the the Firebug Console window or Console window in the Chrome Developer Tools.

We should now have enough to register this (Editor) extension with Tridion. To do this, we need to tell Tridion that we are an extension, and where the configuration for the extension is.

How do I know it’s working?

Well, there’s a few easy ways to do this. If you messed up something, chances are that your CME will look like this:

Open a Javascript console (Firebug is best here) and you’re likely to see this error:
Uncaught ReferenceError: Tridion is not defined

This is very generic, but usually comes with a very useful URL just before it:
http://t2011guruv3/WebUI/Editors/CME/Views/Dashboard/Dashboard_v6.1.0.55920.11_.aspx?mode=js
or http://$$SERVERNAME$$/WebUI/Editors/CME/Views/Dashboard/Dashboard_v$$TRIDION_CME_VERSION$$.$$CONFIGURATION_VERSION$$.aspx?mode=js

URL in FireBug GUI:

Open this url in your browser and you might have a lot more information (Chrome does not show the URL):

In this case, the error is caused because my Editor configuration in System.Config points to a vdir named “ValidateTitleFieldEditor” but the Virtual Directory in IIS is called “ValidateTitleField”. Changing the configuration to specify the correct vdir will fix the issue. If you had a different issue, chances are that opening this url in a browser will give you concrete error messages that should guide you into fixing your problem.

Once you fix your issue you should be able to load both the CME and the JS file:

Tip – if your Javascript is loading minified/obfuscated, you can change this setting.

If you were paying attention to any of this, you should know how to test if your command is being called. If you weren’t, here’s how.

  1. We configured our command as an extension to the “Save” Command (in ValidateTitleFieldEditor.config)
  2. We added 3 functions to our JS – _isAvailable, _isEnabled and _execute
  3. We added a “console.debug” instruction to all those functions.

So basically now we just need to:

  1. Clear your browser cache
  2. Reload the CME
  3. Open a Javascript debug console (I recommend chrome)
  4. Go somewhere in the CME where the Save command would be available (open a page or a component)

If you now open the console you should be able to see something like this:

This confirms our command is being called and our GUI Extension is working.

Now let’s tell our users about their mistake with a popup.  In the popup we will show them a message that the title field needs to start with a Captial letter.  This involves using the Anguilla API to inspect the field’s value when the Save, Save and Close, or Save and New button.

Before moving on, let’s do ‘Save All’ in Visual Studio.  Here’s a neat trick that might help you moving forward.  Instead of opening the project as we have defined now, try doing the following:

  1. Open Visual Studio
  2. Select File -> Open -> Website
  3. Select “Local IIS” on the left side, then search for the “SDL Tridion 2011” website, expand it and select “WebUI”.

Visual Studio is going to ask you if you want to upgrade your configuration to ASP.NET 2.0 – Select ‘No’ – do not ever say yes, unless you can safely claim you know what you’re doing.  If you have not yet saved all files, the first popup will ask if you want to ave files – for this select ‘yes’

Once it’s open you should now see your editor under “Editors”:

This loads the rest of the Tridion CME as well, which will:

  1. Make visual studio pretty slow at times
  2. Give you some small help with some IntelliSense (though you can’t trust the whole of it)

Now that we’re here, we’re going to try reading the current value of the “Title” field in the component you’re trying to save. So, just like with any other Tridion Extension, the first thing we’ll do is make sure we should be executing _at all_.

Conditions for executing are:

  1. Item you’re editing is a component
  2. Current component’s schema has a field named “Title”
  3. Value of this field does not start with an Uppercase letter.

Open the ValidateTitleFieldCommand.js file and modify the _execute method to determine if we should execute:

Company.Extensions.ValidateTitleFieldCommand.prototype._execute = function ValidateTitleFieldCommand$_execute(selection, pipeline) {
    console.debug("Execute called");
    var p = this.properties;
    var item = $display.getItem();
    if (item) {
        if (item.getItemType() == "tcm:16") {
            // We know it's a component
            var fieldBuilder = $display.getView().properties.controls.fieldBuilder;
            if (fieldBuilder.getField("Title")) {
                // We have a field named Title
                var titleField = fieldBuilder.getField("Title");
                if (titleField.getValues().length > 0) {
                    var fieldValue = titleField.getValues()[0];
                    console.debug("Current title value is " + fieldValue);
                    // Voodoo magic
                    var firstCharacter = fieldValue.substring(0, 1);
                    if (isNaN(firstCharacter)) {
                        if (firstCharacter != firstCharacter.toUpperCase()) {
                            console.debug("First character is NOT uppercase");
                        } else {
                            console.debug("First character is uppercase");
                        }
                    } else {
                        // Interestingly isNaN returns false on a space. Good to know, I guess
                        console.debug("First character is a number!");
                    }
                }
            }
        }
    }
    return $cme.getCommand("Save")._execute(selection, pipeline);
};

The fieldBuilder is the magic here that provides us the ability to read fields in the Tridion GUI.  Using the JavaScript FireBug Console we can set a breakpoint on this line and then go to the Console window and inspect the object for other properties and methods.

Also, notice the return statement where we allow the GUI to continue saving.

At this point we can start thinking about the real solution. You could, for instance, add an alert(“First letter of title must be Upper Case”) to your code and stop the execution of the Save command (commented the changes to the code):

Company.Extensions.ValidateTitleFieldCommand.prototype._execute = function ValidateTitleFieldCommand$_execute(selection, pipeline) {
    console.debug("Execute called");
    var item = $display.getItem();
    var failed = false;  // ** Added
    if (item) {
        if (item.getItemType() == "tcm:16") {
            // We know it's a component
            var fieldBuilder = $display.getView().properties.controls.fieldBuilder;
            if (fieldBuilder.getField("Title")) {
                // We have a field named Title
                var titleField = fieldBuilder.getField("Title");
                if (titleField.getValues().length > 0) {
                    var fieldValue = titleField.getValues()[0];
                    console.debug("Current title value is " + fieldValue);
                    // Voodoo magic
                    var firstCharacter = fieldValue.substring(0, 1);
                    if (isNaN(firstCharacter)) {
                        if (firstCharacter != firstCharacter.toUpperCase()) {
                            console.debug("First character is NOT uppercase");
                            // *** Show popup
                            alert("First character of 'Title' field must be uppercase");
                            failed = true;
                        } else {
                            console.debug("First character is uppercase");
                        }
                    } else {
                        // Interestingly isNaN returns false on a space. Good to know, I guess
                        console.debug("First character is a number!");
                        // *** Show popup
                        alert("First character of 'Title' field cannot be a number.");
                        failed = true;  // *** Stop save action
                    }
                }
            }
        }
    }
    if(!failed)
        // *** Continue saving
        return $cme.getCommand("Save")._execute(selection, pipeline);
};

Which would result in something like this showing up to your editors.  We did it!  Congratulations for making it this far!

Debugging

Let’s see if our GUI Extension code is firing:
– Open Firefox, FireBug, Script Tab
– Open a Component

Search for ‘ValidateTitleFieldCommand’ and around line 96404 you will see our new GUI Extension JavaScript code.  Here I place a breakpoint and then with pressing the Save button I can step through the code.

While stepping through code I can also go to the Console Window and see the other methods  and properties that are available for these objects.

Summary

The Tridion 2011 Anguilla Framework gives us the opportunity to provide friendlier feedback to the user and also increase the quality of content entered into Tridion by enforcing editorial guidelines.  We’ve used the Anguilla Framework to access the fieldBuilder object in the Tridion GUI and inspect the field contents, showing a warning if they do not meet our requirements.  In the next post we’ll update the popup and allow users to make changes to the content in the popup window itself.  Thanks again to Nuno for creating this awesome post.

Solution on Github:  https://github.com/rcurlette/ValidateTitleFieldPart2/

The Tridion 2011 GUI contains HTML ID attributes for many elements and lets our GUI Extension JavaScript to hook into these elements to hide, show, or manipulate their appearance. I use a wide-screen monitor and prefer to re-size my tree window pane when I’m doing lots of navigation in the Tridion tree. In this article I will show how a simple JavaScript GUI extension can re-size the tree navigation pane with one keystroke.

Making the tree pane wider

I found myself resizing the Tridion tree every time I used the GUI and decided to make a small shortcut that could set it to my desired width using 1 keystroke. With some research I found the ID tag for the Navigation Tree and was easily able to set the width using a JavaScript GUI Extension. Of course, if we know the ID of the element we can get it and perform other actions as well – such as hiding it or adding extra info to the GUI beside it. As with all GUI Extensions this requires the utmost care and consideration and should not be attempted at home without parental supervision. Using a shortcut hotkey to trigger the JavaScript call makes it less invasive than re-writing the GUI behavior by default.

Re-sizing the tree pane is accomplished with this bit of JavaScript to modify the width attribute:

$j('#NavigationPanel').width('350');

The $j maps to jQuery. At the end of my jQuery min js file I add:

window.$j = jQuery.noConflict(true);

This is needed since Tridion internally uses $ and from Jaime’s recent post it also uses $$. Interesting.

Enabling with shortcuts

To implement this tweak I put them in a JavaScript file that is loaded into Tridion using a GUI Extension. Not just any GUI Extension, however, but the Shortcut keys extension I wrote about earlier that allow us to define our own Shortcut key combination and execute JavaScript. This allows us to toggle when we want to activate these settings – since maybe other users like the default settings. You could also have multiple settings and use different hotkeys to enable them.

shortcuts.js

//If you only want your code to affect certain screens/views, you should listen to Anguilla events like this:
$evt.addEventHandler($display, "start", onDisplayStarted);

// This callback is called when any view has finished loading
function onDisplayStarted() {

	// Open Publish Queue dialog
	Mousetrap.bind('q', function() {
			//var popup = $popup.create($cme.Popups.PUBLISH_QUEUE.URL, $cme.Popups.PUBLISH_QUEUE.FEATURES);
			//popup.open();
			$commands.executeCommand('PublishingQueue')
	});

	Mousetrap.bind('w', function() {
		// make tree pane wider - must click mouse in the ribbon or breadcrumb area before activating
		// - will not work if focus is in tree or content pane
		$j('#NavigationPanel').width('350');
	});

    $evt.removeEventHandler($display, "start", onDisplayStarted);
}

Testing

Place the focus of your cursor to the breadcrumbs pane or the ribbon pane and make sure nothing is selected.  Then press the hotkey ‘w’ and witness the tree menu width being reset to your dimensions in the shortcuts.js file.  The mousetrap library does not enable shortcuts if any element is selected on the screen.  You could, of course, move the jQuery call to modify the width outside the shortcuts key, but then it would always be enabled for all users.

Installing

  1. Create Folder for Extension: C:\Program Files\Tridion\web\WebUI\Editors\Shortcuts
  2. Add the Shortcuts.config file to the folder Shortcuts
  3. In Shortcuts create a js folder. Path is: C:\Program Files\Tridion\web\WebUI\Editors\Shortcuts\js
  4. Copy 3 javascript files to the js folder.
  5. – mousetrap.js – javascript shortcut library
  6. – shortcuts.js – our Tridion GUI Extension shortcuts actions
  7. – jquery-1.7.2.min.js – jQuery library with the j$ noConflict specified
  8. Open IIS and create a Virtual Dir at SDL Tridion 2011/WebUI/Editors/Shortcuts. Point the home dir to the Editors\Shortcuts dir
  9. Open the GUI Configuration,   C:\Program Files\Tridion\web\WebUI\WebRoot\Configuration, and add the new GUI Extension.
<editor name="Shortcuts">
 <installpath>C:\Program Files\Tridion\web\WebUI\Editors\Shortcuts\</installpath>
 <configuration>Shortcuts.config</configuration>
 <vdir>Shortcuts</vdir>
 </editor>

Code here:
https://github.com/rcurlette/TridionBrowserDefaults

The SDL Tridion World Server connector bridges the world of Content Management and Translation Management.  Providing an easy to use interface that allows the author to directly send items for translation and review the translation process brings a boost in productivity and efficiency to multi-lingual websites.  In addition, it eliminates the overhead of creating and assigning tickets internally as the content items enter into workflow without any additional work.  Recently I had the opportunity to implement the SDL World Server connector and was impressed with the tight integration between the two platforms. In this article I will discuss installing, configuring and using the World Server connector. I will not go into any advanced topics such as using the Event System with World Server.

Tridion’s strength is the management of content across languages and sites using the BluePrint technology built into the core of the product. SDL bought Tridion in 2007 and integrated Tridion into its’ suite of translation products, introducing a Tridion connector for both World Server and the Translation Management Server. These products were made for each other – and putting them together feels like it was always meant to be.

Using the Tridion WorldServer Connector

Starting the Translation is as simple as right-clicking the content item and selecting Translate.  This creates a new Translation Job.

Creating a Translation Job

Adding another item to the translation job is easy

The translation job ends up in the ‘Translation Jobs’ section of the ‘Shortcuts’ menu.

We send the translation job out from the Translation Jobs menu.

Or the Ribbon

Once it has been accepted and started, we can track the progress from within the Tridion CMS. The listview has a % Complete column and opening a translation job shows which step of the workflow it is in. This is an amazing feature that allows our content managers can keep an overview of exactly where items are at in translation directly from Tridion – no need to go into SDL or other interfaces.  Finally, when content is translated and received back a Publication-configured email address is mailed that the item is back from translation.

 

Installing the World Server Connector

Installing the World Server connector involves 3 steps.  The CMS will store the translation jobs in a new database and use a Web Service to communicate with the World Server instance.

1.  Create the Translation Manager Server Database using the Tridion Database Manager tool

2.  Run the World Server Connector Install Wizard.  Next, go to SDL Tridion World and download the World Server hotfix rollup.  If you are using secure sessions in World Server you’ll need an additional hotfix from SDL to enable Tridion to talk to the secure connection on World Server.

3.  Create a repository in World Server and configure World Server for Tridion.
There are special permissions that the World Server user is required to have and these are documented in the Tridion Live Documentation site.  In addition to user permissions there are some specific settings the World Server Administrator must configure to have Tridion able to send translation jobs.

4.  Validating configuration and testing – Open the Publication Langauge Parent and tell it to connect to World Server.  This will use the settings in the configuration file and attempt to connect to World Server.  It will take a few minutes – but if it does not connect the ‘loading’ message will stay on the screen.  This likely means that the configuration is not valid.  Best to look at the configuration file and remote into your CMS and confirm that you can access the World Server URL from the CMS.  Also, you can run Fiddler on the CMS to see which ports the Tridion Web Service is using to talk with World Server.  Once connected configure the Parent Publication to the World Server equivalent.  Now, open a Child Publication and do the same, pointing to the World Server repository for the child language.

Summary

The World Server Connector is the ‘holy grail’ for large companies with multi-lingual websites.  Being able to send content for translation directly from the GUI and then leverage your existing Translation Network and Workflow is extremely efficient and time-saving.  The installation is fairly quick and with your local World Server administrator you should have it up and running without too much effort. The World Server configuration is very specific and needs to be carefully setup according to SDL’s requirements.  I hope this article gives you an idea of how this works.

 

This past week I attended the DevReach conference in Sofia, Bulgaria hosted by Telerik, Pluralsight, Microsoft and several others. The conference focussed on Microsoft development technologies including Web, Agile, Cloud, and Mobile. They invited many International speakers such as Chris Sells, Steve Smith, DotNetRocks team and Brian H. Prince. I had the luck to see Chris Sells present Windows 8 and develop a new HTML / Javascript NewsReader app. It didn’t look scary at all and I felt motivated to install Windows 8 and give it a test drive.

Creating the VMWare Image

From the Microsoft site I downloaded the Windows 8 ISO and created a new Windows 8 instance in VMWare Fusion 5. It even has a Windows 8 x64 option in the new instance dialog. This was one of the easiest and most painless installs I have done of Windows. It never asked me a single question and after installing came up with the beautiful Windows 8 Start screen. I instantly started click on all those big tiles and see what happened – I was impressed by the speed and simplicity.

Apps in the Windows Store

I went into the Windows Store not expecting to see much after all the negative articles on the web about lack of apps in the Windows store. Again, I was surprised, I saw many recognized apps and games and started downloading things like crazy. It was so easy to select an app, install, and then move onto the next one. I forgot I was using a desktop OS and felt like I was adding apps to my phone. It was almost too easy.

Back to the start screen and I now need to horizontally scroll to see all my apps. This was a strange experience for me since I don’t have any desktop apps requiring side-scroll and was taught a long time ago side-scrolling is a no-no when developing webpages. This took more getting used to than I thought and I am still needing some shortcuts or gestures to make the experience more welcoming. But, I love seeing those tiles so accessible and available.

About accessibility – the buttons are big, but also the icons and things I normally click on are 3x bigger than normal – with lots of white space around them. Obviously designed for fat fingers and not thin arrows. Oh well, it takes some getting used to I guess, but the feeling I was using a finger-inspired OS on my desktop was a little uncomfortable. Like I had too much room to move around.

Some of the games I downloaded were obviously built for a phone and not desktop device and this was a bit irritating – to feel that the lack of touch in my computer was limiting my ability to enjoy some games. Suddenly my computer felt so ‘old’.

Selecting the Desktop tile transported me back to the comfortable days in Windows 7. The familiar desktop with icons and a Windows Explorer. The start menu is gone – with the start key bringing us back to the big tiles, but knowing that I had a Windows Explorer shell I felt relaxed again. Then I ran back to the Windows Store to see what other free apps are out there, tried them out, and pressed the start key (apple key in Fusion) many times to jump out of the app and back to the beginning.

The Cloud is Here

Selecting mail brought up a browser window and asked me to login to a MS Mail site such as Live mail. I opted instead to create a new outlook.com email address and use that one. Outlook opened in the web interface and it looked very smooth and geared towards a touch device. Then I downloaded Microsoft OneNote and it also opened up as a web app – and asked me my MS ID again – and it worked very well.

Then it all clicked – whoa – MS is bringing the cloud into my desktop and the app store into it as well – as one experience. Looking at the start screen I can’t tell if an app is on the cloud or my local machine – and if it is a cloud app it asks for my account and all my content is available right there, no need to configure anything or do anything special. It is a little spooky how tight this stuff works together and now I felt the power of what Microsoft is trying to do and they are moving everything in that direction. It’s one thing to read about it online but something different to experience it.

If you have VMWare workstation I urge you to download the Windows 8 Preview and give it a try – I am sure it will change the way you think about it.