Annoying IsReadOnly bug

While fixing the security flaw I encountered in WP7.5 FAS I bumped into another annoying issue.

I fixed the FAS issue by hiding the password from view until you drag your finger over it.  When the TextBox has focus the password is displayed as soon as you move away it reverts to showing *********.  Neat and clean!

However the mouse over event can also turn into a Tap event and this causes the WP7 UI to show the on screen keyboard and start editing which is just a UI mess, as all the users is really trying to do is view the information and not change it.  Worse still – quite often the password is shown as ********* for editing!

In order to keep the UI clean I simply set the TextBox to have IsReadOnly=”True” and then the keyboard does not appear.  All seems good – the password is shown when the finger is dragged over it and the UI only drops into edit mode when the user wants to make a change by pressing the Edit button on the toolbar. 

But then during testing my App would sometimes crash when resuming from FAS suspension.  It would show ‘Resuming…’ on the screen and never actually resume…

It took quite a while to establish that it was the IsReadOnly=”True” setting that was causing the problem.

I suspected I could fix it by removing the focus when the App was deactivating but didn’t know how so was pleasantly surprised when the excellent Richard Woo pointed me to the solution when I posted the bug on the App Hub Developer Forum.

I dropped the code into place and the issue is resolved.

public NewItem()
{
    InitializeComponent();
    PhoneApplicationService.Current.Deactivated += new EventHandler<DeactivatedEventArgs>(Current_Deactivated);
}

/// <summary>
/// Handler to remove focus from a TextBox that is read only.  This cures
/// the exception that occurs when resuming.
/// </summary>
void Current_Deactivated(object sender, DeactivatedEventArgs e)
{
    var focusedElement = FocusManager.GetFocusedElement();
    if (focusedElement is TextBox)
    {
        if ((focusedElement as TextBox).IsReadOnly == true)
        {
            this.Focus();
        }
    }
}   

Advertisement

Security Flaw in WP7.5

I came across a security flaw in what is a neat feature in WP7.5 – I am talking about Fast Application Switching (FAS).

FAS is quite simple – press the Start button while running an App and it switches to the background.  Press and hold the back button and all the Apps in the background are displayed as a scrollable list. Touch an App and its brought back to the front.  All quite neat and useful.

However it is flawed because when the App is switched a screen shot of whatever was on the screen at the time is displayed as the background image like this:

This screenshot is not that clear but ThisIsMyPassword is clearly visible!

Microsoft are aware that this is an issue and have argued that it is the users responsibility to use the phone appropriately and  keep data secure but this is a cop out in my opinion.  FAS is pretty transparent to the user – I wasn’t even aware of it when I upgraded my phone from WP7.

As an App author I have a responsibility to my users for keeping the data they have entrusted to my App as secure as possible.  I have gone to considerable effort in Master Key to ensure that the password data is secure under as many different user scenarios as possible.

In the original WP7 OS when the Start button was pressed the foreground App is closed using a process called tomb-stoning.  The App is given a chance to saved its current state prior to being shut down.  When the back button is pressed the App is restored back to the screen that was in operation.

The state management process is handled with OnNavigated events and it is the App developers responsibility to save/load the state in the event handlers.  It’s a bit of a hassle to handle tomb-stoning because it is a snapshot of where the user is at the time and cannot really show how the user got into that state automatically.  It falls on the App developer to provide additional data so that on resumption the App comes back to a working state.

In Master Key version 2.0 written with WP7 in mind when the App is resumed from tomb-stoning it returns to the login screen forcing the user to re-enter the master key password and reload the encrypted data from isolated storage.

When FAS is invoked the same tomb-stoning process is used but as a developer I don’t get a chance to control the screenshot that is taken as there is no specific API and no chance to influence what it going to be taken as screen grab occurs before the OnNavigated event is invoked.

The only solution is to ensure that the screen is maintained in a safe state so that the screen shot, whenever it occurs, will also be safe.  I implemented a solution by catching the MouseEnter/MouseLeave events and only displaying the password as the user swipes over the password box.  As soon as the mouse leaves the password box it is hidden again.

This code example which is hooked into the password box event handlers shows the password as asterisks and then displays the actual password as soon as the MouseEnter is triggered.  I had to catch the Tap event as well, as it catches and prevents the MouseLeave event from firing which would otherwise leave the password on display.

private string Password="MyCurrentPassword";
private string PasswordHidden = "".PadLeft(Password.Length, '*');
private void OnMouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
    textBoxPassword.Text = Password;
}

private void OnMouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
    textBoxPassword.Text = PasswordHidden;
}

void OnTap(object sender, System.Windows.Input.GestureEventArgs e)
{
    textBoxPassword.Text = PasswordHidden;
}

The result looks like this:

Ideally Microsoft will provide an API that would let the developer substitute another screenshot in place of the default – the splash screen for example.  Until then its up to us to jump over a couple of hurdles to keep the data secure from prying eyes!

Page Transitions

This is a quick note on getting page transitions to work.  Animation is a subtle but key feature of Windows Phone apps and I wanted to experiment with the process.  It turned out to be pretty simple…

The Windows Phone Toolkit on Codeplex (http://silverlight.codeplex.com/releases/view/75888) provides some really useful components, one of which is called Transitions.

The toolkit is easy to install and is referenced in pages by adding this to the header:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

In order to use it this XAML is added to the start of each page (just before the page layout)…

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

 

The XAML manages the animation of the page as it is entered and exited. The Mode attribute controls the animation style – in this case its called ‘Turnstyle’.

In order to make the process work the RootFrame style has to be changed in App.xmal.cs:

        private void InitializePhoneApplication()
        {
            if (phoneApplicationInitialized)
                return;

            // Create the frame but don't set it as RootVisual yet; this allows the splash
            // screen to remain active until the application is ready to render.
            //RootFrame = new PhoneApplicationFrame();
            RootFrame = new TransitionFrame();
            RootFrame.Navigated += CompleteInitializePhoneApplication;

            // Handle navigation failures
            RootFrame.NavigationFailed += RootFrame_NavigationFailed;

            // Ensure we don't initialize again
            phoneApplicationInitialized = true;
        }

That’s it!

Social Objects

I went to an ‘event’ a couple of days ago organised by the cartoonist Hugh MacLeod (www.gapingvoid.com).  Hugh talked about using cartoons as Social Objects.  He asked us to bring along a social object of our own and after some thought I came up with the idea of an App as a Social Object.

I only had a spare hour on the train on the morning of the event so the App was going to be pretty simple.

Without having to give too much thought I quickly turned the invitation to the event which had arrived via an email into the ‘social object’ App.  The images and text simply being lifted and re-formatted to suit to phone.

The event was being held at 1 Alfred Place in London and in order to get there I had to walk from Euston Station so I used Bing Maps and grabbed a section of the map, suitably zoomed for my image.  I added pan and zoom so that I could move around the image and created a directions page.  I used the Bing London Street Map which is far more useful than other forms for the tiny streets in the capital.

I didn’t use the the WP7 Maps for two reasons, firstly I didn’t have time to learn how to make it work and secondly the phone signal can be patchy and I didn’t want to have to rely on it for the App.  Also the London Street Map is not available on the phone.

Finally I quickly created a Tile image and deployed the App to my phone.  I had a social object…

I showed the App to a few people at the event and the general reaction was ‘wow’, the fact that I had created it specially being the main significance as obviously the App itself is trivial.  I do however tend to forget that outside the technologists and developers that I work with; for most people software is a black art…

I’ve spent a couple of hours since refining the App to implement clipping, though the screen shots above are from the original.

Using WP7 gestures for the image Pan and Zoom on the map was pretty simple to implement but the image moved outside the bounds of the canvas I created.  In order to clip the map so that it did not overwrite the rest of the text on the screen I had to implement a clipping behaviour.  Given that the behaviour is both quite simple to implement and of such obvious benefit I am somewhat surprised that it’s not available by default.

There are quite a few clipping examples around but none of them have the elegance of this solution which implements a clipping behaviour:

http://www.pitorque.de/MisterGoodcat/post/Windows-Phone-7-Pinch-Gesture-Sample.aspx

Oh and the evening? I can’t complain – free beer is a good way to encourage positive feedback! Hugh rambled a bit and didn’t make any effort to see the audiences social objects which was a disappointment as I’m sure there would have been a lot more audience participation.

Master Key sent for approval

I’ve finally sent Master Key off to the App Hub for approval so I now have to wait and see if it passes and gets published.

Writing my first Windows Phone app has been an interesting process.  Like anything new it’s taken quite a long time to go from a blank sheet of paper through to the final solution and now that I’ve done it once I’m pretty confident that next time it will be much quicker.

Writing for the WP7 platform is great, especially as I’m very experienced with Visual Studio, c# and to a lesser extent Silverlight.  Microsoft have excelled themselves in producing such a great development environment.

I’ve now completed version 1.0 of the application and am already thinking of version 2.0; I would have continued to add features but really wanted to complete the first deployment and get onto the Marketplace.  As I follow a RAD process it can be quite hard to be disciplined and stop development as feedback testing suggests new features and better approaches to solving a problem.

Setting up my account on App Hub has been very time consuming.  As a UK based developer I have to jump through a bunch of US IRS hoops in order to get paid the full royalty amount without losing 30% in withholding taxes.  While this is not much of an issue currently as I’m not expecting any significant royalties it will hopefully be worthwhile in the future.

Along with putting the app up for approval I’ve finally deployed the MDL website.  It does not have a great deal of content currently but I have published the help for Master Key.  The web site is at:

http://www.metadev.co.uk

I used the new WebMatrix tool to create the site and am reasonably happy with the outcome.  I use Discount.ASP as my hosting service; I’ve used them for a few years now and am pretty pleased with their level of support and the functionality.

It took me a few goes to get the deployment to work properly but this was partly down to me using .NET4.0, having to configure IIS7 and modify one of the CSHTML pages so that it wasn’t attempting to connect to a database.

I tried to use FTP but it didn’t work very well and read the recommended method was to use Web Deploy. I used the ‘Import publish settings’ to get the correct info from Discount.ASP and all I had to do was enter my password.  You need to use ‘Validate Connection’ and ensure it passes before deploying.

Take a look at this support article on Discount.ASP site:

http://support.discountasp.net/KB/a891/how-to-deploy-an-application-using-web-deploy-feature.aspx

Configure IIS7 by checking the box to give your Discount.ASP login account access.

I added the following to the web.config – I am not convinced that this is necessary as I do not have a database.

    <connectionStrings>
        <add name="LocalSqlServer" connectionString="x" providerName="System.Data.SqlClient" />
    </connectionStrings>

I still had errors but this time they were more explicit and commenting out this line: 

//WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);

in _AppStart.cshtml fixed it and my web site was deployed.