Developing Windows and Web Applications using Visual Studio.NET Drew Robson Tip Unused methods, after removing UI controls Session 2: Last week? C# 3.0, C# 4.0 http://www.extensionmethod.net/ LINQ Databining with LINQ Agenda User Experience (UX) Tips and Techniques, Best practices Windows Forms Capabilities and Demo’s Tools to better UX & code UX Resources Poor User Experience Good User Experience Business applications Every business app does Data entry Every business app does Finding data Every business app does Displaying data Every business app Data entry Finding data Validation Filtering data Rich data queries Displaying data Different Views Reports (nice printing) Authorization? Over Complicated Design Lack of Design Too Many Options User Experience User Experience 3 pillars UX - Look UX - Usability UX - Feel Make a site feel alive React fast Interact with user “Joy of use” How can we improve UX Who designs the UI? Who designs the UI? Developers UI to test their software as they build UI increases in complexity Application grows but the UI isn’t consistent Know how the controls work (or they should!!) Designers Design the UI but not realize WHAT is possible Understand a Visual Consistency but not how its built Who uses the UI? User “User driven“ Testing is done with the user Prototyping Usability testing Let the user solve a task and see (measure) what he does Why choose Windows Forms? Why Windows Forms? Bandwidth – Presentation layer Cache / persistent state Faster Server Because of less requests and less work… thanks to processing power being used on client Richer interface No buggy DHTML/JavaScript More responsive Faster to develop No cross-browser issues Build complex controls quickly Why NOT Windows Forms? Not allowed in some Standard Operating Environments Cross-platform requirements (Linux, PC, Mac) Deployment of the Application is harder / Centralised logic Requires an always-connected data service Who Do I Please? Network Admins Developers End Users Accountants Browser Based Solution Rich Client Solution Do you design a mockup UI first? Who uses prototypes? Sketchflow Balsamiq Designing a Mockup UI Avoid the thought of a “throw away” prototype. Use as the first step to start a project (or get a project) - WYSIWYG Get great initial feedback Better than 100 page document Get a designer involved if need be (Developers can’t design) Tip: Always add the client logo + colours. They are easily impressed! Designing a Mockup UI Would you design the Database first or the UI? The database schema should be designed before the UI is started If you are doing fixed price work, signed-off mockups serve as a great way to stop goal posts moving. Any changes to the mockups thereafter will result in additional work. Windows Forms – Best practices Winform Architecture Visual Inheritance Composition and Containment (Panels, Usercontrols) Databinding ToolTips Error Provider and Validators Appsettings Visual Inheritance The constructor of each form/control class contains a call of a private method "InitializeComponent()". If B is derived from A, then the constructor of A is called first 1. A() 2. A.InitializedComponent() 3. B() 4. B.InitialzeComponent() Visual Inheritance Controls on the Base Form are BY DEFAULT “private” and cannot be edited in the inherited form Solution: Change the modifer to “Protected” Inherited Forms – For Every Form Common Behaviour Company Icon Remembering its size and location Adding itself to a global forms collection (to find forms that are already open, or to close all open forms) ** Application.OpenForms Logging usage frequency and performance of forms (load time) No Controls! StartPosition 1. CenterParent only for modal dialogs (to prevent multi-monitor confusion) 2. CenterScreen only for the main form (MainForm), or a splash screen 3. WindowsDefaultLocation for everything else (99% of forms) prevents windows from appearing on top of one another FormBorderStyle FixedDialog only for modal dialog boxes FixedSingle only for the main form: MainForm (FixedSingle has an icon whereas FixedDialog doesn't) None for splash screen Sizable for any form that has multi-line textbox, grid, listbox or such Base Data Entry Form 1 2 Do you encapsulate (aka lock) the values of forms? Hiding Values Hiding Values Developers fiddle! Browsable: whether a property or event should be displayed in a Properties window. http://msdn.microsoft.com/en-us/library/system.componentmodel.browsableattribute.aspx EditorBrowsable: whether a property or method is viewable in an editor. http://msdn.microsoft.com/en-us/library/system.componentmodel.editorbrowsableattribute.aspx Hiding Values using System.ComponentModel; Imports System.ComponentModel [Browsable(false), EditorBrowsable(false)] public new Font Font { get { return base.Font; } set { base.Font = value; } } <Browsable(False), EditorBrowsable(false)> _ Public Shadows Property Font() As Font Get Return MyBase.Font End Get Set(ByVal Value As Font) 'MyBase.Font = Value 'normal property syntax MyBase.Font = New Font(Me.Font.FontFamily, 20) End Set End Property Do you know when to use User Controls? User Controls You lose the AcceptButton and CancelButton properties from the Designer e.g. OK, Cancel, Apply Therefore the OK, Cancel and Apply buttons cannot be on User Controls. User Controls You can use a user control more than once on the same form e.g. Mailing Address, Billing Address You can reuse logic in the code behind the controls e.g. Search control User controls are less prone to visual inheritance errors User Controls Each control is used only once User Controls Implemented for reuse User Controls – TabPages User Controls – TabPages Possible Exception: When a form has multiple tabs, and each tab has numerous controls – it can be easier to use User Control in this case Smaller designer generated code More than one person can be working on a different ‘tab’ Do you use a status bar to show load time? Monitor Performance better Good user feedback Easy to do Splash Screens Don't use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with poor performance. Use them only to give feedback and reduce the perception of time for programs that have unusually long load times. Don't use animated splash screens. Users often assume that the animated splash screen is the reason for a long load time. Too often, that assumption is correct. Do you always use the Visual Studio designer for data binding where possible? Two-way binding means that the object/data structure is bound to the UI Element/Control The setting/getting and the positioning of elements in a collection is handled by the databinding mechansisms Databinding is VASTLY superior in WPF Bad – write your own boring code Private Sub OnLoad() OrderDetailsService.Instance.GetAll(Me.OrderDetailsDataSet1) Dim row As OrderDetailsDataSet.OrderDetailsRow = Me.OrderDetailsDataSet1.OrderDetails(0) Me.TextBox1.Text = row.UnitPrice.ToString("c") End Sub Private Sub Save() Dim row As OrderDetailsDataSet.OrderDetailsRow = Me.OrderDetailsDataSet1.OrderDetails(0) row.UnitPrice = Decimal.Parse(Me.TextBox1.Text, System.Globalization.NumberStyles.Currency) End Sub Using the Designer Simple Binding to a single property Complex Binding to a list MDI Forms MDI Forms Hangover from Access 2.0 and Windows 3.1 Clutter the application Only one window on the taskbar No multiple monitor support Do you make common control with certain width? Example #1 Example #2 Windows Forms – Validation Don‘t trust anyone #1 Error Provider Code intensive Must manually handle the Validating event of each control you want to validate Must be manually running the validation methods when the OK or Apply button is clicked Do you use validator controls? Controls that “attach” themselves to input controls #2 Validator Controls Good No code, all in the designer (integrates with the ErrorProvider) #3 Validation with Entity Framework Validation logic is in the Model public partial class Employee { partial void OnLastNameChanging(string value) { if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0) { throw new ArgumentException("No GFADER allowed"); } } } Partial class Partial classes can hold validation logic Hook up ErrorProvider Validation Happens in model Different UI layers can react to validation differently Web page Windows Form Silverlight WPF ... Resources - Dev How to develop an Internet browser? How to develop Windows task manager? http://www.computingtuts.com/blog/?page_id=48 http://www.codeproject.com/KB/dotnet/threadmonitor.aspx Coding 4 fun http://blogs.msdn.com/coding4fun/ Resources Rules to better Windows Forms Book "User Interface Design for Programmers“ - Joel Spolsky http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetter WindowsForms.aspx http://www.joelonsoftware.com/ blog! UX patterns http://quince.infragistics.com/ Resources Rules to better Interfaces Windows UX Guidelines http://msdn.microsoft.com/en-us/library/aa511258.aspx Designing Interfaces http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInterfaces.aspx http://designinginterfaces.com/ VB 2012 wish list http://blogs.msdn.com/lucian/archive/2010/01/28/what-didn-t-get-intovb10.aspx Links LINQ to everything http://blogs.msdn.com/charlie/archive/2006/10/05/Links-toLINQ.aspx Windows Forms and WPF development http://windowsclient.net/ Windows UX Guidelines Covers Windows UI reference guidelines This should be your main ‘Bible’ when designing Windows Forms (not Web) if you’re not a designer as it provides a consistent standard http://msdn.microsoft.com/en-us/library/ff657751(v=VS.85).aspx 2 things… DrewRobson@ssw.com.au twitter.com/drewmrobson Thank You! Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA ABN: 21 069 371 900 Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105 info@ssw.com.au www.ssw.com.au