dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
188 lines (179 loc) • 6.2 kB
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/1.7/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>