Rich Internet Applications 8. Other RIA technologies.

Slides:



Advertisements
Similar presentations
Svetlin Nakov Director Training and Consulting Activities National Academy for Software Development (NASD) ASP.NET 3.5 New Features.
Advertisements

Web Toolkit Julie George & Ronald Lopez 1. Requirements  Java SDK version 1.5 or later  Apache Ant is also necessary to run command line arguments 
Silverlight Presenter: Kevin Grossnicklaus February 25 th, 2010.
WPF vs Silverlight Stuart Haas. WPF  Windows Presentation Foundation  Included in Vista, Server 2008 and XP service pack 2  Deployed in desktop and.
The Designer Tools Landscape Andy Hood. AKQA PROVIDES DIGITAL BUSINESS SOLUTIONS We focus on providing our clients with a return on investment.
1 Introduction to Silverlight 1.1 Mark Smith
An Introduction To Silverlight Gergely Orosz
Introduction Rich Internet Applications OpenLaszlo as an RIA Examples Community Competitors OpenLaszlo Architecture OpenLaszlo XML Structure Dealing with.
Windows Communication Foundation and Web Services.
The Microsoft’s solution for building cross-platform Rich Internet Applications.
A Good UX How To Make It Happen EAE 4023, UNITE 2010 Tuesday, 9:15 am May 25 th 2010 Niels Gebauer Director Client Tools Consultancy
Michael S. Scherotter Microsoft Corporation
A closer look Dynamic Webpages Jessica Meyerson March 1, 2011.
Quick Tour of the Web Technologies: The BIG picture LECTURE A bird’s eye view of the different web technologies that we shall explore and study.
RIA Introduce Comparison among several technology.
Windows.Net Programming Series Preview. Course Schedule CourseDate Microsoft.Net Fundamentals 01/13/2014 Microsoft Windows/Web Fundamentals 01/20/2014.
MVC New release IE8 Beta 1 Deep Zoom (sea dragon) Silver light 2.0 Beta 1 Expression Blend 2.5 Preview Instant Messaging API Enhancements to Virtual Earth.
JavaServer Faces: The Fundamentals Compiled from Sun TechDays workshops (JSF Basics, Web-Tier Codecamp: JavaServer Faces, Java Studio Creator; IBM RAD)
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
FALL 2005CSI 4118 – UNIVERSITY OF OTTAWA1 Part 4 Web technologies: HTTP, CGI, PHP,Java applets)
Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.
Lecture 8 – Platform as a Service. Introduction We have discussed the SPI model of Cloud Computing – IaaS – PaaS – SaaS.
RIA & Adobe Flex Yunhui Fu 11/05/2008. What’s RIA RIA (Rich Internet Applications) –web applications which look and perform like desktop applications.
Introduction to ASP.NET. Prehistory of ASP.NET Original Internet – text based WWW – static graphical content  HTML (client-side) Need for interactive.
Introduction to Silverlight. Slide 2 What is Silverlight? It’s part of a Microsoft Web platform called Rich Internet Applications (RIA) There is a service.
Lesley Bross, August 29, 2010 ArcGIS 10 add-in glossary.
Prepared by Stephen Olaño June 12, Rich Internet Applications It allow to build rich applications with data and multimedia contents, offering a.
Intro to Silverlight Kevin Grossnicklaus. Introductions Kevin Grossnicklaus – SSE - ( ) Chief Architect Software.
September 15, 2015 Laszlo Overview. 2 Copyright (c) 2007 Laszlo Systems, Inc. Laszlo Systems: Leader in RIA Software Pioneer of Rich Internet Applications.
Silverlight Hitesh Trivedi Computer Science B.Tech A-Sec J.I.E.T.
ASP.NET Web Application and Development Digital Media Department Unit Credit Value : 4 Essential Learning time : 120 hours Digital.
CSCI 6962: Server-side Design and Programming Web Services.
11 Web Services. 22 Objectives You will be able to Say what a web service is. Write and deploy a simple web service. Test a simple web service. Write.
ColdFusion 9 and Flex 4: Application Development Ryan Stewart Platform Evangelist, Adobe Systems
McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. Programming with Visual Web Developer Chapter 9.
The Web Architecture and ASP.NET. Slide 2 Review of the Web (1) It began with HTTP and HTML, which delivers static Web pages to browsers which would render.
Silverlight Technology. Table of Contents 1.What is Silverlight Technology? 2.Silverlight Overview. 2.1 How it works 2.2 Silverlight development tools.
Cross Site Integration “mashups” cross site scripting.
Web Pages with Features. Features on Web Pages Interactive Pages –Shows current date, get server’s IP, interactive quizzes Processing Forms –Serach a.
The Microsoft Technical Roadshow 2007 Rich Client Development in XAML Mark Johnston Developer & Platform Group Microsoft Ltd
2006 Adobe Systems Incorporated. All Rights Reserved. 1 Adobe RIA Technologies: Adobe Flex 3 Cornel Creanga Platform Evangelist
1 Geospatial and Business Intelligence Jean-Sébastien Turcotte Executive VP San Francisco - April 2007 Streamlining web mapping applications.
Introducing ASP.NET 2.0. Internet Technologies WWW Architecture Web Server Client Server Request Response Network HTTP TCP/IP PC/Mac/Unix + Browser (IE,
Developing ASP.NET AJAX Controls with Silverlight Barry Gervin Microsoft Regional Director John Bristowe Developer Advisor, Microsoft.
Silverlight 2 Andrew Pardoe Program Manager CLR Execution Engine
Web Pages with Features. Features on Web Pages Interactive Pages –Shows current date, get server’s IP, interactive quizzes Processing Forms –Serach a.
Silverlight for Web Hosting Companies Michael S. Scherotter Microsoft Corporation
Building Excellent Internet & Intranet Solutions Dave Remmer Architect Advisor Microsoft Canada
Introduction to Flex 2 by Rich Tretola. About Me Rich Tretola is a senior software developer at Herff Jones, Inc. specializing in Rich Internet Applications.
Contents : What is Silverlight? Silverlight Overview Silverlight Toolkit Overview Timeline & Packaging Silverlight V1.0 & V1.1 Properties of V1.0 Properties.
Web Technologies Lecture 8 Server side web. Client Side vs. Server Side Web Client-side code executes on the end-user's computer, usually within a web.
 Web pages originally static  Page is delivered exactly as stored on server  Same information displayed for all users, from all contexts  Dynamic.
Unit-IV - Flash Player - Flex framework - MXML introduction - Action script introduction - Working with Action script - Flex data binding - Common UI components.
Microsoft’s Rich Web Technology XAML,WPF and WPF/E July, 2006 John Allwright.
Customizing Share Document Previews Will Abson Senior Integrations Engineer and Share Extras Project Lead
丁建文 國立高雄應用科大資管系副教授 兼任計網中心軟體發展組組長 跨平台行動應用軟體開發技術 : HTML5 & Mobile JavaScript Framework 暨南大學.
Introduction to Node.js® Jitendra Kumar Patel Saturday, January 31, 2015.
Technologies For Creating Rich Internet Applications Presenter's name
Introduction to Silverlight Development Pavel Yosifovich CTO, Matrix Global; Senior Instructor, Hi-Tech College
Windows Communication Foundation and Web Services
Introduction ITEC 420.
Introducing the Microsoft® .NET Framework
Objective % Select and utilize tools to design and develop websites.
Introduction to ArcGIS API for Microsoft Silverlight
WPF vs Silverlight.
Objective % Select and utilize tools to design and develop websites.
Introduction to Silverlight
.NET and .NET Core 7. XAML Pan Wuming 2017.
Silverlight Technology
WCF Data Services and Silverlight
Presentation transcript:

Rich Internet Applications 8. Other RIA technologies

Ajax applications The Ajax applications we have seen so far have essentially the following characteristics Client tier developed with JavaScript Ajax calls to services which return data as plain text/HTML/JSON/XML Services can be remote, e.g. REST APIs, or local data sources Client code depends on format of service data, not on server technology which produces it Web tier developed with.NET, Java, PHP, etc Rich Internet Applications8. Other RIA technologies #2

Why use an alternative approach? A. Need client tier to support functionality not available natively in browser, e.g. rich media B. Want integrated development environment with similar platform/language on client and web tiers C. Want to enhance client data access through closer coordination between client tier JavaScript and web tier objects Rich Internet Applications6. Ajax functionality #3

Browser plug-ins Browser becomes a host for another runtime platform – browser plug-in Client code does not rely on browser, so does not need to be JavaScript Client code can be developed using whatever languages/frameworks the plug-in supports Plug-in renders interface, does not need to be HTML-based Rich Internet Applications6. Ajax functionality #4

Adobe Flex Applications packaged as SWF documents for the Flash Player Can also create desktop applications and mobile applications, including for iOS, using Adobe AIR runtime Development languages are MXML (for markup) and ActionScript Development tool is FlashBuilder Rich Internet Applications6. Ajax functionality #5

JavaFX Applications can be packaged as Java applets Development language is JavaFX Script which compiles to Java bytecode RIAs and desktop applications Development tools include the JavaFX SDK and NetBeans Rich Internet Applications6. Ajax functionality #6

Silverlight Applications packaged as XAP files for the Silverlight player Development languages are XAML (for markup) and.NET languages such as C# and VB.NET XAML also used for desktop WPF applications Development tools include Visual Studio, Expression Blend Note that Adobe (Macromedia) coined the term RIA in 2002 Rich Internet Applications6. Ajax functionality #7

Comparison Rich Internet Applications6. Ajax functionality #8

Others OpenLaszlo ( Applications can be packaged as SWF files for Flash or as DHTML Canoo UltraLightClient ( Applications can be packaged as Java applets Curl ( Applications written in Curl language and packaged for Curl RTE platform etc... Rich Internet Applications6. Ajax functionality #9

Advantages Players can offer richer experience For example, Flash player has built-in support for audio, video streaming, animation, layers, transparency Built-in rich UI components and additional UI toolkits available Browser differences don’t matter Processing done by plug-in, not by browser Don’t need to test with different browser DOMs Debugging support in IDE Rich Internet Applications6. Ajax functionality #10

Disadvantages Need plug-in to be installed in user’s browser Potentially large downloads for plug-in and application Platform support may be limited e.g. Silverlight not officially available for Linux, although there is an open source implementation (Moonlight), Flash player not available in iOS Rich Internet Applications6. Ajax functionality #11

Silverlight and.NET Silverlight contains a subset of the.NET Framework Contains components and libraries, including: data integration extensible Windows controls networking base class libraries garbage collection the common language runtime (CLR) Rich Internet Applications6. Ajax functionality #12

Silverlight highlights Audio/video Rich media was a key motivation for development of Silverlight Video formats: WMV, H.264 (MP4), VC1 Audio formats: WMA, AAC, MP3 Local storage Uses isolated storage similar to the full.NET framework Filespace within sandbox, accessed through.NET file I/O classes Rich Internet Applications6. Ajax functionality #13

Silverlight highlights Out-of-browser support Can build OOB application which allows elevated privileges compared to in-browser app, including local filesystem access Animation Drag and drop Users can drag files from My Documents folder to a Silverlight app Clipboard access Deep Zoom graphics Rich Internet Applications6. Ajax functionality #14

Silverlight applications Silverlight client project XAML and code-behind files Web project which hosts Silverlight app in web page Client app copied as.xap file to ClientBin folder Silverlight.js and test pages contain code to embed app as an object in page Rich Internet Applications6. Ajax functionality #15

XAML Markup to define UI elements and layout Databinding can bind control properties to each other or to data Rich Internet Applications6. Ajax functionality #16 <UserControl x:Class="SilverlightApplication1.MainPage" … d:DesignHeight="300" d:DesignWidth="400"> <TextBlock Text="{Binding ElementName=txtInput, Path=Text}" />

Code behind Similar to code-behind in Web Forms Written in C#, VB Event handlers, etc. Avoid putting business logic in here Should use MVVM pattern to structure application Rich Internet Applications6. Ajax functionality #17

Building applications Implement navigation using Frame and Page controls The frame acts as a container for page controls, and facilitates navigation to pages. Change the page that is displayed within the frame by navigating, either programmatically or through user action, to a new page. Root can contain a combination of navigable content plus permanent user-interface (UI) components Rich Internet Applications6. Ajax functionality #18

URI mapping Within a frame, you can specify that a certain URI pattern maps to a particular page URI mapping enables you to create URIs that are descriptive of the user action For example, you can specify that any request for /Home is actually a request for the file at /Views/Home.xaml Any request that does not match one of the defined patterns is handled as a regular URI request and is not mapped Rich Internet Applications6. Ajax functionality #19

Client-server communication Access services from Silverlight code in much the same way as from C# code on server Can add service reference in Silverlight project Remember that Silverlight code is running on client tier and cross-domain restrictions apply Rich Internet Applications6. Ajax functionality #20

WCF RIA Services Rich Internet Applications6. Ajax functionality #21

WCF RIA services Provides closer coordination between client tier and web tier Web tier includes Domain Service Simple to build a Domain Service class as a wrapper round an EF context, but can use other underlying data sources Domain Service exposes IQueryable collections of entities Can shape and filter underlying data within service Rich Internet Applications6. Ajax functionality #22

WCF RIA Services Client tier code generated automatically Includes client-side context which is a proxy to domain service Can query context as if directly accessing underlying context on web tier Client context and domain service coordinate communication Underlying mechanism is HTTP and binary Xml data format application/msbin1 Rich Internet Applications6. Ajax functionality #23

Silverlight Business Application Silverlight Business Application template is installed with WCF RIA Services Basic app has navigation and predefined application structure In client code behind, add using statement to import web app namespace and build application Hidden Generated Code folder created See demo code Rich Internet Applications6. Ajax functionality #24

Using Silverlight A. Need client tier to support functionality not available natively in browser, e.g. rich media B. Want integrated development environment with similar platform/language on client and web tiers C. Want to enhance client data access through closer coordination between client tier JavaScript and web tier objects Rich Internet Applications6. Ajax functionality #25

Should I use Silverlight? Good for rich media applications Good for complex Line-of-business (LOB) apps Many limitations in native browser capabilities addressed to some extent in HTML 5 Not common in public web applications, users may not have player installed Microsoft’s continued support and development is uncertain Similar story for Flex, JavaFX Rich Internet Applications6. Ajax functionality #26

Google Web Toolkit Allows you to write your AJAX front-end in Java GWT then cross-compiles into optimized JavaScript to be deployed on web site Can develop and debug in the same development environment Claims to produce JavaScript that loads and executes faster than equivalent handwritten JavaScript Client-server communication via RPC Rich Internet Applications6. Ajax functionality #27

Using GWT A. Need client tier to support functionality not available natively in browser, e.g. rich media B. Want integrated development environment with similar platform/language on client and web tiers C. Want to enhance client data access through closer coordination between client tier JavaScript and web tier objects Rich Internet Applications6. Ajax functionality #28

Web remoting Uses client-side libraries which abstract details of Ajax calls and integrate with a specific server-side technology Client code written as though it directly calls server side code Rich Internet Applications6. Ajax functionality #29

Web remoting Client side code written in JavaScript Uses client-side libraries integrate with a specific server-side technology Create client-side proxy classes to make calls to server side objects Similar to RPC web service call, except not intended for public web services Unlike SOAP services, don’t use WSDL to advertise methods Rich Internet Applications6. Ajax functionality #30

DWR and WebORB Direct Web Remoting (DWR) JavaScript on client Java on server WebORB JavaScript, Flash, Flex on client Java,.NET, PHP, Ruby on Rails, web services on server side Rich Internet Applications8. Other RIA technologies #31

DWR The diagram shows how DWR can alter the contents of a selection list as a result of some Javascript event Rich Internet Applications8. Other RIA technologies #32

DWR example - server Rich Internet Applications8. Other RIA technologies #33 Example from server method is Demo.sayHello which returns a string server method is Demo.sayHello which returns a string server configuration file causes JavaScript proxy class to be created server configuration file causes JavaScript proxy class to be created

DWR example - client Rich Internet Applications8. Other RIA technologies #34 call server method – actually calls method of JavaScript proxy class Demo.js, proxy and DWR engine handle transport of data in both directions call server method – actually calls method of JavaScript proxy class Demo.js, proxy and DWR engine handle transport of data in both directions callback function declared inline in this example callback function declared inline in this example

Using web remoting A. Need client tier to support functionality not available natively in browser, e.g. rich media B. Want integrated development environment with similar platform/language on client and web tiers C. Want to enhance client data access through closer coordination between client tier JavaScript and web tier objects Rich Internet Applications6. Ajax functionality #35

Upshot.js Rebranded RIA/JS - WCF RIA Services for jQuery clients Part of Single Page Application project in MVC4 Domain Service role taken by Controller which derives from DbDataController Client JavaScript code uses upshot.RemoteDataSource object Rich Internet Applications6. Ajax functionality #36

Upshot.js Example of a view model (see BigShelf demo): Controller metadata fed into client on server by Html helper before view is rendered to browser Rich Internet Applications6. Ajax functionality #37 ())); BigShelf.CatalogViewModel = function (options) { var self = this; var pageSize = 6; var booksDataSourceParameters = {}; var booksDataSource = new upshot.RemoteDataSource({ providerParameters: { url: options.serviceUrl, operationName: "GetBooksForSearch", operationParameters: booksDataSourceParameters }, mapping: function (data) { return new BigShelf.Book(data, self.flaggedBooks) }, entityType: BigShelf.Book.Type });

Upshot.js Analogous to WCF RIA Services in Silverlight Can apply sorting, filtering, etc. from client code Can track changes and do batched editing to reduce network calls to server Looks like a powerful example of the web remoting approach Rich Internet Applications6. Ajax functionality #38

Demo Single-Page-d6d7172c Single-Page-d6d7172c Rich Internet Applications6. Ajax functionality #39

What’s next? A look at HTML 5 and what it offers for RIAs Rich Internet Applications6. Ajax functionality #40