Inline Block not quite Inline-blocking in IE8

So we have been working on a site that has a good amount of buttons on it, but input buttons aren't that easy to make look nice.

So i've been round the site fitting snazzy buttons built out of anchors and spans with backgrounds to complete the look.

We've made use of the 'Inline-block' setting of the display css style. It looks proper nice in Firefox, Safari, Chrome, and Internet Explorer 7.

But.

Internet Explorer 8 makes a right meal out of it!

All buttons that are next to each other appear stacked on top. IE8 seems to have a problem coping with 'Inline-block' elements.

However, there is a quick fix it would seem, to this stacking issue. All that is needed to get Internet Explorer 8 to honour the 'Inline-block' style is add a 'margin-right' of some value, like so:

and now all the browsers render the buttons nicely:

Tim Jeanes - TechEd 2009 - Day 5

WIA308 - The Biggest Little-Known Features in Microsoft Silverlight

(All samples from this session are available at http://www.wintellect.com/downloads/techedeurope2009.zip)

Typically Silverlight uses the browser's connectivity for all network access. However, Silverlight 3 introduces the "client stack", that uses the operation system's networking APIs. This makes it a lot more stable and reliable - for example you now get full access to headers, and when you hit a SOAP error you'll now get the full error details back, instead of the munged version that the browser returns (the browser stack will only ever return a 200 or a 404). This also gives you access to http PUTs and DELETEs, rather than just GET and POST as supported by the browser stack.

On the other hand, the client stack will never give you cached results; also you're limited to two concurrent connections.

You just have to call this:

HttpWebRequest.RegisterPrefix("http://[whatever]",
    WebRequestCreator.ClientHttp);

... and then access connections as usual.

An event called CompositionTarget.Rendering is fired about 60 times per second on the UI thread, and can be used for custom animations. It's mostly used for games, but can be useful elsewhere, for example to work through a long-running queue of changes that need to be made to the UI - running on another thread would be inappropriate as that thread wouldn't be able to update the UI.

There's an enhanced frame-rate counter that monitors the amount of memory used by the GPU.. This is shown when EnableFrameRateCounter and EnableGPUAcceleration are both set to true.

BitmapCache.RenderAtScale can be used to scale up controls using the GPU, without pixelation.

A new class called Analytics allows you to monitor CPU load (both by this process and by all processes), as well as information about any GPUs that might be present.

The AssemblyPart class represents an assembly that's part of a Silverlight application. AssemblyPart.Load enables you to load assemblies at runtime, minimising the initial download time of the application. (NB. this can only be called on the UI thread.) By changing the CopyLocal property of a reference to false, you still get full intellisense when developing the application, but it's not sent down in the initial xap file. So long as you dynamically load the associated dll before you try to use it, your application will still work.

Be careful though! The JIT compiler compiles methods the first time it sees them: if this happens before you've loaded the assembly, you'll get a runtime exception. Also, the JIT compiler may choose to in-line some methods, so you don't know for sure when a method will be compiled. The safest way to avoid this (and retain strong-typing) is to use the [MethodImpl(MethodImplOptions.NoInlining)] attribute on the method that uses the dynamically-loaded reference.

Application Extension Services are services that have the same lifetime as the Silverlight application - they start just before the app, and end just after it ends. Implement IApplicationService (and optionally IApplicationLifetimeAware) on a class to make it such a service. We saw a sample where dynamic assembly loading was handled on-demand by such a service. It's a little complex, so check out the sample code.

The VisualTreeHelper class gives you access to the xaml that's been generated by templates in data-bound controls. This can be handy for programmatically styling items in a list, for example.

Silverlight 3 now has support for xaml-styled modal dialogs, using Child Windows.

VirtualizingStackPanel acts like a StackPanel that handles large numbers of items much better, by deferring templating the items until they scroll into view. ListBox now uses it by default, though ComboBox still doesn't.

RelativeSource can be used to bind a property of an element to the property of a nearby control (such as its parent).

AutomationPeer is usually used for accessibility issues, but can also be used to simulate button clicks.

NetworkInterface.GetIsNetworkAvailable() tells you whether or not a network is available. NetworkChange.NetworkAddressChanged is an event that will let you know when the network drops out or comes back.

DEV312 - Using and Extending Microsoft Visual Studio 2010 Architecture and Modelling Tools

A lot of this was typing code, so I won't reproduce it here, but there were a few key points.

Visual Studio uses MEF (Managed Extension Framework) as its extensibility mechanism, so it's now included in VS2010. It gives you extensions for commands, gestures (such as drag-and-drop) and model validators. This does most of the hard work for you, giving you easy points to plug into VS events, so you can just concentrate on the things you want to do.

Model validators can be set to run whenever the model is saved or opened, or run manually from a menu.

VSIX is a packaging technology that uses Office's xml model to package up your extensions and makes them much easier to install.

Whilst developing an extension, pressing F5 launches a new instance of Visual Studio, installs the extension, and enables debugging in the first instance. This instance is entirely separate from a normal one, down to using its own set of registry settings. This is so much easier than it used to be!

There's a whole now (and much, much easier) model for inspecting and altering existing code. This was a third-party library he found, but I'll see if I can dig it out - our code generation tools are a little painful to work with sometimes.

This session focused entirely on extending the class diagram and the UML model diagram, but I believe similar extensions are available for other actions and items in Visual Studio.

DEV301 - Microsoft Visual Studio Tips and Tricks

I was going to try to keep up, writing them here as they were explained, but there were too many coming too fast, and in any case there'll all here: scottcate.com/tricks. Thanks Scott!

(Most of these work in VS2008 as well - you don't have to wait for VS2010.)

Tech Ed 2009 - Friday - Neil Bostrom

Can you keep a secret? The biggest little-known features in Microsoft Silverlight

The default networking calls in Silverlight are all made through the browser. This has limitations to do with when web service return server faults. The browser can not interrupt it correctly.

There are now two networking stacks in Silverlight 3. Browser stack and client stack. The client stack goes direct to the OS network stack. This stack works correctly for web service faults. The browser stack only support 200 and 404 return codes. This is the root of the problem with web service server fault limitation. A limitation with the client stack is that it does not get the content caching built in to the browser.

To start using the client stack, you call HttpWebRequest.RegisterPrefix("http://", WebRequesterCreater.ClientHttp) and all calls after that will be on the client stack.

You can check any request object by checking the CreaterContext.

Silverlight 3 has an updated frame rate counter. To enable that, add ENableFrameRateCounter and EnableGPUAcceleration.

RenderToScale is part of the BitmapCache that allows you to control the size of the bitmap that gets handed off to the GPU by Silverlight.

Analytics class allows logging of CPU load and GPU usage.

AssemblyPart.Load allows you to load up assemblies on the fly. This means you can keep your xap file small and just pulled down the extra parks as and when you need them. To lighten up your xap file, you can change your references to be copy local = false. This means it won't be shipped in your xap. For the dll to be easily downloaded, put a manual copy inside the ClientBin folder.

This technique does have a big flaw. The CLR will die trying to find that reference. The CLR scans the method before it's run for all its types. MethodImpl(MethodImplOPtions.NoInlining) forces the JIT compiler not to scan that method for types it does not know.

Application Extension Services is a service model for building services that run with your applications. All you need to do is implement IApplicationService, StartService, StopService. Silverlight will create the service as it starts and close it just before exiting.

SynchrosationContext.Current has access to the UI dispatcher

VisualTreeHelper is a handy class to grab controls inside Composite controls.

RelativeSource allows two way template binding! Awesome!

AutomationPeer class allows you to click buttons etc.

 

Architecting Silverlight Applications with MVVM

MVVM is only a solution for large scale applications. It's not really ideal for small projects as it can be very bloated with layers etc.

MVVM is Model, View, ViewModel. As you start using this concept it is very similar to MVC. You create a Model which is your entity with data access. View is your control XAML on the page and then you create a model for your view that has everything you can bind to. The advantage with this is that ObservableCollection does not need to exist in your model, you can just expose that in your VIewModel. This keeps your model very clean from UI dependant references.

A cute way to reduce the dependency on the view calling the model in code is to use behaviours that you can just attach to elements in the view. One handy behaviour out of the box is CallDataMethod which can be wired up to to your method on the model.

 

Code Contracts and Pex: Power Charge your assertions and Unit Tests

CodeContracts does validation on your code and comes up with warnings for certain coding errors.  Code Contracts allows you to make code method call intentions on your methods and code contracts will generate the correct code to run that intention.

Pex allows you to do unit testings on firing cases of your code that you might not have considered.

The Code Contracts does make for very bloated code. For interfaces you need to make two more classes to just say something doesn't need to be null.

Code Contracts has a runtime checker, static checker and documentation output. So that single intention gets used in a bunch of places.

Tim Jeanes - TechEd 2009 - Day 4

WIA304 - Building Line-of-Business Applications Fast With Microsoft Silverlight and Microsoft .NET RIS Services

Given a data model, RIA services quickly generates the domain service classes for your web layer. The generated classes include skeleton methods to get, insert, update and delete the entities. Business rules (such as required fields) are automatically passed through so that the UI can respond to them.

The uriMApper xaml element provides a way of routing URL patterns to xaml controls, making your Silverlight application more website-like, and preserving the functionality of the back button. It uses URLs in the pattern mysite.com#/Customers - the # ensures you're really staying on the same page, so the Silverlight control doesn't have to be reloaded.

A goal of RIA Services is to take away some of the pain of handling asynchronous events, giving you cleaner, more readable code.

RIA Services provides you with some additional Silverlight controls. One we looked at was the DataPagerControl, that attaches to a datagrid and returns pages of data, all with writing virtually no code.

The DataControlToolkit adds a few new Silverlight controls to get you going more quickly with editing data. For example, the DataForm control will provide appropriate input controls for each field on your object.

The ActivityControl can be wrapped round your input form. When its IsBusy property is set to true, it masks itself and shows a Please Wait animation. This property can be bound to your domain service class (that wraps the async calls), thus making it dead easy to give your users a synchronous experience.

To enforce security, the [RequiresAuthentication] and [RequireRole] can be added to methods, preventing them from running if the user doesn't have sufficient credentials.

WIA303 - Microsoft ASP.NET AJAX: Taking AJAX to the Next Level

I've never been a big user of Microsoft's AJAX offering - I felt their control toolkit wasn't particularly good-looking and wasn't flexible enough if you didn't want exactly what it did out of the box, and I found jQuery could do at least as much as I wanted - so I was interested to find out what improvements they've made to "take things to the next level".

First up, Microsoft have launched a Content Delivery Network, hosting many common javascript files, such as jQuery, the Microsoft AJAX.NET javascript library, and the jQuery Validation library (which I really must look into). jQuery.UI's not on there yet, but they're thinking about it.

In .NET 4.0 webforms, you can say <asp:ScriptManager EnableCdn="true" />, and it will automatically get all its script files from the CDN.

The MS Ajax Minifier is a new offering that's available as a command line tool or an MSBuild task that works in two modes: normal minification (that strips whitespace, etc.) or hypercrunching (that goes a lot further - shrinking variable names and removing unreachable code). I think hypercrunching is probably the coolest name Microsoft's come up with for any of its products for quite some time.

The minifier can also analyse your code and warn you of any problems it can recognise.

(As an aside, a nice way to edit your project file in Visual Studio is to right-click it and select Unload, then right-click and select Edit. I never knew that - I've always been opening it in a separate text editor.)

The new AJAX library isn't being shipped with VS2010 or .NET 4.0 - instead it's available as an open source project.

It's written as a pure js library, so it will work equally well in webforms, MVC, or plain html. It integrates seamlessly with jQuery, and all its controls are exposed as jQuery plugins.

start.js contains a script loader that will pull in any other scripts you need, and defined by the Sys.require() function. This makes it easy to ensure you get the all libraries you need, exactly once each. It also supports lazy loading, so you can load libraries at the point that you need them.

Items can be added to the page using Sys.create.dataView. This looks for elements with a class="sys-template", which are treated as templates. The contents of the template are repeated for each item in your data source, and data fields within the template are demarked using {{field-name}}. An itemRendered event is fired for each item to allow you to perform your own custom tasks.

Sys.bind() gives a really easy way to bind an item list with a detail view. You specify an event that fires when an item in the list is clicked, which you then use to populate your detail view. Using templates for both means you have to write almost no code.

A major new feature is the client-side datacontext. This works much like the DataContext in LINQ2SQL in that it tracks changes to records in the browser,which can then be batched up into a single AJAX post when the save button is clicked. This also supports two-way binding, so you can have the text in html elements be automatically updated in response to the user changing the text in a textbox.

WIA401 - Enhancing the Design-Time Experience for Microsoft Silverlight 3

When developing controls to be used in Silverlight, bearing in mind how the designers will experience them in Blend can make a big difference to how ready they are to slap you.

A new feature in Blend is the ability to add sample data. This makes it much clearer what the control will look like at runtime, without having to access any live data.

Attributes can improve how the control appears both in Blend and at runtime. For example, giving a property Category and Description attributes puts the property into its own group in the designer, with tooltip text to indicate what its function is. Further attributes can change how the value is entered, how it is validated, where it appears in the list, etc.

All the design-time code is wasted once you come to deliver your final product, so it makes sense to separate your design-time code into a separate assembly, but putting it into separate projects in Visual Studio. To do this, you must follow a naming convention for the project (and thus dll) names, and put classes in each project with the same names. This will then be respected by the design environment. Your projects should be named  *.Design, *.VisualStudio, *.Design.Editors, *.Expression.Design.

Behaviours are a powerful tool that allow you to specify a lot of functionality without any code. Some are available out of the box, such as making an item draggable, but you can also make your own, configurable by properties in the property box in Blend.

WIA307 - Cool Graphics, Hot Code: Visual Effects in Silverlight

(All samples from this session are available at http://www.wintellect.com/downloads/techedeurope2009.zip)

A class called PageTurn.cs is a class that encapsulates the Page-Turn framework. Given pairs of canvases (for the left- and right-hand pages), this provides a clean page-turning animation.

The WriteableBitmap, new in Silverlight 3, is the root of all sorts of visual goodness. This lets you generate images on the fly, as well as taking a snapshot of controls in the running application. This can be used for anything from drawing Mandelbrot Sets, to capturing frames from a video, producing a draggable magnifying glass or the much over-used Shiny Wet Black Floor effect.

[Aside: If your xaml contains a large picture, but you're scaling it down, then if you make a WriteableBitmap from this, telling it to scale up, Silverlight is clever enough to use the original large bitmap, rather than the smaller scaled one, thus avoiding pixelated blockiness.]

We saw a little more of HLSL for building custom pixel shaders too. It was developed by Microsoft and is used by DirectX, so is very high-performance. It's based on C and looks a little crazy, but it's maybe not as scary as I'd thought. We saw how this can also be used to generate the Wet Floor effect. This has the big advantage that it's real time, so if your original xaml changes, so does the reflection.

However, it's worth noting that (for now) Silverlight only uses the CPU to execute the pixel shaders; if it ever uses the GPU, we can expect much better performance.

DEV316 - Model-Based Testing Made Easy with Spec Explorer 2010 for Visual Studio

Spec Explorer explores your C# code and draws a state machine graph of the possible routes through it. This gives a different view of the model that can be (possibly) more easily compared with the original requirements. From this, it generates unit tests that will trace each route though the code.

It's a little bit crazy and I don't think I'll ever use it, and that's all I've got to say about that.