Showing posts with label binding. Show all posts
Showing posts with label binding. Show all posts

Monday, October 10, 2011

Threading and Saving Data with LINQ to SQL

In our last post we looked at the actual calculations of the amortization.

Threading

Depending on the machine and the values the user has specified the calculation and displaying of the mortgage could lag. 100-200 milliseconds is the threshold before a user notices lag. We want the transition from MortgageHome Page to MortgageReport Page to be as seamless as possible while still immediately amortizing the mortgage. In order to accomplish this we need to run the calculations in their own worker thread, outside the UI thread.

In the MortgageReport page we set up the following threading.
//start a worker thread so it does not bog down the gui
private void Amortize()
{
    BackgroundWorker worker = new BackgroundWorker();

    worker.DoWork += delegate(object s, DoWorkEventArgs args) 
    {
        args.Result = RunAmortize(); 
    }; 
    worker.RunWorkerCompleted += delegate(object s, 
        RunWorkerCompletedEventArgs args) 
    {
        theMI = (MonthIteration)args.Result;
        SetGridData();
    }; 
    worker.RunWorkerAsync();
}

private MonthIteration RunAmortize()
{
    MonthIteration thisMI = new MonthIteration(m);
    return thisMI;
}
In the last post we saw how the MonthIteration class constructor ran all of our calculations for us. As soon as the first line in RunAmortize is complete so are our calculations.

I choose a BackgroundWorker due to it's straight forward approach of assignment to clearly spelled out events. In this case we are creating 2 anonymous delegates; one to start the thread and do the work and one to notify the thread that the work is complete. There are other events for updating progress and when dispose on the component is called. This could have easily just been pulled into its own class. However, since it's relatively uninvolved I kept it in the MortgageReport Page.

Saving Data with LINQ to SQL

The last piece of the puzzle is to save the data to the database for use later on. Because we put the legwork in for LINQ to SQL in a previous post, all we need to do now is use that code to save the data.
private bool IsValid(ref String em, bool checkForName)
{
    List<String> errors = new List<string>();

    if (checkForName && m.Name == null)
        errors.Add("You must specify a Name.");
    else if (checkForName && m.Name.Trim() == String.Empty)
        errors.Add("You must specify a Name.");
    if (m.Principal <= 0)
        errors.Add("You must specify Principal Amount greater than $0.00.");
    if (m.Term <= 0)
        errors.Add("You must specify a Loan Term greater than 0.");
    if (m.InterestRate <= 0)
        errors.Add("You must specify an Interest Rate.");
    em = String.Join(Environment.NewLine, errors);

    if (errors.Count > 0)
        return false;
    else
        return true;
}

Before we can even attempt to save we need to validate all the necessary values. In this case we pass in a string by ref to ensure the calling method can show the user the problems encountered.
private void SaveB_Click(object sender, RoutedEventArgs e)
{
    String em = "";
    if (!IsValid(ref em, true))
    {
        MessageBoxResult result = MessageBox.Show((Window)this.Parent, 
            em, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
    }
    else
    {
        m.Date = DateTime.Now;

        if (isNew)
        {
            if (DBApi.DB.mortDB.Mortgage.Count() > 0)
            {
                m.Key = (from thisMort in DBApi.DB.mortDB.Mortgage
                            select thisMort.Key).Max() + 1; 
            }
            else
                m.Key = 0;
            DBApi.DB.mortDB.Mortgage.InsertOnSubmit(m);
        }

        DBApi.DB.mortDB.SubmitChanges();
        isNew = false;
    }
}

If the values are invalid we give the user immediate feedback in the form a error MessageBox.

One problem that crept up on me when I was working on this is the defaulting of the Key to 0. Since Key 0 already exists in the database, we are now no longer allowed to add new records. To get around this I simply did a quick LINQ to SQL query to find the Max Key and incremented it by 1.

InsertOnSubmit is the same as the insert command in T-SQL. SubmitChanges looks for updates, inserts or deletions and sends them to the database.

That's it! We now have a fully functional Mortgage Calculator that looks pleasant, is somewhat dynamic to the users preferences, stores UI state and gives the user a lot of useful information.

Future Improvements

When coding it's almost impossible to not notice improvements. The following are some features I would like to see in the Mortgage Calculator in the future.
  1. An installer package
  2. In-grid adjustments
  3. Better color schema
  4. More detailed stats on values such as
    1. Total insurance paid
    2. Total taxes paid
  5. Home page selection memory
  6. Years and months term input fields instead of just months
  7. PMI
  8. Date tracking by listing the start date
  9. Monthly payment date to adjust interest and principal to the day payment was received
  10. Application Icon
  11. MortgageHome showing more details about each Mortgage
  12. Start amortizing in the middle of the year and figure costs accordingly like Tax increasing at the end of the year, which might be 4 months into the loan.
  13. Graphs and charts
  14. User accounts
  15. User account summaries of the user's entire portfolio

Download the Code Here

Sunday, October 9, 2011

Mortgage Report XMAL Stored State and DataGrid

In the last post we covered validation with data binding and converters.

Overview of Goals for Usability

When I first started working on this project in WPF I had a short list of GUI guidelines I wanted to adhere to:
  1. Better overall use of space
  2. Uniform spacing and orientation of user input fields
  3. Ability to hide most optional fields
  4. Ability to hide optional columns in the Amortization Schedule
With WPF and a small amount of research you practically fall into the first 2 objectives.

Ability to Hide Most Optional Fields

WPF was well thought out. Somewhere along the line someone working on WPF realized that binding should not stop just at values but could be extended to attributes and states in GUI components.

I wanted the Expander components in my MortgageReport Page to be open or closed based upon their previous state when the last save of the Mortgage objects occurred.

In a previous post I showed the Mortgage table in our database. It contained a bunch of expand bit typed columns. These would save whether or not an Expander was expanded.

Lets take a look at one of the Expanders in xaml:
<Expander Header="Home Value" HorizontalAlignment="Left" 
    Name="homeValueE" VerticalAlignment="Top" Width="225" 
    Grid.Row="3" IsExpanded="{Binding Path=HomeValueExpand}">
...
</Expander>
IsExpanded="{Binding Path=HomeValueExpand}" tells Expander to bind to the HomeValueExpand property in the Mortgage object. Dead simple.

Ability to hide optional columns in the Amortization Schedule

Hiding columns in a grid was a little more difficult although not much.

WPF has Visual Trees and Logical Trees to represent the UI. The Logical Tree contains all UI components specified in xaml or programmatically generated. The Visual Tree contains only components that need to be rendered and inherit from the Visual or Visual3D classes.

<DataGrid Grid.Column="0" Grid.Row="0" Name="amortizeGrid" 
    CanUserResizeRows="False" CanUserSortColumns="False" 
    CanUserReorderColumns="False" AutoGenerateColumns="False" 
    SelectionMode="Single" AlternatingRowBackground="Beige" Margin="10,0" 
    BorderThickness="1" FontWeight="Normal" IsReadOnly="True">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="Control">
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding PaymentNum}" Header="Payment #" />
        ...
        <DataGridTextColumn Binding="{Binding CashFlow}" Header="Cash Flow" />
    </DataGrid.Columns>
</DataGrid>
While DataGrid is in the Visual Tree, DataGridColumns (a base class for DataGridTextColumns) is not. Therefore, binding to a property that modifies the visual appearence does not work.

The way I got around this was to hide or show columns in the DataGrid programmatically.

private void SetColumnsVisible()
{
    BooleanToVisibilityConverter btvc = new BooleanToVisibilityConverter();

    //we hate magic numbers
    amortizeGrid.Columns[GridConstants.AMORTIZE_GRID_TAX_COL].Visibility = 
        (System.Windows.Visibility)btvc.Convert(m.PropertyTaxShowDef, 
        null, null, null);
...
    amortizeGrid.Columns[GridConstants.AMORTIZE_GRID_CASHFLOW_COL].Visibility = 
        (System.Windows.Visibility)btvc.Convert(m.RentShowDef, 
        null, null, null);
}
Because Visibility is not a boolean property but an enum of Collapsed, Hidden or Visible, we need something to convert our bit/boolean values to Hidden or Visible. BooleanToVisibilityConverter is a class found Windows.Controls that does the conversion for you.

I hate magic numbers with the fury of a thousand suns. Nothing is more annoying then trying to keep straight what numbers represent when you have 50 other things to think about. What's more, what happens when the columns now represent something else? Using constants solves both of these problems, hence the GridConstants.

Loading Data into the Grid and Summary Data

Since binding is an amazingly effective tool in WPF I wanted to use it again for displaying the results of the Amortization logic. After the calculations are complete we receive a list of MonthIteration objects (we will cover its contents more in the next post). The MonthIteration class contains all the data that needs to be displayed in the Grid.

MonthIteration has public string properties that represent the underlying data. This allows for formatting of the values and feeding the DataGridTextColumns strings instead of something it doesn't know how to process.

private int _PaymentNum;
public String PaymentNum
{
    get
    {
        return _PaymentNum.ToString();
    }
}
...
private decimal _CashFlow;
public String CashFlow
{
    get
    {
        return _CashFlow.ToString("C2");
    }
}
If we look at our DataGrid code again we notice that the individual columns are bound.

<DataGrid Grid.Column="0" Grid.Row="0" Name="amortizeGrid" 
    CanUserResizeRows="False" CanUserSortColumns="False" 
    CanUserReorderColumns="False" AutoGenerateColumns="False" 
    SelectionMode="Single" AlternatingRowBackground="Beige" Margin="10,0" 
    BorderThickness="1" FontWeight="Normal" IsReadOnly="True">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="Control">
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding PaymentNum}" Header="Payment #" />
        ...
        <DataGridTextColumn Binding="{Binding CashFlow}" Header="Cash Flow" />
    </DataGrid.Columns>
</DataGrid>
The code that binds the list of MonthIteration to the DataGrid is shown below.
private void SetGridData()
{
    amortizeGrid.ItemsSource = theMI.ReturnAllIterations();
    totalInterestPaidL.Text = theMI.TotalInterestPaid;
    totalPaidL.Text = theMI.TotalInterestPrincipalPaid;
    int numOfMonths = theMI.NumOfPayments;
    int numOfYears = numOfMonths / 12;
    numOfMonths = numOfMonths % 12;
    loanTermL.Text = numOfYears.ToString() + " years " + 
        numOfMonths.ToString() + " month(s)";
    totalCostL.Text = theMI.Payment;
}
In a lot of Mortgage applications a summary of interesting facts about the mortgage is displayed to the user. The rest of the SetGridData method is just a summary of details I think might be helpful to the user.













13 years 4 months is a rather odd length for a mortgage. This is due to the implementation of my Extra Payment field shortening the length of the loan.















Each month the user stipulated paying an extra $321.00. This cut the mortgage time down by more then half. Having the summary information at the top is a nice way around scrolling to the bottom of the amortization and dividing by 12.

In our next post we will go more in depth with the amortization calculations.


Download the Code Here

Validation in the Mortgage Report Page

In the last post we covered data context and data binding in the MortgageReport Page.

Validation with Data Binding

In a previous post we discussed LINQ to SQL and explored our Database, data model and the DataContext generated by SQL Metal.

Now that we have a solid foundation of how binding works lets try to extend it's functionality.

<TextBox Name="principalT" Grid.Row="1" Text="{Binding Path=Principal, ValidatesOnDataErrors=True,  Converter={StaticResource currencyConverter}}" />
We can see that this TextBox is bound to the Principal property located inside the Mortgage object. The Text attribute also contains two other interesting properties.

ValidatesOnDataError lets the GUI component know that it has to check the Model object bound to the control for errors.

This is our validation logic on the Model:

partial void OnPrincipalChanging(decimal value)
{
    if(value <= 0)
        AddError("Principal", "Principal must be greater than 0.");
    else
        RemoveError("Principal", "Principal must be greater than 0.");
}
In our case we have a special setting for all TextBox's that modifies the look if errors have been encountered. We've placed it in the App.xaml file.

<Style TargetType="{x:Type TextBox}">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <DockPanel LastChildFill="True">
                    <TextBlock DockPanel.Dock="Top" FontSize="12pt">
                        *
                    </TextBlock>
                    <Border BorderBrush="Red" BorderThickness="1">
                        <AdornedElementPlaceholder />
                    </Border>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="ToolTip"
        Value="{Binding RelativeSource={RelativeSource Self}, 
                Path=(Validation.Errors)[0].ErrorContent}"/>
        </Trigger>
    </Style.Triggers>
</Style>
Validation.ErrorTemplate specifies that this template should be applied when errors are encountered. In this case, we show a red border and an asterisk. We also change the ToolTip to show the error message returned from the Model validation.

Lets take a look at the result when invalid data is entered.









Converters

Converter={StaticResource currencyConverter} specifies how to convert from the data stored in the model to a string displayed in the TextBox and back.

However, We have a class called "CurrencyConverter," but not "currencyConverter." "currencyConverter" is specified at the top of the xaml file in the Page.Resources section.

<Page.Resources>
    <l:CurrencyConverter x:Key="currencyConverter" />
    <l:PercentageConverter x:Key="percentageConverter" />
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    <Style x:Key="vStyle" TargetType="{x:Type DataGridCell}">
        <Setter Property="Visibility" Value="{Binding 
            YourObjectVisibilityProperty}"/>
    </Style>
</Page.Resources>
One more step is required. We need to make sure there is a reference to the namespace where the converters lie. "l" reffers to the the xml namespace attribute in the Page tag at the top of the file.
<Page x:Class="MortCalc.MortgageReportPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:l="clr-namespace:MortCalc.Converters"
        xmlns:j="clr-namespace:MortCalc.AmortizeLogic"
        Title="Mortgage Calculator" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
Let's take a look at our currency converter:
namespace MortCalc.Converters
{
    [ValueConversion(typeof(decimal), typeof(string))]
    public class CurrencyConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            if (value == null)
                return 0;
            else
                return ((decimal)value).ToString("C2", culture);
        }

        public object ConvertBack(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            if (value.ToString().Trim() == "")
                return 0;

            decimal result;
            decimal.TryParse(value.ToString(), NumberStyles.Currency, 
                culture, out result);
            return result;
        }
    }
}
Convert takes the decimal value and uses the ToString method, passing in the "C2" format, to retrieve a currency formatted in the passed in culture with an after decimal precision of 2. ConvertBack does the opposite using the TryParse method.

Using the converter for currency changes 20.3 to $20.30.

Likewise, I wanted the percentage rate to be human readable but stored in a format immediately usable in mortgage calculations. Something obtuse like .0675 gets converted to 6.75.

In the next post we will dive back into the MortgageReport Page xmal and take a look at the DataGrid.


Download the Code Here

DataContext on the Mortgage Report Page

In the last post we covered retrieving and showing existing Mortgage Names.

In this post we will be dealing with more data binding and some user input.

Mortgage Report Page

The MortgageReport Page serves 2 main purposes:
  1. Allow the user to specify and save the details of a Mortgage
  2. Amortize the Mortgage



































































Compare this new GUI with the old one and we can see a clear difference.

















More space is now allocated to the actual amortization of the loan. The input fields are minority of the page and properties the user is not interested in can be minimized. On top of the cosmetic improvement I had spent less time laying out and designing the GUI in WPF. With windows forms, any time I decided to add a new feature, rearranging the input fields would become a tedious rush of shuffling and resizing input fields. Now it's as simple as adding a few lines of xaml to an existing Panel tag.

In a previous post we listed all of the details we wanted to track during the Amortization.
  • Principal
  • Interest
  • Extra Payments
  • Balance
  • Home Value
  • Tax
  • Insurance
  • Association Dues
  • Maintenance
  • Total Monthly Cost
  • Equity
  • Loan To Value
  • Rental Income
  • Cash Flow
  • Tax Appreciation
  • Insurance Appreciation
  • Association Dues Appreciation
  • Maintenance Appreciation
  • Rent Appreciation
  • Home Value Appreciation

Notice that most of these values are shown in the MortgageReportPage. Equity, Loan to Value, Cash Flow and Total Monthly Cost are missing from the Left hand side. This is due to these values being the result of the other values being operated on.

Data Binding

Lets take a look at the code behind.
public MortgageReportPage(bool inIsNew = true)
{
    InitializeComponent();
    isNew = inIsNew;
    if (inIsNew)
    {
        m = new Mortgage();
        this.DataContext = m;
        SetColumnsVisible();
    }
}

// Custom constructor to pass Mortgage report data
public MortgageReportPage(object data)
    : this(false)
{
    // Bind to the mortgage report data.
    m = (Mortgage)data;
    this.DataContext = m;

    SetColumnsVisible();

    String em = String.Empty;
    if (IsValid(ref em, false))
        Amortize();
}

We have 2 constructors; one takes in a defaulted boolean value, the other takes in the Mortgage object from the Page that called it.

this.DataContext = m;
This is where the Data Binding for all the TextBoxes, CheckBoxes and Expanders originates. The DataContext property of the Page provides access to the bound data for its child components. All the public data in the Mortgage class is now freely available to any Component on the Page.

The last thing we need to do before the data will be automatically loaded into our fields and updated to the Mortgage class is to tell the children components themselves what they should be bound to.
<TextBox Name="nameT" Grid.Row="1" Text="{Binding Path=Name, ValidatesOnDataErrors=True}" />
Text="{Binding Path=Name..." is the final step in binding the Column named "Name" in the Mortgage class to the TextBox nameT in xaml. Simple.

In the next post we will be dealing with validation and converters.


Download the Code Here

DataContext on the Mortgage Home Page

In our last post we covered integrating the database CRUD operations through our MortDB DataContext class. In this post we get to see how simple working with a DataContext can be.

The MortgageHome Page

In a previous post we stopped just short of diving into the MortgageHome.xaml's code behind.



















Here is the code behind:

namespace MortCalc
{
    /// <summary>
    /// Code Behind for MortgageHome.xaml
    /// </summary>
    public partial class MortgageHome : Page
    {

        public MortgageHome()
        {
            InitializeComponent();
        }

        private void Amortize_Button_Click(object sender, RoutedEventArgs e)
        {
            //error message tell them to select a mortgage
            if (mortgageListBox.SelectedItem == null)
            {
                MessageBoxResult result = MessageBox.Show(
                    (Window)Parent, "Please Select a Mortgage.",
                    "Error", MessageBoxButton.OK, 
                    MessageBoxImage.Error);
            } else{
                // View Mortgage Amortization Report
                MortgageReportPage mortgageReportPage = new 
                    MortgageReportPage(mortgageListBox.SelectedItem);
                this.NavigationService.Navigate(mortgageReportPage);
            }
        }

        private void New_Button_Click(object sender, RoutedEventArgs e)
        {
            // View Mortgage Amortization Report
            MortgageReportPage mortgageReportPage = 
                new MortgageReportPage();
            this.NavigationService.Navigate(mortgageReportPage);
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            var results = from m in DBApi.DB.mortDB.Mortgage
                            select m;

            mortgageListBox.ItemsSource = results.ToList();
        }
    }
}

When looking at the form there are 3 main things that it needs to accomplish:
  1. Load the Names of the Mortgages
  2. Create a new Mortgage
  3. Amortize a selected Mortgage

Load the Names of the Mortgages

The Mortgage Names are loaded into the Listbox component.

<ListBox Name="mortgageListBox"  DisplayMemberPath="Name" FontSize="18" />
We can see that DisplayMemberPath is set to "Name". "Name" in this context makes little sense.

Name is a property in the Mortgage class. Knowing this we can now make sense of the Page_Loaded event function.
private void Page_Loaded(object sender, RoutedEventArgs e)
{
    var results = from m in DBApi.DB.mortDB.Mortgage
                    select m;

    mortgageListBox.ItemsSource = results.ToList();
}

The LINQ to SQL code:

var results = from m in DBApi.DB.mortDB.Mortgage select m;
is doing a SQL like query from the Mortgage table in our database, in code. This is equivalent to the following T- SQL:
SELECT *
FROM Mortgage
We just avoided creating a connection, sending a query, iterating through a result set, ect...

Now all that's left is to bind the results to the ListBox.

mortgageListBox.ItemsSource = results.ToList();
By binding the data we avoided for loops of loading details into the list box and matching names to objects located globally in the Page class. Data binding is powerful and elegant.

Create a New Mortgage

When the New button is clicked the Click event gets fired per our xaml code.
<Button Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Click="New_Button_Click" Style="{StaticResource buttonStyle}">
    New
</Button>
Here is the event click function:

private void New_Button_Click(object sender, RoutedEventArgs e)
{
    // View Mortgage Amortization Report
    MortgageReportPage mortgageReportPage = new MortgageReportPage();
    this.NavigationService.Navigate(mortgageReportPage);
}
All we are doing here is navigating to the new page. We instantiate the Page object and tell our NavigationWindow class to Navigate to it. All specifying and saving of data will take place in this new Page.

Amortize a selected Mortgage

When someone selects an existing Mortgage we need a way to tell the MortgageReportPage which record we are working on.
private void Amortize_Button_Click(object sender, RoutedEventArgs e)
{
    //error message tell them to select a mortgage
    if (mortgageListBox.SelectedItem == null)
    {
        MessageBox.Show((Window)Parent, 
            "Please Select a Mortgage.",
            "Error", MessageBoxButton.OK, MessageBoxImage.Error);
    } else{
        // View Mortgage Amortization Report
        MortgageReportPage mortgageReportPage = new MortgageReportPage
            (mortgageListBox.SelectedItem);
            this.NavigationService.Navigate(mortgageReportPage);
    }
}
Check to make sure they selected something and if not let them know they need to.

The only way this Navigation to the MortgageReportPage differs from the last method is the passing in of the ListBox's selected item. I am not operating on the value at all and I am not casting as a Mortgage. Very Simple.

The next post will be dealing with the MortgageReport Page and how it binds data in the Mortgage class to the GUI components.


Download the Code Here