NML presents Silverlight to Sanlam
NML is considered by Microsoft as the leading provider of Silverlight skills in South Africa.
We recently gave a talk at Sanlam on Silverlight. We recorded the presentation and I got Elle to create an abridged transcript of the talk [she wasn't very happy with me].
Gareth Saul - Why
Rogan Flitton - What
Debbie Derman - How
Gareth ( http://twitter.com/garethsaul )- What is Silverlight? 1/2
In order to build rich applications deployed through the browser, you have two options: Flash and Flex or Microsoft Silverlight.
Flash is on 95% of machine today - if you are predominantly concerned about portability and accessibility then use Flash.
Silverlight is on only about 35% of machines, but Microsoft is heavily pushing to increase this adoption rate and it is now part of updates to Windows machines, but it is still a niche technology - this is important if looking to build deployable internet applications.
Gareth - What is Silverlight 2/2 - Caching, DataBinding, MVC, MVVM, LinQ, Limitations, Out Of Browser.
Why should we care about Microsoft Silverlight?
- Simple deployment (no installs; web-based accessibility)
- Rapid development (abstract web complexities; leveraging existing .NET capabilities)
- XAML in the browser
- Portability (1 API, 1 platform across all the different browsers)
- Easy coding
What do you need to get Silverlight on a machine?
- Silverlight pluggin (4mb download (Silverlight3); No reboot required)
- Silverlight .XAP file(serve from any web server)
- Your favourite browser
Where should you use Silverlight?
- Streaming video (high definition support; supports dynamic bandwidth scaling)
- Rich internet applications
- Line of business applications (Silverlight has a wide variety of components to assist with this: DataGrid; Charting; WCF; Isolated storage; Databinding; MVVM; LINQ)
Silverlight limitations
- Browser sandbox (no desktop integration; strict security model)
- Bulky XAP files (typical application = 800kb+ - Silverlight3 helps)
- Platform (No support for PowerPC Mac, Windows 98/2000/ME; Limited Linux support via Moonlight)
- Local storage (1mb - 25mb for out-of-browser) - can be used for anything you can come up with (it’s not limited to caching) e.g. a whole copy of a database can be brought across the wire and stored on a local machine - any interactions the clients make with the database are then synchronised backwards and forewards
Off-line modes are available - one of Silverlight3’s out-of-browser options key features is a network state connection feature so it knows when you are working in an online/offline mode
Rogan getting started with Silverlight (development environment)
Rogan - Silverlight Hello World and Model/View/View/Model Introduction
Rogan - Introduction to Model/View/ViewModel pattern
What do you need to set up the development environment?
- Visual Studio 2008/Visual Web Developer
- Download and install the Developer tools for Silverlight (including the SDK, Visual Studio project templates, and developer runtimes) from Microsoft website
- Download and install Expression Blend = an interactive user interface designing tool for designing XAML interfaces (XAML = Extensible Application Markup Language)
- Download and install Silverlight toolkit = collection of extended Silverlight controls, components and utilities - examples included are: TreeView, AutoCompleteBox, Charting, etc (not a minimum requirement, but highly recommended). Important to note is that this is not a 3rd party toolkit, but it is rather fully supported by Microsoft - as they continuously develop the Silverlight framework they are building a more complex and wider set of user controls in order to support it.
- Open Visual Studio - select “New Project” - Visual Studio now allows you to select “Silverlight application”.
- Select/Create a folder in which you wish to work - now you have a XAP file, which goes into the ClientBin folder.
- It then asks where you would like to host this application and then in the right hand bar, you will see that is has created a new website along with a default page, a Silverlight application, and a couple of XAML files and some code behinds.
- The code behind the application is straight C# code.
- For bigger projects it is recommended that you use a model view, view model framework, so your code is a bit neater and easier to work with - split solution into views, view models, interfaces and implementations
Debbie (http://twitter.com/debbiederman)
Building a Silverlight UI with Blend (1/3)
Building a Silverlight UI with Blend (2/3)
Building a Silverlight UI with Blend (3/3)
Development and Design
With Blend3 and Silverlight, it is possible for the developers and designers to work simultaneously and seamlessly, as the UI and data models are completely separate elements, which can be fused together through DataBinding at any point.
In order for the designers to create the design, especially for controls, they need to have something to bind to but if the models are not yet ready, then there is nothing for them to load into the data control so there is a concept of Design Time Data.
Design Time Data
|
PROS |
CONS |
| Designers don’t need a whole development environment/setup | Incorrect binding names - runtime bugs (be very specific with your binding names) |
| Timing - development doesn’t need to have started before the designers begin | Designers may get carried away and create their own data models, which will not match up with the developer models - probably best for the developer to help the designer create some dummy data to start with |
| Conditional compilation - during production, it knows not to use the design time data | |
| Great for quick demos |
Default Basic Project Structure
App.xaml - very key element because stores application wide resources
Main.xaml
ClientBin folder to host .xap file
Default.html - contains Silverlight object (can add initParameters to pass parameters to Silverlight object)
Blend
Each style has a target type property/attribute so you can’t apply a style made for a text box to anything other than a textbox
Silverlight Resources on the Web
http://www.codeplex.com/Silverlight
http://blogs.silverlight.net/blogs/msnow/
SmartGuide Tourism Information Portal
The Tourist Problem
See it at www.africantourismportal.com
Tourism is, by its very nature, the act of deliberately taking oneself to somewhere foreign and experiencing the new, the different and the unknown. That said, most tourists are not interested in stumbling blindly – they want to impose some sort of structure on their journey before they begin. At the least, they book hotels and accommodation. Many choose a few particular locations they want to visit. Some even organise complete itineraries, planning their trips down to the hour.
For all of these people, there is a common problem: what is there to do where I’m going? Frequently, the primary source of information is a tour book or travel guide – a glossy summary of the most popular attractions. This information is flat, static, and offers little context. An improvement is to use a tour operator – an agency who can help to guide you to local attractions and areas of interest, and customise suggestions to your interests and accommodation choices.
Wouldn’t it be even better, then, if you could explore the area yourself? Whilst map-based products that show hotels or tourist locations have existed for a while, they have until now focused too much on either selling accommodation or on highlighting the tourist attractions.
Our Solution
This is where SmartGuide and New Media Labs have collaborated to bring these two worlds together – building a rich, interactive map that shows visitors where they can stay, and pairs it with a wealth of information about the area they are visiting. As an interactive map product, tourists gain immediate understanding of the spatial relationships between locations. They can explore at their leisure, consuming images, descriptions, audio and video about points.
The product we have built acts as a hub for a multitude of players in the tourism space. Information, locations and content feed into it from local tourism agencies and location promoters. Tourism and accommodation operators feed their own unique images/video/points into it, improving the quality of the content and highlighting features they consider the most valuable. Tourists use the map to explore, learn and decide where they wish to visit. They locate accommodation, restaurants and activities in advance, and feed their choices and preferences back to their tour guides or their queries directly to responsible parties.
TIP playing a promotional video
One of the dominant problems in providing a system like this is in developing and maintaining a high quality repository of information. This is a task that is poorly suited to tour operators themselves, and individual local tourism bureaus cannot provide either the necessary funding or a wide enough body of information. Here, a dedicated provider like SmartGuide has the necessary contacts and experience to compile a body of knowledge that can support both the regional agencies and the tour operators.
When dealing with as much content as this, it becomes necessary to manage the volume of information being presented at any one time. Especially when people are viewing a map, overloading them with points can rapidly becoming intimidating. SmartGuide and New Media Labs tackled this from a number of directions. We manage the display of points, making them visible and hiding them at appropriate zoom levels. This allows us to begin by presenting high-level information and a minimal selection of locations when the zoom is pulled far out, and still have detailed, local content if a visitor chooses to zoom into an area. We further extended this by allowing visitors to bring categorised content up earlier. This helps people locate their particular interests quickly - beaches, golf courses, family attractions, restaurants - all of these can be highlighted and explored at will. Lastly, all points on the map have a context-specific icon, which makes it easy to distinguish the general nature of a location at a glance, and without having to click or interact with it.
Exploring Beaches and Golf Courses
This information is fed to tourists through a fully interactive Adobe Flash application, which leverages the exceptional quality of Google Maps for Flash to provide a geospatial display of tourist attractions. The user interface is built to support simple reskinning by operators, allowing them to imbed the application into their own pages with a fully matching “look and feel”.
TIP reskinned for Southern Destinations
Uploading a path from a KML file
Obviously, managing all of this content requires tools that are up to the job. Here, New Media Labs built a complete content management solution that allows SmartGuide and their licensed Operators to update and maintain the ever increasing number of locations. The content manager is designed to make the job of sorting and filtering through the tens of thousands of locations easy. It fully supports filtering and sorting, and allows the user to customise the information on display. This allows SmartGuide and their Operators to “build their own interface” for the job at hand. The content manager uses a combination of direct field editing and custom content-specific editors to always present the most useful interface for the moment. The content manager allows them to not only monitor points, but also to customise the display of recommendations, guides, routes and layers.
It supports importing content from KML documents and route files, and adding additional regional/location information to points through a reverse geocoding service. It even allows SmartGuide to generate customised HTML pages for their clients on-the-fly, allowing them to run their business without needing to call on New Media Labs for technical support.
Checking up on Sky Diving
The content manager isn’t limited to in-office use, either. It is fully supported across the internet - and this often leads to SmartGuide consultants taking their laptops with them on the road, and updating content directly from the local offices of tourism agencies.
Underlying Technology
New Media Labs has a firm belief in using “the right tool for the job”. As such, a variety of systems were used together to build the tourism portal.
The front-end application was developed using Adobe Flex technology. Here, our challenge was to deliver a richly interactive application that would behave consistently across the multitude of browsers currently available. It would need to provide a user experience that set it apart from the majority of Google Maps-based products currently available. It would need to consume back-end service feeds and orchestrate them to produce a compelling, responsive interactive map. Lastly, it would need to be customisable and skinnable enough that operators looking to integrate it fully into their websites had the flexibility to do so.
Our decision to use Adobe Flex was informed by all of these aspects. With Flash penetration at over 95%, we felt comfortable that it had the portability we needed. ActionScript CSS gave us a good tool to separate the presentation logic from the underlying behaviour, and native support of web services ensured that we could access our back-end content seamlessly.
Even better – it took us only 4 weeks to build the front-end application! Our initial prototyping efforts using Microsoft Silverlight meant that we could focus on ensuring the user experience was top notch, instead of simultaneously developing the application logic in conjunction with the user interface.
Developing TIP in Flex Builder
The back end servers run web services hosted inside of IIS 7, running on Windows Server 2008 with SQL Server 2008 databases. Whilst we investigated building the services with some of the more popular open-source technologies (PHP, Ruby on Rails), we knew that the long-term strategy for the system would require extensive back-end integration with the systems of existing content providers. Here, we felt that services built using .NET would give us the best combination of performance, flexibility and rapid development on this project. Especially, we viewed the introduction of the geographic data types within SQL Server 2008 as being important for the ongoing maintenance and development of the system.
The Content Manager was implemented using Microsoft Silverlight (SL3). Here, we wanted a powerful and responsive interface that would allow the user to perform complex data manipulation quickly. Microsoft Silverlight was a natural choice – the multitude of user controls provided helped to massively reduce the amount of work necessary to build a content manager. By allowing the client to work with the data directly in their browser we allowed them to be much more productive than they could have been with a traditional page based CMS system.
Browsing and updating point information
Obviously, the CMS needed a way to update the primary data store – we evaluated using a traditional web-service based approach, but we wanted something that gave us a good mix between easy extensibility and strong validation and typing. In the end, we built a generic dynamic update system that relies heavily on shared WCF contracts and reflection. It allows us to provide continual, as-you-edit updates and synchronisation between the CMS user interface and the backing data store.
Life at Aurecon
Since April ‘09, Christian and I have been based full time at Aurecon. It is about time for the long overdue update. Here it is!
In a nutshell, the past few months can be summed up as 2 kick ass applications down and more to come!
Aurecon saw the need to develop a whole suite of new Incident Management Software for existing clients in areas such as Emergency Services, Disaster Management and Policing. Once they decided that immersive, graphical user interfaces were a must and Silverlight was to be at the forefront of delivering such an experience to their clients, it was only a matter of time before New Media Labs’ and Aurecon’s paths would cross.
You’re probably wondering what Incident Management has to do with New Media, well for example, imagine the possibilities of an Incident Management system leveraging off of something as simple as geoRSS. Suddenly your system can subscribe to hundreds of different feed streams giving an Emergency Services Operation Center a wealth of valuable, visual information on a Map type interface. This opens up the possibilities of police officers, firemen, paramedics or even members of the public to be able to publish incident related information from their mobile phones and ultimately a whole range of operating centers can then subscribe to this real time information aiding them to overcome even the most disastrous of emergencies. This is where Incident Management and Social Media meet and ultimately, it is where New Media Labs can build a long term partnership with an awesome company, and use our knowledge and expertise in web technologies to help build awesome software.
Start Lite is the first system we helped develop. Without going into too much detail now, and rather saving more techno talk for the official showcase still to come, a high level definition for Start Lite is a lite, easy to use system that can quickly and effectively capture and initiate the start of an incident. It allows the user to pin point an incident on a fully interactive GIS enabled Map, specify the various details about the incident and manage any people or units that have been dispatched to the incident. Designed, developed and rolled out at a CCTV control centre in Cape Town, Start Lite is primarily (as the name says) a “lite” version of Aurecon’s next planned product called Start, which will cater more fully for other industries and clients in the Incident Management and Emergency Services fields.
Next we developed Back Office. Often police officers will be out on patrol and come across incidents that weren’t necessarily initiated by dispatch or a control centre, and therefore there is no digital record of such an occurrence and the resolution of it. Back Office caters for this. It allows the user to capture such incidents once they have finished their patrol and can get back to the station.
Both Systems are web based and were built with Silverlight 2 on top of WCF web services and a SQL 2008 Database. Not only are the systems easily deployed to multiple users, they run in a web browser and also look great! Some of the components we used on both projects were:
- Draggable collapsible panels/containers. We utilized the open source Codeplex Blacklight Control suite and customized some of their controls to suit our needs better. http://www.codeplex.com/blacklight
- ESRI Silverlight Map Control, GEO Spatial capabilities of SQL Server and the ESRI Server web services. http://www.esri.com/silverlight
- Repositoy Factory. http://www.codeplex.com/RepositoryFactory
- Web Service Software Factory Modeling Edition. http://www.codeplex.com/servicefactory
Kobus Meyer and the rest of the guys at Aurecon have been extremely kind and accommodating in taking us in and making us feel like members of their team. Chris and I both have enjoyed every minute working with them and have also enjoyed enduring the everyday challenges faced when developing cutting edge Incident Management software. I look forward to the future of this ever growing partnership between Aurecon and New Media Labs.
Check out this awesome video by ESRI on leveraging ArcGIS, geoRSS to create situational awareness.
Connect with NML
