Demo: Persons and Adresses » FactCheck

Hide line numbers 1: {{include document="Shept.Header"/}} 2: 3: {{section}} 4: {{column}} 5: 6: {{box cssClass="floatinginfobox"}} 7: {{toc /}} 8: {{/box}} 9: 10: When you have followed the steps of [[this tutorial>>Demo1.WebHome]] you have 11: * created a new project from the [[Shept template project page>>Tutorials.Getting_Started]] 12: * created two web pages with full editing and object creation capabilites 13: * written a filter to search for persons 14: * written a chain to navigate from Person to Address 15: 16: Now let's make some quick checks on the [[live demo>>http://demo.shept.org/SheptDemo||rel="_blank"]]. 17: 18: {{/column}} 19: {{/section }} 20: 21: {{section}} 22: {{column}} 23: = Create and modify data = 24: Enter a new name in the marked row [[image:star.png]] and push the 'save' [[image:accept.png]] button. 25: The row mark [[image:star.png]] will disappear and you should see your data on the list. 26: If the row mark is still there then you did not enter enough data to save the row. In the //Person#isCreationAllowed()// method we have specified that you have at least to enter a persons name. 27: If you see an error message when saving then somebody else is trying to save the same data (the same data rows) as you do. Once you update the screen [[image:tablerefresh.png]] after saving your data you will also see a new row marker again. 28: = Search, sort and navigate = 29: Check the filter [[image:magnifier.png]] paging and sorting features. 30: {{/column}} 31: 32: {{column}} 33: 34: [[[[image:FactCheck1.png||width=400px]]>>http://demo.shept.org/SheptDemo/person.shept||rel="_blank"]] 35: 36: {{/column}} 37: {{/section}} 38: 39: {{section}} 40: {{column}} 41: = Data validation and errors = 42: Open 2 browser windows (either on different workstations or different browsers on the same workstation) and let them show the same data. In browser 1 modify some row entry and push 'save' [[image:accept.png]]. Then in browser 2 also modify the same row and then push 'save' [[image:accept.png]]. In browser 2 you'll see an error message indicating there is a conflict. 43: There are also specific messages: Enter an invalid birthdate '00000' and you'll get an error message **and** the erroneous form fields will be (% style="color:red;border:2px solid" %)marked 44: 45: While this particular feature doesn't mean any effort for you as a developer (it's simply a data type mismatch) there are other cases where you should write validators to provide the user with a specific message. If you omit the extra work for writing a detailed validator then in many cases you will simply fallback to error detection of your database resulting in an unspecific error message (database integrity violation, duplicate keys, invalid empty field, ...) 46: {{/column}} 47: 48: {{column}} 49: 50: [[[[image:FactCheck2.png||width=400px]]>>http://demo.shept.org/SheptDemo/person.shept||rel="_blank"]] 51: 52: {{/column}} 53: {{/section}} 54: 55: {{section}} 56: {{column}} 57: = Localization = 58: The demo contains a german and english localization depending on your browsers locale. (We also might simply add user locale selection). These items are subject to localization: 59: * labels 60: * birthday 'date' entry formatting 61: * static selections (address type drop downs on the address subform) 62: 63: It's easy to add more locales. 64: {{/column}} 65: 66: {{column}} 67: 68: [[[[image:FactCheck3.png||width=400px]]>>http://demo.shept.org/SheptDemo/person.shept||rel="_blank"]] 69: 70: {{/column}} 71: {{/section}} 72: 73: {{section}} 74: {{column}} 75: = Chaining subforms = 76: Chaining is the most powerful feature of shept. Select a person and click on [[image:linkgo.png]]. A new subform appears below the Person form containing the persons addresses. Note that you can do anything with this Address subform as you can do with the Person form above. With the new subform you can 77: * create new rows 78: * edit existing rows 79: * sort and navigate 80: 81: You can close [[image:close.png]] or fold [[image:arrowdown.png]] a chained subform. In a shept application there is no limit in extending subforms to the bottom of the page through chaining. Best of all it requires very little programming effort. Note that the best browsing experience at this time when you have many subForms is with Firefox which renders the page almost seamlessly. 82: {{/column}} 83: 84: {{column}} 85: 86: [[[[image:FactCheck4.png||width=400px]]>>http://demo.shept.org/SheptDemo/person.shept||rel="_blank"]] 87: 88: {{/column}} 89: {{/section}} 90: 91: {{info}} 92: This simple demo is limited but your own application can extend infinetely to the bottom of the page just by 93: 94: a) configuring (=allowing) a chain between two segments 95: b) including a 'chain'-link [[image:linkgo.png]] in the parent subform. 96: c) name the 'chain'-link after a hibernate 1:n or n:m relation of your entity model. 97: {{/info}} 98: 99: See more screenshots from other Shept-based application [[here>>Shept.Screenshots]] 100: 101: = For Developers = 102: For Developers it might also be interesting to note that in a default configuration you can append any shept url with a **?debug=true** parameter. So if you enter [[http://demo.shept.org/SheptDemo/person.shept?debug=true]] each subForm headline will expose some internals most notably the **subForm (segment) name** (pointing to its configuration in //segments.xml//) and the **commandPathId** which is useful if you mashup your forms with javascript. 103: 104: [[~<~< Create Person>>Create_person]]