root/GearsORM/trunk/examples/new_demo.html

Revision 338, 3.9 kB (checked in by uriel, 1 year ago)

*added events to model classes
*added test for model events
*small cleanup in model constructor

Line 
1 <html>
2         <head>
3                 <script src="../gears_init.js"></script>
4                 <script src="../GearsORM.js"></script>
5                 <script src="../GearsORM.Events.js"></script>
6                 <script src="../GearsORM.ResultIterator.js"></script>
7                 <script src="../GearsORM.Sql.js"></script>
8                 <script src="../GearsORM.Fields.js"></script>
9                 <script src="../GearsORM.Model.js"></script>
10                 <script src="../GearsORM.Introspection.js"></script>
11                 <script src="../GearsORM.Transaction.js"></script>
12                 <script>
13                         GearsORM.dbName = "demo.v2";
14                         var Company = new GearsORM.Model({
15                                 name:"Company",
16                                 fields:
17                                 {
18                                         name:new GearsORM.Fields.String({maxLength:25}),
19                                         pepole:new GearsORM.Fields.ManyToOne({related:"Person"})
20                                 }
21                         })
22                         var Person = new GearsORM.Model({
23                                 name:"Person",
24                                 fields:
25                                 {
26                                         firstName:new GearsORM.Fields.String({maxLength:25}),
27                                         lastName:new GearsORM.Fields.String({maxLength:25}),
28                                         company:new GearsORM.Fields.OneToMany({related:"Company"})     
29                                 }
30                         });
31                        
32                         Company.createTable();
33                         Person.createTable();
34                        
35                         function render()
36                         {
37                                 var results = document.getElementById("results");
38                                 var companies = document.getElementById("select_company");
39                                 companies.innerHTML = results.innerHTML = "";
40                                 Person.select().each(function(person)
41                                 {
42                                         var item = document.createElement("div");
43                                         item.innerHTML = person.firstName + " - " + person.lastName + " - " + person.company.name;
44                                         results.appendChild(item);
45                                 });
46                                 Company.select().each(function(company)
47                                 {
48                                         var item = document.createElement("option");
49                                         item.innerHTML = company.name;
50                                         item.value = company.rowid;
51                                         companies.appendChild(item);
52                                 });
53                         }
54                        
55                         function addPerson()
56                         {
57                                 var firstName = document.getElementById("firstName").value;
58                                 var lastName = document.getElementById("lastName").value;
59                                 var companies = document.getElementById("select_company");
60                                 var company_id = parseInt(companies.options[companies.selectedIndex].value);
61                                 var person = new Person();
62                                 person.firstName = firstName;
63                                 person.lastName = lastName;
64                                 person.company = company_id;
65                                 person.save();
66                                 render();
67                                 return false;
68                         }
69                        
70                         function removePerson()
71                         {
72                                 var firstName = document.getElementById("firstName").value;
73                                 var lastName = document.getElementById("lastName").value;
74                                 var companies = document.getElementById("select_company");
75                                 var company_id = parseInt(companies.options[companies.selectedIndex].value);
76                                 Person.remove("firstName = ? AND lastName = ? AND Company_id = ?",[firstName,lastName,company_id]);
77                                 render();
78                                 return false;
79                         }
80                        
81                         function addCompany()
82                         {
83                                 var companyName = document.getElementById("companyName").value;
84                                 var company = new Company();
85                                 company.name = companyName;
86                                 company.save();
87                                 render();
88                                 return false;
89                         }
90                        
91                         function removeCompany()
92                         {
93                                 var companyName = document.getElementById("companyName").value;
94                                 Company.remove("name = ?",[companyName]);
95                                 return false;
96                         }
97                        
98                         window.onload = render;
99                 </script>
100         </head>
101         <body>
102                 <div id="results"></div>
103                 <div>
104                         <strong>Add or remove a person:</strong>
105                         <form>
106                                 First Name: <input type="text" id="firstName" name="firstName" value=""/><br/>
107                                 Last Name: <input type="text" id="lastName" name="lastName" value=""/><br/>
108                                 Company: <select id="select_company" name="company"></select><br/>
109                                 <input type="button" value="add person" onclick="return addPerson();" />
110                                 <input type="button" value="remove person" onclick="return removePerson();" />
111                         </form>
112                         <strong>Add or remove a company:</strong>
113                         <form>
114                                 Name: <input type="text" id="companyName" name="companyName" value=""/><br/>
115                                 <input type="button" value="add company" onclick="return addCompany();" />
116                                 <input type="button" value="remove company" onclick="return removeCompany();" />
117                         </form>
118                 </div>
119         </body>
120 </html>
Note: See TracBrowser for help on using the browser.