Ross and Rachel Terman of XEQ Information Solutions presented on their HTML5, JavaScript, CSS, and web services application. They discussed the application's components including the SQL database, .NET web service, HTML5 pages, CSS stylesheet, and JavaScript files. They explained how the application follows the MVC2 pattern with model classes mapped to the database, a controller in the web service, views as HTML pages, and view controllers as JavaScript files. They then demonstrated the application and provided resources for further learning on HTML5, CSS, and web development.
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
7. Contact Information
XEQ Information Solutions: www.xeq.com
Email: rterman@xeq.com,
rachel.terman@xeq.com
Follow us on Twitter, Facebook and Linked In!
Twitter:
• @rachelterman
• @xeqinfo
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
