RIA Frameworks Rich Internet Applications _RIA_ Framework

Document Sample
RIA Frameworks Rich Internet Applications _RIA_ Framework Powered By Docstoc
					                                                                                                                                             Rich Internet Applications (RIA)
RIA Frameworks
                                                                                                                                              New generation of web application
OpenLaszlo                                                                                                                                                  Rich & Responsive
                                                                                                                                                              - Rich UI Widgets & Interaction
Silverlight
                                                                                                                                                              - Multimedia support
Google Web Toolkit                                                                                                                                            - Client-side computation

                                                                                                                                              RIA framework
                                                                                                                                                            Supports the development of RIAs
                                                                                                                                                            Abstracts from underlying technologies




                                                                                                                             14 April 2011   14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich              2




Framework Architecture                                                                                                                       Client Runtimes
                                                                                                                                              Browser
                Design-Time                                                                                             Run-Time                            JavaScript and Ajax
                                                                                                                                                                                                                                                  Browser
                                                                                                                                                            DHTML
     Markup                   Scripting                                                                                 Runtime 1
    Language                  Language                                                                                                        Plug-ins
                                                                                                                                                            Silverlight
                                                                                                                                                            Flash Player                                                                           Plugin
                                                                                                                        Runtime 2
        Application Framework                                          Deployment
                                                                                                                                                            Java JVM (Applet)                                                                    Browser

                                                                                                                                              Standalone
                    Toolkit                                                                                             Runtime N                           Adobe AIR
                                                                                                                                                            Java Runtime Environment                                                          Standalone
                                                                                                                                                                                                                                                Runtime
                                                                                                                                                            XULRunner

14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                    3   14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich




OpenLaszlo                                                                                                                                   OpenLaszlo Architecture
 Open source platform for the development and delivery
      of rich internet applications                                                                                                                          Design-Time                                                                                             Run-Time
 OpenLaszlo Platform consists of
                                                                                                                                                          XML      LZX JavaScript
               LZX programming language
                 - Object-oriented markup language                                                                                                                                                                                                                    DHTML

                 - Programming model based on XML and JavaScript                                                                                    OpenLazslo Framework                                            compilation

               OpenLaszlo Server                                                                                                                                                                                                                                      Flash
                                                                                                                                                    Compiler             Unit Testing
                 - Java Servlet that compiles LZX applications
                                                                                                                                                                        Performance
                                                                                                                                                   Debugger
                                                                                                                                                                          profiler



14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                    5   14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich




                                                                                                                                                                                                                                                                                    1
  LXZ Programming Language                                                                                                 LZX Example

    Programming model based on XML & JavaScript
    Classes, attributes, methods
    Inheritance, Polymorphism and Encapsulation                                                                          <canvas width="600" height="300">
                                                                                                                              <window title="MyWindow" x="20" y="20" width="200" height="250">

    Events                                                                                                                                 <text>Hello World</text>
                                                                                                                                            <button x="95" y="180" >Press me!</button>
    Prototype-based development                                                                                              </window>
                                                                                                                          </canvas>
    Constraint-based layout
    Data binding mechanism                                                                                                 Canvas: Application container

   14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich    7      14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich    8




  Classes and Instances                                                                                                    Methods

                                                                                                                         <canvas width="600" height="300">
                                                                                                                            <class name="MyButton" extends="button" width="80">
<canvas width="600" height="300">                                                                                               <method name="changeLabel" args="text">
   <class name="MyButton” extends="button">                                                                                             this.setAttribute(‘text’, text);
       <attribute name="SomeAttr"/>                                                                                             </method>
       <method name="changeLabel">                                                                                          </class>
                some script                                                                                                 <window title="MyWindow" x="20" y="20" width="200" height="250" >
       </method>                                                                                                                <text>Hello World</text>
   </class>                                                                                                                     <MyButton name="MyButton" x="95" y="180"
   <window title="MyWindow" x="20" y="20" width="200" height="250">                                                                     onclick="this.changeLabel('clicked')">
       <text>Hello World</text>                                                                                                         Press Me!
       <MyButton x="95" y="180" >Press me!</MyButton>                                                                           </MyButton>
   </window>                                                                                                                </window>
</canvas>                                                                                                                </canvas>




   14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich    9      14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   10




  Events                                                                                                                   Events (2)
<canvas width="600" height="300">                                                                                        <canvas width="600" height="300">
   <class name="MyButton" extends="button" width="80">                                                                      <class name="MyButton" extends="button" width="80">
       <method name="changeLabel" args="text" >                                                                                 <event name="myEvent"/>
          this.setAttribute('text', text);                                                                                      <handler name="myEvent" args="myargs">
       </method>                                                                                                                        this.setAttribute('text', myargs);
       </class>                                                                                                                 </handler>
   <window title="MyWindow" x="20" y="20" width="200" height="250" >                                                        </class>
       <MyButton name="MyButton" x="95" y="180" onclick=                                                                    <window title=“Window" x="20" y="20" width="200" height="250">
       "this.parent.setAttribute('x', this.parent.x + 40);">                                                                    <text>Hello World</text>
               Press Me!                                                                                                        <MyButton name="MyButton" x="95" y="180"
       </MyButton>                                                                                                                      onclick="this.myEvent.sendEvent('clicked')">
   </window>                                                                                                                            Press Me!
</canvas>                                                                                                                       </MyButton>
                                                                                                                            </window>
                                                                                                                         </canvas>
 Implicit: Built-in and “on” events triggered upon state change                                                            Explicit: <event>, handler, sendEvent(): sendEvent is invoked upon
                                                                                                                           state change
   14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   11      14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   12




                                                                                                                                                                                                                                                         2
  Handlers                                                                                                                       Classes and Prototyping (1)
<canvas width="600" height="300">
   <class name="MyButton" extends="button" width="80">
                                                                                                                               <canvas width="600" height="300">
       <method name="changeLabel" args="text">
                                                                                                                                  <class name="MyButton" extends="button" width="80">
          this.setAttribute(‘text’, text);
                                                                                                                                      <method name="changeLabel" args="text">
       </method>
                                                                                                                                              this.setAttribute('text', text);
   </class>
                                                                                                                                      </method>
   <window title="MyWindow" x="20" y="20" width="200" height="250" >
                                                                                                                                  </class>
       <text>Hello World</text>
                                                                                                                                  <window title="MyWindow" x="20" y="20" width="200" height="250">
       <MyButton name="MyButton" x="95" y="180">
                                                                                                                                      <MyButton x="20" y="180" width="80">Cancel</MyButton>
          Press Me!
                                                                                                                                      <MyButton x="90" y="180" width="80"
          <handler name="onclick">
                                                                                                                                         onclick="this.changeLabel('Thank You!')">
               this.setAttribute('text', "clicked");
                                                                                                                                         Submit
          </handler>
                                                                                                                                      </MyButton>
       </MyButton>
                                                                                                                                  </window>
   </window>
                                                                                                                               </canvas>
</canvas>

  Handler can be defined for events on the class level or for a specific
    element                                                                                                               13

   14 April 2011         Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich           14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   14




  Classes and Prototyping (2)                                                                                                    Layout

<canvas width="600" height="300">
   <class name="MyButton" extends="button" width="80">
       <method name="changeLabel" args="text">
               this.setAttribute('text', text);
       </method>                                                                                                                   Components
   </class>
   <class name ="MyWindow" extends="window" width="200" height="250">                                                              Layouts
       <MyButton x="20" y="180" width="80">Cancel</MyButton>
       <MyButton x="90" y="180" width="80"
       onclick="this.changeLabel('Thank You!')">                                                                                   Constrained-based layout
       Submit
                                                                                                                               <canvas>
       </MyButton>
                                                                                                                                  <window title="MyWindow" width="200" height="250" resizable="true">
   </class>
                                                                                                                                      <button width="${this.parent.width/2}" onclick="some
   <MyWindow x="20" y="20"/>
                                                                                                                                      action">Click Me</button>
</canvas>
                                                                                                                                  </window>
                                                                                                                               </canvas>

   14 April 2011         Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   15      14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   16




  Data Binding                                                                                                                   Static Data Binding

                                                                                                                               <canvas height="100" width="100">
   <dataset>: refers to XML data set                                                                                             <dataset name="myData">
                                                                                                                                       <persons>
                  Static: embedded, included                                                                                             <person>
                                                                                                                                              <firstName>Marge</firstName>
                  Dynamic: over HTTP                                                                                                         <lastName>Simpson</lastName>
                                                                                                                                          </person>
   <datapath> binds data to nodes                                                                                                            ...
                                                                                                                                       </persons>
   XPath subset to access data                                                                                                   </dataset>
                                                                                                                                  <window name="data window" datapath="myData:/persons">
                                                                                                                                       <simplelayout axis="y"/>
                                                                                                                                       <text datapath="person/firstName/text()"/>
                                                                                                                                  </window >
                                                                                                                               </canvas>

                                                                                                                                    Xpath queries evaluated in the context of the parent node
   14 April 2011         Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   17      14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   18




                                                                                                                                                                                                                                                        3
  Dynamic Data Binding                                                                                                          Media Resources

<canvas width="600" height="500">
  <dataset name="menu" src="http://www.w3schools.com/xml/simple.xml"/>                                                           design-time vs. run-time inclusion
  <window name="Mywindow" title="Breakfast Menu" x="${button.width}"
       width="200" height="200">                                                                                                 JPG, PGN, GIF, MP3, SWF
             <button name="button" onclick="canvas.menu.doRequest()">
                                      Get Menu
                                                                                                                              <canvas height="600" width="200">
             </button>                                                                                                           <window title="MyWindow" width= "200" height="200">
             <view datapath="menu:/breakfast_menu">                                                                                  <resource name="myPic" src="../resources/myPic.gif"/>
                                                                                                                                     <view resource="myPic"/>
                       <simplelayout axis="y"/>
                                                                                                                                     </window>
                       <text datapath="food/name/text()"/>                                                                       <window title="MySecondWindow" width="500" height="450“>
             </view>                                                                                                                 <view resource=
                                                                                                                                     "http://www.globis.ethz.ch/people/aldespin/index.jpg/image"/>
  </window>                                                                                                                      </window>
</canvas>                                                                                                                     </canvas>

   14 April 2011        Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   19     14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   20




  Animations                                                                                                                    Comments to OpenLaszlo

                                                                                                                                 Focus is on the client side interaction
    <animator> and <animatorgroup>                                                                                                            Assumes data available as XML documents
                                                                                                                                               No support for developing the services that supply that data in
<canvas>
   <window width="200" height="300“ onclick="this.myAnimator.doStart()">                                                                        terms of
       <animatorgroup name="myAnimator" start="false"
                                                                                                                                                 - Data management on the server side
               process="sequential">
          <animator attribute="x" to="400" duration="1000"/>                                                                                     - Handling and processing of requests
          <animator attribute="height" to="50" duration="1000"/>
       </animatorgroup>                                                                                                                          - Application logic
       <text>hello animated world</text>
   </window>
</canvas>




   14 April 2011        Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   21     14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   22




  OpenLaszlo Documentation                                                                                                      Silverlight
                                                                                                                                 Silverlight is Microsoft’s answer to the growing market of
                                                                                                                                      rich internet applications
    See http://www.openlaszlo.org for general information as
         well as tutorials
                                                                                                                                 Provides only a client runtime, no server-side
    OpenLaszlo White Paper:                                                                                                          components are part of Silverlight
         http://www.openlaszlo.org/whitepaper/LaszloWhitePaper.pdf                                                               Similar to Flash/Flex from Adobe
    Note that examples in this lecture are based on the                                                                         Focuses heavily on multimedia (H.264, streaming, DRM)
         documentation                                                                                                                and interaction (web cams, microphones, touch)



   14 April 2011        Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   23     14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   24




                                                                                                                                                                                                                                                              4
Silverlight Architecture                                                                                                                  Silverlight Architecture

                Design-Time                                                                                              Run-Time          Clear separation of concerns:
                                                                                                                                                         User interfaces are described
                               Any .NET                                                                                  Web Browser
         XAML                                                                                                                                             with an XML dialect, the
                               Language                                                                                    Plugin                         Extensible Application Markup
                                                                                                                                                          Language (XAML)
                Core Presentation                                                                                         Windows
                                                                        Deployment                                                                       Application logic can be written
                   Framework                                                                                              Phone 7
                                                                                                                                                          in any .NET language
                                                                                                                           Sidebar
             .NET Framework for
                                                                                                                           Gadgets
                 Silverlight




14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich               25   14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   26




.NET for Silverlight                                                                                                                      Separation of concerns: XAML

 Subset of the Windows Presentation Foundation (WPF)                                                                                      Declarative language to describe the User Interface
                                                                                                                                                  <Grid x:Name="LayoutRoot" Background="White">
               Supports databinding, templates, skinnable UI controls,
                                                                                                                                                      <Button Width="60" Height="30">Click Me</Button>
                animations                                                                                                                        </Grid>
               Multi-touch support, right-click in the browser, mouse wheel
                                                                                                                                           Property values
 Language Integrated Query (LINQ)                                                                                                                       Attribute syntax
                                                                                                                                                  <Rectangle Width="200" Height="100" Fill="Red"/>
 Access to various web sources via Windows
      Communication Foundation (WCF) classes                                                                                                             Property element syntax
               Different protocols: HTTP, REST, SOAP web services                                                                                <Rectangle Width="200" Height="100" >
                                                                                                                                                      <Rectangle.Fill>
               Different formats: Atom, JSON, XML                                                                                                        <SolidColorBrush Color="Red" />
                                                                                                                                                      </Rectangle.Fill>
                                                                                                                                                  </Rectangle>

14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich               27   14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   28




Separation of concerns: XAML                                                                                                              Separation of concerns: Code-behind
 Hierarchical layout model (Visual Tree): Visual elements                                                                                 Each XAML file is backed by a code-behind file which
      can have several children but only one parent                                                                                             contains the application logic
<Grid x:Name="LayoutRoot" Background="White">                                                                                                    public partial class MainPage : UserControl
                                                                                                                                                     {
    <StackPanel Name="stackPanel">                                                                                                                       public MainPage()
        <Button Width="60" Height="30">Button One</Button>                                                                                               {
        <Button Width="60" Height="30">Button Two</Button>                                                                                                   InitializeComponent();
        <Button Width="60" Height="30">Button Three</Button>                                                                                             }
    </StackPanel>                                                                                                                                             private void MyClickHandler(object sender, RoutedEventArgs e)
</Grid>                                                                                                                                                       {
                                                                                                                                                                  MyButton.Content = "Button Clicked";

 Event handlers and triggers point to code-behind file                                                                                                   }
                                                                                                                                                              }


<Button Width="100" Height="30“                                                                                                            Written in any .NET language (C# in this example)
        Click="MyClickHandler" Name="MyButton">Click Me</Button>
                                                                                                                                           Elements in the XAML can be referenced by name
14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich               29   14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   30




                                                                                                                                                                                                                                                                         5
Data Binding                                                                                                                                 Data Binding Example
                                                                                                                                                             MainPage.xaml (XAML File)                                                     Student.cs (C# Class File)

 Binding Expressions in XAML:                                                                                                                <Grid x:Name="LayoutRoot"                                                public class Student
                                                                                                                                              Background="White">                                                          {
   {Binding <PropertyPath>, <One or More Binding Properties>}                                                                                     <TextBox VerticalAlignment="Top"                                             public string Name { get; set; }
                                                                                                                                                         IsReadOnly="True"                                                     public int Number { get; set; }
                                                                                                                                                         Margin="5"
 Binding expressions are evaluated against a data context. The data                                                                                     TextWrapping="Wrap"                                                        public override string ToString()
                                                                                                                                                         Height="50" Width="200"                                                    {
      context is a property of all XAML elements and, if set, should point to                                                                            Text="{Binding}"                                                               return Name + " (" + Number + ")";
      the data model (i.e. an instance of a model class).                                                                                     </Grid>
                                                                                                                                                         Name="myTextBox"/>
                                                                                                                                                                                                                             }
                                                                                                                                                                                                                                    }


 Element-to-Element binding
                                                                                                                                              Bind text property of TextBox to                                         Model class with overridden
   <StackPanel>
       <Slider Name="mySlider" Minimum="0" Maximum="100" Value="50"/>                                                                         the model instance of the (implicit)                                     ToString() method
       <TextBox Name="myTextbox"                                                                                                              data context
                 Text="{Binding Value, ElementName=mySlider, Mode=TwoWay}"/>
   </StackPanel>
                                                                                                                                                                                          MainPage.xaml.cs (C# Code-behind File)
                                                                                                                                              // Sets the data context of my text box to a newly created Student instance
                                                                                                                                              myTextBox.DataContext = new Student { Name = "Matthias", Number = 34235};
 Many additional binding properties available such as Value
      Converters, Fallback Value, Data Source etc.

14 April 2011      Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                       31   14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich    32




Data Templates                                                                                                                               Out-of-browser experience
 But what if we want to have the same visual appearance for multiple                                                                         Allows users to install Silverlight applications locally
      data objects? Data templates allow you to describe the visual                                                                           Trusted applications can read and write files to My Documents, My
      structure of a data object.                                                                                                                  Pictures…
<Grid x:Name="LayoutRoot" Background="White">
  <TextBox Name="myTextBox" …/>
                                                                                                                                              Automated update mechanism
  <ListBox Name="myListBox“ ItemsSource="{Binding}">
      <ListBox.ItemTemplate>                                                                                                                  The same application can run within and outside of a browser and adapt
          <DataTemplate>                                                                                                                           accordingly
              <TextBlock Text="{Binding Name}"></TextBlock>
          </DataTemplate>
      </ListBox.ItemTemplate>
  </ListBox>
</Grid>


// Sets the data context of my list box to a list of students
var Students = new List<Student> {
  new Student { Name = "Matthias", Number = 34235},
  new Student { Name = "Michael", Number = 65781},
  new Student { Name = "Stefania", Number = 12368}                                                                  Final Application
};
myListBox.DataContext = Students;                                                                                                                                Out-of-browser
14 April 2011      Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                       33   14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich    34




Deployment                                                                                                                                   Tools: Visual Studio 2010
 Silverlight applications are compiled to managed code
      and packaged as .xap archives
 The .xap package contains the application and entry
      point for the Silverlight plug-in control to run.
 Final .xap packages can be embedded in any HTML
      website with the object HTML element




14 April 2011      Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                       35   14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich    36




                                                                                                                                                                                                                                                                             6
Features not covered                                                                                                                     Remarks on Silverlight

 Skinnable UI controls, customisation of any existing UI                                                                                 Not a pure RIA framework but rather another member of
      control, user-defined controls                                                                                                           the .NET family
 Reusable resources (templates, styles, controls etc.)                                                                                                 Leverages the capabilities of the .NET platform and its main
                                                                                                                                                         languages C# and VB.net
 Advanced graphical effects (Animations, 3D, Deep
                                                                                                                                                        Almost all technologies and features you use in Silverlight are
      Zoom, High-Level Shader Language)                                                                                                                  also available for desktop applications
 Asynchronous programming, worker threads
 HTML  Managed Code interaction                                                                                                         Particularly suited to create visually appealing and media
 Isolated storage                                                                                                                             intensive internet applications
                                                                                                                                          If you are already familiar with any .Net language, there
                                                                                                                                               is no need to learn a new programming language
14 April 2011        Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                 37   14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   38




Further Resources                                                                                                                        Google Web Toolkit (GWT)

 Getting started with Silverlight (Installation & Tutorials):                                                                            Using the Google Web Toolkit (GWT /ˈɡwɪt/),
      http://www.silverlight.net/getstarted/                                                                                                   developers can rapidly develop and debug AJAX
                                                                                                                                               applications in the Java language using the Java
                                                                                                                                               development tools of their choice.
 Explore specific techniques with QuickStarts (Small
      tutorials that focus only on a particular topic):
      http://www.silverlight.net/learn/quickstarts/                                                                                       When the application is deployed, the GWT cross-
                                                                                                                                               compiler translates the Java application to standalone
                                                                                                                                               JavaScript files that are optionally obfuscated and deeply
 Learn more about high-level concepts in Silverlight:                                                                                         optimized.
      http://www.silverlight.net/learn/whitepapers/


14 April 2011        Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                 39   14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   40




GWT Architecture                                                                                                                         GWT Components

                                                                                                                                          Java-to-JavaScript Compiler
                Design-Time                                                                                           Run-Time            JRE emulation library
                                                                                                                                                        i.e. subset of common java packages translated to JavaScript
                    JavaScript
         HTMLJava Code
                                                                                                                      Client-side         Web UI class library
                                                                                                                      JavaScript
                                                                                                                                                        i.e. Java classes for advanced controls like drop-down menus, tab
            Google Web Toolkit                                       compilation
                                                                                                                                                         panels, tree views, rich text areas, etc.
                                                                                                                      Server-side
                                                                                                                         Java             GWT Designer
         Java Development Kit
                                                                                                                                          Many open-source GWT-based extension libraries exist
                                                                                                                                                        e.g. Smart GWT, Ext GWT, etc.


14 April 2011        Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich                 41   14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   42




                                                                                                                                                                                                                                                                       7
GWT Features                                                                                                                         GWT Greetings Application

 Development mode with GWT developer browser-plugin
               Supports browser-based debugging and hot swapping of Java
                code
 Abstractions for asynchronous communication
               JSON-based or using GWT-RPC
 Browser history management & support for bookmarking


 Cross-browser portability


14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich         43   14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   44




Greetings Architecture                                                                                                               Greetings Host Page

                Client                                                                                      Server

                                                    First HTTP request                                 1
                                                                                                             Greetings.html

                                    2                                                                  4
                                                 Further AJAX requests                                        Greetings
            Greetings
                                                                                                               Service
           Entry Point
              JavaScript                                                                                    Implementation
                Engine                                     Greetings 3
        JavaScript Engine                               Service Interface                                                 JVM

                Web Browser                                                                                     Web Server


14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich         45   14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   46




Greetings Entry Point                                                                                                                Greetings Entry Point (2)




14 April 2011            Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich         47   14 April 2011   Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   48




                                                                                                                                                                                                                                                           8
Greetings Service Intf.                                                                                                      Greetings Service Impl.




14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   49   14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   50




Deployment                                                                                                                   GWT Designer

 Deployment options depend on used GWT features


 Purely JSON-based communication
               Only requires web resources and compiled JavaScript
 GWT-RPC communication
               Requires the GWT Servlet



 Alternative: Google App Engine
               Using Google’s infrastructure

14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   51   14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   52




GWT Showcase Application                                                                                                     Helpful links and resources
                                                                                                                              Download GWT from
                                                                                                                                            http://code.google.com/webtoolkit/download.html
                                                                                                                              Find the GWT Showcase and other examples at
                                                                                                                                            http://code.google.com/webtoolkit/examples/
                                                                                                                              Helpful tutorials are available from
                                                                                                                                            http://code.google.com/webtoolkit/doc/latest/tutorial/
                                                                                                                              Books about GWT
                                                                                                                                            http://code.google.com/webtoolkit/books.html



14 April 2011          Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   53   14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   54




                                                                                                                                                                                                                                                           9
GWT Conclusions                                                                                                                          Exercise 6: RIA frameworks

 GWT is an extensible RIA toolkit                                                                                                        Create a RIA using one of the presented frameworks
                                                                                                                                                        Open Laszlo / Silverlight / Google Web Toolkit
 Enables complex browser-based web applications to be                                                                                    Exploit features of the framework to create a client for
      implemented and debugged in Java                                                                                                                  Twitter / Flickr
               Java code gets translated to client-side JavaScript
                                                                                                                                          Two steps are important for this exercise
               Follows a strict Client/Server model with powerful abstractions
                                                                                                                                                        Requirements analysis for choosing the framework
                for asynchronous communication
                                                                                                                                                        Implementation building on suitable features of the framework
                                                                                                                                          Presentations due 5 May 2011
 Popular GWT-based web applications
                                                                                                                                                        Mention at least two positive and two negative aspects of your
               Google Wave, Google Moderator & Orkut                                                                                                    development experience using the framework for this application
14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich             55    14 April 2011           Stefania Leone, Michael Nebeling, Matthias Geel / Institute of Information Systems, ETH Zurich   56




Next Week

Model-Driven Approaches to Web Engineering

WebML




                                                                                                                         14 April 2011




                                                                                                                                                                                                                                                                       10

				
DOCUMENT INFO
Shared By:
Tags: openlaszlo
Stats:
views:14
posted:7/26/2011
language:Malay
pages:10
Description: openlaszlo is a rich client development technology, which combines the C / S client's power and B / S structure of the cost-efficiency advantages. openlaszlo application development using XML-based LZX language, it can be compiled into DHMTL, SWF format.