Archive for the 'XAML' Category
Silverlight and Model View Presenter (is it a realistic option?)
I am currently working on ‘Case In Point‘, a Silverlight application which is available online and if you want to know more about it and why I chose to build it, please check out this previous post. In more recent times I have moved beyond the layout / UI Design stage (the main point in building this app) and have just now moved into preparing the ground for structuring my approach to the Business Logic and Data Access and how I was going to affect loosely coupled layers.
My first instinct was to tackle the task by using the recently devised Model-View View-Model pattern however I chose not to go down that path because this applications primary objective was to provide a learning exercise in UI skills and ultimately I thought that implementing the Model View Presenter pattern in a Silverlight application would provide me a solid foundation to compare when I do finally try out MVVM.
Over the past couple of years I have become accustomed to using a home grown MVP Framework that was fully templated in Visual Studio and offered a lot of benefit in speed of use by cutting out a lot of the repetitive file creational stuff that such an approach requires. Using this templated framework meant that creating a ‘new item’ in Visual Studio would trigger the creation of the Model, View (user control, page, form etc) and Presenter, wiring their dependencies (via injection) together in the process. One of the benefits of this homegrown MVP framework was it’s ability to deal with what effectively handled two way Databinding between the views and the model, something that we now get from Silverlight for free, which gave me a chance to really see how MVP would benefit or from this aspect.
So far my standard MVP approach for Win Forms and Web Forms seems to sit equally as well with Silverlight so I am pleased that I can move forward quickly with completing this learning exercise, which as I have pointed out was completely about getting comfortable with Silverlight in respect to gaining familiarity with the new UI paradigm.
Setting up the Model View Presenter.
public partial class CaseInPoint : UserControl { //The main UI View (control) that loads all the tabs views) public CaseInPoint() { InitializeComponent(); //new up the model for the tabbed application PointInCaseProject model = new PointInCaseProject(); //new up all the presenters CaseInPointPresenter mainPagePresenter = new CaseInPointPresenter(this, model); ProjectDetailPresenter projDetailsPresenter = new ProjectDetailPresenter(this.AppTabs.ctlProjectCalculator, model); FactorsPresenter factorPresenter = new FactorsPresenter(this.AppTabs.ctlFactorList, model); UserStoryPresenter storyPresenter = new UserStoryPresenter(this.AppTabs.ctlUserStoryView, model); ActorsPresenter actorsPresenter = new ActorsPresenter(this.AppTabs.ctlActorsView, model); } }
The Presenter.
internal class ProjectDetailPresenter : IPresenter { private ProjectDetailCalculator _view; private PointInCaseProject _model; private CaseInPoint _viewParentWindow; internal ProjectDetailCalculator View { get { return _view; } set { _view = value; } } internal PointInCaseProject Model { get { return _model; } set { _model = value; } } internal ProjectDetailPresenter(ProjectDetailCalculator view, PointInCaseProject model) { //set the view and model _view = view; _model = model; //wire up the events of the view and its parent window WireUpEventsOnInit(); //do any initial data binding InitialBindUiToEntity(); } }
And finally the Model
[XmlRoot()] internal class PointInCaseProject : INotifyPropertyChanged { private ProjectDetails _details; private List<EnvironmentalFactor> _environmentalFactors; private List<TechnicalFactor> _technicalFactors; private List<UserStory> _userStories; private List<Actor> _actors; /// <summary> /// The list of User Stories contained /// within the point case estimate project. /// </summary> [XmlElement()] internal List<UserStory> UserStories { get { return _userStories; } set { NotifyPropertyChanged(“UserStories”); _userStories = value; } } /// <summary> /// The list of Technical Factors /// within the point case estimate project. /// </summary> [XmlElement()] internal List<TechnicalFactor> TechnicalFactors { get { return _technicalFactors; } set { NotifyPropertyChanged(“TechnicalFactors”); _technicalFactors = value; } } /// <summary> /// The list of Environmental Factors /// within the point case estimate project. /// </summary> [XmlElement()] internal List<EnvironmentalFactor> EnvironmentalFactors { get { return _environmentalFactors; } set { NotifyPropertyChanged(“EnvironmentalFactors”); _environmentalFactors = value; } } /// <summary> /// The list of Actors within the /// point case estimate project. /// </summary> [XmlAnyElement()] internal List<Actor> Actors { get { return _actors; } set { NotifyPropertyChanged(“Actors”); _actors = value; } } /// <summary> /// The details of the /// point case estimate project. /// </summary> [XmlElement()] internal ProjectDetails Details { get { return _details; } set { _details = value; NotifyPropertyChanged(“Details”); } } public void NotifyPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } public event PropertyChangedEventHandler PropertyChanged; public void Clear() { if (this._details != null) { this._details.Clear(); } if (this._actors != null) { this._actors.Clear(); } if (this._environmentalFactors != null) { this._environmentalFactors.Clear(); } if (this._technicalFactors != null) { this._technicalFactors.Clear(); } if (this._userStories != null) { this._userStories.Clear(); } } }
NOTE: This is not the entire code base and some things above have been left out or assumed, things such as the entities that are contained in generic<> lists in the model and all the subscribing handlers for view events that would be present in the presenters. At the end of the exercise I will follow up by implementing a small application using MVVM framework, putting me in a better position to discuss the differences and merits of both approaches. I have read some opinion that suggests that the Databinding abilities present in Silverlight and WPF are not equally as available to pre-exiting UI development frameworks such as MVC and MVP so I consider this is step one in putting that assertion to the test for my own sanity.
Of course a happy by-product of this exercise is getting a tool to manage my point case estimations for real world projects and in so doing I will be able to remove the dependence on the spreadsheet that currently manages this task for me. As it stands today, the project details tab has it’s data being persisted and I have decided to take a document centric approach to the persistence. Each project will save it’s estimation data in XML format locally in Isolated Storage and each file is saved as a .pce (point case estimate) file. I will post the Visual Studio solution when the project is complete.
Are Designers or even Devigner’s a requirement for XAML UI’s?
Based on some of my experimental / learning project work with Silverlight and what I have seen on line I think that there is enough in the XAML UI frameworks to offer the plain old graphically challenged business developer. Sure the designer / devigner might add huge value but I don’t see a lot of organisations simply taking that role on board because there is a new UI framework in town; no matter how powerful. Certainly my own effort to date I find a little drab but I don’t think my past Winform or ASP.Net applications were not graphical feats of brilliance either, yet I like so many others have produced many business applications that have served their user bases faithfully nonetheless. My first Silverlight application (currently underway) was indeed designed for this reason, to get as comfortable as possible with laying out a typical data driven LOB application window.
I do think that as more and more third party tools (controls) become available I will not be required to work so particularly on my graphical XAML skills and be left to concentrate on the job at hand and surely that’s what we want business developers doing.
So in essence I do think that projects where a high requirement for visual elegance or graphical complexity will benefit greatly from the inclusion of the designer / devigner role, however many projects that need classical data driven forms should be adequately handled by the simple developer who like me is stick figure bound!
Why I want Silverlight to succeed in a huge way - [A new year wish].
Ok I’m just going to come out and say it - I don’t want to know two UI frameworks equally as well or perhaps I should say one ‘less well’ than the other. It’s a fact of life that a great deal of we .NET developers (the majority I would think) work for an SME and also that the great majority of work we do is not public facing web sites. These SME’s form a significant portion of Microsoft’s Market and the main two UI frameworks used by this customer segment, have up until recent times been developing their application using Windows Forms or ASP.Net. More recently, Microsoft have invested heavily in UI frameworks grounded in the XAML which offers perhaps the first real opportunity we have seen for a unification of a single set of skills to be employed both across the web and desktop. Historically of course we have witnessed the relative failure of the Java Applet and the ActiveX control but we shouldn’t let those failures deter us from exploring success with WPF and Silverlight.
I have to say that as a Rich Client kind of guy, I have always been at odds with ASP.Net to a degree. Web Forms was a revelation of sorts when it was introduced and it continues to be a very useful and highly productive framework for web development in the SME IT environments. In pursuit of improving the quality of software the web toolkit exists in a vast nebula of expanding stars which surround ASP.Net Web Forms. Today as Web Developers it’s becoming incumbent on us to have strong skills in CSS, JavaScript, Ajax, JSON, JQuery, DHTML, MVC and the list goes on and on and on and on and…….and this is complicated by the lack of consolidation caused by browser discontinuity - don’t get me started on that. The huge mesh of variation in skill requirement with these technologies is something that never really played well with me and one that I have resisted by and large. I do still from time to time get to develop in ASP.Net, however I still resist these outlying technologies and one might argue that within the context of my business domain that’s perfectly valid (if not required) as a choice.
What I want to be able to do is focus squarely on XAML based UI skills and 
leverage this with equal impact on the desktop or the web (or to be precise over HTTP and in the browser) and not feel boxed into my limited abilities with the standard web box of tricks that I named above. Now it’s true that I don’t do a great deal of work on the public facing web however that is not synonymous with my never having to need to build highly scalable applications that exist behind the firewall and even support large user bases outside of that same firewall. If I can affect a streamlining of my team by leveraging XAML via WPF and Silverlight and work richly on the web and desktop and avoid the toolkit soup that comes with browser development, then I will be a happy man - a very happy man.
Certainly these days there is diminishing resistance to the idea of Silverlight becoming more prevalent as an alternative to the prevailing approaches and some of the noise in the blogsphere and opinion in the podcast domain is warming to idea. I would just love to get to the point where my UI technology choice can be more consistent and at best be uniform.
Silverlight Baby Silverlight [Part 2.0]
Recently I posted about my early Silverlight exploits (destined for the freeware domain) and in case it wasn’t clear where to find the application in question, please look here, or if you want to use the shortened shrinkster URL:
The Point In Case application currently doesn’t incorporate any business functionality and is purely a UI shell of the layout for the application. Some of the motivations for building the application are to learn Silverlight, provide a useful free tool to the community and offer with my observations on my blog whilst making the journey. You can read further about Case Point estimation techniques here.
ASP.Net only for line of business? [Silverlight baby, Silverlight - Part 1]
Is it really about a set of choices that we all face as developers along the way and trying to make sense of the choices today is getting harder by the minute. The title of this blog itself is in reverence to this very issue. What issue? What kind of developer am I? First of all I hope I am a good Developer (try and define that one). Am I a jack of all trades, Web junky, Smart Client or Middleware / Messaging guy?
Now if your like me and technology just interests you because (like Everest) it’s there, then being confronted with this question can present many difficulties in finding an answer. Many developers feel overwhelmed in choosing which ‘hot’ new technology stack to learn as a future investment for their careers prospects. If your slant is more on the alt.net side of things, then more of your time is probably going into concerns around patterns, practices and architecture (a good thing), therefore choosing technology tends to become only a facet of the decision making process along the way, although this is in my view at the extreme end of the alt.net axis of decision making. It’s more than possible to be a good software development citizen and keep well abreast of the technology curve at at the same time.
Some people find this whole topic anathema, therefore to the nay sayer’s let me say this: most Developers (not of the polyglot variety) have to choose .NET, Java or perhaps Ruby etc and that is a choice in itself and even that choice has commercial implications to the developer who makes it. For example, when I was 3 years into my career I was a VB 5 & 6 developer surrounded by Cold Fusion guys and it was clear to me that market demand for either of those technologies was dwindling and not part of the future landscape being painted by Microsoft or Sun. Java was already gaining a great deal of traction in the Enterprise where J2EE was beginning to make inroads; .NET was the new kid on the block but was always going to have the behemoth’s full support The question I was faced with at the time seemed simple on the face of it - which boat do I jump on .NET or JAVA? At the end of the day the choice I made was .NET and was based on the following:
- .NET was still in BETA and I would be at the forefront in the experience stakes where early adopters and are associated positively with being on board for a great length of time and hence have lots of experience (mercenary perhaps but practical nonetheless).
- Could I bank on Microsoft being successful with adoption of its new development platform? This seemed like a no-brainer and certainly held true.
- I would always be competing with developers of three or so years more experience in the JAVA space (again a no brainer).
- Their didn’t seem to be enough pro’s in choosing the Java platform alone to sway me from not considering this a major point.
let’s face it, we developers do not make decisions like this about our
careers lightly and nor should we. I’m sure there are some people that will view all this as terribly pragmatic and even a little mercenary - sorry but no one should live in a vacuum or with their heads in the sand.
Billy Hollis recently remarked on DNR that web (specifically ASP.NET) developers had lived in the comfort of being aligned to the hot ‘in demand’ technology over the past few years and he also contends that those guys will have to catch up to the rich UI guys in the not too distant future. I think Billy imagines that the desktop UI developers are likely to feel more at home with WPF and Silverlight and will therefore pick it up more readily to develop the early wave of applications and perhaps in so doing become the new boys riding the hot tech wave so to speak. To date this is speculation at best but there may be some merit in the supposition although given the architecture of Silverlight itself I imagine that we will see a lot of people integrating Silverlight into their existing ASP.Net assets to begin with and it will probably take a bit more time before we see the canonical Outlook styled applications running in Silverlight and in the public domain. The reason I think this will take a bit of time is not not because people will misjudge or misinterpret the usefulness of Silverlight in Corporate Data applications but rather it will take some time for the knowledge base to foster and grow. There are already some very good examples of what’s possible however.
For me? Well I have been only somewhat aligned to ASP.Net; don’t get me wrong I have developed my share of corporate intranet applications (behind the firewall stuff) and a small amount of public facing stuff, but the desktop is where I invested a lot of my time and thus where a great deal of my client side programming skill exists. Based on all of this you might guess that my UI investment of the future will be on XAML, which greatly expands my options in working with the browser with Silverlight. Some early adopters have talked up Silverlight as a nice thing to add to your ASP.Net toolkit and seemed intent on stressing that it’s not a replacement choice consideration when it comes to Line of Business applications. Billy doesn’t seem to agree and I for one hope he’s vision is more realistic, I really don’t see why some people are talking down the prospect of building Silverlight browser based business applications that once would have lived on the desktop. Perhaps the time is really upon us, when we can begin to build really rich STATEFUL applications in the browser and take more advantage of distributed processing (give that IIS box a rest).
I need a project to help grow my skills.
I was going to use Use Case Estimation (a subject I have blogged about in the past) as side project to allow my WFP and XAML skills really start to develop and take root, however it has become clear to me that choosing Silverlight as the UI technology for this application will allow me to make it available as a hosted solution and learning a subset of WPF certainly should represent a shallower learning curve (somewhat anyway). So what I propose is that I will provide status updates on this project along the way and we shall start with update # 1.0 here.
Status Update # 1.0
My focus at this stage of the learning exercise is squarely around getting super comfortable with layout in XAML and in particular Silverlight. The goal is to be as comfortable with laying out XAML applications as I have been in the past with Windows Forms and HTML. There are currently plenty of options with choosing layout features and they include: Grid, StackPanel, Canvas, ScrollViewer and the Border.
Point Case Estimation spreadsheets are available on the Internet and the expression of the activity itself is well suited to a spreadsheet. With this in mind the first iteration of trying to define what the most expressive UI would look like began with a Silverlight Grid rendering something not too dissimilar to a spreadsheet.
This all seemed a little bit too clunky, drab and not really in the spirit of the expressive styling that Silverlight was designed to provide. I began to play with the idea of a single page application with some Tab Pages rather than attempting any page navigation per se. My colleague Mark helped in providing some clarity in how I was going to make the awkward grid representation of the estimation factors work in the UI, he suggested a custom ListBox where each element is a combination of all four fields in each row of the spreadsheet. In the beginning I tried out a combination of two static regions that somewhat resembled web parts and the Tab Pages for the rest of the application windows.
Current UI
The XAML for this UI layout is as follows and utilises the Grid control along with some custom controls in the upper static area of the interface. The custom user controls are designed with their content nested in Border controls and Grids. Using * sizing, the Grids are well suited to laying out table like structures that grow and shrink in the browser window with the kind of fluency that users have grown accustomed to.
<UserControl xmlns:basics=”clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:views=”clr-namespace:Org.Techavalanche.PointCaseEstimator.Views” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d” x:Class=”Org.Techavalanche.PointCaseEstimator.CaseInPoint” d:DesignWidth=”640″ d:DesignHeight=”480″ HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Width=”Auto” Height=”Auto” > <Grid x:Name=”LayoutRoot” ShowGridLines=”False” Width=”Auto” Height=”Auto” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Margin=”2,2,2,2″> <Grid.RowDefinitions> <RowDefinition Height=”300*” /> <RowDefinition Height=”300*” /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=”250*” /> <ColumnDefinition Width=”300*” /> </Grid.ColumnDefinitions> <views:ProjectDetailsView Grid.Row=”0″ Grid.Column=”0″ Width=”Auto” Height=”Auto” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Margin=”2,2,1,2″ /> <views:CalculatorView Grid.Row=”0″ Grid.Column=”1″ Width=”Auto” Height=”Auto” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Margin=”1,2,2,2″/> <basics:TabControl x:Name=”tabControl1″ Grid.Row=”1″ Grid.ColumnSpan=”2″> <basics:TabItem HorizontalAlignment=”Left” VerticalAlignment=”Top” Header=”Environmental and Technical Factors”> <views:FactorList HorizontalAlignment=”Left” Width=”Auto” /> </basics:TabItem> <basics:TabItem HorizontalAlignment=”Left” VerticalAlignment=”Top” Header=”User Stories”> </basics:TabItem> <basics:TabItem HorizontalAlignment=”Left” VerticalAlignment=”Top” Header=”Actors”> </basics:TabItem> <basics:TabItem HorizontalAlignment=”Left” VerticalAlignment=”Top” Header=”Resource Planning”> </basics:TabItem> </basics:TabControl> </Grid> </UserControl>
Update # 2.0 [17th November 2008]
The User interface is adapting gradually whenever I have the time after hours, however I am really quite happy with it’s progression. The technical and environmental factor ListBox’s on the second tab in the lower portion of the UI have taken more shape and now incorporate a modal dialog for master-detail styled editing (using Data Binding). The modal dialog is created by using using opacity and visibility settings of the two user controls in question (the Main UI user control and the dialog). This was achieved by creating a dialog window (user control) that would stretch across the entire browser window and set its border’s opacity to allow the main UI window to remain somewhat visible underneath. The details of the selected ListBox items would be displayed in contained user control which would be centred in the foreground widow. Scott Gu demonstrated this technique in his Silverlight Digg application series of posts. Here’s the XAML for this example.
<UserControl xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d” xmlns:views=”clr-namespace:Org.Techavalanche.PointCaseEstimator.Views” x:Class=”Org.Techavalanche.PointCaseEstimator.Views.FactorEditorWindow” d:DesignWidth=”640″ d:DesignHeight=”480″> <Grid HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”> <!– The opaque stretched border –> <Border HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Opacity=”0.34″ Background=”#FF8A8A8A” CornerRadius=”7,7,7,7″ /> <Border CornerRadius=”20″ Background=”#FF5C7590″ Width=”460″ Height=”300″ BorderThickness=”2,2,2,2″ BorderBrush=”#FF556678″> <Image Name=”btnClose” Width=”30″ Height=”30″ VerticalAlignment=”Bottom” HorizontalAlignment=”Right” Margin=”20,8,23,4″ Source=”../Images/Symbol-Delete_not_active.png” Stretch=”UniformToFill”> </Image> </Border> <!– This is the Detail Control –> <views:FactorEditRow Name=”EditRow” Width=”460″ Height=”300″/> </Grid> </UserControl>
The second Tab started to take a bit shape and recently I a toolbar was added along the bottom of the window for quick access to the tab indexes changing. Here are some images of a very recent (17th November) yet earlier iteration of the UI with and without the modal dialog.
Apparently some developers still show a preference to working in design mode in VS.Net, I prefer to layout and prepare my UI in Expression Blend and have to say that I am becoming more comfortable with the tool each day and feel confident it will become as much second nature to me as using VS.Net itself. I know some people have stated that they really don’t like Blend and find it too cumbersome to use, my main wish at this point is for the inclusion of intellisense which would speed things up somewhat, other than that I find myself becoming quit familiar with this new design tool. I will know that I have become a reasonable user of Blend when I can knock out a UI layout with the same level of comfort that I had when using the Windows or Web forms designers.
At this stage of Silverlight learning curve, I am pretty happy with the UI however I would like to inject more of a corporate feel into it and I would certainly welcome some more out of the box layout friendly controls (WPF supports docking for example) and the recent release of the Silverlight toolkit will certainly be a useful addition. We should anticipate in time as more new controls become available and third parties like Telerik and Infragistics start come to market then the options will start to expand quickly. One nice Corporate looking UI I spotted recently via Martin Grayson’s blog was the Patient Journey Demonstrator and the Blacklight project which contains a Drag Drop Panel which I plan to check out immediately.
I have made this Use Case Point estimator project available online so those who wish to follow it’s evolution may do so when I post an update here on my blog. Currently the application exhibits zero usable functionality and exists entirely as an exercise in page layout, it will however over time become adorned with the business logic and data access code to make it a functioning piece of software.
Update 24th November
The latest UI has changed again and now all user controls are encapsulated in a Tab Control. The project url can be found here.
