If you are based in the US and had a chance to experience Olympics 2008 over the web on http://nbcolympics.com - you probably saw some of the power of Silverlight for immersive media experiences. Silverlight 2 Beta 2 enables much more than media experiences so let us look at some of these aspects in detail .
Let us start with the Application Model for Silverlight2. The install is a one-time (system wide) phenomenon and updates happen automatically to the runtime and would not require a browser restart. The instantiation of the Silverlight application can be done via the <object > tag or programmatically using the Silverlight javascript. On the server hosting the Silverlight content, the correct mime-type needs to be set (XAP - Application/x-silverlight-app). The application package contains the app.dll, business assembly and the manifest file. Once the XAP is loaded all the objects are available in memory - this implies less round-tripping, better performance. Offline scenarios can rely on the IsolatedStorage feature for building durable experiences. All Silverlight applications can use a splash screen which is composed of pure XAML and javascript. There are also events raised which can be handled as the Silverlight content is downloaded the first time around. There can be multiple plug-in instances per-page and one App-domain per instance. Exception handling can be done by using the plug-in's onError event.
Next, lets look at Controls. Silverlight ships with a rich and functional control set. For layout, the following controls are available - Canvas, Panel, StackPanel, Grid. Other feature controls include Button, Calendar, CheckBox, DataGrid, DateTimePicker, GridSplitter, Hyperlink, ListBox, Popup, Radio, Slider, Toggle, Tooltip and this list will continue to grow. Silverlight also has a strong partner ecosystem building domain specific controls. Another important aspect in using framework control is the ability to style and apply skins to the controls to get the desired rendering. Silverlight fully supports these mechanisms and shown below are examples of applying skins and styles to the TreeView control to change its look and feel. The first image is the normal rendering, the second image applies styling to change background and imagery and the final image shows the transformation of the Treeview control into a dial-based UI to highlight full control over the UI. There are also ASP.Net controls available based on Silverlight - such as MediaPlayer control and the XAML control.
Another important feature in this regard is the VisualStateManager which provides a notion of state and transition and supports visual transition along with minimizing state explosion. Silverlight also supports Animations - changing the value of a property over time, use different animation (double/color/point/object) and interpolating(linear/discrete/spline) types. Animations can be defined both declaratively and programmatically.
Another key aspect for Silverlight is Media. The key tenets for Silverlight in this space are - highest quality, lowest cost of operation, best overall user experience, and monetization. There is support for VC-1, WMV, WMA, mp3, and WMA 10 Pro. One of the most feature for media capabilities is the support for DRM, this is applicable for streaming content. The support for playlists allows for delivery of a set of assets to any user. The 3 primary types of playlist are
- .asx - resides on the client PC, simple to author and deploy, the urls are exposed to the client, ad content can be skipped
- .wsx - resides on streaming server, can hide location of assets from the client, seek/skip disabled
- .isx - web playlist, requested from web server which returns obfuscated urls for client playlist, location of assets remains hidden
As Silverlight content is displayed in the browser - it is important to understand the Browser Integration capabilities. This feature allows for seamless communication between javascript and .Net in the browser. There are 3 core scenarios - .Net functions exposed in browser and called from within javascript, javascript code on Html page could come from .Net code-behind and manipulate the Xaml tree from javascript (this is supported in Silverlight 1.0 only) . A Silvelright object can be registered as scriptable and specific members can be attributed with [Scriptable Member] to enable calling from javascript. For manipulating the Html DOM the HtmlPage class can be used.
An important aspect of any application is Data, so let us look at this in Silverlight 2. The first thing you will notice is LINQ support - in addition to LINQ to Xml and LINQ to objects, we now have support for LINQ to JSON. There is also support for in-memory filtering and sorting, compile-time syntax checking and 2-way binding support. DataTemplates are used for UI representation of data and can exist in Content controls or Item control. DataGrid is the main control for data and it supports data-binding, scrolling, row selection, text/template.checkbox columns, skinning, editing, resizable rows and columns, auto-sizing for rows and columns, frozen columns, filtering, detail view etc.
Finally a web application warrants a strong Networking support, so let us look at the Silverlight 2 networking features. One of the primary things to take note of is the WebClient - this supports asynchronous, cross-domain access to network assets. The HttpWebRequest and HttpWebResponse classes are also available and provide fine grained control of Http messaging. This allows to consume existing form-based assets. Silverlight supports WCF based services for consumption. SOAP-based web services can expose WSDL and deploy the x-domain xml and ClientAccessPolicy.xml to support access from other servers. Socket based communications require a policy server to be defined. The first handshake with the policy server determines which ports/protocols acceptable to connect.
One fun feature I wanted to touch upon to get everyone excited around Silverlight is DeepZoom - see it in action here (zoom-in and out to see the feature in action. This really provides a seamless viewing and zooming experience for large images or sparse images (more resolution in some parts of the image than others). The way this functions is to load only required data for showing a specific part of the image. The lowest resolution tiles are shown first and then higher quality tiles blend in. The DeepZoom composer tool can be used to transform regular images to multi-scale images so that these are ready for consumption.
Hopefully, this primer gets you to look at Silverlight more closely.
Late last year .Net Fx 3.5 and VS 2008 was released and part of this release was the Visual Studio Tools for Office 3.0 which enhance the Office development experience and also make it extremely trivial. One of my favorites as part of VSTO 3.0 is Outlook Form Regions which allows the developer to bring custom content into Outlook forms using Windows Forms controls within OFRs. The walk through I will tackle in this post is building an Outlook form region for outlook contact which maps the contact address on a Virtual Earth map in a hosted web browser control and it only actually takes a single line of code to enable this.
Begin by creating a new Office project in Visual Studio 2008, notice the true multi-targeting capabilities are inherent with VS 2008. For our exercise, create a Outlook 2007 add-in. Next add a new item of the type Outlook Form Region (name it something like MapIt) to the project. This will kick off a wizard to walk through for designing the OFR. The step look like the following
The last step defines the Outlook Items for which this form region is enabled and we have selected the Contact Item. Next in the designer drop a WebBrowser control into the form region and open the C# code file for the form region in VS. Locate the formRegionShowing method and add the following line of code
if (this.OutlookItem is Outlook.ContactItem)
{
webBrowser1.Url = new Uri(String.Format("http://maps.live.com?q={0}", ((Outlook.ContactItem)this.OutlookItem).BusinessAddress));
}
You are set to run the application and see the code in action - this will launch outlook, switch to contacts and open one up. Click on the MapIt link in the ribbon.
Voila!
Internet Explorer 8 Beta - Making the Web Work For You
Earlier this month at the Mix ‘08 conference in Las Vegas the Beta release of the newest version of Internet Explorer was announced. There was particular developer excitement around this release given that the core focus for Beta 1 has been developer experience. In the following write up I will look at some of the key changes coming through with this version and also encourage you to download the new beta and start experiencing it.
One of the first things to note about the new browser is the strong focus on standards based rendering which includes not only improved CSS 2.1 support (and also a look towards the future with CSS 3.0) but also provides better support for various Html namespaces. As part of this the Internet Explorer product group has contributed more than 700 test cases to the W3C CSS working group – these tests are provided to build a comprehensive testing suite for CSS and also help resolve some ambiguities in the CSS specification thus benefiting web designers and developers.
Moving on, one of my favorites is a new feature called 'Activities' which is exposed via the context menu when content is selected on the web page being browsed. The feature allows for specific action to be taken on the selected content, thus improving the user experience. The activity is represented as XML - the key elements being homepageUrl, activity and display. Activities provide an ideal way for services to integrate with the user’s browsing workflow.
Another interesting feature is the concept of subscribing to a specific part of a page on web site with the help of "WebSlices" - the content is added to the Favorites bar and the user is presented with updates and notification of changes along with the possibility of expiring the WebSlice (which can be handy for auction based content or news postings). The WebSlice Format specification is available under the Microsoft Open Specification Promise.
There are numerous other features that are part of the Beta and I would highly recommend you to take a deeper look at the core features of the Beta by starting at the landing page. Another important thing to remember is that given the standards related changes between IE7 and the IE8 Beta, some of the sites that run correctly on IE7 might not appear optimal on IE8. In the short term this can be reverted by adding the following meta tag to the rendering: <meta http-equiv="X-UA-Compatible" content="IE=7" /> Or by setting the following HTTP header: X-UA-Compatible: IE=7;. These are workarounds but a more permanent fix would be to ensure that the html being outputted by the page is standards compliant.Some very useful links are for the Developer forum and the Beta newsgroup site which is a good place to provide feedback regarding your experience with IE 8 Beta.
Earlier this week, on November 19th to be precise, the Developer Division group at Microsoft announced the RTM of the fourth major installment of .Net Framework (for anyone counting we have had .Net Fx 1.0, 2.0 and 3.0 and though 1.1 is not counted the same way it brought a lot of necessary features to the fore such as CAS). The release has gone through numerous technology previews and 2 significant betas so I am hoping a lot of you reading this are already evaluating the light up features in this release. For those who have not gotten there yet, I am hoping this write-up will excite you to take the next step and get up, close and personal with .Net Fx 3.5 and Visual Studio 2008.
One of the core concepts to understand with .Net 3.5 and its predecessor .Net 3.0 is the additive nature of features/components thus minimizing compatibility impacts and requiring lesser effort to move to the 3.5 platform compared to the move from 1.1 to 2.0. The idea here is the distinction in the bits shipping divided into red-bits and green-bits. Red-bits are the once that shipped with .Net 2.0 and these have been minimally modified to account for bug fixes and accommodate certain features but looking broadly have been left pristine, thus reducing the possibility of incompatibilities (these bits are equivalent to .Net 2.0 SP1). The green-bits represent the new features shipping in Orcas and are installed under 3.5 folder in windows system directory.
Looking at the features, the first one that catches the eye is ‘LINQ’ or Language Integrated Query. As the name suggests this new programming model integrates data access and query support within the language. The query could spawn object collections, xml , entities, or even relational data. Not only does LINQ ship with a set of standard query operators but also provides an extensibility model that can be used to build and replace custom operators as needed. As the enhancements are part of the ,Net languages (C# and VB.Net), you reap the benefits of compile-time checking, Intellisense in Visual Studio and a consistent way of querying data across different types of data sources as described earlier. A simple example of LINQ working against a relational database follows
In the Services realm, .Net 3.5 adds some very exciting features to the Windows Communication Foundation stack. The first one is an HTTP programming model via AJAX-enabled WCF services. Also, WCF features an improved RSS and ATOM syndication support with 3.5.Thirdly, moving forward WCF services will support running in partial trust. Last but not the least 3.5 provides for greater integration between Workflow Foundation and WCF which implies WF can expose WCF end-points to receive or transmit messages in a state-machine or sequential workflow. Finally, there are numerous improvements in the Visual Studio designer to improve the service development workflow – to name a few – adding a service reference support, an integrated WF designer, project templates, item templates for services and a test client is also included.
For web applications, benefits abound with the integrated support for ASP.Net AJAX. ASP.Net AJAX 1.0 which was released earlier this year in January as a standalone release on top of .Net Fx 2.0 provides a framework for building RIAs, with a great cross-browser and cross-platform story, built for developer productivity and efficiency with extensive Visual Studio integration and bringing the goodness of many of the server based ASP.Net services to the AJAX world. There is also improved support for JavaScript intellisense and debugging within the designer. Also included in this release are new data controls such as ListView, DataPager, and LinqDataSource. The ListView enables enhanced layout and template control for governing the look and feel of your data representation. The control is described in much detail in one of my blog post here. The DataPager control enables various pager visualizations, providing full extensibility support for the layout by the use of templates. The LinqDataSource control enables declarative binding of ASP.Net data bound controls to data models using LINQ to SQL.
The .Net Framework 3.5 also includes specific enhancements around building office applications and the compact framework for building Mobile applications. I will cover these enhancements in a subsequent post. Hope this got you thinking of enhancements that you could leverage in your products. If you do have any questions, please contact your GISV technical counterpart for more details.
Last week I was at the ESRI dev summit in Palm Springs and gave a couple of talks on ASP.Net AJAX and WPF. Attached are the slide decks for the same. The slides are in Office 2007 format, if someone needs them in any other formats please contact me.
Thanks, Kashif
Last week I was at the Aspect Consumer Experience conference and attended a session on SIP - here are some notes from the session providing you with all the basic things you need to know about SIP
Steps in VOIP are similar to a phone call
· Caller specifies
· Called Party receives
· Communication happens
Importance of SIP
Ø New hot standard for VOIP
Ø Almost every vendor moving to it
Ø Focus on P2P connections without controller authentication
Ø Not only for voice but also IM, audio, video, data -> this is a key differentiator
Ø Supports addressing by URI -> phone, name, email
Ø Supports presence for user and not just for the device
Ø Vendors can add proprietary extensions as part of VOIP call – device can ignore data if it is not understood
Benefits of VOIP
· Runs over the same wiring as the computer network
· Free – no toll charges for local, international, long distance
· Mobility and Instant communication
· Not just voice – multimedia enabled
· Presence enabled
· Toll bypass – connect to agents anywhere
· Security – run calls on private network, VPN, encrypted network
SIP components -> Session Border Controller (SIP Firewall), Media Gateway, Media Server, User Agent (End point), SIP proxy (routing and additional resolution). Registrar allows for UA to register with SIP proxy and enable plug and play capabilities. Redirect Server aids redirecting and is used by the proxy. The Presence server is used to determine the state of UA. SIP proxy can be of 2 types – Pass through, B2B UA (provides additional capabilities – call forwarding, conferencing)
Each Request type has an appropriate response associated, for e.g. for an invite the response might be OK or Trying or Ringing.
· SIP follows the RFC 3261 specification
· Codec – coder/decoder -> takes audio and encodes for sharing over the internet,
o most common is G711 which is equivalent to PSTN quality (64 kbps -> 64 kbps)
o G729 -> compresses (64 kbps -> 8 kbps)
o G722 -> better quality than PSTN, hi-fi voice quality
· Voice packetization – broken-down, sent and then recompiled
· Network considerations
o Start with big pipes (minimum of 100 Mb on switched LAN)
o VLAN – segregation of traffic (ensures bandwidth for audio)
o Firewall with network (may cause a delay, open application ports, could pose additional translation issues)
o Distance affects audio delay
· Bandwidth requirements
o Bandwidth calculation tools available
o Compression codec
o Silence suppression (can cause clipping)
o Header compression
· Audio quality
o Jitter buffers – keep a set of packets to allow for smooth playback, recorder packets, deal with packets coming in at faster or slower rate
o Dynamic jitter buffers – changes buffer based on how packets are received
o Echo cancellation
o Delay of less than 150 ms is considered good
o Clipping of greater than 20 ms is perceptible to humans
· Presence
o SIP is provided via SIP Instant Messaging Presence Leveraging Extensions aka SIMPLE
o Can provide rules to govern presence
o Intl chars supported
o IPV6 supported
· Authentication, Security and Encryption
o Phone/users identify themselves
o VPN for remote users
o Encryption not widely supported as will cause delay
· High availability with SIP – points of failure are as follows
o PSTN communication, SIP proxy, IP phone, IP PBX, Network connectivity, Power
· SIP trunking – remove media gateway, directly from carrier, reduce jitter, pass non-telephony data, IP multimedia sub-systems – send application info
· Cons of SIP
o As good as the network
o Emergency service is an issue
Other applications running on same network will cause lag
Here are the presentation slides and samples from today's webcast 'An In-depth Look at the ListView Control'. Please let me know if you have any comments on the control herewith. I will post the webcast recording once it is available.
Thanks,
Kashif
Yesterday, I was moving some of my samples written for ASP.Net AJAX Beta 2 over to RTM and here are some of the things I encountered that might be useful to you
- The assembly name has changed from Microsoft.Web.Extensions.* to System.Web.Extensions.* - the change aligns nomenclature to already existing assemblies in .Net frameworks. This will require to change references to the assembly in web.config
- The <httpModule> ScriptModule's namespace changed from Microsoft.Web.UI to System.Web.Handlers, another update in config. Also any other references to Microsoft.Web.* should be changed to System.Web.*
- The new validator controls have been removed and thus the tag mapping section in configg should be commented out. For scenarios involving validators in UpdatePanel these will be made to work by updating the existing ASP.Net v2.0 validators and providing a patch with these updates soon
Voila, the application should work again. There is also a handy and much more detailed whitpaper available for this on the http://ajax.asp.net site.
Thanks,
Kashif
ASP.Net AJAX v1.0 debuted this morning and is now available for download. Check this out or read more on Scott's blog.
When 'ASP.Net AJAX' (formerly codenamed Atlas) was first released for preview back in Sep 2005, one of the controls that was released as part of the preview was the 'ListView' client-side control - the control created the rendering on the fly on the client based on xml-script and the html skeletons defined on the page for the control. The data binding was also done on the client and data was fetched asynchronously using the ClientDataSource component. The server-side ListView is very different from the client-side control. The goals for creating a server-side data presentation control were multiple - mainly
- leverage existing datasource controls, support declarative binding and common data operations such as insert, edit, delete, sort, page etc.
- a fully customizable UI with the support of templates
- WYSIWYG previews and rich design-time support in Visual Studio
- can be extended to build more complex UI.
Rendering
ListView allows for fully customizable UI rendering with the use of LayoutTemplate. This also obviates the need for having certain templates such as header, footer, and pager. The EmptyDataTemplate can be used to configure the view when no data is available to the ListView.
The EmptyDataTemplate when defined takes over the control rendering when the ListView is empty. It renders by itself and not inside the LayoutTemplate.
The templates follow the following general hierarchy
LayoutTemplate [root template, container for ListView rendering]
- GroupTemplate [Optional, required for tiled layout]
- ItemTemplate
- AlternatingItemTemplate
- EditItemTemplate
- InsertItemTemplate
- ItemSeparatorTemplate
- EmptyItemTemplate
- SelectedItemTemplate
- GroupSeparatorTemplate
or
EmptyDataTemplate
The id property is added to UI elements to define where this rendering would come from – possible values for the id are – ‘GroupContainer’ or ‘ItemContainer’. This implies the element marked as a GroupContainer will be used as the container for instantiating the GroupTemplate and the element marked as itemContainer will be used as the container for instantiating the ItemTemplates.
The GroupSeparatorTemplate is displayed at the end of each GroupTemplate except the last one. The ItemSeparatorTemplate is displayed at the end of each ItemTemplate except the last one. The EmptyItemTemplate is displayed for filling up dummy columns when building a xhtml conformant layout.
Styling can be handled by applying css to the various html elements defining the various ListView template. ListView comes with certain pre-defined configurations for styling and layouts and these can be selected inside of Visual Studio via the 'Configure ListView' task from the chrome.
DataBinding and Common Data Operations
ListView provides databinding model akin to V2.0 data bound controls. Developers can leverage declarative databinding by setting the DataSourceID on the control or can employ the DataSource property programmatically. Apart from Select, Update and Delete which are available with GridView - the listView also provides for an Insert option and the InsertItemTemplate can be displayed by setting the InsertItemPosition property on the ListView.
The control also provides for Sorting and Paging capabilities though for Paging the DataPager control should be used in conjunction with the ListView.
This is a simple overview of the control. I will be writing more on specific topics in detail in the coming weeks.
Please post comments or questions regarding the control to this blog.
Thanks,
Kashif
A couple of weeks back I delivered a presentation on ASP.Net AJAX to our ISV partners. Attached are the slides and the follow up Q & A log.
Thanks,
Kashif
Check out the Mix 07 site and register at an early bird discounted price. Keynotes being delivered Ray Ozzie and Scott Guthrie...
-Kashif
Last week, the ASP.Net AJAX team took a major step towards getting web developers closer to moving their web applications based on ASP.Net AJAX into production with the release of the RC (the AJAX Futures Dec CTP has also been made available). The release also further aligned ASP.Net AJAX with previous ASP.Net releases by changing the namespace from Microsoft.Web.* to System.Web.* and also the assembly name changing from Microsoft.Web.Extensions* to System.Web.Extensions* (this also helps in aligning the 1.0 with future Framework releases).
I would encourage everyone to move to the RC and provide feedback to the team via the forums.
Thanks,
Kashif
Accessibility is an important aspect of software applications. It is ever so important on the web especially to ensure that everyone visiting your site is enabled to access the content. It is also required by a number of government organizations. The current state of UpdatePanel doesn't allow for complete screenreader accessibility with the popular screenrreaders currently available in the market. Window Eyes works correctly and is able to read updated content in a partial postback in simple cases but doesn't work well when triggers are used. Also Jaws doesn't handle re-reading content on partial updates.
To fix this issue I wrote a simple control which provides for this screen-reader accessibility. On any page that will participate in partial rendering, you can employ this control - nothing else needs to be set - just drop this control on your page participating in partial rendering and you are set for screen reader accessiblity - and it will take care of causing the screen reader to re-read content after a partial post-back. I am posting the control herewith - please let me know if you find it useful or any other comments you might have regarding this. I tested with Window Eyes and it works well.
Thanks,
Kashif
When using the UpdatePanel feature in ASP.Net AJAX to update portions of the page using async post-backs, there are many different approaches available to handle errors that happen on the server during the async post-back. Let's consider some of these choices in detail.
1. Traditional error handling - redirecting to a custom error page, that contains more details about the error. In v1.0/v1.1/v2.0 ASP.Net applications - the application developer will usually set the customErrors mode to 'ON' and define a redirect url to point to a custom error page or handle the Application_onError event, log the error and redirect to a custom error page [using Response.Redirect()]. The same approach will continue to work in ASP.Net AJAX and redirections to custom error pages will happen if one is defined.
The issue with the above approach is that the user loses the ajax kind of behavior in the app - it would be much more intuitive to keep the user on the same page and notify them that an error occured on the server without causing a redirect to a different page. The ASP.Net AJAX framework provides OM for handling the error on the server and the client. On the server the page developer can avail the following properties on the ScriptManager to customize error handling - 'AllowCustomErrorsRedirect', 'AsyncPostBackErrorMessage' and the 'AsyncPostBackError' event. On the client the page developer can handle the PageRequestManager's endRequest event which provides the following properties on the event args - errorHandled and error. By diagnosing the 'error' property and setting 'errorHandled' to true - the error can be displayed in a UI of choice on the same page and keep an integrated behavior for the user. For the error to be handled in such a manner - the AllowCustomErrorsRedirect must be set to false (default is true) if customErrors are 'On' in config. Secondly, the user can also set the 'AsyncPostBackErrorMessage' to send down a standard error message, the AsyncPostBackError event can be handled for customizing the error sent down to the client based on the actual error that happened on the server.
Thus all in all the framework provides for extensive error handling techniques in page partial rendering scenarios in ASP.Net AJAX.
I would love to hear any comments / feedback that users might have regarding the error handling support in such scenarios.
Thanks,
Kashif
