188 lines
6.2 KiB
HTML
188 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Loan Form (Using DOJO within MVC Support)</title>
|
|
|
|
<style type="text/css">
|
|
@import "css/app-format.css";
|
|
@import "../../../dijit/themes/claro/claro.css";
|
|
</style>
|
|
<script type="text/javascript" djConfig="parseOnLoad:1,isDebug:1,async:1" src="../../../dojo/dojo.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var loanModel;
|
|
|
|
require([
|
|
'dojo/_base/kernel',
|
|
'dojo/parser',
|
|
'dojo/ready',
|
|
'dojox/mvc',
|
|
'dojox/mvc/tests/models/LoanWizardModel',
|
|
'dojox/charting/DataChart',
|
|
'dijit/form/TextBox',
|
|
'dijit/form/Button',
|
|
'dijit/form/ValidationTextBox',
|
|
'dijit/form/NumberTextBox',
|
|
'dojox/mvc/Group',
|
|
'dojox/mvc/Output'
|
|
], function(dojo, parser, ready, mvc, LoanWizardModel, DataChart){
|
|
|
|
var loan_init = {
|
|
"Name" : "John Doe",
|
|
"Street" : "",
|
|
"City" : "",
|
|
"County" : "",
|
|
"State" : "",
|
|
"Zip" : "",
|
|
"Country" : "US",
|
|
"TotalIncome" : "0",
|
|
"BaseIncome" : "50000",
|
|
"BonusIncome" : "10000",
|
|
"TotalHousing" : "0",
|
|
"HousingPercent" : "0",
|
|
"Mortgage" : "1000",
|
|
"Taxes" : "500",
|
|
"OtherHousing" : "1200"
|
|
};
|
|
loanModel = new LoanWizardModel({ data: loan_init });
|
|
|
|
function createChart() {
|
|
var chart = new DataChart("expenseChart", {
|
|
store: loanModel.chartStore,
|
|
comparative: true,
|
|
type: dojox.charting.plot2d.Pie,
|
|
query: { "x":"*" },
|
|
fieldName:"y"
|
|
});
|
|
};
|
|
ready(createChart);
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body class="claro" style="background-image: url(images/validating_form_pattern.png)">
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<div id="navigation">
|
|
</div>
|
|
<div id="headerInsert">
|
|
<h1>Big Red Loan</h1>
|
|
<h2>The one to choose when you're in the red...</h2>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div id="leftNav"></div>
|
|
<div id="mainContent">
|
|
<h3>Borrower information</h3>
|
|
<hr size="6" class="rule"/>
|
|
<div class="spacer"></div>
|
|
<div class="row">
|
|
<div class="cell"><label for="borrowerInput">Name:</label></div>
|
|
<div class="cell">
|
|
<input id="borrowerInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.Name'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label for="zipInput">Zipcode (try 10706):</label></div>
|
|
<div class="cell">
|
|
<input id="zipInput" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.Zip'"
|
|
constraints="{pattern:'#'}" regExp="\d{5}" required="true" invalidMessage="Invalid Zip Code."/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label for="cityInput">City:</label></div>
|
|
<div class="cell">
|
|
<input id="cityInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.City'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label for="countyInput">County:</label></div>
|
|
<div class="cell">
|
|
<input id="countyInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.County'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label for="stateInput">State:</label></div>
|
|
<div class="cell">
|
|
<input id="stateInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.State'"/>
|
|
</div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
|
|
<h3>Expenses</h3>
|
|
<hr size="6" class="rule"/>
|
|
<div class="spacer"></div>
|
|
<table style="width:900px;">
|
|
<tr style="width:900px;">
|
|
<td style="width:400px;">
|
|
<div class="row">
|
|
<div class="cell"><label for="housing">Mortgage:</label></div>
|
|
<div class="cell">
|
|
<input id="housing" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.Mortgage'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell">
|
|
<label>Real Estate Taxes:</label>
|
|
</div>
|
|
<div class="cell">
|
|
<input id="taxes" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.Taxes'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label>Other Housing:</label></div>
|
|
<div class="cell">
|
|
<input id="otherHousing" type="text" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.OtherHousing'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label for="transportation">Total Housing:</label></div>
|
|
<div class="cell">
|
|
<input id="totalHousing" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.TotalHousing'"/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width:200px;">
|
|
<div id="expenseChart" width="150" height="150" style="display:block; width: 150px; height: 150px;"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3>Income</h3>
|
|
<hr size="6" class="rule"/>
|
|
<div class="spacer"></div>
|
|
<div class="row">
|
|
<div class="cell"><label for="baseIncome">Base Income:</label></div>
|
|
<div class="cell">
|
|
<input id="baseIncome" type="text" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.BaseIncome'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label>Bonus Income:</label></div>
|
|
<div class="cell">
|
|
<input id="bonusIncome" type="text" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.BonusIncome'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cell"><label for="total">Total Income:</label></div>
|
|
<div class="cell">
|
|
<input id="total" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.TotalIncome'"/>
|
|
</div>
|
|
</div>
|
|
<h3>Analysis</h3>
|
|
<hr size="6" class="rule"/>
|
|
<div class="spacer"></div>
|
|
<div class="row">
|
|
<div class="cell"><label for="percentHousing">Percent housing (under 33%):</label></div>
|
|
<div class="cell">
|
|
<input id="percentHousing" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.HousingPercent'"
|
|
invalidMessage="Housing should be less than 1/3 total expenses!"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|