1. Using KendoUI for SPA Applications Learning & Development http://schoolacademy.telerik.com Telerik School Academy

2.  Kendo MVVM  Views and ViewModels  Kendo Router  Defining routes  Routes with parameters  Creating SPA apps with KendoUI  Creating Views and ViewModels  Defining routes

3. Just a recap

4.  KendoUI has a powerful MVVM framework  Views – kendo.View  ViewModels – kendo.observable  Kendo Views Layout var layout = new kendo.Layout('…'), viewModel = kendo.observable({ viewModel = kendo.observable({ title: 'Welcome to the Online video player' title: 'Welcome to the Online video player' }), }), view = new kendo.View('…', { model: viewModel}); view = new kendo.View('…', { model: viewModel});layout.render('#root'); layout.showIn('#view', view);

5. Live Demo

6. The creation of fake pages

7.  Routing is the way to create different pages in SPA apps  The pages are not real pages, but look like real  Different pages have different hash (#) suffix  Instead of http://site.com/home.html the url is http://site.com/index.html/#home  Why use routes?  Routes present better end-user experience  The copy&paste of an ULR works  The end-user has history  Etc…

8.  The router supports routing in KendoUI apps  Initialized with new kendo.Router()  Routes are added with.route(string, callback)  Each route has a function callback, that is executed when the route is reached  Executed with.start() var router = new kendo.Router(); router.route('/', showHome); router.route('/home', showHome); router.route('/about', showAbout); router.start();

9. Live Demo

10. форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиранеhttp://academy.Telerik.com

11. 1. Create a SPA application for chatting  Use a SaaS cloud provider  Both Telerik Backend Services or Parse will do  Users can register/login  The username is unique  All users chat in a single channel  All users see the all messages

12. 1. (cont.) Create a SPA application for chatting  Implement it using KendoUI MVVM and Router  The application should have three different pages (routes)  Home page  Show information about the Web app  Login/register page  Login/register user  Chat page  Show messages from other users  Send new message