The MetroPad Project: Designing and Building for Win 8
An Ode to Arktronics TextCraft
When I was a young kid in high school, I was quite the computer geek. Nastier people in high school called me a nerd. Nowadays the jocks that I know, nicknamed me “Super Techie”.. I was a very lucky kid though. My first real computer (that did more than BASIC language programming) was called the Commodore-Amiga 1000. It’s pictured below. I scanned a picture of it below from original specification sheets I still kept today.. And, yes, I am an Amiga collector today..
I loved this computer because BASIC didn’t show up when you loaded it up, you got the multi-tasking AmigaDOS though I spent many hours learning programming in Amiga Lattice C and finally SAS C, . Computers didn’t multi-task back then or really even task switch. Computers usually had 4 to 16 colors, and this one had 4096 that you could see on screen at once. It had a BIMMER (A super “blitter”) and three separate chips that ran independent of the CPU most of the time. These days we call this kind of thing a GPU..
The first GUI word processor I got for this was called TextCraft, in those days software wasn’t sold and licensed in quite the same way as it is today and Commodore-Amiga released for the Amiga 1000 under AmigaDOS 1.0-1.3.. The first time I saw TextCraft my first thoughts were I want to reach right out and touch the buttons on the screen.
It was done by a small local company called Arktronics (later called the Disc Company) who did the first GUI based word processor called Jane for the Apple ][ and Commodore 128 8-bit computers. I was asked to come in on Saturday mornings during high school and beta test for them. It was fun and free and I got to meet company founders (back so long ago) like Bobby Kotick who later bought Activision and is now the president of Activision Blizzard.
The user interface was simple and effective and what we would consider a spartan text editor today, but as I mentioned before it looked touch friendly and inviting for touch.. Very Mac like but colorful (unlike the Macs of it’s time). And very touch friendly (even though we didn’t have a touch interface on an Amiga until a few years later (Elographics) and it looked nothing like an Apple iPad today or a Windows 8 Slate PC either..
When I saw the Windows 8 Metro interface for the first time I started doing some free association about what I thought of it as a design language. What it meant for touch and the first time I wanted to touch a computer’s screen. I got that same feeling again when I started looking at “METRO” apps on a Windows 8 Tablet.
Microsoft Word from the upcoming Office 15 version ??
I don’t need something a complicated as (in the picture above) to process text. The screen shot above is supposedly of the upcoming Microsoft Word in the upcoming Office 15. My app will be less complex, and be just touch enabled to take notes and process text. This app isn’t to create novels on like I could with the upcoming “metro” Word update in Office 15. Check out the WinSuperSite Preview by clicking on the picture above..
By the way, is this a “REAL” METRO APP ? From the pictures, it still seems to use the Windows Desktop Mode for it’s document creation (at least so far as what we have seen so far).
But heck! I want a “tablet” touch friendly interface experience that I can type right on the screen with to create simple text documents. I don’t even’ really need Rich Text Format for what I am doing just simple “type and go” type . So that was my impetus for starting to work on a “MetroPad” app for Windows 8, and to also give me a chance to to learn to create a running “metro” style application with Blend for Visual Studio and Visual Studio 11.
Giving our project the “metro” treatment
So I decided to re-imagine TextCraft as it would look had it jumped from 1985 to 2012 in a few hours..
Stay away from the feature creep
The first thing that I thought of when I decided to create a Metro app.. What were my tasks ?
- Basic text editing cut/paste/copy/undo/selection
- Styling Text: Bold, Italics, and underline
- Load or Save locally or in the cloud
- Inserting an image into our text layout
- Basic printing
Starting our project with Blend for Visual Studio
Why not just get started by opening Visual Studio and getting started coding ? Because we are designing a real METRO app ! That’s why! Ultimately you should start with wireframes and good design practice. You might want to start here..
The days of “Make it look pretty..” are gone
If you are a programmer you are about to get mad at what I am going to say to you.. I am going to take you out of your comfort zone. Even with WPF and Silverlight there weren’t strict standards for user interface adherence. You could get away with coding everything then going back and hiring a designer to cobble something together to make your code together into something that worked but not something your users’ could live with are gone ..
If you started your application for Windows and it looks like a bad game of tic-tac-toe or the TV show “The Hollywood Squares” you really aren’t getting the point of the METRO design language in the first place.
In this instance a “Live Tile” is not a menu item or a menu button.. This is not how you select something. Do you think this would sell competitively ?
METRO APP TEMPLATES ARE DESIGN FIRST
I have been just about crapping in my pants about how ineffectively “METRO” design principles are being conveyed at WIndows 8 bootcamps lately. Yes that means you Microsoft Developer Evangelists, I am calling you out on this..
If you get an introduction to Windows 8 with someone first opening Visual Studio and not Blend FIRST! then you are getting a really bad deal. There is no easier way for a developer to go down the wrong path without this.. The reason that Blend is not Expression Blend but Blend for Visual Studio is that Microsoft feels that Blend is such an integrated part of Visual Studio now it will come integrated into every commercial version of Visual Studio for Windows 8..
Default templates now included with both Visual Studio and Blend are now included a warning message that if you don’t include “METRO” design functionality in your interface that they will not work and will not be accepted to the “Windows Marketplace”..
“The Common directory contains classes and XAML styles that simplify application development. These are not merely convenient, but are required by most Visual Studio project and item templates. Removing, renaming, or otherwise modifying the content of these files may result in a project that does not build, or that will not build once additional pages are added. If variations on these classes or styles are desired it is recommended that you copy the content under a new name and modify your private copy.”
What is in the common folder that’s so important ?
Boolean Negation: A boolean negation converter for visibility that translates true to Visibility.Visible and false to Visibility.Collapsed
Boolean to Visibility: A value converter that translates true to false and vice versa.
Layout Aware Page Class
A common implementation of “Page” that provides several important conveniences
- Adds an application view state to visual state mapping
- GoBack and GoHome event handlersr
- A default view model
An implementation of INotifyPropertyChanged that simplifies models. Creates a “multicast” event handler and listener for INotifyPropertyChange events.
A wrapper for RichTextBlock that creates as many additional overflow columns as needed to fit the available content.
Standard light and dark styles and rules for metro apps. These will be familiar to Blend designers.
Freezing your Application with Suspension Manager Code
Because Windows 8 and METRO applications now run on both ARM and Intel devices and can scale to phones, tablet, PCs and even maybe some other types of devices we haven’t thought of yet that can run on batteries, Microsoft recommends you include code to freeze and unfreeze your application temporarily. In a world where we run on extremely low power devices with batteries being able to suspend your METRO application has become extremely important..
Microsoft provides SuspensionManager.cs sample code that you can use for handling this process. I have heard more than one programmer since Windows Phone and Windows 8 suggest that the ability to “Freeze” apps and switch isn’t real multi-tasking. Well my response is this: if you have a device (other than a desktop PC) that you can switch off and switch back on at anytime and you an OS that has to fetch things at odd intervals and must stop what it’s doing then be “instantly” back on you need to be able to do this.
There are many situations where you may loose a data connection as well that the device can’t just sit there eating your battery. Under Windows Mobile battery life was terrible. It was mostly because multi-tasking was a continuous thing and the suspend resume facilities that were added weren’t used effectively by app programmers.
This also affects the user experience and user interface as well. You can’t just really terminate and restart the program and expect the user not to get annoyed when they pick up the device and were not right back where they left it.
It needs to remember what the user was doing and where it was when they left off. This works well in all cases including when the program is waiting for too long for something (including things like a data request from the internet) and is terminated by the operating system so it’s not caught in a battery eating loop.
Programmers might ask wait, suspending “apps” has to do with design. Well our program must remember what was going on before, context, state, etc. so when it resumes and reactivates the user finds themselves right back where they were when they see your app’s UI.
For more information on lifecycle events check out:
The OnLaunched Lifecycle Event
Adding an OnLaunched event handler code, lets your app can check the PreviousExecutionState on the event arguments. If it equals Terminated, restore the data you saved in the Suspending event. If it is a different value, use your app’s default data.
In our app we could even override the OnLaunched event to handle activation a basic activation from a live tile.
Here’s an example code snippet that Microsoft provides for creating an OnLaunched Handler to deal with user activation of a stock app that loops through all possible scenarios including resuming from a suspend application:
More on this later, but in our own app, the user might be editing or entering text that they haven’t saved, and if the user has suspended work and switched to another app or he has powered down his device we want to be able to fetch the text back to the exact state he was in before.
Starting in Blend for Visual Studio
Since we are doing text editing and processing in our app I was hoping to find a “rich” textbox control that handled “RTF” (rich text format) text and had methods already established for formatting text. Unfortunately since we are in the “beta” state there seems to be NO SUCH control as I have seen in previous versions of Windows to make this easier. I would really love to be able to change the typeface and control formatting text and decorations that adorn the look and style of my users’ text more precisely.
My options currently are as follows:
This forces me again to think about the user experience and which controls I am going to use.. I finally decided to use the RichEditBox because every other option seems to be one way and static one way bindings for data.
Next, I started to create the elements I needed on-screen starting with the RichEditBox.. My layout ended up looking like this and there is still some new options needed but let’s focus on our main work area for now the RichEditBox control..
After dropping the RichEditBox control in our BlankPage.XAML main grid on the design surface of blend in the main stack panel I named the control RTBEdit and set-up properties for the control. The XAML code looked like this:
<RichEditBox x:Name=”RTBEdit” Height=”400″ VerticalAlignment=”Top” ScrollViewer.HorizontalScrollBarVisibility=”Disabled” ScrollViewer.VerticalScrollBarVisibility=”Visible” BorderBrush=”Black” Background=”White” FontSize=”26.0″/>
Our next adventure will be wiring up the RichEditBox to bring in a text file using the file picker.
I will next create the background rectangle for my RULER and create a series of buttons and create a code behind to pick and read the file into the RichEditBox for viewing and editing..
So to get started I create a series of buttons in the main Grid’s StackPanel and set the ordering so it will include a rectangle the RichEditBox and FileDetail TextBlock which will later show us the file name of the text we have currently loaded up.
In the main Grid I will also create a horizontal StackPanel and name it Menus. Here I will add our project menu to load and save files. There will be a few other buttons for Layout, Styling text, and any Extra capabilities we might implement. Since this is a text editor that is touch friendly we will only allow one file open at a time.
So this means I will use the Project menu to Load new text and contextually save when necessary. We will automatically check to see if the text is UNSAVED and prompt the user clicking the Project Button.
Before we fill the rest of these out, let’s wire up some code to the ProjectBtn so we can pick a file to open and load the text right into the RichEditBox control.
When we select the ProjectBtn control we notice that it is simply a control derived and inheriting the properties and capabilities of the Windows.UI.Xaml.Controls Class.. and it reacts to the ButtonBase CLICK event.
When this click event fires on our project button we will need it to access the “METRO” file picker and read in the text file into our RichEditBox for user manipulation.
This will switch us to the next view to define our code-behind.
Next we will name our “Click“ event UIOpenFile_Click. When we hit enter after typing the name, Blend will next open us up in code mode away from design mode on BlankPage.XAML.cs and give us the frame for us to type in the code needed to open up our file picker in the METRO interface and select files.. Be sure to watch for duplicate names in the code.
Here in our code editor we can next enter code for when this event fires.
We next add code to pick the file and load up our RichEditBox with the text file..
So the first thing we do is create a keyword NEW instance of the FileOpenPicker() function that we will name picker.
var picker = new FileOpenPicker();
Next we define a few of the more important properties to help guide the user along..
picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
picker.ViewMode = PickerViewMode.List;
First should set a start location for this picker to open. We should point it to open up right inside the users own documents library.. Since we are not dealing with loading an image in this case (just opening a text file) I am going to show the picker in the file list mode instead of thumbnails.
// no RTF file support yet in RichEditBox picker.FileTypeFilter.Add(“.rtf”);
Next I am going to set our picker to clear any file type filters that are already set and only show us files ending in .TXT and .HTM format. We could add more filters to show only the filetypes we needed. But this works fine for now.
var file = await picker.PickSingleFileAsync();
if (file == null) return;
string fileContent = await FileIO.ReadTextAsync(file);
Next, tell it to wait until the user has chosen a file and make sure there is content in it before trying to read it into memory and store it in the RichEditBox. Here is our Picker opened up ready to choose a file.
After the file is read we pass the name of the file to the TextBlock control’s text property so the user sees the name of the file we are loading.
FileDetail.Text = file.Name.ToString();
Next we call the RichEditBox’s SetText functionality to pass the file object that the Picker has created for us to pass the content into RichEditBox for editing.
and voila!! We can now load text right into our RichEditBox..