Search

Building Rich Internet Applications With A Direct Ria Solution

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Hi, My name is robbie cheng. I am technology evangelist of the ZK framework. [break] Today, I am going to give to a brief introduction of the Direct RIA solution, and how it can help to create a rich internet application.

    Here is today’s agenda, in the beginning, I will talk about what’s the benefit of rich internet application. What are those difficulties of building it. [break] Then, I will introduce you the Direct RIA solution, and take ZK framework as an example. [break] And last, we will enter a brand new world with the help of Direct RIA solution.

    Due to the convenience of Internet, we can access the application anytime, anywhere, and any device.

    Here is another example. Ajax coming in and it is user friendly. The signup application give you real time response in this case whenever something wrong and the error message near by the field that cause the problem. You typing a login user name that is already used by someone else, and it responds immediately beside the field that causing the error. This is user friendly. [next]

    Google Maps was released in early 2005. It’s a benchmark of Ajax application. You can drag and move the map around naturally. It’s like to use desktop application while it’s a pure Web application. The most important thing regarding this is that: General users start to know that web applications can be made very user friendly. In the past, they are taught that web application is naturally by technology impossible to be made user friendly and they have to live with it if they want to do internet application. Now users will demand this kind of solution and you cannot say that is “impossible”. In fact, someone as old as I am with some experiences using the legacy web map service will appreciate this very much. The legacy map will “fresh” the whole page whenever you make a small move, zoom in, zoom out, etc. It was almost unusable.

    Internet gives us the ubiquitous connectivity but, at the same time, it is hard to use. [click][break] Here Ajax fits in. We not only stronger but also faster.

    As you might know that there are more than 2 hundred ria frameworks, it becomes more difficult to make a right decision. RIA represents rich internet application, it includes ajax, flex, and silverlight technologies. In these four categories, both snippet and widget frameworks emphasize on UI enhancement by introducing more animations, or off-the-shelf components. But what really matters to enterprise application is backend integration. Client framework only provides limited backend integration. The full framework is a complete solution, providing not only a rich widget set but also supporting data access and back-end service integration. It delivers a responsive user experience as well as enterprise values. If you’re going to enhance your existing web pages, you might choose snippet or widget frameworks. But, if you’re looking for a solution which provides not only the ui enhancement but also the backend integration. You should choose full framework. Actually, I wrote an article about how to choose an ria solution for ajaxworld magazine, you can refer to the following link. And remember this, right tool for the right job. One of its major benefits is that it usually introduces a simplified programming model without the baggage of client-side technologies. 

    Here is some ria frameworks classified in to four categories. For example, jQuery can be used for ui enhancement of existing web pages. Ext-JS is a widget library, but it doesn’t support backend integration. GWT is a java-to-javascript framework, and it provides limited server integration thru remote procedure call, but it only provides few widget set. ZK, Flex, and Silverlight are located in the full framework category. they are designed to create enterprise application, and which to choose depend on your server side technology, ZK for java, and Silverlight for .net.

    Let’s take a look at the problem of traditional programming model which is provided by many other RIA frameworks. As you can see, your application are running on two sides, the browser side, and the server side. Most ria frameworks only provide a widget set to enhance the ui, but the real problem for developers is how to exchange data between client and server, especially for enterprise applications. The procedure of exchanging data between client and server is complicated, and tedious. Moreover, here are more issues of the traditional programming model. two-sides programming Client knowledge Exchange data manually Security issue (your business logic are running on the client side which could be hacked) Maintenance issue (once your business logic is changed, you not only modify the server code, but also the client code) Enterprise RIA Issues

    Since enterprise application is already complex, which requires frequent data exchange between client and server. And, introducing RIA technology makes this problem even worse. Developers have to focus on the ria stuff instead of the application itself. Direct RIA aims at resolving this problem by providing a simple programming model which makes ria technology default enabled, and developers can focus on the application instead of ria stuff.

    Unlike most ria frameworks, direct ria simplifies the programming model by allowing the application running on the server side only, instead of two sides. Developers no longer to worry about the data exchange issue between client and server. Moreover, most issues of traditional programming model could be resolved at once since your application are no longer running on the client side. The ria technology is handled by zk automatically. it’s just like desktop programming, you don’t have to take care how the display card project your frontend.

    Unlike other ria frameworks which requires developer to access the UI thru asynchronous communication , ZK allows developers to access the ui directly. In the following example, we use Java 2D to draw a square, and put it into the image component directly.

    In addition to direct UI access, ZK allows developers to access data directly without asynchronous communicaiton, either. In the following example, we retrieve a user’s name from database, and put it into a label directly. It is such simple!

    In addition, to simply the problem of binding data and view, ZK provides Data Binding, and annotation that allows developers to associate each other with an intuitive way. ZK will automates the binding between view and model automatically. Developer simply tells zk their association using data-binding, and annotation.

    Your Name: <![CDATA[//@DECLARATION public void doClick(){ alert("Hello "+tb.getValue()); } ]>

    Please open your browser. My preference is Firefox. However, you can use Micorsoft Internet Explorer, Apple Safari, or Opera. ZK supports them all. Now in location box of your browser, type the URL shown on the slide. http://www.zkoss.org/zkdemo/userguide This is our Live Demo. The left hand side is the list of ZK supported components in different categories. The right hand side is the sample codes and view of the selected components. Now click on the title of the Source panel, you can see the source panel opened. Inside is the source codes as shown on the View panel. This is a really Live demo. You can try your codes in Source Panel and see the reflection in View Panel. A lot of ZK users use it to try out their codes or even use it as a quick prototyping tool. Later on, I will request you guys to install a ZK framework and deploy the ZK Demo to your local machine. So you can try it out directly on your computer. You can type codes here and press Try Me! Button to see the view of your source codes.

    With ZK’s markup and script language, developers can build the prototype of ui quickly. And script language supports real-time compilation so developer can modify the ui according to users’ requirement right the way to shorten the communication effort. And zk supports five script languages allows developer to use their preferred language.

    80 line

    2 Favorites

    Building Rich Internet Applications With A Direct Ria Solution - Presentation Transcript

    1. Robbie Cheng, Technology Evangelist, ZK Framework June 23, 2009 ZK Building Rich Internet Applications with a Direct RIA Solution
    2. Agenda
      • RIA: Promise and Challenge
      • Direct RIA - ZK: Simple and Rich
      • Brand New World
      • RIA: Promise and Challenge
      • Direct RIA - ZK: Simple and Rich
      • Brand New World
    4. The Internet is the Application EJB, BPM, MQ, Web Services, SAP R/3, Oracle 10 g , Notes
      • Any time
      • Any where
      • Any device
    5. Web applications are great in every measurement, except no user wants to use it.
    6. User Frustration Where are these fields? Where are what I entered?
    7. User Friendly Sign Up [source: remember the milk] Real Time Response
    8. Google Maps Drag and Move Around [Source: Google Maps]
    9. Why RIA?
      • Rich, engaging user experience
      • Cross platforms support
      • Minimize network traffic
    10. [Source: Forrester Resource] User Interface Evolution
    11. Complex Ajax Technology
      • Complex Technology Stack
        • JavaScript, CSS, XHTML, Document Object Model, XML
        • Browser incompatibility
      • Complicated Programming Model
        • XMLHttpRequest object for asynchronous communication
      • Less Secure
        • Plaintext JavaScript code
      • Less Maintainable
        • Client code and server code
      Challenges of Ajax Applications
    13. Why so complex? Windows Programming Client/Server Programming Web Programming Ajax Programming J2EE Programming
      • RIA: Promise and Challenge
      • Direct RIA: ZK – Simple and Rich
      • Brand New World
    15. RIA Categories
      • Reference
        • How to Choose an RIA Solution , AJAXWorld Magazine
      Enterprise Value Complexity
    16. RIA Frameworks
      • Snippet Framework
        •  Prototype,  Scriptaculous ,  jQuery
      • Widget Framework
        • Dojo,  Ext-JS ,  YUI
      • Client Framework
        • Flash ,  Java FX ,  GWT
      • Full Framework
        • ZK  ,  Richfaces , Flex,  Silverlight
    17. Typical Programming Model
      • Client Side Programming
      • Complicated Client and Server Communication
      • Danger of Exposure of Business Logic
      • Maintenance Headache
      Application Application Browser Server components Ajax engine
    18. What is Direct RIA
      • A technology to increase developer’s productivity by integrating frontend and backend of applications transparently to deliver rich, and engaging user experience.
    19. Direct RIA Programming Model
      • No Client Side Programming
      • No Complicated Client and Server Communication
      • No Danger of Exposure of Business Logic
      • No Maintenance Headache
      Browser Server components components ZK client engine ZK server engine Application
    20. Direct UI Access
      • No asynchronous communication
      • <zscript>
      • void draw(int x1, int y1, int x2, int y2) {
      • LiveImage li = new LiveImage(400, 300, LiveImage.TYPE_INT_RGB); Graphics2D g2d = li.createGraphics();
      • Line2D line = new Line2D.Double(x1, y1, x2, y2);
      • g2d.draw(line);
      • image .setContent(Images.encode(&quot;test.png&quot;, li));
      • }
      • </zscript>
      • <image id=&quot; image &quot;>
      • <button onClick='draw(10,10,10,10)'/>
    21. Direct Data Access (1)
      • No asynchronous communication, either
      • Hi. <label id=&quot; name &quot;/>
      • <button> <attribute name=&quot;onClick&quot;>
      • User usr = Database.getUserById(1);
      • name.setValue(usr.getName());
      • </attribute>
      • </button>
    22. Direct Data Access(2)
      • Data Binding and Annotation
      • <listbox rows=&quot;4&quot; model=&quot;@{persons}&quot; >
      • <listhead>
      • <listheader label=&quot;First Name&quot; width=&quot;100px&quot;/> <listheader label=&quot;Last Name&quot; width=&quot;100px&quot;/>
      • <listheader label=&quot;Full Name&quot; width=&quot;100px&quot;/>
      • </listhead>
      • <listitem self=&quot;@{each='person'}&quot; >
      • <listcell> <textbox value=&quot;@{person.firstName}&quot; /> </listcell> <listcell> <textbox value=&quot;@{person.lastName}&quot; /> </listcell> <listcell label=&quot;@{person.fullName}&quot; /> </listitem>
      • </listbox>
    23. What is ZK ?
      • Direct RIA solution
      • Open source
      • Pure Java
      • Event-driven , Component-based
      • Markup & Script Languages
      • Standards-based
        • XUL/XHTML
        • Java EE
      • Extensible
    24. ZK – First Touch
      • Only one file required.
    25. ZK Explorer
      • http://www.zkoss.org/zkdemo/userguide
    26. Rich Component Set Inputs Chart Checkbox & Radio Combobox Fileupload Window Menu & Toolbar Slider Captcha
    27. Rich Component Set (Cont. 1) Tabbox Grid & Listbox Tree Layouts
    28. Rich Component Set (Cont. 2) Google map FCKEditor Timeline
    29. Rich Component Set (Cont. 3) Spreadsheet
    30. Markup + Script Languages
      • Markup + Script Languages
      • <window id=&quot;win&quot; title=&quot;Script in Java&quot; width=&quot;100%&quot; border=&quot;normal&quot;>
      • <zscript language=&quot; java &quot;>
      • FCKeditor fck = new FCKeditor();
      • fck.setParent(win);
      • </zscript>
      • </window>
      • Various Script Languages Supported
        • Java
        • Groovy
        • Ruby
        • JavaScript
        • Python
    31. MVC (Model-View-Controller) Approach
      • ZUML as View
      • Java Code as Controller
    32. Pure Java Approach
    33. Event Driven
      • Component Events (name start with ‘on’)
        • onClick, onSelect, onChange, …
        • In ZMUL
        • In Java
      • Fire the Event
        • Events.post(“onClick”,target,data);
        • Events.send(“onClick”,target,data);
    34. [Example]Stock Watcher (ZUML)
    35.  
    36.  
    37. Server Push
      • Reverse-Ajax, Server send content to the client actively.
    38. Component Customization- Macro Component
      • Any ZUL page can become a Macro Component
    39.  
    40. Integrate with HTML
      • .zhtml
        • use namespace ‘ http://www.zkoss.org/2005/zul’ to mashup zul
    41. Integrate with JSP
      • Use tag lib: http://www.zkoss.org/jsp/zul
    42. ZK Mobile – Ubiquity Access
      • RIA: Promise and Challenge
      • Direct RIA - ZK: Simple and Rich
      • Brand New World
    44. Direct RIA = Simple + Rich EJB, BPM, MQ, Web Services, SAP R/3, Oracle 10 g , Notes
      • Any time
      • Any where
      • Any device
      • Rich
      • Responsive
      • Low cost
    45. Thank you! www.zkoss.org

    + Robbie ChengRobbie Cheng, 5 months ago

    custom

    585 views, 2 favs, 2 embeds more stats

    Building an enterprise application is never an easy more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 585
      • 583 on SlideShare
      • 2 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 4
    Most viewed embeds
    • 1 views on http://docs.huihoo.com
    • 1 views on http://www.huihoo.com

    more

    All embeds
    • 1 views on http://docs.huihoo.com
    • 1 views on http://www.huihoo.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved