Recommended
Recommended
More Related Content
What's hot
What's hot (11)
Similar to Code camp orlando
Similar to Code camp orlando (20)
Recently uploaded
Recently uploaded (20)
Code camp orlando
- 1. XEQ Information Solutions Create a Contact Manager Application using HTML5, JavaScript and WebServices March 31, 2012 Presented by: Ross and Rachel Terman rterman@xeq.com @XEQInfo rachel@xeq.com @rachelterman
- 2. Agenda • Introductions • Application Description • MVC2 • HTML5, JavaScript, CSS and WebServices Demo • Resources and Questions
- 3. Application Description • Components – SQL Server Database – .NET Webservice – HTML5 Pages – CSS Style Sheet – JavaScript Files
- 4. MVC2 • MVC2 = Model, View, Controller, ViewController • Model classes map to the database • Controller is in the Webservice • View contains the HTML pages • ViewController contains the JavaScript files that serve as a link between the HTML pages and the Controller
- 5. HTML5, JavaScript, CSS and WebServices - DEMO
- 6. Resources and Questions • W3Schools: www.W3Schools.com • HTML5 Boilerplate Link: http://html5boilerplate.com/ • HTML5 Cookbook: http://www.amazon.com/Cookbook-Oreilly- Cookbooks-Christopher- Schmitt/dp/1449396798 • Smashing Magazine: http://www.smashingmagazine.com/
- 7. Contact Information XEQ Information Solutions: www.xeq.com Email: rterman@xeq.com; rachel@xeq.com Follow us on Twitter, Facebook and Linked In! Twitter: • @XEQInfo • @rachelterman Facebook: XEQ Information Solutions LinkedIn: rterman@xeq.com, rachel.terman@xeq.com
Editor's Notes
- Review databaseBriefly describe each componentShow finished product
- Model contains the structures to pass data between the Controller functions and the View Controller.Controller interacts with database and with ViewController
- For each component, show individual demoCreate projectPut connection string in web.configCreate webservice. Name is CodeCampMake folders. In App_Code make Controller and ModelIn root create Scripts, Styles, Views, ViewController in projectCopy classes to Model. Show cResutlsCopy CDA classes to Controller. Review quickly.From a text file copy Web Method functions to CodeCamp.csCopy Style.css to styles folder. Review contents. Copy jQuery files to Scripts folder. Modernizer and jQuery 1.71 onesCopy plugin.js and script.js and review. Put in ViewControllers folderMake Combo.html page.Copy HTML into page. Review HTML5 Boilerplate code.Link to CSS fileAdd links to Modernizer and jQuery and plugin and scriptCreate Combo.js in ViewControllerLink to Combo.html pageAdd option loading script to Combo.html and talk about templating.Add document ready function from code snipits fileCopy LoadComboTypes() function code. Use broken link to webserviceSet a breakpoint in DocReady and run. Set breakpoint in LoadCombo. Show how to understand error message.Fix and rerun. Set a breakpoint in the webservice call and quicly step through. Show JSON response.In the LoadCombo show how message is deconstructed and look at msg.dLook at combo boxAdd Save() functionShow how values are retrieved.Discuss JSON structure. Use of Array to get the object to the webservice.Save a row and walk through.Copy Index.html pageCreate Index.jsCopy in Doc ready and LoadComboTypes codeCopy LoadClientCombo functionCopy FindClient and DisplayClient functions. Also ClearForm and DisplayNotes. Set breakpoint and run. Copy ValidateData and Save functions. Set a breakpoint and run.Copy SaveNote() function and run
- Html5 boilerplate linkHTML5 CookbookSmashing magazine site linkW3Schools