Introduction to JQuery, ASP.NET MVC and Silverlight

JQuery & ASP.NET MVC &Silverlight Fun Presented by Peter Gfader Senior Software Architect at SSW

Peter Gfader SSA @ SSW Loves C# and .NET (Java not anymore) Specializes in Windows Forms ASP.NET TFS testing Automated tests Silverlight

Usage of Profile API Web site VS Web application Additional validation Easy Q: Lucky 2 for next week? Homework?

Course Website http://sharepoint.ssw.com.au/Training/UTSNET/ Course Timetable Course Materials

Admin Stuff Attendance You initial sheet Hands On Lab You get me to initial sheet Certificate At end of 10 sessions If I say if you have completed successfully 

AJAX History Management Reporting ASP.NET Security Last week

AJAX - behind the scenes http://en.wikipedia.org/wiki/XMLHttpRequest Connectionstring (local)vslocalhostvs. http://weblogs.asp.net/jgalloway/archive/2005/12/02/432062.aspx Shared memory comes always first on local machine http://msdn.microsoft.com/en-us/library/ms187662.aspx Last week - Additional

jQuery Interactivity ASP.NET MVC Nice URLs Silverlight Rich interactivity Agenda – Rich UI and better UX

Maps.google.com JavaScript rules!

Big time! Different Browser Debugging No compiling Syntax No intellisense No static typing (duck typing!!) No animations JavaScript sucks!

Written in JavaScript It is a lightweight JavaScript library (compressed based lib, 19 kb) Helps developer / designer to keep things simple and reusable Visual Studio supports JQuery Part of every web app / site Intellisense support A great library for developing AJAX-based application What is JQuery?

1- Cross-browser (IE 6.0+, Firefox 2+, Safari 3.0+, Opera 9.0+, Chrome) 2- Powerful and easy to use Same selectors as in CSS Designer can learn it fast More readable JavaScript code 3 – Animation Tons of useful plug-ins and functionalities Why JQuery?3 good reasons

JavaScript window.onload = function() { alert("welcome"); } JQuery $(document).ready(function() { alert("Thanks for visiting!"); }); 1- Cross-browser

JavaScript “onload” is only loaded when all images are loaded in the page JQuery “$(document).ready” is loaded as soon as the Document Object Model is ready Similar to init() method in aspx page 1- Cross-browser – Explanation

Selector $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); It will add any click-event to “a” tag 2 – Powerful

http://tympanus.net/Tutorials/BubbleNavigation/ http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html 3 - Animations

JQuery official http://jquery.com/ JQuery UI library http://jqueryui.com/ Scott Gu’s Blog http://weblogs.asp.net/scottgu/ References

Bubble Navigation - http://tympanus.net/Tutorials/BubbleNavigation/ Quicksand (reorder items with nice shuffling animation) - http://razorjack.net/quicksand/ Nivo Slider - http://nivo.dev7studios.com/ Sponsor Flip Wall - http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php HTC Clock - http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/ Photo shoot Effect - http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html jQuery - Visually cool

Open Standard Media Player (jQuery + HTML5) - http://www.mediafront.org/project/osmplayer jsPlumb connector - http://morrisonpitt.com/jsPlumb/html/demo.html jQuery.popeye - http://dev.herr-schuessler.de/jquery/popeye/demo.html AutoSuggestjQueryplugin - http://code.drewwilson.com/entry/autosuggest-jquery-plugin Ajax Upload (show a preview of the file being upload) - http://www.zurb.com/playground/ajax_upload jQuery - Technically cool

Check for JavaScript in page <body class=”no-js”> <script type="text/javascript"> document.getElementsByTagName("body")[0].className="jsEnabled"; </script> CSS #your-element { display: block; } body.jsEnabled #your-element { display: none; } JavaScript tip!

What is ASP.NET MVC ...and is WebForms dead?

Our ancestors developed for the web in ASP script...

We have had WebForms... Compile

ASP.NET MVC Model - View - Controller

Background of ASP.NET MVC Difference between WebForms and ASP.NET MVC Tips and Tricks Conclusion Agenda

SmallTalk Ruby on Rails Spring, Struts Monorail MVC is not new

WebForms == WinForm developers MVC == HTTP + jQuery + CSS developers Does ASP.NET MVC replace WebForms? Productivity Control

Not just cool... Not just for testability... Not just because you get more control... Because you get more perspective! Why ASP.NET MVC?

Web is an HTTP highway Cool Tech Controls HTTP / HTML

Separation of concerns Controllers (Actions) Views Models More expressive of HTTP protocol Testable features Strongly typed support Background to ASP.NET MVC

The key actors in ASP.NET Webforms ASPX page gets request Page lifecycle with events Codebehind methods

The key actors in ASP.NET MVC Browser Request Model Controller View Response ViewModel

.Net 3.5 SP1 http://www.microsoft.com/downloads/ MVC http://www.asp.net/MVC/download/ Install VS2010 Advanced steps MVCContribhttp://www.codeplex.com/MVCContrib Moqhttp://code.google.com/p/moq/ What you need to get started in MVC

Watch the NerdDinner Tutorial http://www.asp.net/MVC Watch the MVC StoreFront Demo http://blog.wekeroad.com/ Dinner Now http://dinnernow.net/ To get going quickly

URL structure Testability HTTP Verbs Controllers/Actions/Views View engine So what is there to control

ASP.NET MVC structure (aka closer to the real thing) Model Browser Request Biz Controller Routing Repository e.g. SQL/Xml View Response ViewModel

Write your tests first Red-Green TDD is the purest MVC has been designed to decouple for testing Test Driven Development

// Arrange AdminController controller = new AdminController(mockRepos.Object); // Act ViewResult results = controller.Index(); Test a Controller

RouteDatarouteData = routes.GetRouteData(mockHttpContext.Object); Test a Route

[ActionName("Index")] [AcceptVerbs(HttpVerbs.Put)] public void Put() { Response.Write("<Put/>"); } Http Verbs

Code from http://haacked.com Reference RouteDebug.dll Global.asax RouteDebug.RouteDebugger.RewriteRoutesForTesting(RouteTable.Routes); Routing – Debugger

routes.MapRoute( “Demo", "Double/{c}/{a}/{id}", new { c = "Home", a = "Index", id = "" }, new { id = @"{1,6}" } //constraint ); Routing Constraints

routes.MapRoute( "Archive", "archive/{year}/{month}/{day}", new { controller = "Archive", action = "Index", year = "“, month = "", day = "" }, new { year = new YearRouteConstraint(), month = new MonthRouteConstraint(), day = new DayRouteConstraint() } ); Constraints implement IRouteConstraint Routing Constraints - Custom

Code from Nhaml Global.asax ViewEngines.Engines.Add(new NHaml.Web.Mvc.NHamlMvcViewEngine()); Changing the View Engine

SnippetDesignerhttp://www.codeplex.com/SnippetDesigner Phil Haackedhttp://haacked.com Stephen Walther http://stephenwalther.com/ Tatham Oddiehttp://blog.tatham.oddie.com.au/ Nhamlhttp://code.google.com/p/nhaml Others resources to make life easier

Agenda - Silverlight Silverlight? RIA? Why Silverlight? “Hello world” in Silverlight Silverlight under the hood Cool stuff How to + / -

Microsoft Silverlight is a cross-browser, cross-platform implementation of .NET for building and delivering the next generation of media experiences & rich interactive applications for the Web.

How a web page is shown Your Computer Hosting Computer Internet The Internet Server Client

All of the intelligence and data is on the server Request www.ssw.com.au The Internet Response HTML Server Client

Typical Client Server Typical Client Server

Typical Client Server Typical Silverlight

Pain with web applications Scalability - Server based Performance - Request / Response Developers - UI is hard to develop Different browser  different UI Intelligence on the client requires JavaScript/jQuery

Easy to develop and maintain Write once, run anywhereJava slogan, when Sun introduced Java 1.0 1996 Awesome User experience  Look Feel Usability We want

PX RIA - Rich Internet Applications

Features/functionality of traditional desktop applications State maintained on BOTH client and server Run within a secure web browser environment (a sandbox) No additional software installation Rich Internet Applications

Client engine, between user and server Download Engine – browser extension Program logic (executes compiled programs) Rendering user interface Server communication State-ful client Changes to the view don't require (re)loading a new page RIA

Cross platform Browser plug in Rich Internet Application .NET / CLR in the browser (VB/C#) 4MB download Simple install Competes with other products Silverlight = RIA from MS

Goal: Parity in developer productivityWhat platform Richness Reach

2000 ~ .NET .NET platform for Windows and Web applications AJAX: Web feel like Desktop WPF: (Windows Presentation Foundation) Separate UI from Code Too much Not Cross browser WPFe (everywhere) Silverlight Silverlight "History"

Adobe Flash, Flex Flash: Technology for animations Flex: Collection of tools to dev Flash apps Java applets / applications JavaScript / AJAX Google's GWT framework (Google Web Toolkit) JQuery Microsoft Silverlight List of RIA Platforms / Approaches

Windows Forms of Very limited Responsive UI Rich UI CLR on the web .NET Why Silverlight

Visual Studio files by default

<UserControl x:Class="SilverlightApplicationHalloWelt.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <StackPanel> <Button Width="400" Height="20" Content="Click me" Click="Button_Click"></Button> <TextBlock x:Name="textblockOutput" Width="400" Height="20" Text="empty"></TextBlock> </StackPanel> </UserControl> "Hallo Welt" - XAML

"Hallo Welt" – XAML in Design mode

private void Button_Click(object sender, RoutedEventArgs e) { textblockOutput.Text = "Hallo Welt"; } "Hallo Welt"

Silverlight – Under the hood

XAML Defines .Net Objects <TextBlockFontSize="32" Text="Hello world" /> ≡ TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world";

XML eXtensible Mark-up Language X Application ML UI mark-up language Used in Silverlight, WPF (and Work Flow) Tools Visual Studio, Expression Blend, Notepad Can generate UI with code or XAML (faster) XAML

Access Elements from Code ,[object Object],<Rectangle x:Name="rectOne" /> void OnMouseEnter(object sender, MouseEventArgs e) { rectOne.Height= 75; }

Expression Design Blend 4 Visual Studio Visual Studio 2010 Silverlight Tools for Visual Studio 2010 Silverlight SDK Silverlight Tooling

Silverlight Limitations No full access to Windows API & .NET API Silverlight is a subset of .NET framework WPF features not in Silverlight: http://msdn.microsoft.com/en-us/library/cc903925(VS.95).aspx ,[object Object]

Silverlight Limitations No Secure SaveAs dialog SL3 has a secure SaveAs dialog

Silverlight Limitations Offline support SL4 has Offline and Out of Browser support although more limited than WPF No Sync Framework No local DB Can manually serialize data on the Isolated Storage

Silverlight Limitations No Context menu No Right Click Event No context menu triggered by Right Click. Hacks exists but are not recommended due to the need to put the SL plug-in in windowless mode, introducing performance issue No “Right click – Open in new tab”

Silverlight Limitations No printing support Server side PDF or Open XML generation Client side manual HTML generation. Need to implement the formatting logic twice one for XAML and one for HTML Final version of SL 3 should provide more “hacks” for generating bitmaps from visuals enabling some more options for client side printing compared to the manual HTML generation. Still done through HTML bridge. This will for example enable printing of Charts.

Cross domain access http://weblogs.asp.net/jgalloway/archive/2008/12/12/silverlight-crossdomain-access-workarounds.aspx Silverlight Limitations

Playboy archives Hardrock cafe http://www.mscui.net/PatientJourneyDemonstrator/ Cool SL games http://www.silverarcade.com/ Silverlight shop http://www.eastberlinshop.com/ Silverlight Cooool

http://silverlight.idvsolutions.com/ http://memorabilia.hardrock.com/ http://apps.junkship.org/apps/tarantula/ http://joestegman.members.winisp.net/DeepZoom/ http://www.tafiti.com http://www.imeta.com/SilverlightShowcaseApp.htm http://silverlight.net/samples/2b2/silverlightchess/run/Default.html Cool Silverlight sites

Cross-browser, cross-platform support It runs on the MAC Quick to learn Core CLR on the web Easy to build better web applications Already good take up Advantages

Consistent .NET programming model Any .NET language, C#, VB.NET, IronPython Your favourite languages are supported on the client Significantly reduces the need for Javascript Easy deployment Advantages

Silverlight works in a myriad of browsers and platforms Any Web server can host Silverlight Silverlight plug-in available for Windows and Mac Moonlight the plug-in for Linux clients Mono for Silverlight in v1 Silverlight on other platforms Silverlight on other platforms

Platforms & Browsers (Microsoft support) Novell Support (Moonlight) IE 6.0+ Firefox 1.5+ Safari 2.0 Konqueror Firefox Opera Windows Vista, XP, 2003, 2000* Mac OS X 10.4.8+ Linux (various distros)

Introduction to JQuery, ASP.NET MVC and Silverlight

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introduction to JQuery, ASP.NET MVC and Silverlight

Ähnlich wie Introduction to JQuery, ASP.NET MVC and Silverlight (20)

Mehr von Peter Gfader

Mehr von Peter Gfader (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to JQuery, ASP.NET MVC and Silverlight

Hinweis der Redaktion