EGL-RichUI-Sales-Training.ppt

  • 2,648 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,648
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
37
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • The term “Web 2.0” has been around for about 5 years now.
  • www.facebook.com www.digg.com www.yelp.com www.twitter.com
  • http://www.adobe.com/resources/business/rich_internet_apps/examples/ http://www.visualthesaurus.com/index.jsp http://www.smartmoney.com/map-of-the-market/ http://www.visokio.com/demos/camerafinder
  • Rich UI has also been used to generate Java/SWT bindings, hence the reason for swaying from the traditional name of RIA.
  • There exists JavaScript that can run on the server (server-side scripting), this however is not very common.
  • http://silverlight.net/
  • http://silverlight.net/
  • http://silverlight.net/
  • You’ll soon find out that Rich UI is much more Agile* than EGL JSF. Agile - quick and well-coordinated in movement source: www.dictionary.com
  • So what types of widgets can I use when programming in Rich UI? The answer to this question is: very, very, very many Rich UI comes ships with a wide range of widgets, but also has the ability to pull in widgets from other technologies like DOJO and Silverlight. And last but not least, developers can create custom widgets using EGL Rich UI! The list of supported widgets shipped with EGL is best found through Content Assist , but here are a few (remember all are created by simply creating an EGL variable of RUIHandler type RUIWidget type): Combo Boxes Radio Buttons Check Boxes Image Fields Single and Multi Selection List Boxes Tree Grid All the common required components for web page development
  • Opacity - http://www.w3.org/TR/css3-color/#transparency
  • You’ll soon find out that Rich UI is much more Agile* than EGL JSF. Agile - quick and well-coordinated in movement source: www.dictionary.com
  • package mySamples; // RUI Handler // // handler sample1 type RUIhandler{initialUI =[Box], onConstructionFunction = initialization} Button com.ibm.egl.rui.widgets.Button{text = "Button", onClick ::= populateFields}; myFirstTextField com.ibm.egl.rui.widgets.TextField{}; myFirstTextLabel com.ibm.egl.rui.widgets.TextLabel{text = "Hello World "}; Box com.ibm.egl.rui.widgets.Box{padding = 8, columns = 1, children =[myFirstTextLabel, myFirstTextField, Button], color = "Brown", backgroundColor = "BlanchedAlmond", width = "200", height = "100"}; function initialization() //You could put any business logic in here, that you'd need //executed, prior to the web application's rendering in the browser end function populateFields(event Event in) //run this function "on click" myFirstTextField.text = "EGL Rocks"; end function populateField2(event Event in) end end
  • package mySamples; // RUI Handler // // handler sample1 type RUIhandler{initialUI =[Box], onConstructionFunction = initialization} Button com.ibm.egl.rui.widgets.Button{text = "Button", onClick ::= populateFields}; myFirstTextField com.ibm.egl.rui.widgets.TextField{}; myFirstTextLabel com.ibm.egl.rui.widgets.TextLabel{text = "Hello World "}; Box com.ibm.egl.rui.widgets.Box{padding = 8, columns = 1, children =[myFirstTextLabel, myFirstTextField, Button], color = "Brown", backgroundColor = "BlanchedAlmond", width = "200", height = "100"}; function initialization() //You could put any business logic in here, that you'd need //executed, prior to the web application's rendering in the browser end function populateFields(event Event in) //run this function "on click" myFirstTextField.text = "EGL Rocks"; end function populateField2(event Event in) end end
  • package converter; import com.ibm.egl.rui.widgets.Box; import egl.ui.columns; import egl.ui.rui.Event; handler RUIconverter type RUIhandler{initialUI =[Box, buttonBox ], onConstructionFunction = initialization} ButtonF com.ibm.egl.rui.widgets.Button{text = "Convert Fahrenheit to Celsius", onClick ::= ConvertFahrToCel}; ButtonC com.ibm.egl.rui.widgets.Button{text = "Convert Fahrenheit to Celsius", onClick ::= ConvertCelToFahr}; CelValue com.ibm.egl.rui.widgets.TextField{text = 0}; TextLabel1 com.ibm.egl.rui.widgets.TextLabel{text = "Celsius: "}; FahrValue com.ibm.egl.rui.widgets.TextField{}; TextLabel com.ibm.egl.rui.widgets.TextLabel{text = "Fahrenheit:"}; Box com.ibm.egl.rui.widgets.Box{padding = 8, columns = 2, children =[ TextLabel, FahrValue, TextLabel1, CelValue]}; ButtonBox box{columns = 2, children =[ButtonF, ButtonC]}; function initialization() end function ConvertFahrToCel(event Event in ) CelValue.text =(5 / 9) *(fahrValue.text as int - 32); end function ConvertCelToFahr(event Event in ) FahrValue.text =(9 / 5) *(celValue.text as int ) + 32; end end
  • package businessApp; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.color; import egl.ui.rui.Event; handler loginPage type RUIhandler{initialUI =[Box], onConstructionFunction = initialization} PasswordTextField com.ibm.egl.rui.widgets.PasswordTextField{}; Button com.ibm.egl.rui.widgets.Button{text = "Login", fontWeight = "bold", onClick ::= checkFields}; TextLabelPassword com.ibm.egl.rui.widgets.TextLabel{text = "PassWord:", paddingRight = 4}; TextFieldUI com.ibm.egl.rui.widgets.TextField{}; TextLabelID com.ibm.egl.rui.widgets.TextLabel{text = "User ID:", padding = 0, paddingRight = 0}; Box1 com.ibm.egl.rui.widgets.Box{columns = 1, padding = 8, backgroundColor = "Beige", width = "333", height = "222", children =[box2, box3], borderColor = "CadetBlue", borderWidth = 9, borderStyle = "groove", borderLeftStyle = "groove", borderRightStyle = "groove", borderTopStyle = "groove", borderBottomStyle = "groove"}; Box com.ibm.egl.rui.widgets.Box{padding = 8, backgroundColor = "BlanchedAlmond", children =[Box1], font = "Verdana", fontSize = "8pt", fontWeight = "bold"}; msg html{backgroundColor = "black", color = "yellow"}; box3 box{children =[msg]}; placeHolder TextLabel{}; box2 box{columns = 2, children =[TextLabelID, TextFieldUI, TextLabelPassword, PasswordTextField, Button, placeHolder ]}; function initialization() end //end function function checkFields(event Event in) if(TextFieldUI.text == "scott" and PassWordTextField.text == "egl") msg.text = "You are like....... so logged in!"; else msg.text = "Invalid UID/PWD. <br>Press any key... no, no, no, NOT THAT ONE!"; end end //end function end //end RUIHandler
  • package businessApp; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.color; import egl.ui.rui.Event; handler loginPage type RUIhandler{initialUI =[Box], onConstructionFunction = initialization} PasswordTextField com.ibm.egl.rui.widgets.PasswordTextField{}; Button com.ibm.egl.rui.widgets.Button{text = "Login", fontWeight = "bold", onClick ::= checkFields}; TextLabelPassword com.ibm.egl.rui.widgets.TextLabel{text = "PassWord:", paddingRight = 4}; TextFieldUI com.ibm.egl.rui.widgets.TextField{}; TextLabelID com.ibm.egl.rui.widgets.TextLabel{text = "User ID:", padding = 0, paddingRight = 0}; Box1 com.ibm.egl.rui.widgets.Box{columns = 1, padding = 8, backgroundColor = "Beige", width = "333", height = "222", children =[box2, box3], borderColor = "CadetBlue", borderWidth = 9, borderStyle = "groove", borderLeftStyle = "groove", borderRightStyle = "groove", borderTopStyle = "groove", borderBottomStyle = "groove"}; Box com.ibm.egl.rui.widgets.Box{padding = 8, backgroundColor = "BlanchedAlmond", children =[Box1], font = "Verdana", fontSize = "8pt", fontWeight = "bold"}; msg html{backgroundColor = "black", color = "yellow"}; box3 box{children =[msg]}; placeHolder TextLabel{}; box2 box{columns = 2, children =[TextLabelID, TextFieldUI, TextLabelPassword, PasswordTextField, Button, placeHolder ]}; function initialization() end //end function function checkFields(event Event in) if(TextFieldUI.text == "scott" and PassWordTextField.text == "egl") msg.text = "You are like.......logged in!"; else msg.text = "Invalid UID/PWD. <br>Press any key... no, no, no, NOT THAT ONE!"; end end //end function end //end RUIHandler

Transcript

  • 1. Rational Business Developer EGL Rich UI Development
  • 2. IBM Trademarks and Copyrights
      • © Copyright IBM Corporation 2007,2008. All rights reserved.
      • The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates.
      • This information is based on current IBM product plans and strategy, which are subject to change by IBM without notice. Product release dates and/or capabilities referenced in these materials may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way.
      • IBM, the IBM logo, the on-demand business logo, Rational, the Rational logo, and other IBM Rational products and services are trademarks or registered trademarks of the International Business Machines Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others.
  • 3. Contributing Authors
      • Scott Pecnik and Jon Sayles – primary content and courseware developers
      • Ancillary contributors: 
        • William Smythe,Yann Lerouzic/Morpheus Consulting, U.K.,
  • 4. Course Details
    • Audience
      • This course is designed for application developers who have programmed in a 3 rd or 4 th generation language – and who need to build Rich User Interface applications using EGL.
    • Prerequisites
      • Basic PC and mouse-driven development skills are assumed.
      • It is assumed that you have taken the EGL Foundation s and have a comfortable understanding of EGL and JSF technology – especially, with the AJAX portion of the EGL-JSF course
        • Alternatively, if you have the equivalent EGL work experience doing production dynamic content web application development using Eclipse, EGL and JSF that should be sufficient
      • An understanding of basic HTML is also assumed
        • HTML tables
        • HTML components such as input fields, radio buttons, etc.
  • 5. Course Introduction – Unit Descriptions
    • The What is Rich UI? unit explains what the EGL Rich User Interface technology is and what you can accomplish with it.
    • The Terms and Concepts unit will further drill down into Rich UI and the technologies it uses.
    • The Programming in EGL Rich UI unit will give you an introduction to coding web pages in EGL Rich UI.
  • 6. RBD/EGL Development Course Units:
    • What is Web 2.0?
    • Programming in EGL Rich UI
    • Learn EGL Rich UI
    • Appendix
  • 7. History of Web 2.0
    • The term “Web 2.0” was first coined by O’Reilly Media in 2003.
    • It was then popularized by the first Web 2.0 conference in 2004.
    • The term implies a new version of the internet, but that is not the case
    • According to Tim O'Reilly,
      • "Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform , and an attempt to understand the rules for success on that new platform.“
    • Moral: Web 2.0 is not really all that new
  • 8. Web 2.0 - Google Definition
    • Web 2.0 is a term often applied to a perceived ongoing transition of the World Wide Web from a collection of websites to a full-fledged computing platform serving web applications to end users.
    • Ultimately Web 2.0 services are expected to replace desktop computing applications for many purposes.
    • Web 2.0 is becoming synonymous with RIA (Rich Internet Application)
    Source: http://alexzelder.files.wordpress.com/2007/04/google_logo1.jpg Expectations
  • 9. Web 2.0 – Unofficial IBM “Business Oriented Definition”
    • An important trend in delivering software applications
    • An enabler for rich er web applications
      • New business models
      • Peer-to-peer user participation
      • New technologies
      • Interactive filtering, presentation, data entry
    • A combination of core technology components
      • Rich user experience (maps, grids, animation, D&D, etc)
      • Loose-coupling, composite applications via reuse and “mash-ups”
      • Standards (SOAP, REST, JSON, Atom, etc)
  • 10. Web 2.0 technologies highlight the next pendulum swing between client and server function. Client Server Mainframe computing “ Dumb” little green screen clients Omnipotent big mainframe servers Client-server computing “ Smart” Personal Computer clients Simple file and database servers Web (1.0) computing Light Web Browser clients Rich application and database servers Web 2.0 computing Rich Internet Application clients Lighter application and database servers Web 2.0 and the Pendulum Swing – between Client and Server Computing TUI CUI JSF Rich UI
  • 11. Web 2.0 Application Characteristics
    • Rich user experience
    • Minimal page transitions
    • Dynamic content
    • Data asynchronously retrieved
    • via REST or SOAP service calls
    • Client-side validation
    • User encouraged to add value
    • Simplified user interface
    • Integration of relevant data from multiple sources – “mash-up”
  • 12. “ Mashups” – 1 of 2 Google Map Hotel information — separate database Directions — come from somewhere else Send to a phone —Additional functionality Refers to the design and development pattern of combining and custom “widgets” in a web application. The rendered web application mashes-up (contains) relevant and related views of data on-screen for effective presentation
    • Why?
    • Rapid application development
    • Reuse existing services
    • Avoid reinventing the wheel
    • Empowers users
  • 13. “ Mashups” – 2 of 2
    • Mash-ups can also be loosely related views 
    • Think of a “Portal” consisting of many combined mini-pages, instead of a single-purpose web page like:
    • Login
    • Registration
    • etc.
  • 14. Technology Attributes of Web 2.0/Rich Internet Applications RSS/ATOM allows someone to link not just to a page, but to subscribe to it, with notification every time that page changes. Users must be treated as co-developers, in a reflection of open source development practices. The open source dictum, "release early and release often” “ DATA is the new HTML." Database management is a core competency of Web 2.0 companies. XML or JSON data over HTTP , in a lightweight approach sometimes referred to as REST (Representational State Transfer) as an alternative to SOAP. AJAX incorporating: XHTML and CSS, DOM, XML and XSLT, XMLHttpRequest and JavaScript allowing information to be mashed up into new interactive portals." Feeds Perpetual Beta Info-ware Lightweight Programming Model Rich User Experience
  • 15. Web 2.0 and Community
    •  Web 2.0 websites are often based on community
      • Some examples of Web 2.0 sites are: Facebook, Digg, Yelp, and Twitter (see slide ***Notes for url’s)
      • All of the above web sites rely on the community to submit content.
    • A Web 2.0 community-based site you are probably familiar with
      • http://www-949.ibm.com/software/rational/cafe/community/egl
  • 16. Web 2.0 and Rich Internet Applications – Enhanced User Experience
    • With Rich UI, your business applications can have the unmatched speed and usability of client side (browser-based) applications, while still being served and managed from centralized, dynamic content server applications: http://www.visualthesaurus.com/index.jsp
    • Additional examples include:
      • http://www.adobe.com/resources/business/rich_internet_apps/examples/
      • http://www.visokio.com/demos/camerafinder
      • http:// www.smartmoney.com /map-of-the-market/
  • 17. Web 2.0/RIA – Section Review
    • Rich Internet Application technology is an element of (in fact, the enabler of the) Web 2.0 experience
    • RIA technology promises to raise the standard of internet use, providing customers with a more “human or interactive” experience, and including large-grain (new) functional capabilities such as:
      • Running software applications entirely on the browser
      • “ Social networking” and web-”participation” – through interactive technologies such as “wikis” and collaborative forums
      • The ability to combine and merge content from diverse (client and server-side) sources (these are known as “mash-ups”)
    • For additional reading on Web 2.0, RIA and underlying languages and technologies – please visit these URLs:
      • http://en.wikipedia.org/wiki/Web_2
      • http://en.wikipedia.org/wiki/Rich_Internet_application
      • http://en.wikipedia.org/wiki/AJAX
      • http://en.wikipedia.org/wiki/JavaScript
      • http://en.wikipedia.org/wiki/Event-driven_programming
      • http://www.quirksmode.org/dom/intro.html
  • 18. RBD/EGL Development Course Units:
    • What is Rich UI ?
    • Programming in EGL Rich UI
    • Learn EGL Rich UI
    • Appendix
  • 19. What is Rich UI?
    • Rich UI stands for R ich U ser I nterface.
      • This is a phrase commonly used when talking about an interface that provides dynamic rendering of its individual parts – notably, on the client-browser, as opposed to server-side processing
    • It is a technology that will allow developers of any background to create rich web pages like one would see on a leading-edge, Web 2.0 sites:
      • www.digg.com
      • www.hulu.com
      • … others discussed in the previous section…
    • Rich Internet Application (RIA) – is often used synonymously with Rich UI
    • The benefits of Rich UI have a lot to do with Web 2.0 benefits, and include:
      • Improved user-responsiveness
        • The most successful Rich UI implementations can achieve almost a “Windows-desktop” look and feel to users
      • “ Rich-er” functionality – beyond the simple rendering of HTML, to include dynamic widgets and components
      • Improved browser/server load-balancing – as more of the business functionality can be distributed to the desktop (browsers)
  • 20. Rich UI and EGL
    • Rich UI leverages the generation capabilities of EGL to generate JavaScript
      • JavaScript is a language that runs in a browser, (FireFox, Internet Explorer, Opera, etc.) – not on the server like EGL-generated COBOL or Java
    • It is JavaScript that renders your page in the browser and manipulates labels, data, graphics and controls the page’s behavior
      • No static HTML is created
      • EGL generated JavaScript does all the work
    • Rich UI supports all the base EGL language constructs like libraries and records, while hiding the complexity of Web 2.0 functionality
    • Much of the U.I. is implemented using leading-edge internet technologies such as (all terms we will be defining shortly) :
      • AJAX
      • DOJO
      • JSON
      • FLEX
      • Web Services
  • 21. EGL: Shielding Complexity – Across the Development Lifecycle Consume Data + Logic UI Produce JavaScript AJAX Dojo Google REST XML SOAP JSON SOAP XML REST PHP COBOL Java RPG SQL EGL Widget Library IBM Widget Writer ISVs SOA Business Developers Business Developers EGL
  • 22. Rich UI Resources
    • On the EGL Café – in the EGL Rich UI hub: http://www-949.ibm.com/software/rational/cafe/community/egl/rui
    • … IBM is providing a wealth of:
        • Examples
        • Focused documentation
        • Commentary
        • Links
  • 23. Rich UI Terms and Concepts – Rich UI and SOA
    • Rich UI makes extensive use of services, and SOA – Service Oriented Architecture, which is a way to modularize and deploy code so that it can be consumed anywhere in the world using any language.
    • There are two types of Web Service calls used by Rich UI
      • RESTful service calls – A call made through the HTTP service-interface. Once the call is made, a result is passed back to the requestor in XML or JSON format.
      • SOAP service calls - A type of service call that is more popular in enterprise. It requires the exchange of XML messages between the client and host system.
    • By utilizing web services you build modular, scalable systems.
    Server-Side Enterprise Computing Assets EGL Server-Side Application Resources Service Calls … and… Results Rich UI Application JDBC Calls … or… Services
  • 24. Technical Terms and Concepts
    • AJAX – Stands for Asynchronous JavaScript and XML. Rich UI makes extensive (almost wholesale) use of AJAX, utilizing it whenever it makes a service call. Rich UI never executes a traditional HTML or .JSP page “Form Submit”.
    • Widget – A widget is a generic term for a graphical element in a GUI or Internet style interface. Most widgets allow for the interaction and manipulation of data in the browser.
    • DOJO – An open source JavaScript toolkit. The DOJO project sets out to create widgets using only JavaScript. Rich UI is able to interface with DOJO code in order to pull in some of their widgets. http://dojotoolkit.org/
    EGL Widget DOJO Widget
  • 25. Terms and Concepts - continued
    • JSON – JavaScript Object Notation is lightweight format used by JavaScript to exchange data. JSON is able to serialize structured data, such as arrays, and exchange it among host and client machines.
    • Silverlight – is a new technology developed by Microsoft that is similar to Macromedia’s Flash. Rich UI is able to interact with, and integrate with Silverlight widgets in your application:
  • 26. EGL Rich UI – Modular Development and Reuse
    • Because of the RBD tooling, programming-model and loose-coupling in the EGL implementation of Rich UI – Software Reuse is not only easy:
      • Rich UI application design tends towards reuse – as all interfaces are formally declared
      • The EGL language encourages functional decomposition:
        • From high-level (through differentiated file types) …to…low-level (“everything is a function that takes parameters”) – making it next to impossible to write in a monolithic programming style
      • Developers will choose reuse over re-write, as the tools and language accommodate this
      • Software projects will benefit – as over time the R.O.I. for reuse will make it difficult to justify writing “brand-spanking-new”
    Rich UI Application Existing RUIHandler New RUIHandler External RIA Application Existing Widget RUIHandler Elements Existing Widget New Widget External JavaScript New and Existing RUIWidgets
  • 27. What Developers are Saying About Rich UI
    • EGL Rich UI is a really simple and powerful way to quickly implement a Web 2.0 application. Here are the main advantages:
      • No need to know Java, Java Script or HTML: everything can be written in pure EGL language. This language has a simple and clear syntax, independent from any other existing language and can be learnt in one or two weeks (may be a bit longer to be able to master the Rich UI-specific parts).
      • If needed, JavaScript and HTML can still be used to extend the EGL Rich UI features: for example, I wrote some JavaScript functions to manage character strings in a more complex manner than the basic EGL string library does. New JavaScript code has to be wrapped into an EGL object to be reused, which means that a JavaScript developer can write a whole new library of functions for an EGL developer who does not need to know anything about JavaScript.
      • Writing a Web 2.0 application is usually a daunting task, since you have to write HTML parts, manipulate a lot of JavaScript functions to make them interact, and these parts are not managed as a whole: you have to cope with every little bit of HTML to make the application work. Instead, EGL Rich UI is all about working with components, or widgets, that you just have to assemble in a simple way to build an application, such as you would for a traditional client application (basically, you work with EGL Rich UI in the same manner as you work with Java Swing).
        • Each component can be graphically designed and tested, which is a lot faster than creating HTML code and testing it with JavaScript events.
        • Each component can be reused without having to design it again: we use CSS stylesheets to define the style and presentation of a widget. Furthermore, the newly created components can be integrated into the EGL Widgets palette so that other people can reuse them graphically into their own application. IBM provides its own basic EGL components from which more complex components can be built.
        • The components are totally independent: they communicate by an "InfoBus", which is a central component of an EGL Rich UI application. Widgets publish events to the InfoBus (e.g. a click on a button) and any other component in the application can subscribe to these events to retrieve and process them.
        • EGL Rich UI can easily be extended by wrapping Dojo or Silverlight AJAX objects into EGL objects: for example, this can be interesting to reuse already developed AJAX widgets that a customer would like to see in his new application
        • An MVC framework is provided in order to be able to quickly generate validating forms (which is the case in the Fulfillment application for the address asked to the customer when he wants to checkout)
      • An EGL Rich UI can easily interact and exchange data with other web applications: every needed feature is provided to access SOAP or REST web services. Accessing a web service basically just consists in writing a line declaring the web service in a configuration file. From there, the web service can be accessed in EGL just as you would access a function in a local library.
      • Finally, an EGL Rich UI applications is just one full web page: there are no interactions between the server and the client, except when calling web services. Every update in the GUI is done locally, whereas in traditional Web applications (Java/JSP, ASP.NET, ...) there are a lot of data exchanges. The server can then serve much more clients.
    • All these advantages together form a major improvement on how we can write Web 2.0 applications. I developed a number of components that we'll be able to reuse in future developments to drastically reduce development time.
  • 28. Learn EGL Rich UI Course Units:
    • Create a new project
    • The Rich UI Environment
    • Hello World
    • InitialUI and Children
    • Deep Dive into Box’s
    • Event Driven Development
    • Input Controls
    • Data Tables
    • Login Page
    • Calling a Service
  • 29.  Create a new project*** Scott to provide new screen-caps
    • Let’s start the tutorials by creating our very own Rich UI project!
    • Select File  New  Project
    • In the new project wizard, select EGL Project , and then click Next
  • 30.  Create a new project
    • The wizard should then ask you to provide a name for your project
      • Type EGLRich UI
      • Next make sure to select Rich UI Project as your project type
    • Next, click Finish
      • The IDE will take a minute or two to create your project and set up the environment
      • Then we’ll be set up for the rest of the course
  • 31.  The Rich UI Environment
    • Your workspace should now look as follows:
      • The default Rich UI project was created along with your new project.
      • Your newly created Rich UI project
    • The com.ibm.egl.rui_1.0.0 is essentially the core of RUI. This project contains:
      • RUIWidget definitions (more on these later)
      • Core language functionality
        • EGL Data Types
        • Service Call API’s
        • Publish/Subscribe Framework
        • MVC Framework
        • Event handling logic
        • Etc.
  • 32. Developing in Rich UI
    • Let’s learn about what it’s like to develop using EGL Rich UI
    • The quintessential view is the EGL Rich UI Editor
    • This view contains a design, source, and preview mode
    • These three views are organized as sub tabs in the EGL Rich UI Editor
      • The design tab is the visual editor for Rich UI
      • The source tab is where you will go to directly edit EGL Rich UI source code
      • The preview tab is essentially a browser. This is where you will go to see what you’re pages look like!
    • These three views are where you will spend a large majority of your time as a Rich UI developer
  • 33. Learn EGL Rich UI*** Jon to consolidate – rename Course Units:
    • The Rich UI Environment
    • Create a new project
    • Hello World
    • EGL Rich UI “Basics”
    • Web Application Layout and Design
    • Event Driven Development
    • Input Controls
    • Data Tables
    • Login Page
    • Calling a Service
  • 34. Rich UI Perspective
    • Similar to Web Perspective – but with different Views
    Content Area Palette Project Explorer Outline, Properties and Events Views Problems & Generation Results Views
  • 35. Rich UI Projects
    • RUI projects consist of three default packages: EGLSource, JavaScript, WebContent
    • Within each of these three packages there are:
      • Sub-Packages – to organize your project, containing:
        • EGL source files and other source files:
          • Cascading Style Sheet files
          • Graphics (images)
      • A project .eglbld file
      • A project .egldd file
    • EGL Rich UI project source file Part types can be:
      • Libraries
      • externalTypes – which can be used to call native or external JavaScript functionality
      • Handlers
        • The EGL Part type used specifically for Rich UI programming – is an EGL Handler
    • EGL Rich UI Handlers come in two sub-type parts:
      • RUIHandler per se’
      • RUIHandler of sub-type RUIWidget
  • 36. RUIHandlers
    • RUIHandlers are used to create Rich UI applications that are composed of one-to-many on-screen RUIWidgets. These widgets can be IBM-provided widgets, or custom widgets that you’ve created
    Elementary Widget (ex. textbox, button HTML, etc.) ExternalType (provides access to native JavaScript) … Cascading Style Sheet (optional property) RUIHandler type RUIHandler… initialUI (initial U.I. rendering in the browser) onConstructionFunction (initial EGL Function) Custom Widget – can embed reuse existing Widgets onConstructionFunction Elementary Widget Elementary Widget EGL Function… Rich UI Elements EGL Function(s) …
  • 37. RUIHandlers – Example Using IBM-provided Widgets and Their Code
    • From the above, note the following:
      • initialUI=[Box] this Box being a RUIWidget of type box – that contains three additional RUIWidgets:
          • TextLabel (which has some initial text)
          • TextField
          • Button – which has an onClick function that fires populateFields(…)
      • onConstructionFunction = initialization (which in this case does nothing but could!)
      • populateFields(…) EGL function – which just initializes text in the TextField RUIWidget
      • Additional properties:
        • backgroundColor, width, height, columns=1
  • 38. RUIHandler – With a RUIWidget of type: Grid
    • From the above, note the following:
      • initialUI=[grid] – declares a grid RUIWidget inside the RUIHandler
      • This grid widget contains a number of properties, all of which contribute to its look and feel:
        • headerBehaviors
        • margin
        • data (the individual rows)
  • 39. Basics of Rich UI Programming – RUIWidgets
    • RUIHandlers contain one-to-many RUIWidgets
    • RUIWidgets can be thought of, or categorized as:
      • Simple :
        • TextLabel
        • Box
        • Button
      • Complex :
        • mortgage Calculator
        • a sort-able, select-able list of customers
      • IBM provided:
        • see the palette list on the right
      • Custom :
        • you create the widget
      • A “ container ” widget for organizing U.I. elements:
        • Box
        • Div
        • Tab folder
      • A “ content widget ” – for data and labels, behaviors, etc.
        • Most of the other widgets in the palette
    •  Complex RUIWidgets typically consist of both container and content widgets
    • All U.I. elements in a RUIHandler are RUIWidgets
      • Example: To put a basic input field onto a page, you will declare a variable of type TextField – either using the Visual Editor, or coding it using Content Assist in the EGL editor.
      • lNameInputField TextField {text=“LastName”};
    IBM provided RUIWidgets
  • 40. Basics of Rich UI Programming – Custom Widgets
    • You can add your own Custom Widgets to the Palette 
    • Custom widgets often contain elementary widgets or other custom widgets – which can contain other custom widgets, etc.
      • Among other benefits, this allows you to reuse code, and to scale – or grow the U.I. in response to requirements that increase in complexity over time
    Note: Don’t worry too much about the syntax in this example We’ll be covering all these language concepts in a bit
  • 41. RUIWidget Properties
    • In EGL Rich UI, RUIWidget properties (specified within the {} following the variable declaration…a short list of which is shown here displayed through Content Assist) 
    • … play a huge role in the look and feel and behavior of the Widget in your application
    • There are an extraordinary number of properties you can customize to enable your RUI application for whatever business and U.I. requirements come at you. In fact – it’s not much of a stretch to say that this (virtually) unlimited programmatic access to the underlying deep-dive mechanics of each widget:
        • Allows you to create “un-compromising U.I.” designs – with EGL
        • Is a major difference between Rich UI and JSF (which is a Java-based framework that “hides” some of the properties you may need access to)
    • Note that there are two categories of Widget properties:
        • U.I. properties – Widget layout and display
        • Event-handling properties – that respond to Widget run-time behavior in the browser
    Browser Event handling Properties U.I. Properties RUIWidget . <property>
  • 42. RUIWidget Properties – EGL Coding Example
    • To specify a RUIWidget property is VERY SIMPLE:
      • U.I. property example – Set the text value and background color of a TextField widget inside of the initial EGL function of RUIWidget or RUIHandler:
      • Browser event property example – After the user enters data in a field and tabs out, execute a function to validate the data value entered:
    Just code: variableName.property = value Just code a reference to an EGL function The function in the RUIHandler must be declared with an input Event as a parameter. After that? It’s all stock EGL syntax 
  • 43. RUIWidget Properties and the Visual Editor
    • When you create a new RUIHandler with the Visual Editor you can specify properties in the Properties view.
    • The property values available depend on the kind of widget (i.e. A “Box” can have columns, A TextField can be “read only”, can have a custom font, fontSize, fontWeight, etc.)
    • Some properties apply to all widgets:
      • Color – for text color
      • Alignment – Right/Left/Center
        • Note that (none) defaults to the parent container’s alignment
      • backgroundColor – for the widget’s “fill (background) color”
      • id – a unique identifier for the widget
      • Class – the .css file’s unique class tag
        • Note that in order to pick up custom .css tags, you will need to code:
          • includeFile = “relative/fileSpec.fileName.css” – as a property of the RUIHandler
    • Besides the major (common to all widget) properties, there are five additional categories of Widget properties available from the Visual Editor for widgets:
      • Border – to change the widget’s border line size and style
      • Spacing – to add pixels of space between widgets
      • Position – to precisely (or relatively) place a control in the browser
      • Appearance – to change the color – including transparency of a widget, and to modify the cursor styling
      • Accessibility – to specify user tab-key order and work with different devices (for the handicapped)
  • 44. “ What about those events?” – Basics of Rich UI Coding – Event Handling
    • EGL Rich UI utilizes what is called event driven development. Most run-time behavior is based on user-directed events that occur on a web page. Some of these events include:
      • onClick
      • onChange
      • onKeyDown
      • onKeyUp
      • onFocusGained
      • onFocusLost
      • onMouseMove
    • Every widget on a web page can have events tied to it.
    • You can specify these events through EGL code, and from the Visual Editor
    • At run-time (in the browser), widgets listen for specific user-events, which can trigger calls to your EGL functions. You code “responses” to these events inside the functions:
      • Data validation
      • Data access
      • Etc.
    • There are additional types of events you’ll learn about later in this course that are not programmatic, and not tied to user-browser interaction
     
  • 45. A Small Sample Rich UI Application
    • Let’s take a look at a sample application and see what it comprises:
    • The above application is designed using 3 box RUIWidgets
      • The outer-most box has one row and one column.
        • outerBox Box {marginLeft = 45, children = [ mainContent ] };
      • Inside of the outer box is an inner box with three rows and one column, the top row holds the image, the second row holds another table, and the last row holds the login button
        • mainContent Box {columns = 1, backgroundColor = &quot;#C3D9FF&quot;, width = 270, roundedCorners = yes , ALIGN_CENTER = Box.ALIGN_CENTER, children = [ image, loginBox , login ] };
      • Finally, inside of the middle row is another box holding the labels and fields
        • loginBox Box { columns = 2, paddingLeft = 100, marginTop = 20, width = 270, children = [userNameLabel, userNameField, passwordLabel, passwordField] };
  • 46. Basics of RUI Programming – Design-Time Flexibility
    • Web pages created with Rich UI are extremely flexible to build and maintain
      • For example, by simply changing the order in which children are assigned, a web page can be completely turned upside down
      • On the previous slide, we showed that our mainContent VBox had children
        • [image, loginBox, login]
      • Changing the order of our children can render the following
        • [loginBox, login, image]
          • Note that each child is an individual widget declared just like EGL variables somewhere else in the RUIHandler
    • So all it takes to create a widget is a simple variable declaration?
      • Yes, and you can structure where they are displayed on the page through VBox’s and HBox’s!
  • 47. Basics of Rich UI Programming – ExternalTypes – access to JavaScript
    • Reuse existing native JavaScript functionality
  • 48. Workshop Section
    • Let’s learn about what it’s like to develop using EGL Rich UI
      • Exploring Rich UI via Sample Code
      • Creating your own RUIHandlers and RUIWidgets from scratch
        • HelloWorld
        • Visual Editor Workshops
        • Design and Box Workshops
        • Additional Workshop
          • Calculator
          • Temperature Converter
          • Login
  • 49. Workshop – Exploring Using Rich UI Sample Code
    • In this workshop, you will:
      • Create a new Package in your EGL Rich UI Project
      • Create a new RUIHandler inside the Package
      • Copy/Paste some sample code
      • Preview the web application
      • Customize some of the EGL Rich UI properties
  • 50.  Workshop – Create mySamples Package
    • So now that we’ve got a new project, let’s create our first EGL Rich UI page.
    • First we’ll create a package to house this simple application.
    • Right-click over EGLSource and select New  EGL Package
    • In the wizard that pops up, name the Package: mySamples , and then click Finish
  • 51.  Workshop – Create sample1 in mySamples Package
    • Now let’s create a RUIHandler in the package. Right-click over the mySamples package and select: New > EGL Rich UI Handler
    • Name the EGL source file: sample1
  • 52.  Workshop – Replace sample1 “Boilerplate” code
    • From the slide ***Notes , copy and paste the RUIHandler code for sample1
    • From the RBD S ource view: Select all of the boilerplate statements and replace them with the slide notes code.
    • Save (Ctrl/S)
  • 53.  Workshop – Test and Play with sample1
    • Select the P review mode – click the Button
    • Return to the S ource mode, and modify some of the EGL code.
    • Return to P review mode to test (to view ) your work
  • 54. Workshop – Create Your First RUIHandler (From Scratch)
    • In this workshop, you will:
      • Create another new Package in your EGL Rich UI Project
      • Create a new RUIHandler inside the Package
      • Use the Rich UI Visual Editor to do initial web application layout
      • Customize some of the RUIHandler properties in EGL
      • Preview the web application
  • 55.  Hello World – Create Package
    • Let’s create (from scratch) our first EGL Rich UI page – and learn about the Rich UI Visual Editor in the process
    • First we’ll create another new package:
      • Right-click over EGLSource and select New  EGL Package
    • In the wizard that pops up, name the package helloworld , and then click Finish
  • 56.  Hello World – Create RUIHandler – 1 of 2
    • Your project should now look as follows:
    • Now let’s create a new RUIHandler
    • Right-click over the helloworld package and select new EGL Rich UI Handler
  • 57.  Hello World – Create RUIHandler – 2 of 2
    • In the wizard that pops up, name the handler Hello , and then click finish
    • Hello.egl should now be opened in the Content Area by the EGL Rich UI Editor
      • Let’s take a tour of the Rich UI Editor!
    • You should initially be in the editor sub tab of the editor
      • This is much like the visual editor used for JSF
  • 58.  The Visual Editor - Palette
    • Notice the palette on the right side of the editor
    • Think of the palette as what you would see in a JSF environment. From the palette we will drag and drop widgets onto our page
    • New Concepts:
      • The palette is built into the design editor instead of existing as its own eclipse view.
      • You may think that the list of widgets in the palette is quite sparse. This is because Rich UI allows you to define your own custom widgets!!
        • The Refresh palette button exists so that newly created widgets can appear on the palette and later dragged onto a page.
      • Initially, only the RUIWidgets are shown in the palette.
  • 59.  Rich UI Application Design – RUIWidget – Box
    • The concepts behind designing pages with Rich UI are similar to what you would see when designing pages with basic HTML.
      • In essence, a designer can still think in terms of laying out HTML tables on a page.
    • The fundamental Rich UI widget is a Box .
      • A Box is just an HTML Table (a container, used to hold other controls, text and data)
    • The first step in creating any type of web page is most often the creation of an HTML table to give the page some structure.
    • The first and notably the last step to adding a component onto a page, is through the use of the children or initialUI variable property.
    • The above code creates an HTML table, then adds the input field as its child.
    • In a Box, all children are given a new column in the HTML table (so, each child will be added to the right of the child before it).
    • If you would like children to be added vertically, you will need to tell the box how many columns you would like.
     
  • 60.  Hello World – Add a Box RUIWidget
    • A RUI Widget is essentially a definition of an HTML tag.
    • There exists a RUI Widget for almost every HTML tag (table, h1, h2, etc.).
    • However, if a RUI Widget is not available for a particular HTML tag, you can always implement one yourself!
    • Now let’s get on with our Hello World page!
      • We’ll be placing a TextLabel, TextField, and Button onto the page.
    • From the palette drag, a Box onto the page
      • Click on the Box and drop it anywhere on the page
      • The editor will turn green indicating the location the Box (HTML Table) will be dropped.
  • 61.  Hello World – Box Widget Properties
    • Once you drop the Box onto the page, you will be greeted with a pop-up asking what you would like to name your variable of type Box
      • At this juncture, let’s just take the default  (more on this later)
    • You should now see the outline of a Box in the visual editor!
    • The next step is to adjust some of the properties for the Box (make sure the Box is selected)
    • In the bottom left corner of the IDE, notice the Properties view
      • From there specify “2” for the columns property
    • Press Ctrl/S to save the page.
  • 62.  Hello World – Add a TextLabel Widget to the Box
    • Now is a good time to re-explain the columns property for the Box
      • By telling our Box that we only want it to have 2 columns, we are limiting the table to having only 2 columns. As we put widgets inside of the Box, every 3 rd widget will cause a new row to be created in the Box, and will be inserted into that row.
    • Let’s add a TextLabel to the Box
    • From the palette, drag a TextLabel widget into the Box
  • 63.  Hello World – TextLabel Widget Properties
    • When you have dropped the TextLabel into the Box, name it myFirstTextLabel in the pop-up that greets you.
    • The TextLabel should now be placed inside of the Box
    • With the label selected in the visual editor, focus on the Properties View and change the text to be “Hello World: ” , then press Enter
  • 64.  Hello World – Add a TextField to the Box
    • Next, drag a TextField onto the page, and inside of the Box
    • Once you’ve dropped the TextField into the Box, name it’s corresponding variable myFirstTextField
  • 65.  Hello World – Add a Button to the Box
    • Finally, let’s drag a button onto the page!
    • Remember that even though the visual editor may show the green bar as being to the right of the TextField, we specified that the Box has only two columns
      • This will cause the button to actually be placed into the first column of a new row
    • When asked to give the Button a variable name, simply take the default by clicking OK
    • Your page should now look as follows!
  • 66.  Hello World – Add an onClick Event to the Button
    • With the newly created Button selected on the page, turn your attention to the Properties view .
      • Select the Events tab
      • Click on the onClick event
      • Click Add Event Handler
      • Name the function populateTextField
    • Next, go back to the Rich UI Editor and at the bottom of the view, switch to the Source View
  • 67.  Hello World – EGL Code (Source) View
    • You should now see the code for the page
      • You should see three variables: a Button, a TextField, a TextLabel, and a Box
    • Inside of the function on the page, code the following line of EGL Source
      • Remember to use Content Assist!
    • More on event handling later!
  • 68.  Hello World – Preview (Run Hello World)
    • What did we just do?
      • First, we created an event handler that would fire whenever the button was clicked
      • Second, inside of this event handler, we set the text property of our input field to a literal string
    • We are done with our first web application
      • Switch to the Preview tab of the EGL Rich UI Editor
    • Notice the page finally running in a real browser
    • Click the button and see what happens
  • 69.  Workshop – an Online Calculator
    • In this workshop, you will:
      • Review Rich UI Events
      • Create another new Package in your EGL Rich UI Project
      • Create a new RUIHandler inside the Package
      • Use the Rich UI Visual Editor to do initial web application layout
      • Customize some of the RUIHandler properties in EGL
      • Add event-handling functions in the RUIHandler that
      • Preview the web application and test your work
      • Optionally create additional calculator buttons and functions in the RUIHandler for subtraction, multiplication, division, etc.
  • 70.  Create the Calculator’s Package and RUIHandler
    • First, right-click over the EGLSource folder and create a new package
      • Name it calculator
    • Next, right click over the calculator package and create a new EGL Rich UI Handler
      • Name it: Calc
  • 71.  Add a Box to the Calculator, Editing in EGL Source Mode
    • Let’s switch gears on this workshop, instead of using the visual editor, let’s code our presentation logic using EGL source code editor.
      • Once the Calc RUI Handler is opened in the EGL Rich UI Editor, switch to the Source mode
    • Now, let’s create an HTML table to lay out our UI Components:
      • Code a new Box (like below), and give it the property shown in the screen capture. Remember to use Content Assist when specifying a type of widget or widget properties!
        • { columns = 2 };
      • Once the Box is created, add it to the initialUI property of the RUIHandler
        • This will ensure that onLoad, the table is rendered in the page.
  • 72.  Add labels and fields to the calculator
    • Add (code) labels and field widgets, then add them to the Box via the children= property
    • Once the labels and fields are coded, add them to the Box as children.
    • The web application should Preview similar to 
  • 73.  Add a RUIWidget Button
    • Now that we have our UI Components on the page, we’ll add a Button to trigger an event when the user clicks it, in the browser.
      • Create a new Button in the RUIHandler source code below the resultValue variable
      • Next add the Button as a child to the Box
      • The web application should now preview as follows
      • Now let’s add an event listener to the button
  • 74.  Add an onClick Event Listener to the Button
    • Add a comma after the text property of the calcButton variable.
      • Press Ctrl+Spacebar (Content Assist)
      • Select the onClick-Button event.
      • From there we will give the onClick event a function name: addValues
        • Initially you will see an error because the addValues function does not exist.
      • Next, code the following function below the calcButton variable (use Content Assist)
        • Press Ctrl + Shift + O to bring in the import statement for Event
  • 75.  Calculator
    • Note that all of the data in a web application is eventually of type string
    • For this reason we must cast the values in the input fields to int before we do math
    • Save the RUIHandler and try it out!
    • You have now been introduced to coding with Event driven development.
    • Re-examine the RUIHandler if you don’t understand what we just did
      • For sure production applications will be more complicated than this
    • Note that as event listeners as you want can be applied to Widgets
      • A widget could have an onClick property as well as onMouseOver and so on…
  • 76.  Calculator – Optional Functionality
    • If time permits, add three additional buttons to the web application, bound to three functions for:
      • Subtraction
      • Multiplication
      • Division
    • You may want to work with other styling elements as you’ve learned in these sections:
      • Background color for your Calc widget
      • backgroundColor – or just color (which is text color) for your resultValue
  • 77.  OPTIONAL Workshop – an Online Temperature Converter
    • In this workshop, you will:
      • Create another new Package in your EGL Rich UI Project
      • Create a new RUIHandler inside the Package
      • Use the Rich UI Visual Editor to do initial web application layout
      • Customize some of the RUIHandler properties in EGL
      • Add event-handling functions in the RUIHandler that
      • Preview the web application and test your work
      • Optionally add a function that converts Celsius to Fahrenheit and revise the U.I. accordingly
  • 78.  OPTIONAL – Temperature Converter “High-Level” Steps
    • Now that you’ve created a number of RUIHandlers you should be able to recall the steps to create a new RUIHandler from scratch (if not feel free to scroll back through these slides and revisit them). So perhaps it’s time to see what you can do with only the final objective – instead all the detail click-for-click instructions.
    • Create a simple Fahrenheit to Celsius conversion web application on your own
    • Use the  visual editor - or  manually code the EGL presentation logic
      • Whichever you feel more comfortable with
    • You could GOOGLE the algebra for the temp-conversion, but we’ll be generous, and give that to you 
  • 79.  OPTIONAL – Temperature Converter - Enhancements
    • If time permits, you can upgrade the Converter to convert both from Fahrenheit to Celsius and vice versa.
    • Here’s the new formulae
    • You will need to modify a number of places in the RUIHandler source code.
    • You could either work on this yourself, or use the code in the ***Notes section of this slide as a model
  • 80.  Workshop – an Online Login Page
    • In this workshop, you will:
      • Create another new Package in your EGL Rich UI Project
      • Create a new RUIHandler inside the Package
      • Use the Rich UI Visual Editor to do initial web application layout
      • Customize some of the RUIHandler properties in EGL
      • Add event-handling functions in the RUIHandler that
      • Preview the web application and test your work
      • Optionally add:
        • Styling elements – to enhance the U.I.
        • Event handlers – to provide for immediate feedback to the user
  • 81.  Workshop – an Online Login Web Application
    • Create a new package under EGLSource named: businessApp
    • Inside of the usinessApp package, create a new RUIHandler, named: loginPage
      • You can style the colors and fonts as you like
      • Add the IBM-supplied RUIWidgets as shown below:
        • Note the widget types, text properties, their nested placement and relationships, and the widget names (in parenthesis within the Outline view)
      • Hints:
        • Box1 has columns= 1 , width = 333 , height = 222 , borderXXXStyle=groove
        • Box2 has columns= 2
        • The Password field is a
  • 82.  Workshop – an Online Login Web Application
    • For the Button, add an onClick event handler to a function named: checkFields
      • See the screen capture of this code for some ideas of how to create
      • Note that
        • There are other import statements (folded)
        • The code for this version of the loginPage is in the ***Notes for this slide
  • 83.  OPTIONAL Workshop – Check For UserID onFocusLost
    • As a “warm-up” for the real event-driven programming you’ll be doing later in this course, try the following:
      • Add this function inside your RUIHandler:
      • Add this eventHandler to the User ID: TextField
      • Preview loginPage
      • Enter a User ID
      • Tab or click out