[tlhIn`toq]

I recently suggested to someone that separating one's data from the GUI that displays it is an important technique. They responded with... "Well how do I do that?" Which made me realize it was a good topic for a tutorial.

Why do we want to separate the data from the GUI?
One reason would be so we can keep a LOT of information, but only display a subset of it. For example we might have a lot of personal information about an employee like their pay rate and social security number. But we don't want to display that to everyone on the network. We only show that to people with Human Resources management level access.
Another reason might be so we can use one form for gathering data, and other for displaying it.
But my personal favorite need is so I can serialize/deserialize the information. Remember that GUI controls can't be serialized. So if you have a contact form like this one

how do you plan to save the data?

Of course you know you should NOT just directly access the GUI controls in every line of your code. GUI controls should always be kept private. Other classes should only change public properties. This way you can rearrange the form, change names, do whatever you need to do under-the-hood and not break all of your references to the properties.

Code

Spoiler

namespace SeparateDataAndGUI
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;

    public partial class frmContact : Form
    {
        #region Constructors

        public Form1()
        {
            InitializeComponent();
        }

        #endregion Constructors

        #region Properties

        public string DicHandle
        {
            get
            {
                return tbDicHandle.Text;
            }
            set
            {
                tbDicHandle.Text = value;
            }
        }

        public string Email
        {
            get
            {
                return tbEmail.Text;
            }
            set
            {
                tbEmail.Text = value;
            }
        }

        public string First
        {
            get
            {
                return tbFirst.Text;
            }
            set
            {
                tbFirst.Text = value;
            }
        }

        public string Last
        {
            get
            {
                return tbLast.Text;
            }
            set
            {
                tbLast.Text = value;
            }
        }

        public string Mobile
        {
            get
            {
                return tbMobile.Text;
            }
            set
            {
                tbMobile.Text = value;
            }
        }

        #endregion Properties
    }
}

But this still makes the data (the properties) a part of the form. So what do we do?

We make a class for your contact.




ContactObject code

Spoiler

namespace SeparateDataAndGUI
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;

    [Serializable]
    public class ContactObj
    {
        #region Properties

        public string DicHandle
        {
            get; set;
        }

        public string Email
        {
            get; set;
        }

        public string First
        {
            get; set;
        }

        public string Last
        {
            get; set;
        }

        public string Mobile
        {
            get; set;
        }

        public string PayRate
        {
            get; set;
        }

        public string SocialSecurityNumber
        {
            get; set;
            // In the real world this should never be plain text
            // Vital info should always be encrypted
        }

        #endregion Properties
    }
}

Notice that our ContactObj has more data than this form shows. That's one of the points we made earlier; that we can have more info and only show what this user's privileges allow.

We now have an object, but how do we update our earlier form to take advantage of it?
We add an instance of the ContactObj, [...]

Spoiler

    public partial class frmContact : Form
    {

        private ContactObj myContactObj = new ContactObj(); // Empty but not a null that will raise an exception

        public ContactObj Contact
        {
            get { return myContactObj; }
            set { myContactObj = value; }
        }

and update our properties to use it.

Spoiler

        #region Properties


        public string DicHandle
        {
            get
            {
                return Contact.DicHandle;
            }
            set
            {
                Contact.DicHandle = value;
            }
        }

        public string Email
        {
            get
            {
                return Contact.Email;
            }
            set
            {
                Contact.Email = value;
            }
        }

        public string First
        {
            get
            {
                return Contact.First;
            }
            set
            {
                Contact.First = value;
            }
        }

        public string Last
        {
            get
            {
                return Contact.Last;
            }
            set
            {
                Contact.Last = value;
            }
        }

        public string Mobile
        {
            get
            {
                return Contact.Mobile;
            }
            set
            {
                Contact.Mobile = value;
            }
        }

        #endregion Properties

Now it is just a matter of adding a couple methods to update the gui and update the object

Spoiler

        /// <summary>
        /// Send the information from the object to the form
        /// </summary>
        [Description("Send the information from the object to the form")]
        private void UpdateGUI()
        {
            // There are more eligant ways of updating the GUI to match the data
            // including iNotifyPropertyChange and DataBinding.
            // But for the purpose of this simple tutorial this is the easiest to 
            // read and follow what it is doing.
            tbFirst.Text = First;
            tbLast.Text = Last;
            tbMobile.Text = Mobile;
            tbDicHandle.Text = DicHandle;
            tbEmail.Text = Email;
        }

        /// <summary>
        /// Get the information from the from and update the object with it.
        /// </summary>
        [Description("Get the information from the from and update the object with it.")]
        void UpdateContactObj()
        {
            // There are more eligant ways of updating the GUI to match the data
            // including iNotifyPropertyChange and DataBinding.
            // But for the purpose of this simple tutorial this is the easiest to 
            // read and follow what it is doing.

            First = tbFirst.Text;
            Last = tbLast.Text;
            Mobile = tbMobile.Text;
            DicHandle = tbDicHandle.Text;
            Email = tbEmail.Text;
        }

We create a little Tester form to call our Contact form, then save the new data as an XML file after the Contact form closes.

Spoiler

namespace SeparateDataAndGUI
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.IO;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;

    public partial class TestForm : Form
    {
        #region Constructors

        public TestForm()
        {
            InitializeComponent();
        }

        #endregion Constructors

        #region Methods

        public void SaveXML(ContactObj contact)
        {
            string SavePath = @"C:\testing\";

            System.IO.Directory.CreateDirectory(SavePath);
            if (!System.IO.Directory.Exists(SavePath))
            {
                MessageBox.Show("Please check permissions");
            }
            else
            { // Successfully created application preferences directory
                //Export as XML serialized
                SavePath += (contact.Last + "_" + contact.First);
                SavePath = System.IO.Path.ChangeExtension(SavePath, ".xml");

                System.IO.File.Delete(SavePath);// Just to be safe

                var x = new System.Xml.Serialization.XmlSerializer(contact.GetType());
                using (var sw = new StreamWriter(SavePath, false))
                {
                    x.Serialize(sw, contact);
                }

            }
        }

        private void btnNewContact_Click(object sender, EventArgs e)
        {
            var newContactForm = new frmContact();
            newContactForm.ShowDialog();
            SaveXML(newContactForm.Contact);
        }

        #endregion Methods
    }
}

And voila, we have a contact form with the data separated from the GUI. Our main form (tester in this case) can give the user a new contact form to obtain new data, and then save it.



But remember it could just as easily get a List<ContactObj> from a database. This would allow you to get a lot of contacts without creating a lot of forms for no reason. You could get a ContactObj and feed it into a different form that shows all the hidden properties and so on.

If you're running VS10 I've attached the finished solution.
If not, here's the final code after all the edits.

Program.cs

Spoiler

namespace SeparateDataAndGUI
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Windows.Forms;

    static class Program
    {
        #region Methods

        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new TestForm());
        }

        #endregion Methods
    }
}

frmContact.cs

Spoiler

namespace SeparateDataAndGUI
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;

    public partial class frmContact : Form
    {
        #region Fields

        private ContactObj myContactObj = new ContactObj(); // Empty but not a null that will raise an exception

        #endregion Fields

        #region Constructors

        public frmContact()
        {
            InitializeComponent();
        }

        #endregion Constructors

        #region Properties

        public ContactObj Contact
        {
            get
            {
                return myContactObj;
            }
            set
            {
                myContactObj = value;
                UpdateGUI();
            }
        }

        public string DicHandle
        {
            get
            {
                return Contact.DicHandle;
            }
            set
            {
                Contact.DicHandle = value;
            }
        }

        public string Email
        {
            get
            {
                return Contact.Email;
            }
            set
            {
                Contact.Email = value;
            }
        }

        public string First
        {
            get
            {
                return Contact.First;
            }
            set
            {
                Contact.First = value;
            }
        }

        public string Last
        {
            get
            {
                return Contact.Last;
            }
            set
            {
                Contact.Last = value;
            }
        }

        public string Mobile
        {
            get
            {
                return Contact.Mobile;
            }
            set
            {
                Contact.Mobile = value;
            }
        }

        #endregion Properties

        #region Methods

        /// <summary>
        /// As the user makes changes on the form, we send those changes to the underlying object
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void tbFirst_TextChanged(object sender, EventArgs e)
        {
            UpdateContactObj();
        }

        /// <summary>
        /// Get the information from the from and update the object with it.
        /// </summary>
        [Description("Get the information from the from and update the object with it.")]
        void UpdateContactObj()
        {
            // There are more eligant ways of updating the GUI to match the data
            // including iNotifyPropertyChange and DataBinding.
            // But for the purpose of this simple tutorial this is the easiest to
            // read and follow what it is doing.

            First = tbFirst.Text;
            Last = tbLast.Text;
            Mobile = tbMobile.Text;
            DicHandle = tbDicHandle.Text;
            Email = tbEmail.Text;
        }

        /// <summary>
        /// Send the information from the object to the form
        /// </summary>
        [Description("Send the information from the object to the form")]
        private void UpdateGUI()
        {
            // There are more eligant ways of updating the GUI to match the data
            // including iNotifyPropertyChange and DataBinding.
            // But for the purpose of this simple tutorial this is the easiest to
            // read and follow what it is doing.
            tbFirst.Text = First;
            tbLast.Text = Last;
            tbMobile.Text = Mobile;
            tbDicHandle.Text = DicHandle;
            tbEmail.Text = Email;
        }

        #endregion Methods
    }
}

ContactObj.cs

Spoiler

namespace SeparateDataAndGUI
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;

    [Serializable]
    public class ContactObj
    {
        #region Properties

        public string DicHandle
        {
            get; set;
        }

        public string Email
        {
            get; set;
        }

        public string First
        {
            get; set;
        }

        public string Last
        {
            get; set;
        }

        public string Mobile
        {
            get; set;
        }

        public string PayRate
        {
            get; set;
        }

        public string SocialSecurityNumber
        {
            get; set;
            // In the real world this should never be plain text
            // Vital info should always be encrypted
        }

        #endregion Properties
    }
}

TestForm.cs

Spoiler

namespace SeparateDataAndGUI
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.IO;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;

    public partial class TestForm : Form
    {
        #region Constructors

        public TestForm()
        {
            InitializeComponent();
        }

        #endregion Constructors

        #region Methods

        public void SaveXML(ContactObj contact)
        {
            string SavePath = @"C:\testing\";

            System.IO.Directory.CreateDirectory(SavePath);
            if (!System.IO.Directory.Exists(SavePath))
            {
                MessageBox.Show("Please check permissions");
            }
            else
            { // Successfully created application preferences directory
                //Export as XML serialized
                SavePath += (contact.Last + "_" + contact.First);
                SavePath = System.IO.Path.ChangeExtension(SavePath, ".xml");

                System.IO.File.Delete(SavePath);// Just to be safe

                var x = new System.Xml.Serialization.XmlSerializer(contact.GetType());
                using (var sw = new StreamWriter(SavePath, false))
                {
                    x.Serialize(sw, contact);
                }

            }
        }

        private void btnNewContact_Click(object sender, EventArgs e)
        {
            var newContactForm = new frmContact();
            newContactForm.ShowDialog();
            SaveXML(newContactForm.Contact);
        }

        #endregion Methods
    }
}

 SeparateDataAndGUI.zip (89.92K)
Number of downloads: 419

This post has been edited by tlhIn`toq: 07 July 2011 - 12:40 AM

[Curtis Rutland]

Great tutorial. I need to match this with one for WPF, since the concept is absolutely the same, but the available mechanics are different (MVVM with data binding).

You could go even further by making the contact form a UserControl, so it can be used anywhere, including it's own form, just for flexibility.

[tlhIn`toq]

Curtis Rutland, on 07 July 2011 - 09:40 AM, said:

Great tutorial. I need to match this with one for WPF, since the concept is absolutely the same, but the available mechanics are different (MVVM with data binding).

Thanks. And go for it!

Quote

You could go even further by making the contact form a UserControl, so it can be used anywhere, including it's own form, just for flexibility.

Absolutely. I'm a huge believer in UserControls. But I didn't want to preach that too strongly considering it is very much the underlying basis of these tutorials...
Bulding an application - Part 1
Building an application - Part 2

[Jeff H]

Curtis Rutland, on 07 July 2011 - 03:40 PM, said:

Great tutorial. I need to match this with one for WPF, since the concept is absolutely the same, but the available mechanics are different (MVVM with data binding).

You could go even further by making the contact form a UserControl, so it can be used anywhere, including it's own form, just for flexibility.

For WPF take a look at


http://www.microsoft...lang=en&id=4922

http://compositewpf....ases/view/55576

Quote

Prism provides guidance designed to help you more easily design and build rich, flexible, and easy to maintain Windows Presentation Foundation (WPF) desktop applications and Silverlight Rich Internet Applications (RIAs) and Windows Phone 7 applications. Using design patterns that embody important architectural design principles, such as separation of concerns and loose coupling, Prism helps you to design and build applications using loosely coupled components that can evolve independently but which can be easily and seamlessly integrated into the overall application. Such applications are known as often referred to as composite applications

already mentioned in topic in .Net forum

[Theomi]

Nice tutorial, just skimmed through it but i have bookmarked it so i can read it in depth later

[macosxnerd101]

Awesome tutorial on code separation! This is definitely a concept which people need to utilize more in their programs.

[UziTech]

I recently started Android programming and i18n is so easy because they do this with strings.xml

Since then I have started using a strings file in my c# code as well.

Very good tutorial and very good idea.

[tlhIn`toq]

By a "strings" file, do you mean a file with all the strings used in your application?

I usually do this with the resources of the component. That makes it easy to globalize/localize an application. You just open the form/file, change the Language property and replace all the text.

Now the correct 'version' gets installed when the user installs the "english" or "Russian" or "Polish" version from the installer. This way InstallShield & Visual Studio do all the work and I don't have to do anything in code for the change, except to be sure to add all my strings to the correct resource file and use them instead of hard coding the strings.

string response = SomeMethodThatReturnsAboolForSuccess() ? Properteries.Resources.txt_Okay : Properteries.Resources.txt_Fail;

[UziTech]

tlhIn`toq, on 11 July 2011 - 11:26 AM, said:

By a "strings" file, do you mean a file with all the strings used in your application?

Yes, sometimes I use the resources but I have found it is easier and more convenient to create an "en.lang" file with all strings so I can localize it and others can change the strings if they want to. Especially for other languages since I just use Google translate to translate the "en.lang" file to other languages. Other people have emailed me better translated language files that they have updated to include in updates.(After checking Google translate to make sure they didn't write something bad of course)

[batesy3k]

Curtis Rutland, on 07 July 2011 - 04:40 PM, said:

Great tutorial. I need to match this with one for WPF, since the concept is absolutely the same, but the available mechanics are different (MVVM with data binding).

You could go even further by making the contact form a UserControl, so it can be used anywhere, including it's own form, just for flexibility.

Any update on this tutorial? Think it would be really useful

[tlhIn`toq]

What kind of 'update' were you thinking of?

[batesy3k]

Sorry should have been clearer - it was regarding Curtis' idea of doing the same tutorial as you have done here, but aimed at WPF MVVM and data binding

Apart from that your tutorial is spot on unless you would like to incorporate the User Control side of things

[tlhIn`toq]

tlhIn`toq, on 07 July 2011 - 10:59 AM, said:

Curtis Rutland, on 07 July 2011 - 09:40 AM, said:

Great tutorial. I need to match this with one for WPF, since the concept is absolutely the same, but the available mechanics are different (MVVM with data binding).

Thanks. And go for it!

Quote

You could go even further by making the contact form a UserControl, so it can be used anywhere, including it's own form, just for flexibility.

Absolutely. I'm a huge believer in UserControls. But I didn't want to preach that too strongly considering it is very much the underlying basis of these tutorials...
Bulding an application - Part 1
Building an application - Part 2

I gave Curtis my blessing to take my tutorial and make a WPF version and I beleive it did that a long time ago.

As for the UserControl side of it mentioned, I pointed out that the two tutorials I already created go heavy into making UserControls.

So I think all of what you are looking for has already been created.

Hey Curtis: Could you provide a link for the WPF version of this tutorial that you did?

This post has been edited by tlhIn`toq: 11 October 2011 - 08:18 AM

[Curtis Rutland]

You know, I forgot all about that. WPF databinding is surprisingly complex, and I'm still learning a lot about it as I use it. I can probably put together a simple binding guide pretty soon, it just won't be comprehensive (because to be comprehensive, it'd have to be a small book).

[Curtis Rutland]

Alrighty, I've put it up:

http://www.dreaminco...pf-databinding/