Rational Business Developer

Rational Business Developer
EGL Rich UI Development

IBM Trademarks and Copyrights
© Copyright IBM Corporation 2007, 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.

Contributing Authors Scott Pecnik, Chris Laffra and Jon Sayles – primary content and courseware developers Ancillary contributors: William Smythe/IBM, Brian Svihovec/IBM, Michael Virga/IBM, Yann Lerouzic/Morpheus Consulting, U.K., Mike Brouwers of ASIST, Kendall Coolidge, Nick Leonessa, Oleg Arsky/Synchrony Systems, Daniel Beauregard, CCB Associates, Inc., Arco van der Velden/Synobsys Nederland B.V., Ulf Buchner/Synobsys Nederland B.V.,

Course Details Audience Prerequisites
This course is designed for application developers who have programmed in a 3rd or 4th generation language – and who need to build Web 2.0/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 Class, and have a comfortable understanding of eclipse, the EGL language, SQL, services (including Web Services) and web technology Alternatively, if you have the equivalent EGL work experience doing production dynamic content web application development using Eclipse, EGL and web applications that should be sufficient An understanding of basic HTML is helpful HTML syntax HTML tables HTML components such as input fields, radio buttons, etc.

RBD/EGL Development Course Units: What is Web 2.0? Learn EGL Rich UI
Programming in EGL Rich UI Learn EGL Rich UI Appendix

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 The term “Web 2.0” has been around for about 5 years now.

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: Expectations

Web 2.0 – Unofficial IBM “Business Oriented Definition”
An important trend in delivering software applications An enabler for richer 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) 8

Web 2.0 and the Pendulum Swing – between Client and Server Computing
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 TUI Client-server computing “Smart” Personal Computer clients Simple file and database servers CUI Web (1.0) computing Light Web Browser clients Rich application and database servers JSF Web 2.0 computing Rich Internet Application clients Lighter application and database servers Rich UI

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”

“Mashups” – 1 of 2 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 Google Map Hotel information — separate database Directions — come from somewhere else Send to a phone — Additional functionality Why? Rapid application development Reuse existing services Avoid reinventing the wheel Empowers users

“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.

Technology Attributes of Web 2.0/Rich Internet Applications
AJAX incorporating: XHTML and CSS, DOM, XML and XSLT, XMLHttpRequest and JavaScript allowing information to be mashed up into new interactive portals." Rich User Experience Lightweight Programming Model XML or JSON data over HTTP, in a lightweight approach sometimes referred to as REST (Representational State Transfer) as an alternative to SOAP. Info-ware “DATA is the new HTML." Database management is a core competency of Web 2.0 companies. RSS/ATOM allows someone to link not just to a page, but to subscribe to it, with notification every time that page changes. Feeds Users must be treated as co-developers, in a reflection of open source development practices. The open source dictum, "release early and release often” Perpetual Beta

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

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: Additional examples include:

Benefits of Web 2.0 – Modular Development and Component Reuse
Because of the RBD tooling, programming-model and loose-coupling in the EGL implementation of Rich UI – Software Reuse is not only easy: EGL Rich UI application design tends towards reuse – as all interfaces are formally declared EGL Rich UI 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 External RIA Widget Elements External JavaScript New and RUIWidgets

What Web 2.0 Developers are Saying About EGL 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.

Web 2.0 – 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:

Web 2.0 and Rich UI Course Units: EGL Rich UI – Terms and Concepts
Programming in EGL Rich UI Learn EGL Rich UI Appendix

What is Rich UI? Rich UI stands for Rich User Interface.
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: …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) Rich UI has also been used to generate Java/SWT bindings, hence the reason for swaying from the traditional name of RIA.

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 There exists JavaScript that can run on the server (server-side scripting), this however is not very common.

EGL: Shielding Complexity – Across the Development Lifecycle
Business Developers Business Developers Widget Writer UI Produce IBM SOA ISVs EGL Widget Library Consume Data + Logic EGL REST XML SOAP JSON SOAP XML REST PHP COBOL Java RPG SQL JavaScript AJAX Dojo Google

Rich UI Resources On the EGL Café – in the EGL Rich UI hub: …IBM is providing a wealth of: Examples Focused documentation Commentary Links

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. Rich UI Application Service Calls …and… Results Server-Side Enterprise Computing Assets EGL Server-Side Application Resources JDBC Calls …or… Services

More Terms and Concepts – AJAX, Widget, DOJO
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. EGL Widget DOJO Widget

Still More Terms and Concepts – JSON, Silverlight
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:

Cascading Style Sheet (.CSS file)
Found under \WebContent\ Widget Properties: class  Discussion Your JSP page’s look and feel will be derived primarily from a cascading style sheet (.css file). A .css file is a standard practice for organizing and making consistent a user interface. By adopting the use of a .css, your project (and company) can specify its optimal visual presentation, branding, etc. while simultaneously simplifying development and making especially maintenance (by changing the .css file’s properties new font and color schemes can be applied dynamically. In your projects, you may use the .css files made available by IBM (which form the basis of the template pages you’ve created to date), or you may customize these .css files, or replace them whole-scale with your own. CSS design is a topic that is outside the scope of these tutorials. However, showing you how and where to over-ride the CSS defaults for a given page is not (outside our scope). If you are interested in this subject, read on… Customizing the Default CSS Properties for a Page and JSF Controls For the base page, you must edit the CSS file per se’ either within RAD (by double-clicking on an empty part of the Content Area and responding “yes” to Open page template for editing, or by editing the appropriate file in your project’s \theme\ directory (see next topic). You may also customize each individual JSP page – and every/any attribute on the page to match the visual requirements of your user interface standards. A Little Background on .CSS A .CSS is a properties file that allows web designers to define a tag, which contains additional definitions of fonts, colors, layout and other elements of a web page presentation. In the example shown here, there are tags – or what CSS experts refer to as style classes. The tag name: .inputText_Error, is defined as existing of two HTML properties (note them, before continuing). In your .JSP pages, for certain graphical elements, you can select inputText_Error as the Style Class. In so doing, text for the specified element would be as: bold (in appearance) with a red border. Note that each JSF component has a default tag assigned to it. You may selectively re-assign to a different tag by selecting from the Classes option in the Attributes tab. To learn more about .CSS technology, try either of these links: A Cascading Style Sheet is a file composed of one to many “classes” which are labeled declarations of related HTML tags A .css class is defined for a widget (like a TextLabel) in it class property .CSS tags are applied in the browser (at run-time) Cascading Style Sheets are used to make web pages U.I.: Consistent Easy to develop Easy to maintain (a change definition propagates to all widgets that refer to the tag Classes inside of a Cascading Style Sheet

OPTIONAL Topic – The Internet 101
Request/Response Lifecycle: Uniform Resource Locator Connect to a TCP/IP network: Through your ISP - internet Through an intranet/extranet Enter a logical URL/URI address – press “GO” in the browser to make a request: A global-database receives the request And resolves the logical address into a physical address of a server that can respond to the request by either: Serving a page Passing the request to an application that can respond (dynamic data content web application) If a dynamic content application, your EGL JSFHandler eventually gets control of the request (through a JSF framework), and processes it And returns data (bound to JSF components) which end up processed by the JSF framework (Java) classes – which emits HTML and sends a response (reply) back to the user’s PC  Events and Discussion User logs their PC into their ISP (home) or launches their browser at work (which accesses their corporate Intranet. The browser software on a PC waits for a successful IP address, and displays the person’s chosen “Home Page” – either some commercial site (IBM.COM) or your internal extranet/intranet page. The user enters a URL into the browser Address area and clicks Go (or presses Enter). This formats an HTTP Get Request sent to the logical address entered ( ). This Logical address is mapped to (resolves to) a physical IP address, in the form of nnn.nnn.nnn.nnn – which is the location of some known network address on the Internet backbone. The server located at the IP address is sent the HTTP Get request over and serves (returns) the designated resource – typically the: home.htm or index.htm for the application back to the return IP address (part of the HTTP request). The returned data contains HTML The browser receives the data (HTML) from the server; it interprets (renders) the HTML and formats the page. The user enters data or makes some sort of decision/response and clicks a hyper-link (a hidden URL) or Enter. This sends an HTTP request including any user values as parameters (name/value pairs) to the URL – which goes through steps and 3 above (again). In addition, the Get request might point to (via the URL address) a specific program to run, in which case the Server: Locates the program using the URL (address) The program runs, and issues a call to obtain the address of the HTTP Request. It uses the data in the Request to do something – and can save data temporarily to a Session object in the Application server The program sends an HTTP response back to the Server (typically including HTML) that returns the HTTP data to the users browser, which interprets the HTML, etc.

OPTIONAL Topic – What’s in a URL (Uniform Resource Locator)
Uniform Resource Locator (URL) is a technical, internet-term used as a synonym for Uniform Resource Identifier (URI) – which is used by your browser to access and retrieve: Documents, Pages, Graphics …from a unique address of a network-based application or web server connected to the internet Here is a sample URI dissected: “ tells the web browser to make a request on port 80 of type HTTP. “www” tells the browser to connect to a DNS (Domain Name Server) on the world wide web. Once connected to the DNS server, the hypertext, or “ibm.com” is resolved to an IP address. This IP address is returned to the client browser which then makes a direct connection to the web server. Here is a more interesting URI: localhost:5590 = “this computer” listens on port 5590 (default for RUI development/Preview) /EGLRICHUI/ = “the root directory of the application” - \WebContent\ /mySamples/ = “launch the RUIHandler named: ruiPropertySample.html – found in the \mySamples\ folder (directory) under \WebContent\ contextKey=5 = “pass this RUIHandler the value 5, in a variable named: contextKey To access a web server on the internet, you must make a connection through it’s IP Address. URL’s provide a mechanism that aid’s the process of accessing a web page. It is much easier to remember a URL then an IP Address, which is (up to) a 12 digit number. URL’s can contain parameters as seen in the “more interesting” URI. In a TCP/IP network such as the Internet, localhost is a reserved name meaning this computer. It is used where one would otherwise specify the 12-digit IP address or logical domain name of a computer in the network. ping localhost - always translates to the loopback IP address

OPTIONAL Topic – the Browser
The browser (Internet Explorer, Firefox, Netscape, Mozilla, etc.). Browser software: Understands and can render HTML on the user’s PC Understands and can execute the JavaScript generated by Rich UI – on the user’s machine (called “client/side” processing)  Notes:

OPTIONAL Topic – Browser Wars
There are documented operational and layout differences between the two most common browsers (IE and Firefox) – across: Basic U.I. properties (HTML rendering and tag references) JavaScript interpretation I.E. 6 Browser rendering  Notes:

Rich UI – First Steps Course Units:
Create and Configure Rich UI 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

 Create a new project Let’s start the tutorials by creating our very own EGL Rich UI project Select File  New  Project In the new project wizard, select EGL Project, and then click Next

 Create a new project The wizard should then ask you to provide a name for your project Type (all one word) EGLRichUI Next make sure to select Rich UI Project as your project type Click Finish The IDE will take a minute or two to create your project and set up the environment in your workspace

 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 A Publish/Subscribe Framework called the “InfoBus” A Framework for working with standard data and event management, known as: MVC Event handling logic

 Import a Custom Widget Project
We will be using a # of custom widgets in this training course. These custom widgets comprise learning examples and reusable components for your follow on Rich UI applications. You will need to import them from your setup folder on the desktop. Steps: File (menu) Import Other Project Interchange Select the widgets.zip file  you downloaded for this class A new project will be added to your workspace 

Setup Your Workspace for Cross-Project Source Reference
In order for your Rich UI project to reference source parts in other projects in your workspace, you will need to add your other projects to the EGL Build Path Steps: From Project Explorer: Right-click over EGLRichUI Select Properties From Properties > EGL Build Path Check the boxes for: EGLWeb com.ibm.egl.education.widgets Click OK

Copy the Images Folder From the EGLWeb Project to the EGLRichUI Project
In order for your projects to access images in your project, you will want some graphics files. We’ll use the ones you have in your EGLWeb project. But (for expediency’s sake) you’ll need to copy these into your EGLRichUI project: Steps: From Project Explorer: Open the EGLWeb project Expand \WebContent\ Select and Copy the entire \images\ sub-folder under \WebContent\ From your EGLRichUI folder Paste the \images\ sub-folder under \WebContent\

 Configure Preferences
You may have already done this, but from Window > Preferences From Generation UN-check Deployment Descriptor Note that optionally you could check (on): Library Program Service Click OK  Notes: This is simply to avoid having the RBD tooling re-validate the JSF pages – and slow the response of your development.

 Developing in Rich UI Let’s learn a little about what it’s like to develop using EGL Rich UI The workbench view you’ll be using is the EGL Rich UI Editor The Rich UI Editor provides: Design, Source, and Preview modes These three view modes 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 will look like to your customers or users These three views are where you will spend a large majority of your time as a Rich UI developer. The views are organized inside the workbench in the EGL Rich UI perspective Recall from your previous EGL learning, that a “perspective” organizes related workbench views along the lines of developer roles and/or tasks. An annotated snapshot of the Rich UI perspective is shown on the next slide You’ll soon find out that Rich UI is much more Agile* than EGL JSF. Agile - quick and well-coordinated in movement source:

Rich UI Perspective Similar to Web Perspective – but with different workbench views related to Web 2.0 development Project Explorer Content Area Where you design your Web 2.0 applications Code EGL Rich UI statements Test (Preview) your work Palette Outline, Properties and Events Views Problems & Generation Results Views

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 What we’ll call a “View” in this course RUIHandler of sub-type RUIWidget What we’ll refer to simply as a “Widget”

Rich UI – First Steps Course Units: The Rich UI Environment
Create a new project Rich UI Programming Fundamentals Web Application Layout and Design Event Driven Development Input Controls Data Tables Login Page Calling a Service

RUIHandlers – aka “Views”
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 RUIHandler type RUIHandler… Cascading Style Sheet (optional property) initialUI (initial U.I. rendering in the browser) onConstructionFunction (initial EGL Function) Elementary Widget (ex. textbox, button HTML, etc.) ExternalType (provides access to native JavaScript) … EGL Rich UI Elements Custom Widget – can embed reuse existing Widgets onConstructionFunction Elementary Widget EGL Function… EGL Function(s) …  RUIHandlers are referred to as “views” because they represent the visual or “view-able” elements of your Rich UI application

RUIHandlers – Code-Level Example
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

RUIHandler – Containing 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)

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: 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 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

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

RUIWidget Properties RUIWidget. <property> 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 U.I. Properties Browser Event handling Properties

RUIWidget Properties – EGL Coding Example
To specify a RUIWidget property or event 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 

Simple RUIHandler/Elementary Widget – Document – 100 Foot View
Is figuratively represented by…

Simple RUIHandler/Elementary Widget – Code – 10 Foot View
myTopBox myBox02 myBox03 //NOTE references to myTopBox Box //NOTE: Properties – including what function to invoke: “onClick” //NOTE: Properties of U.I. field //NOTE references to U.I. elements //NOTE: container for myBox02, myBox03 //NOTE: When clicked? Assign value

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: cssFile = “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) Opacity -

Event-Driven Programming and Event Handling
Programming in 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 defined for it Widgets can even have multiple events defined: An input TextField can have both onMouseOver (for context sensitive help) … and onFocusLost (to validate data entry before moving to the next field) You specify defined 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 The responses to the events are in the form of standard EGL functions that contain EGL business logic and procedural statements (to do the 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  - mouse events  - keyboard events

Event Handling and the Rich UI “Event Record”
While the Web 2.0 event-driven programming model permits multiple events on any/every widget in a web page, in practice you will define specific event-handlers to trap specific events when they occur. This means that: When an event occurs in the browser (A User clicks a button – which fires an onClick event) If you have defined an EGL event-handler for that event And you have coded an EGL function for that event-handler The Rich UI framework automatically invokes the EGL function you specify to handle the event you declare The framework also gives you access to an Event Record, which provides a number of properties and values that can be used in your U.I. business logic To do things such as: Detect which button was clicked: e.widget.id Set focus to a widget: e.widget.focus(); Change the x/y coordinates of the widget in the browser (used for run-time Drag & Drop operations) HTML + JavaScript Clicking the Multiply button fires an onClick event in the browser. If you have an event-handler defined for onClick the JavaScript code (generated from your EGL) tied to the onClick event is automatically run in the browser

How Can I See All These Events and My EGL Code? (Use the Debugger!)
The EGL Debugger works exactly the same for Rich UI as it does for batch EGL, and EGL/JSF functionality Steps: Set your break-points (in the EGL editor’s left-hand border): From Project Explorer, Debug your EGL Rich UI Application

EGL Rich UI Debugging When you Debug a Rich UI Application.
Your RUIHandler will open in an external browser  Upon a defined event, the EGL function declared as that event-handler will be fired off and loaded in the Debugger for you to step-through You will also get to see/Debug through the EGL Widget framework code (or you can Zoom through the code, if you’re not interested)

Basics of Rich UI Programming – ExternalTypes – access to JavaScript
Rich UI allows you to use (or reuse) existing native JavaScript functionality  Example – call a JavaScript function defined through an EGL ExternalType to “Google map” an address  Fires onClick event Calls JavaScript function

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 = "#C3D9FF", 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] };

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!

How do you Invoke a Rich UI Application from a Browser or External Application?
A deployed RUI applications URL is: " project name>/<DeployedRUIHandlerName>.html Where domain name, port, and web project name are the same as you would specify for a web page, or .JSP page being run on an application server. To define the deployedRUIHandlerName value - this is the name of the 'Main View', which is really what you are deploying, and represents the root of your application Example Rich UI application deployed to Tomcat: Example Rich UI application being developed in RBD: Note that you can invoke an external browser from Preview

Rich UI – First Steps Course Units:
Rich UI Programming “101” Workshops Creating packages and RUIHandlers Hello World The Visual Editor Rich UI Widget Properties Rich UI Widget Events

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 (learning to use the Rich UI tools) Standard mode editing Split Screen Experimenting with common widget functions EGL Rich UI Debug Additional Workshop Calculator Temperature Converter Login You’ll soon find out that Rich UI is much more Agile* than EGL JSF. Agile - quick and well-coordinated in movement source:

Workshop – Exploring Rich UI Using 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

 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

 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

 Workshop – Replace sample1 “Boilerplate” code
From the slide ***Notes, copy and paste the RUIHandler code for sample1 From the RBD Source view: Select all of the boilerplate statements and replace them with the slide notes code. Save (Ctrl/S) 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"; function populateField2(event Event in)

 Workshop – Test and Play with sample1
Select the Preview mode – click the Button Return to the Source mode, and modify some of the EGL code. Return to Preview mode to test (to view) your work 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"; function populateField2(event Event in)

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

 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

 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

 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

 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.

 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.

 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.

 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.

 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 3rd 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

 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

 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

 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!

 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

 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!

 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

 Rich UI Box - Examples Let’s take a look at the code for the HelloWorld page we just created! Notice that we are using the columns = 2 property This means that every 3rd child will go on it’s own row in the table

 Rich UI Boxes In the code, change the columns property to equal 1
Now return to the Preview tab of the EGL Rich UI Editor and notice the change in the page when it renders

Workshop – Split Screen Editing, Widget Functions, Rich UI Debug
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 Use the Rich UI Editor in Split-Screen mode Use some of the common widget functions*** Widget.Fadein() Widget.Focus() Widget.select() Widget.reSize() Use the EGL Rich UI Debug facility Preview the web application *** These functions are common to all widgets and widget types

 Create the Package and RUIHandler
First, right-click over the EGLSource folder and create a new package Name it sandbox Next, right click over the sandbox package and create a new EGL Rich UI Handler Name it: wksp2

Add a Box and some Widgets to wksp2
Using the Visual Editor, add the following widgets to wksp2 box Name: boxOuter columns: 2 alignment: CENTER backgroundColor: AliceBlue width: 400 height: 300 Four TextFields Named: TextField1  TextField4 Add a 2nd box and a Button inside the box Keep all of the defaults for both widgets

Add an Event and an EGL Event-Handling Function
Using the Visual Editor: Select the Button From the Events sub-tab Click: Add Event Handler Name the event: buttonClickEvent From the onClick Event Open the Function comboBox Select: buttonClickEvent Switch to EGL Source editing mode Using Content Assist (Ctrl+Spacebar) add the following code in the buttonClickEvent(…) function: Save your code

Preview the View – Add Some New Functions
From Preview Click the button Note that the text is truncated in the widget’s U.I. (let’s fix this) From Source editing mode, add the following additional EGL statements to the RUIHandler: (again, use Content Assist to create) Save, and from Preview, Click the button – note the effects of the new functions Experiment with different values for the fadein/fadeout, width and select/focus functions

Debug Rich UI Logic*** (See Slide Notes before beginning this Workshop)
Recall from your previous EGL learning that to Debug you: Set breakpoints at the lines in the EGL source you wish to begin line-by-line debugging By Double-clicking in the gray border next to an operational line (not a declaration) – an executable statement You Debug from Project Explorer So go ahead! From within wksp.egl - Set a breakpoint in the buttonClickEvent From Project Explorer: - Right-click over wksp2.egl - Debug EGL Rich UI Application If you are using a version of EGL/RBD prior to April 2009, please do the following to set up Debug for this workshop From Project Explorer, expand the project: com.ibm.egl.rui_1.0.0 Expand EGLSource Expand com.ibm.egl.rui.widgets Open the widget source for: TextField.egl Find the private function: setText(txt string in) – and completely replace it, with the following code, copied and pasted from this note: private function setText(txt string in) text = txt; // make sure we see the value in debug setAttribute("value", txt); end 6. Close and save your changes

Debug Rich UI Logic – Test Your Rich UI Logic
Note that Debug will launch your view in the browser Enter values in some of the TextFields Click the button (and confirm the Perspective switch) Besides viewing the code execution line by line, be sure to explore all of the widget properties and their values. When finished? Terminate and close the Debugger. Then return to the Rich UI Perspective If you are using a version of EGL/RBD prior to April 2009, please do the following to set up Debug for this workshop From Project Explorer, expand the project: com.ibm.egl.rui_1.0.0 Expand EGLSource Expand com.ibm.egl.rui.widgets Open the widget source for: TextField.egl Find the private function: setText(txt string in) – and completely replace it, with the following code, copied and pasted from this note: private function setText(txt string in) text = txt; // make sure we see the value in debug setAttribute("value", txt); end 6. Close and save your changes

Split Screen Mode in the Workbench – 1 of 3*** Slide Notes
One very nice way to understand the “cause and effect” between editing EGL code and using the Visual Editor to design your Rich UI applications is to work in split screen mode. To do this: With wksp2.egl already opened in the EGL Rich UI editor From Project Explorer: Right-click over wksp2.egl Open with EGL Editor With both editors open in the Content Area: Select the EGL Editor copy of the source Left-Click the tab (as shown) Hold and drag towards the bottom When the folder-pointer becomes a downward-pointer release the mouse  Thanks to Regi Barosa for discovering this editing technique

Split Screen Mode in the Workbench – 2 of 3
So now you can: Use the Visual Editor Drag & Drop Widgets from the Palette Set Properties Move with mouse-based development And see the new EGL statements and properties in the code …or you can … Develop your Rich UI application from the EGL code-level And immediately see the effect of your work in the Visual Editor Let’s experiment with this a little (next slide)

Edit in Split Screen Mode – 3 of 3
From the Visual Editor, add a new Button to the RUIHandler (take all of the defaults) Note the effect in the EGL source code (a new Button variable is added) Make some changes to the view by editing the EGL source and note the Visual Editor effect Preview  In order to synch-up the source copies in both editors you will have to save changes (on either side of the split-screen)

 Additional Optional 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. Debug your calculator as an EGL Rich UI Application

 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

 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.

 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 

 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

 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

 Calculator – in Preview
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…

 Calculator – Optional Labs and Workshops
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 Also, if time permits: From the EGL Source Code Editor – add several break-points inside your Calculator functions From Project Explorer: Debug your work

 Optional Workshop – Simple Login Page
Now that we’ve got a very nice Web 2.0 Calculator, let’s make a login page. First right-click over the EGLSource folder and select New  Package Name the package authenticate Next right-click over the authenticate package and create a new Rich UI Handler. Name the file: login

 Login Page Drag a box onto the page from the visual editor
Just take the default for the variable name. Next add the following properties to the box using the visual editor

 Login Page Now that we’ve got a Box to lay out our components, let’s go ahead and create some components to allow for username and password input! Once the following components have been created, modify the Box declaration accordingly! Save the page and compare your results to the following  Now that we have our UI laid out, let’s create some presentation logic that will authenticate a user and switch to the Calc view (continued on the next slide) userNameLabel TextLabel{text = "User Name: "}; userNameField TextField{}; passwordLabel TextLabel{text = "Password: "}; passwordField PasswordTextField{}; loginButton Button{ text = "Login"};

 Login Page Modify Calc.egl:
From Calc.egl (the source is in the \calculator\ package: Add a box widget variable, named: layoutBox (columns=2, etc. for properties) Also, put all of the current calculator widgets inside of layoutBox’s children=[…] property Code the following logic in the RUIHandler Note we are giving the RUIHandler two different events to listen for. loginFunc (bound to the button) and resetUI (which you will bind to onFocusLost for the Password field) Also note that we are creating a variable of type Calc and setting it as the child to our login box Remember to press Ctrl + Shift + O to bring in import statements Bind the resetUI function to the onFocusLost event for the Password field Save the file and Preview the web application (and test your coding) Note that this technique assumes the main box in  Calc is named: layoutBox

 Additional Simple 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

 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 

 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 formula 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 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); function ConvertCelToFahr(event Event in) FahrValue.text =(9 / 5) *(celValue.text as int) + 32;

RBD/EGL Development Course Units:
Rich UI Properties and Event Handling

 Working With RUIWidget Properties and Events
In this comprehensive workshop, you will: Create a new RUIHandler inside the mySamples package Use the Rich UI Visual Editor to do initial web application layout Add several different types of RUIWidgets Work with (customize) the essential U.I. Properties and Events for the RUIWidgets Using the Visual Editor Using EGL source code editing Preview the web application – and verify “cause and effect” Note – this is simply a learn by trial-and-error workshop, that asks that you experiment with different widget properties and events. Do not try too hard to match the PowerPoint screen captures exactly. And feel free to specify other settings for properties – just as long as you can tie the eventual (Previewed) result with a specified property value

 RUIWidget Properties – Setting Basic Properties from the Visual Editor
From your \mySamples\ package, create a new RUIHandler named: ruiPropertySample Using the Visual Editor, drag in a box – give the box the following properties: name: Box Alignment: CENTER Columns: 2 Color: Gray BackgroundColor: Wheat Font: Verdana fontSize: 10pt fontWeight: bold Using the Visual Editor, drag a TextLabel into the Box Name: TextLabel Preview  Note the colors, alignment, font styling, etc. Opacity -

 RUIWidget Properties – Modify Properties from the Visual Editor
From the Properties view, modify the following for Box name: Box – Note you can not change the name from the Properties view Alignment: LEFT Columns: 2 Color: Moccasin BackgroundColor: SteelBlue Font: Courier fontSize: 14pt fontWeight: normal Preview Customize the individual properties for the TextLabel  Preview  Note that the individual RUIWidget’s properties over-ride the Box (container widget) properties, when both are set for the same attribute Opacity -

 RUIWidget Properties – Set Border Properties
From Properties, modify the Border values for Box  borderColor: GoldenRod borderStyle: groove borderWidth: 8 Preview Customize the individual Border properties for the TextLabel  Preview  Try a few different settings for border color and style Preview after each customization Opacity -

 RUIWidget Properties – Set Padding Properties
Using the Visual Editor, drag in three additional TextLabels Be sure to add them inside of the Box  Preview (with Padding: 8 for the Box) From Properties, set the Box’s Padding to 22 Preview 2 Set one of the TextLabel’s padding to: 22 Preview  Opacity -  Padding adds space between the container (parent) component and its children TextLabel with padding: 22

 RUIWidget Properties – Set Position Properties
From Properties, select another TextLabel, and set these Properties  backgroundColor: Gray Position: relative X: 22 Y: 33 Width: 255 Height: 44 Preview Change the same TextLabel’s position to absolute Select, hold and drag the TextLabel inside the Box Drag the TextLabel anywhere, the x/y will change accordingly Preview … and press the Refresh button Relative positioning moves an element RELATIVE to its original position. If you set x to -3 with relative positioning, the object moves 3 pixels to the left of where it would normally appear. With absolute positioning, an element can be placed anywhere on a page by setting its x and y properties. Opacity -

 RUIWidget Properties – Appearance Properties
From Properties, select the TextLabel with the absolute position – and set the following Properties: Position: X: 8 Y: 8 Appearance Opacity: .6 Cursor: hand Opacity is a float ranged between 0 (zero, opaque) and 1.0 (one, completely transparent). Select another TextLabel, and from Appearance, specify: Visibility: hidden Select another TextLabel, and from Appearance specify: Cursor: wait Preview  TextLabel with hidden property Note: 3D – effect with transparent (opaque) TextLabel in the foreground Note also the hidden property … working 

Course RBD/EGL Development Units: Cascading Style Sheets and Rich UI

 What is CSS? It’s an axiom of the web development world that, CSS is very important in professional layout, consistency, and many aspects of U.I. So it should come as no surprise that the same is true for Rich UI and Web 2.0 development. In recent years, free flow web designs have become the standard for all web pages. This means that HTML tables are no longer used for base UI layout. Instead, floating Divs are the preferred method. These floating Divs are simply containers. Containers that are styled by CSS tags and classes. By designing a web page with floating Divs and CSS, you end up getting a very flexible design. The entire look and feel of the web page can be changed by simply editing the CSS file, and never touching a single line of HTML. This one of the benefits of using CSS over HTML tables.

 CSS Syntax Since this is a Rich UI specific course, we can’t teach the intricacies of – or deep-dive into CSS. We can however give quick overview – and teach you “about” CSS. To start off, there are two types of CSS groupings: classes and IDs A class can be referenced as many times as you want inside of an HTML file. An id, on the other hand, can only be referenced once – as it is also used by JavaScript as the unique identifier for the Rich UI element it is assigned to (and can be returned by calling: document.getElementById(“…”) in native JavaScript The two also have a slightly different syntax…see below Note the differences in syntax between IDs and classes: .<cssClassName> …instead of… #<cssClassName>

 CSS – Workshop – 1 of 3 Lets now step into a simple but quick workshop that will demonstrate some of what you can do with CSS. Create a new package under the EGLRichUI project called css. Next, create a new Rich UI Handler called CSSDemo Often pages are constructed with the following general layout and structure Container Header Navigation Content CSS is then used to position and style these elements Each of the above elements are divs. Note that the content div may contain many more divs inside of it.

 CSS – Workshop – 2 of 3 Copy/Paste the following code in the notes, and replace the boiler plate code with it. Note that we have created a standard layout using Divs. A container has been created to hold all of the free form Divs. Inside of it is a header div, a nav div, and a content div. The content div in itself then contains several other divs Also note that we chose to use the CSS “id” property for things that would only appear on the page once, and “class” property for things that could appear on the page multiple times! package css; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.TextLabel; // RUI Handler // handler CSSDemo type RUIhandler {initialUI = [container],onConstructionFunction = initialization, cssFile="css/EGLRichUI.css"} container Div{ id = "container", children = [header, nav, content ] }; header Div{ id = "header"}; nav Div{ id = "nav"}; content Div{ id = "content", children = entries }; entries Div[20]; function initialization() for (i int from 1 to entries.getSize() by 1) temp TextLabel{ text = "Data: " + i }; entries[i] = new Div{ class = "entries", children = [temp] }; end content.setChildren(entries);

 CSS – Workshop – 3 of 3 Now that we have created a simple layout using HTML (or in our case Rich UI), lets add the CSS to style it. Copy/paste the code in the notes section of the slide and append it to the EGLRichUI.css file – which is under \WebContent\ in your EGLRichUI project Note the use of two properties: Position: relative Float: left These are the key properties for designing free flow web pages Study the code, edit it, and examine the changes, then go to the following URL to learn more about CSS topics: #container { margin: 0 auto; position: relative; } #header { float: left; width: 100%; height: 100px; background-color: red; clear: right; #nav { width: 200px; min-height: 700px; background-color: RGB(118,157,169) #content { margin: 10px; .entries { padding: 5px;

 RUIWidget Properties – .CSS Classes – 1 of 3
As you’ve seen, U.I. characteristics can be set manually – and explicitly and directly for each RUIWidget (and RUIWidget elements) However, it’s likely that the look & feel of your application will be controlled by the entries in your .CSS (Cascading Style Sheet) Your Rich UI project will have a Cascading Style (or more than one, it depends on your shop web standards) in the \WebContent\css\ directory. This file has to be in the \WebContent\ directory, but not necessarily under \css\ - that’s your call A .css file contains two entities: classes – which begin with a period See .outputTextSmallBoldRed ids – which begin with a pound sign See .boxStyle The format of a .css class is as follows: Period (or dot) Unique className (unique within the file) Open curly brace A set of HTML properties as value pairs – ending with a semi-colon A closing curly brace A closing semi-colon In order for your RUIHandler to use the classes and ids within a .CSS file, you will add a property to the handler statement as follows: cssFile=“folder/CSSFileName.css” And you will reference the specific .CSS class in the class property of your widget  Discussion Your web application’s look and feel will be derived primarily from a cascading style sheet (.css file). A .css file is a standard practice for organizing and making consistent a user interface. By adopting the use of a .css, your project (and company) can specify its optimal visual presentation, branding, etc. while simultaneously simplifying development and making especially maintenance (by changing the .css file’s properties new font and color schemes can be applied dynamically. In your projects, you may use the .css files made available by IBM (which form the basis of the template pages you’ve created to date), or you may customize these .css files, or replace them whole-scale with your own. CSS design is a topic that is outside the scope of these tutorials. However, showing you how and where to over-ride the CSS defaults for a given page is not (outside our scope). If you are interested in this subject, read on… A Little Background on .CSS A .CSS is a properties file that allows web designers to define a tag, which contains additional definitions of fonts, colors, layout and other elements of a web page presentation. In the example shown here, there are tags – or what CSS experts refer to as style classes. The tag name: .inputText_Error, is defined as existing of two HTML properties (note them, before continuing). In your .JSP pages, for certain graphical elements, you can select inputText_Error as the Style Class. In so doing, text for the specified element would be as: bold (in appearance) with a red border. Note that each JSF component has a default tag assigned to it. You may selectively re-assign to a different tag by selecting from the Classes option in the Attributes tab. To learn more about .CSS technology, try either of these links:

 RUIWidget Properties – .CSS Classes – 2 of 3
From Project Explorer, open your project’s .css file and add a new class as shown Note that Content Assist (Ctrl+Spacebar) can be used to help you build the entries shown here Save the file and your changes From the Visual Editor – with ruiPropertySample in the Content Area: Select the outer Box (simply named “Box”) and from Properties, erase the font property Select one ore more of the TextLabels, and specify a class property as follows: Note that .css class names are cAsE SenSItivE Add the following .css class to your project’s .css file: .outputTextSmallBoldRed { font: Verdana; font-size: 12pt; color: red; font-weight: bold; };  Discussion Your web application’s look and feel will be derived primarily from a cascading style sheet (.css file). A .css file is a standard practice for organizing and making consistent a user interface. By adopting the use of a .css, your project (and company) can specify its optimal visual presentation, branding, etc. while simultaneously simplifying development and making especially maintenance (by changing the .css file’s properties new font and color schemes can be applied dynamically. In your projects, you may use the .css files made available by IBM (which form the basis of the template pages you’ve created to date), or you may customize these .css files, or replace them whole-scale with your own. CSS design is a topic that is outside the scope of these tutorials. However, showing you how and where to over-ride the CSS defaults for a given page is not (outside our scope). If you are interested in this subject, read on… A Little Background on .CSS A .CSS is a properties file that allows web designers to define a tag, which contains additional definitions of fonts, colors, layout and other elements of a web page presentation. In the example shown here, there are tags – or what CSS experts refer to as style classes. The tag name: .inputText_Error, is defined as existing of two HTML properties (note them, before continuing). In your .JSP pages, for certain graphical elements, you can select inputText_Error as the Style Class. In so doing, text for the specified element would be as: bold (in appearance) with a red border. Note that each JSF component has a default tag assigned to it. You may selectively re-assign to a different tag by selecting from the Classes option in the Attributes tab. To learn more about .CSS technology, try either of these links:

 RUIWidget Properties – .CSS Classes – 3 of 3 – and Styling Hierarchy
From the EGL Editor (in Source mode) In the handler statement, notice the property just after the open curly brace: cssFile = "css/EGLRichUI.css" Preview   Hierarchy of Style Elements The run-time view will reflect your styling design elements as follows:  Discussion Your web application’s look and feel will be derived primarily from a cascading style sheet (.css file). A .css file is a standard practice for organizing and making consistent a user interface. By adopting the use of a .css, your project (and company) can specify its optimal visual presentation, branding, etc. while simultaneously simplifying development and making especially maintenance (by changing the .css file’s properties new font and color schemes can be applied dynamically. In your projects, you may use the .css files made available by IBM (which form the basis of the template pages you’ve created to date), or you may customize these .css files, or replace them whole-scale with your own. CSS design is a topic that is outside the scope of these tutorials. However, showing you how and where to over-ride the CSS defaults for a given page is not (outside our scope). If you are interested in this subject, read on… A Little Background on .CSS A .CSS is a properties file that allows web designers to define a tag, which contains additional definitions of fonts, colors, layout and other elements of a web page presentation. In the example shown here, there are tags – or what CSS experts refer to as style classes. The tag name: .inputText_Error, is defined as existing of two HTML properties (note them, before continuing). In your .JSP pages, for certain graphical elements, you can select inputText_Error as the Style Class. In so doing, text for the specified element would be as: bold (in appearance) with a red border. Note that each JSF component has a default tag assigned to it. You may selectively re-assign to a different tag by selecting from the Classes option in the Attributes tab. To learn more about .CSS technology, try either of these links: Individual RUIHandler Properties Order Of Precedence .css Classes and IDs HTML element defaults

 Optional Lab - RUIWidget Alignment Properties
This is a simple, copy/paste RUIHandler that allows you to see how to use: Box Alignment Box Padding Dynamic Widget declarations (using new – inside the code) Steps: From the mySamples package, create a new RUIHandler named: Alignment From the Slide ***Notes Copy all of the code Completely replace the existing RUIHandler boilerplate statements Save Preview  Study the coding solution, and note cause & effect package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.BoxLib; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; Handler Alignment type RUIHandler {initialUI = [ui] } ui Box { columns=1, children=[ new Box { children=[ right ]}, new Box { children=[ center ]}, new Box { children=[ left ]} ]}; boxStyle string="background:wheat; borderStyle:solid; margin-bottom:15;"; center Box{columns=1,style=boxStyle, padding=5, alignment=BoxLib.ALIGN_CENTER, children=[ new TextLabel{text="The items in this box are aligned in the center"}, new TextLabel{text="Padding inside box is 5", font="Arial", fontSize = 24}, new TextField{text="This is a text field"}, new Button{ text="Button"} right Box{columns=1,style=boxStyle, padding=20, alignment=BoxLib.ALIGN_RIGHT, children=[ new TextLabel{text="The items in this box are aligned to the right"}, new TextLabel{text="Padding inside box is 20"}, left Box{columns=1,style=boxStyle, padding=45, alignment=BoxLib.ALIGN_LEFT, children=[ new TextLabel{text="The items in this box are aligned to the left"}, new TextLabel{text="Padding inside box is 45"}, end

 “What was it about those browser events?” – Review
EGL Rich UI utilizes what is called event driven development. Much of the 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 or “thing” on a web page can have events tied to it. 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. Understanding the event driven development model is important – and it’s possibly quite different from the kind of software programming you have done before. We’ll dedicate a few extra slides to it…okay?  

 Concepts – Event-Driven, Preemptive Programming Model
RUIwidgets (buttons, listboxes, textfields, etc.) respond to events that are: Event-Driven – They happen when they happen arbitrarily not as a result of: Sequence, Selection and Repetition Preemptive – events can (and will) fire off calls to EGL functions when they occur – concurrently, but not “multi-threaded”  Terms and Concepts – Deep Dive An event is: An external occurrence of some user action in the browser (like a user mouse-click, or button-click, or ListBox selection, or mouse-over (“hover-help”), etc. A non-visual occurrence of something like a return from a Service call or return from a call to an external JavaScript or some other RUIWidget The EGL Functions that respond to events are called: event handlers Events require an event dispatcher to call your EGL event handlers (Functions) In the Rich UI world, the event dispatcher is provided by the framework and system code (i.e. you don’t write such things – at least not in EGL) Your development (EGL Rich UI logic) will thus largely consist of: Coding EGL statements inside of functions that respond to the various external and non-visual events you wish to handle, so that the event dispatcher will know which ones to call: There are essentially two types of EGL Functions: Initial U.I. presentation or “set-up code” – that is executed before the application A collection of EGL functions that respond to visual and non-visual events

 Concepts – Browser Events and Actions
In Rich UI, browser events are generated based on user input: Mouse clicks, mouse movement, mouse button release Key presses, Key releases Etc. Each widget gets to define what constitutes an event for it, and which EGL Function will be associated with it: button.onClick listControl.onChange Any given widget may allow multiple kinds of EGL Functions to be associated with its events: inputText.onKeyUp inputText.onFocusLost inputText.onChange Example – in this Grid control, when the user “clicks” a row, the values in that row are loaded into the detail Widget above it in the browser. Conversely – if the user modifies a value and clicks the Update button? The corresponding value in the Grid control is modified.

RUI Programming Functionality Event-Driven Programming Model
The event dispatcher (Remember? You don’t code this) calls your EGL Function when the appropriate combination of user inputs occurs at run-time. This is based on your development specifications, which include: A defined event handler The EGL function code in your RUIWidget / RUIHandler Besides calling your event-handling EGL code, the event dispatcher also passes an event argument to your code: (e event in)  The argument contains details about the event which you can use programmatically to solve dynamic U.I. requirements such as: Drag & Drop Determining which button was clicked, etc.

Comparison: Synchronous vs. Event-Driven Programming Models
Do processing … Call a service  Wait … Service call returns!  Do more processing Do processing … Call a service  (Specify a “Callback” Function) Do more processing Service call returns!  (“Callback” Function is automatically invoked) Synchronous Traditional Run-time model (Next Sequential Instruction programming idiom) Event-Driven Rich UI Run-time model (Modular, independent functions)

Event Handlers/Event Dispatchers as an “Event Pipeline”
Events in the Browser Do InitialProcessing Render RUI artifacts in browser Event - onClick captured in RUIHandler, handled as an EGL Function Call a service (note that calling a service does NOT pre-req. a browser/user event) Event - Service call returns (EGL “Callback” Function automatically invoked)  User clicks a button Control immediately returns to the browser Database Enterprise Data Event Pipeline RUI Handler (EGL) code

 RUIWidget Events So now, let’s do some work with events and RUIWidgets. From the Palette, add two TextFields, a Button and another TextLabel into the Box (Review/Practice) Customize some of the properties. Don’t try to replicate the screen capture exactly, just be sure you understand cause & effect for the properties when you Preview Some Properties you might want to experiment with include: Color BackgroundColor Width Font FontSize FontWeight Opacity Border: Style Preview 

 RUIWidget Events – onFocusLost/onFocusGained
onFocusLost happens when a user tabs or clicks out of a field onFocusGained happens when a user tabs or clicks into a field To understand how this works: Add the following two functions to your RUIHandler’s source code  Save your code From the Design view: Select TextField1, and from Properties/Events: open the onFocusLost Function combo-box select focusLostFunc Select TextField2, and from Properties/Events: open the onFocusGained Function combo-box select focusGainedFunc Preview Type a value into TextField1 and hit the Tab key on your PC so that the FocusLost and FocusGained events fire off. You can also type into TextField1 and mouse-click into TextField2

 Back to Properties (for just one slide)
So – you probably noticed that when you tabbed out of TextField1 (at Preview time) the box “tightened up” (resized itself) proportionately to the # of characters of content in your TextField. My bet? This is not a behavior you want – at least not a default. To make the boxes fixed-width - from the Design view: Select each of the TextFields (one at a time), and from Properties/Position Specify a fixed-width: Preview

 RUIWidget Events – onClick
onClick happens when a user clicks a Widget with their mouse – typically a button, radio-button, check-box, etc. To see how this works: Add the following new function to your RUIHandler’s source code: Save your code From the Design view: Select the Button, and from Properties/Events, open the onClick Function combo-box select buttonClickedFunc Preview Click the Submit Button Check out the text value of TextLabel2

 RUIWidget Events – onMouseOver/onMouseOut
onMouseOver happens when a user hovers their mouse over a widget. This is typically used for: Context-sensitive (hover) help Rolling images over – i.e. making the images bigger, etc. onMouseOut happens when a previously hovering mouse over a widget leaves the widget’s area To see how this works: Add the following new functions to your RUIHandler’s source code: Save your code From the Design view: Select one of the TextLabels, and from Properties/Events, Select onMouseOut and …onMouseOver functions Preview Hover your mouse over the TextLabel … … then move your mouse away from the TextLabel

 RUIWidget Events – onContextMenu
onContextMenu happens when a user RIGHT-clicks over a Widget with their mouse To see how this works: Add the following new function to your RUIHandler’s source code: Save your code From the Design view: Select TextField1, and from Properties/Events, - open the onContextMenu Function combo-box - select onContextMenuFunc Preview First Left-click over TextField1 (nothing, correct?) Then Right-click over TextField1

 RUIWidget Events – EGL Rich UI Code-Events
There is much more on Event Handling we’ll cover later in this section. For now, it is enough to understand that: All of the events you just specified through the Visual Editor tooling may be specified in EGL There are other events you have access to – available as: Properties of the widgets Properties of the Event Record (which is passed in to each function as an input parameter) To see how this works: Modify the buttonClickedFunc() ……… as shown here  Add the following new function to your RUIHandler’s source code  Save your code Preview and click the button. Note the effect of the U.I. programming techniques on: TextField2 (selection, setting focus, dynamic width), and on the Button From the Help system, search on: fadein

 RUIWidget Events – onKeyPress/onKeyUp/onKeyDown
The onKeyxxx events happen as a user types into a control (typically an input field). These events are commonly used for: Trapping (determining) which key was pressed – and subsequently doing something meaningful based on this Doing Letter-by-Letter data entry processing – example: firing off database access reads as each letter of some code is typed in to the browser) To see how this works: Add the following new function to your RUIHandler’s source code  Note – these two functions are in the ***Notes section of this slide Save your code From the Design view: Select TextField1, and from Properties/Events, Select onKeyUp and …onKeyUpFunc Select TextField2, and from Properties/Events, Select onKeyDown and …onKeyDownFunc Preview Type values into TextField1 Press a function key over/into TextField2 Web Site to read about Key Trapping: //Copy/Paste code function onKeyUpFunc(e event in) textLabel2.text = TextField1.text; end function onKeyDownFunc(e event in) key int = e.ch; case (e.ch) when (112) textLabel2.text = "You pressed F1"; when (113) textLabel2.text = "You pressed F2"; when (114) textLabel2.text = "You pressed F3"; when (115) textLabel2.text = "You pressed F4"; when (116) textLabel2.text = "You pressed F5"; when (117) textLabel2.text = "You pressed F6"; when (118) textLabel2.text = "You pressed F7"; when (119) textLabel2.text = "You pressed F8"; when (120) textLabel2.text = "You pressed F9"; when (121) textLabel2.text = "You pressed F10"; when (122) textLabel2.text = "You pressed F11"; when (123) textLabel2.text = "You pressed F12"; otherwise textLabel2.text = "You did NOT press a Function Key (that's not fair!)"; textLabel2.text += " Ascii Code: " + key as string;

Open-ended Workshop – Registration 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 additional calculator buttons and functions in the RUIHandler

 Events - Summary onChange
onChange occurs when the user changes a widget and moves the on-screen focus from that widget, even if the user has reversed the change. onClick onClick occurs when the user clicks on the widget. onFocusGained onFocusGained occurs when the widget gains the focus. onFocusLost onFocusLost occurs when the widget loses the focus. The equivalent event in JavaScript is onBlur onKeyDown onKeyUp onKeyPress On many browsers, the event occurs repeatedly for as long as the user is pressing the key. Each occurrence of onKeyDown is followed by an occurrence of onKeyPress. onMouseDown onMouseDown occurs when the user presses any mouse button. onMouseMove onMouseMove occurs repeatedly when the user moves the mouse while the on-screen cursor is within the boundary of the widget. onMouseOver onMouseOver is an event that JavaScript could have named onMouseIn. The event occurs when the user moves the mouse, just as the on-screen cursor moves into the widget. You can use this event, for example, to change the cursor symbol for a particular part of the page. onMouseIn The event occurs when the user moves the mouse, just as the on-screen cursor moves into the widget. You can use this event, for example, to change the cursor symbol for a particular part of the page. onSelect onSelect occurs when text is selected in a textArea or textField widget. onMouseUp onMouseUp occurs when the user (having pressed a mouse button) releases it.

Rich UI Widgets – Deep Dive
Course Rich UI Widgets – Deep Dive Units: Rich UI Programming Widget Workshops Text Widgets Selection Widgets Container Widgets HTML Widgets IBM-Supplied Widgets Dojo Widgets

Rich UI Widgets There are a number of EGL Widgets supplied by:
IBM 3rd Party Vendors (i.e. Dojo Widgets) You (Custom Widgets) In this section, we’ll deep-dive on all of the EGL widgets in the Palette: Their essential properties – beyond the properties we’ve just finished studying Standard (common) events – ditto We’ll categorize the widgets into: EGL Widgets: Text Widgets Selection Widgets Container Widgets Miscellaneous EGL Widgets HTML Widgets Other IBM-supplied Widgets Dojo Widgets For each group we’ll: Create a custom RUIHandler Work with the properties and events

Rich UI Widgets Course Units: Text Widgets Selection Widgets
Container Widgets and View Layout HTML Widgets IBM Widgets

Workshop – Work With Rich UI Text Widgets
In this workshop, you will: Create a new RUIHandler inside the mySamples package Use the Rich UI Visual Editor to do initial web application layout Add several different types of Rich UI Text Widgets: TextLabel TextField TextArea PassWordTextFeld Work with (customize) the essential U.I. Properties and Events for the RUIWidgets Using the Visual Editor Using EGL source code editing Preview the web application – and verify “cause and effect” Note – this is simply a learn by trial-and-error workshop, that asks that you experiment with different widget properties and events. Do not try too hard to match the PowerPoint screen captures exactly. And feel free to specify (experiment with) other settings for properties – just as long as: You can tie the eventual (Previewed) result with a specified property value Time permits

 Rich UI Text Widgets The text widgets are used for input/output text values. There are four of them: TextLabel – output (read-only) text TextField – input or input/output text TextArea – input or input/output text in a scroll-able box (area) PassWordTextField – input text displaying asterisks for security Workshop: Create a new RUIHandler in: \mySamples\ - named: textFields Add a 1-column Box Into (inside) the Box, add the following EGL Widgets  TextLabel TextField TextArea PassWordTextField Take all of the defaults for Properties for the Widget names Add Text to match the Widget names Preview

 TextLabel Widgets – Common Properties and Events
Add the following common TextLabel tags to a new class in EGLRichUI.css: font-family: Verdana; font-size: 10pt; color: red; font-weight: bold; text-align: right; width: 123; Assign this .css class to the TextLabel Add the following line to the textFields handler statement for cssFile: Preview: Feel free to experiment with other properties and/or events that you’ve already learned about: Border BackGroundColor, etc.

 TextField Widgets – Common Properties and Events
Add the following common TextField tags to new classes in EGLRichUI.css: Code for the .css entries is in the ***Notes section of this slide Add the following function to your RUIHandler Assign this .css class to the TextField: Bind the validateText function to the onFocusLost event: Preview Type values in the field Tab – or click out of the field Note the U.I. behavior Feel free to experiment with other properties and/or events that you’ve already learned: Border Font Color BackGroundColor, etc. .inputText10Center { font-family: Verdana; font-size: 10pt; color: black; text-align: center; }; .inputTextError { border: 2px; border-color: red;

 TextArea Widgets – Common Properties and Events
Add the following common TextArea tags to a new class in EGLRichUI.css: Add the following function to your RUIHandler Add the following assignment statement to your RUIHandler’s initialization() function Assign this .css class to the TextArea: Bind the processTextArea function to the onFocusLost event: Preview Type values in the TextArea Tab – or click out of the field Note the U.I. behavior Feel free to experiment with other properties and/or events that you’ve already learned

 TextPassWord Widgets – Common Properties and Events
Add the following two new variables, and modify your RUIHandler’s initialization() function Use Content Assist! Add the following function to your RUIHandler Code is in the slide ***Notes Bind the validatePassWord function to the onFocusLost event: Preview and test both the login functionality and tooltip (mouse-over). There is one bug you might want to clean up (can you find it? It’s a U.I. bug) and you might want to add a button that fires off the validatePassWord function, rather than having it occur onFocusLost function validatePassWord(e event in) if(ctr == 0) this.document.location = " end //Here you would most likely call a service to validate the password on the server if(PasswordTextField.text == "egl") TextLabel.text = "Bueno!"; else TextLabel.text = "No Bueno."; PasswordTextField.class = "inputTextError"; PasswordTextField.select(); PasswordTextField.focus(); ctr -=1; tooltipPW.text = "Well - not that password. You have: " + ctr + " tries left.";

 TextPassWord Widgets – Uncommon Properties
EGL Rich UI allows you accessibility to the entire HTML syntax range, for input text fields (actually for all HTML tags) through the setAttribute(xxx,yyy) function. You could use this to do things like: Dynamically modify TextField UI characteristics Add in any currently un-supported tooling features, such as: maxLength Learn more about HTML input attributes: Workshop: Add the following code to textFields: Preview Try to type in more than three characters in the txtFld TextField in the view function validatePassWord(e event in) if(ctr == 0) this.document.location = " end //Here you would most likely call a service to validate the password on the server if(PasswordTextField.text == "egl") TextLabel.text = "Bueno!"; else TextLabel.text = "No Bueno."; PasswordTextField.class = "inputTextError"; PasswordTextField.select(); PasswordTextField.focus(); ctr -=1; tooltipPW.text = "Well - not that password. You have: " + ctr + " tries left.";

Workshop – Work With Rich UI Selection Widgets
In this workshop, you will: Create a new RUIHandler inside the mySamples package Use the Rich UI Visual Editor to do initial web application layout Add several different types of Rich UI Text Widgets: Checkbox & CheckBox Group ComboBox Single-selection List box Multiple-selection List box Work with (customize) the essential U.I. Properties and Events for the RUIWidgets Using the Visual Editor Using EGL source code editing Preview the web application – and verify “cause and effect” Note – this is simply a learn by trial-and-error workshop, that asks that you experiment with different widget properties and events. Do not try too hard to match the PowerPoint screen captures exactly. And feel free to specify (experiment with) other settings for properties – just as long as: You can tie the eventual (Previewed) result with a specified property value Time permits

 Rich UI Selection Widgets
The text widgets are used for input/output text values There are five of them: CheckBox – For single or multiple selection (true/false) values Combo – For single-selection values in a drop-down list List – For zeroone selected value in a scroll-able list ListMulti – For zero  many selected values in a scroll-able list RadioGroup – For mutually-exclusive value selection Workshop: Create a new RUIHandler in: \mySamples\ - named: selectionWidgets Add a 1-column Box Into (inside) the Box, add the following EGL Widgets: CheckBox Combo List ListMulti RadioGroup TextLabel Take all of the defaults for Properties - and for the Widget names Preview

 CheckBox Widgets – Common Properties and Events
Add the following function to your RUIHandler Bind checkBoxFunction to the onClick event: Preview and test by clicking the checkbox Optional workshops for checkboxes: Customize the CheckBox text Customize the TextLabel’s properties Create a “Check Box Group” – inside a new box

 OPTIONAL – CheckBox Widgets – Extended Dynamic Properties
What if you wanted to hide a particular CheckBox within a group, programmatically? Answer: In the RUIHandler, set the CheckBox’s visibility attribute to “hidden” What if I want a CheckBox Group, but do not know at run-time, how many CheckBoxes will be in it? Answer – there are two solutions: Dynamic Widget run-time creation using the new widget syntax Create an array of CheckBoxes Add this function to your RUIHandler code: Preview Question: why are the CheckBoxes vertically oriented? How would you make the check box group orient horizontally? Hint – put cbArray into its own box without a columns= property

 ComboBox Widgets – Common Properties and Events
Most of the time, you will want to load and manipulate comboBoxes programmatically. To load comboBoxes you will: Create and load a dynamic array of strings (most likely through a service call)  Calling a service will be covered later in the course Invoke this function from your RUIHandler’s initialization() routine To pre-select a specific row in the comboBox, you will use the widget.selection=“n” property To test which comboBox value was selected, by the user, you will code conditional logic against the widget.selection property  Use the modified RUIHandler code shown here in your RUIHandler (Most of this code is in the slide ***Notes) Add the following function to your RUIHandle Bind comboBoxFunction to the onChange event: Preview and test by selecting a comboBox value function loadComboBox() str string[0]; str.appendElement("ComboElement#1"); str.appendElement("ComboElement#2"); str.appendElement("ComboElement#3"); str.appendElement("ComboElement#4"); Combo.setValues(str); end function comboBoxFunction(e event in) // textlabel.text = combo.selection; case (combo.selection) when (1) TextLabel.text = "ComboBox#1 Selected"; when (2) TextLabel.text = "ComboBox#2 Selected"; when (3) TextLabel.text = "ComboBox#3 Selected"; when (4) TextLabel.text = "ComboBox#4 Selected"; Optional – The above case statement assumes there are 4 (or less) values in the array. Change the logic to be able to associate the comboBox selection, with the array entry.

 ListBox Widgets – Common Properties and Events
Single-selection listboxes are very much like comboBoxes To load listBoxes you will: Create and load a dynamic array of strings (most likely through a service call)  Invoke this function from your RUIHandler’s initialization() routine To pre-select a specific row in the listBox, you will use the widget.selection=“n” property To test which listBox value was selected, by the user, you will code conditional logic against the widget.selection property  Use the modified RUIHandler code shown here in your RUIHandler (Most of this code is in the slide ***Notes) Add the following function to your RUIHandler Bind listBoxFunction to the onClick event: Preview and test by selecting (clicking) a listBox value function loadListBox() str string[0]; str.appendElement("ListElement#1"); str.appendElement("ListElement#2"); str.appendElement("ListElement#3"); str.appendElement("ListElement#4"); list.setValues(str); end function listBoxFunction(e event in) // textlabel.text = combo.selection; case (list.selection) when (1) TextLabel.text = "ListBox#1 Selected"; when (2) TextLabel.text = "ListBox#2 Selected"; when (3) TextLabel.text = "ListBox#3 Selected"; when (4) TextLabel.text = "ListBox#4 Selected"; Optional – The above case statement assumes there are 4 (or less) values in the array. Change the logic to be able to associate the listBox selection, with the array entry.

 RadioButton Widgets – Common Properties and Events
RadioButtons are similar to the comboboxes and listbox Widgets As you did in the past few workshop steps: Modify the initialization() function to: Load the RadioButton Group dynamically Pre-select a specific radio-button (note that in the case of a radio-button, widget.selected must be assigned the plain-text value to be selected) Add the loadRadioButtons() function code  (two new functions) (In the Slide ***Notes) Bind RadioGroupFunction to the onClick event Preview and test by clicking a radioGroup button function loadRadioButtons() str string[0]; str.appendElement("RadioButton#1"); str.appendElement("RadioButton#2"); str.appendElement("RadioButton#3"); str.appendElement("RadioButton#4"); RadioGroup.setOptions(str); end function RadioGroupFunction(e event in) textlabel.text = combo.selection; case (radioGroup.selected) when ("RadioButton#1") TextLabel.text = "RadioGroup#1 Selected"; when ("RadioButton#2") TextLabel.text = "RadioGroup#2 Selected"; when ("RadioButton#3") TextLabel.text = "RadioGroup#3 Selected"; when ("RadioButton#4") TextLabel.text = "RadioGroup#4 Selected";

 As you did in the past few workshop steps:
 ListBox Multiple Select Widgets – Common Properties and Events – 1 of 2 ListMulti Widgets are similar to single-select list boxes, except that users can – by pressing the Ctrl or Shift keys + clicking, select multiple rows in the box at runtime. There’s no difference in loading and initializing ListMulti and single-select list widgets. However, in processing the selection, you will need to bind the widget’s selection property to an array as the user may select: 0, 1 or many rows function loadListMulti() str string[0]; str.appendElement("MultiSelect#1"); str.appendElement("MultiSelect#2"); str.appendElement("MultiSelect#3"); str.appendElement("MultiSelect#4"); listMulti.setValues(str); end function ListMultiFunction(e event in) sz int = ListMulti.selection.getSize(); for(i int from 1 to sz) TextLabel.text += "Multi-Sel: "+ListMulti.selection[i]+" selected \n";  As you did in the past few workshop steps: Modify the initialization() function to: Load the ListMulti Widget dynamically Pre-select a specific ListMulti values (note that in the case of a ListBox multiple, widget.selection must be assigned to an integer array, valued with the rows to be pre-selected) Add the loadListMulti() function code (two new functions (In the Slide ***Notes)

 ListBox Multi Widgets – 2 of 2 – Also name/value pairs in Selection Components
Add a Button to the RUIHandler (at the bottom of the box) Assign the Button’s onClick event to: ListMultiFunction Preview: Note the pre-selected rows in the ListBox Multi widget Select a few other rows, and press the Button  See Slide ***Notes on manipulating name/value pairs in selection components Add the new Button here Handling Name/Value pairs – in selection controls (where the user selections displayed value: “California” – and the associated value for that is: “CA” Record State abbreviation String; name String; end When the record array comes back from the service, the list is populated with the display values, in this case by walking over the State[] and building an array of 'name'. When a user selects a value, set a model variable to the index that was selected, so the model value is 'states[i].abbreviation'. When populating the selection list iterate over the array of pairs looking for the model value, and then set the current selection to 'i'. In this case I would be see that a state abbreviation was set in the user record, walk the State[] looking for that abbreviation, and then set the index of the selection to the index of the array.

 Container Widgets You will need strong Rich UI design skills, using container widgets (Box and Div widgets) in order to realize a complex design with EGL Rich UI This section aims at providing you with enough guided practice for you to use Box and Div widgets to realize any complex U.I. design We will start with the Box widget – as this is an IBM/EGL-supplied widget, with a lower-barrier to entry in using and learning In order to understand how to use Boxes, you will also need to learn about the concepts of: Container controls Children properties …All of which are based on the notion of a document model – that forms the underlying generated-JavaScript source

 Concept Slides – initialUI, children, Document Model and Box Widget
Either following your instructor’s discussion, or on your own (reading) please be sure you understand the materials on the following slides, before continuing with the workshops: InitialUI, Children and relationships among container and children widgets – essentially, the EGL Rich UI language elements that render your widgets according to your design and coding specifications The Document “model” of an EGL Rich UI Application’s visual layout Rich UI “Boxes” – Container widgets you will use to organize the visual elements in your web application

 InitialUI and children
So far we have been introduced to a few simple EGL Rich UI concepts. Others we have seen in passing, but have not looked at in-depth - In particular, the initialUI and children properties, which are very important Rich UI language features initialUI – A list (in EGL, an array) of things*** to be rendered on the page during it’s initial load. initialUI is a property that can only be specified at the RUIHandler level This property can only be specified in the declaration of the RUIHandler children – A list (another array) of things*** to be rendered and attached to their respective parents Most Widgets will obtain the ability to have children A Box for example can have children. As children are added to a box, they are rendered as new table columns or rows. The children property can be changed at run time. Any changes will be simultaneously reflected on the page. Note that, using initialUI and children we can create the kinds of hierarchically nested visual control-sets that effectively render data graphically in the browser – in a sort of “inverted tree” structure Things*** – In this context things are described as any UI component. Whether it be a RUIWidget, custom widget, or external widget.

 Rich UI and Inverted Tree-structured Web “Documents”
At it’s most basic, the elements of a web page are structured like an inverted tree The page itself is considered a web document*** All subsequent widgets are added to the document – in the parent/child dependent relationship shown below. Each widget itself can have child widgets added to it Below is an illustration of a sample tree-based document. Note that the lower “branches” of the tree are widgets that are: Related …and… Dependent Document DIV Table This is commonly referred to as the DOM (Document Object Model). UI Components can be added to the document, the highest level of the tree, and also added to other UI Components on the tree. TR (Row) TD (Column) TD (Column) TD (Column) TD (Column) DIV Table Input Field Literal Text

 InitialUI and Children and Container/Widget Relationships – Code View
Let’s take a look at the HelloWorld page we just created and see if we can find initialUI and children. Both the children and initialUI properties are arrays ( hence the [ … ] ) Implying that both of these properties may contain more than one RUIWidget If you declare multiple children/initialUI RUIwidgets, separate their names with a comma (see above) The handler contains an initialUI property which contains the Box we created This means that the Box will be initially shown on the page The Box itself contains the other widgets on our page (TextField, TextLabel, Button) If the Box is displayed on the page, it will of course contain its children

 InitialUI and Children – A More Complex Example
Note the following: initalUI is a box No border/No color 1 “column” Three “controls”: isModal Checkbox Text TextLabel Button – with an onClick event that fires off: OKDialog A RUIWidget Positioned (x/y) in the browser Defined elsewhere in the project Contains a child RUIWidget named: “content” Things – In this context things are described as any UI component. Whether it be a RUIWidget, custom widget, or external widget.

 Rich UI Boxes In web design, there are two fundamental HTML tags for laying out pages. Div Table We’ll start with the Table, which is more prominent in business applications with lots of data entry. So, how do we utilize HTML Tables from Rich UI? Rich UI provides tables as a simple RUIWidget called a Box A box can be created like so Hopefully by now you are seeing the pattern All UI Components (RUIWidgets) are declared just like any other EGL Variable Ex. myString String; Variable Name Variable Type Properties (within curly braces)

 Rich UI Box Widgets A box widget defines a rectangular-container-control that embeds and organizes other widgets. You can indicate how many columns are in the box. If the number of columns is three, for example, the first three embedded widgets are on the first row in the box, the fourth through sixth are on the second row, and so forth. If the number of columns is one, all the embedded widgets are arranged vertically. The width of a column equals the width of the largest widget in the column You can indicate whether the embedded widgets in a given column are aligned at the column’s center, right, or left. Vertical and horizontal scroll bars appear if necessary to give the user access to widgets that scale outside of the browser/screen dimensions The following properties are supported for box widgets: alignment, which holds an integer value that indicates how the content is aligned in each column: 0 for left-justify 1 for center 2 for right-justify children, which holds an array of widgets, as described in Widget properties and functions columns, which holds an integer that identifies the number of columns in the box

 Work With Rich UI Container Widgets
In this workshop, you will: Create a new RUIHandler inside the mySamples package Use the Rich UI Visual Editor to do initial web application layout Add several different types of Rich UI Text Widgets: Box Different layout options Using the Visual Editor to design your layout and doing your work from the EGL source code level Using many or most of the box properties Div Shadow Work with (customize) the essential U.I. Properties and Events for the RUIWidgets Using the Visual Editor Using EGL source code editing Preview the web application – and verify “cause and effect” Note – this is simply a learn by trial-and-error workshop, that asks that you experiment with different widget properties and events. Do not try too hard to match the PowerPoint screen captures exactly. And feel free to specify (experiment with) other settings for properties – just as long as: You can tie the eventual (Previewed) result with a specified property value Time permits

 RUIHandlers with More Complex Boxes – and using the Visual Editor
In this upcoming workshop, you will: Deepen skills using the Visual Editor Learn more about controlling form layout with RUIWidget boxes Embed boxes within boxes, to realize a more complex design There will be 3 related workshops: boxSample1 – with one set of columns boxSample1 – with two sets of columns boxSample1 – with additional box layout styling

 Preparation – Analyze the Layout
Before you start working on a web application, you will analyze the U.I. elements in terms of: Layout – tables structure, etc. Types of components Component properties, size, dimensions, etc. Here is boxSample1. From the snapshot note the following: Box widget – color, border and Alignment Box inside of box Aligned TextLabels and TextFields  Design Notes You will use the RUIWidget boxes to: Organize the labels and fields (treat them as a unit) Align the labels and fields Provide: Dimension Background color Padding (space between) The Outer Box is used to center the inner U.I. elements in the browser The inner Box contains the two-column Label:Field pairs This is a typical U.I. pattern for an input single-record display, in vertically-aligned, rows/columns TextFields TextLabels Inner Box Outer Box

 The Completed Workshop Viewed as an Inverted Tree Through the Outline View
Note the nesting of the Boxes, labels and fields in the Outline view The Outline view documents the inverted tree structure of an EGL Rich UI web application You can also select (set focus to) an element by clicking on the element in the Outline view 

 Using the Visual Editor - Review
Like the Outline View, the Visual Editor shows the outline hierarchy (inverted tree view) of your web application. You can drag & drop U.I. elements Into the box container controls Below or above controls Next to controls Placement ultimately depends on: Where in the tree you drag & drop The alignment specification The columns specification (for a box) Drag & Drop a Palette control ABOVE the top box Drag & Drop a Palette control inside of BoxOuter, between BoxNew and BoxMiddle Drag & Drop a Palette control inside of BoxNew, next to TextField10 (note that if BoxNew allows two columns the new control will be placed on the next vertical line down) Drag & Drop a Palette control inside of BoxRight, between TextLabel7 and TextField6

boxSample1 – Create the RUIHandler and Initial Box
From your \mySamples\ package, create a new RUIHandler named: boxSample1 Using the Visual Editor, drag in a box – give it the following properties: name: BoxOuter Alignment: CENTER Columns: 1 BackgroundColor: Beige borderColor: LightSteelBlue borderStyle: groove Width: 400 Height: 300

boxSample1 – Add a TextLabel and an Inner Box
From the Palette, add a TextLabel inside BoxOuter Use these attributes  From the Palette, drag a 2nd (inner) box into BoxOuter – placed below the TextLabel Name: BoxInner Columns: 2 Alignment: Center Width: 300 Height: 250 Note – If you end up mis-spelling any of the RUIWidget names, you can make corrections in the Source view. You will have to correct all references to the widget (the declaration, and any references in the children=[ … ] array)

boxSample1 – Add a Series of TextLabels and TextFields to the InnerBox
Using the Visual Editor, drag and drop a series (five each) of TextLabels and TextFields inside of the InnerBox  Do not specify any custom properties Preview 

boxSample1 – Customize the Labels and TextFields with Padding
Enter Source mode on the RUIHandler. Add a colon: suffix and unique number to each TextLabel’s Text property Add padding=4 to the TextLabel properties Add padding=2 to the TextField properties  You could of course, have done the above using the Visual Editor. But some things can be done faster in Source mode. With EGL Rich UI – as with most development activities it’s good to learn how to use the best tool for a given job  Preview 

boxSample1 – Customize BoxOuter – and Add Another Inner Box
Return to Design mode From Outline view, select: BoxOuter Select its Properties tab Change BoxOuter’s: Width: 600 Height: 400 From the Palette, Drag and Drop another Box into BoxOuter (below the TextLabel and above BoxInner) Name: BoxMiddle Columns: 2

boxSample1 – Drag BoxInner Inside of BoxMiddle
Select - hold – drag & drop BoxInner into BoxMiddle  From the Palette, Drag and Drop another Box into BoxMiddle. Below (actually, next to) BoxInner  Name: BoxRight Columns: 2

boxSample1 – Drag BoxInner Inside of BoxMiddle
As you did before, drag and drop a series (five more each) of TextLabels and TextFields inside of BoxRight  Do not specify custom properties Preview 

boxSample1 – Customize the TextLabels, Padding and other Properties
As you did before, enter Source mode on the RUIHandler. Add a colon: suffix and unique number to each of the new TextLabel’s Text property Add padding=4 to the TextLabel properties Add padding=2 to the TextField properties Remove the height and width specification for BoxInner (note that this has the effect of centering BoxInner + BoxRight inside of BoxOuter) Preview 

From the Palette, add a new TextLabel and a new TextField to BoxNew
boxSample1 – Customize BoxOuter (again) – and add yet another Inner Box Return to Design mode From the Palette, Drag and Drop another Box into BoxOuter (below the TextLabel and above BoxMiddle) Name: BoxNew From the Palette, add a new TextLabel and a new TextField to BoxNew

boxSample1 – Add a Submit Button to the Web Application
From the Palette, Drag & Drop a Button into BoxOuter (below BoxMiddle) From the Button’s Properties, specify: Text: Add New Record Preview 

boxSample1 – Customize U.I. Properties
From the Properties of the new TextLabel, specify:  text: Search Field: paddingRight: 8 From the Properties of the new BoxNew, specify: paddingTop: 33 Preview

boxSample1 – Add a New Event and Bind it to the Button
With the Button selected - From Events Click: Add Event Handler Name the Function: onClick (Still with the Button selected) from the onClick Event, select the onClick Function

boxSample1 – Add onClick Code and New TextLabel
Enter Source mode on the RUIHandler. Add (code) a new TextLabel named: msgField  Add msgField to the children array of BoxOuter  Add this if statement (you can either code it, or copy/paste from the slide notes)  Preview  if(textField10.text == "1") textField.text = "11111"; TextField1.text = "11111"; textField2.text = "11111"; TextField3.text = "11111"; textField4.text = "11111"; TextField5.text = "11111"; textField6.text = "11111"; TextField7.text = "11111"; textField8.text = "11111"; TextField9.text = "11111"; else msgField.text = "Sorry - search returned false." ; end

*** See Notes for code to clear the TextFields and msgField
boxSample1 – Are We Done? Almost  With the current design, if your search doesn’t return anything and the msgField.text reminds the users of that, the message is not cleared out upon a subsequent good search. Also – using the Visual Editor tooling, please make the following enhancements to msgField Preview  function onClick(event Event in) if(textField10.text == "1") textField.text = "11111"; TextField1.text = "11111"; textField2.text = "11111"; TextField3.text = "11111"; textField4.text = "11111"; TextField5.text = "11111"; textField6.text = "11111"; TextField7.text = "11111"; textField8.text = "11111"; TextField9.text = "11111"; msgField.text = "" ; else msgField.text = "Sorry - search returned false." ; textField.text = ""; TextField1.text = ""; textField2.text = ""; TextField3.text = ""; textField4.text = ""; TextField5.text = ""; textField6.text = ""; TextField7.text = ""; textField8.text = ""; TextField9.text = ""; end *** See Notes for code to clear the TextFields and msgField

 Workshop – Layout and Boxes with Irregular Horizontal Widths
In this workshop, you will: Learn how to realize a standard web application layout, where the boxes contain elements of differing lengths Learn how to use field styling to align individual text and field widgets  Concept: When your U.I. elements are of differing sizes, you will not be able to utilize the block boxes as in the previous workshop. Instead, you will need to layout each individual row as a separate box: Containing elements And vertically-aligned using explicit RUIWidget widths See the above snapshot – then turn to the next slide for more analysis

 Understanding the Layout and Design Pattern
From the snapshot of the Outline and Design views, note that you will nest individual boxes containing labels and fields within each row of an outer box. Outer Box I N D V U A L B O X E S F R C H W By nesting the individual row boxes, you have complete control over each element’s placement Because there is no vertical box alignment across disparate boxes, you will need to align the columns via the width attribute You’ll also have to use a style-attribute to right-justify text, when you can’t align the entire box due to conflicting U.I. alignment requirements (see the Directions and Phone/ Address rows above)

Workshop – Create a new RUIHandler – Add in the Top Elements
From \mySamples\, create a new RUIHandler, named: customerSearch Add a box, named: BoxOuter Properties: Columns: 1 Font-size: 10 PT Add a second box – inside of BoxOuter named BoxSearch Add a TextLabel named TextLabelSearch inside of BoxSearch Property: Text: Search Text: Width: 88 Add a TextField named: TextFieldSearch next to TextLabelSearch, inside of BoxSearch Add an HTML Widget inside of BoxOuter Text: <HR> Preview

Workshop – Add in the Row 1 Elements
Add another box – inside of BoxOuter named BoxRow – under the HTML tag Properties: Columns: 6 Align: RIGHT Inside of BoxRow add the TextLabels and TextFields shown below: Notes: TextLabelCustid and TextLabelLastName - width: 88 TextLabelFirstName - width: 111

Add another box – inside of BoxOuter – below BoxRow1 – named BoxRow2 Property: Columns: 4 Inside of BoxRow2 add the TextLabels and TextFields shown below: Notes: TextLabelPhone - width: 88 TextLabelMailAddress - width: 111 TextFieldMailAddress - width: 288

Add another box – inside of BoxOuter named BoxRow – under BoxRow2 Properties: Columns: 6 Align: RIGHT Inside of BoxRow3 add the TextLabels and TextFields shown below: Notes: TextLabelCity and TextLabelzip - width: 88 TextLabelState - width: 111

Add another box – inside of BoxOuter – below BoxRow3 – named BoxRow4 Property: Columns: 2 Inside of BoxRow4 add the TextLabels and TextFields shown below: Notes: TextLabelDirections - width: 88 TextFieldDirections - width: 555

Workshop – Add the EGL Source Styling Elements
From Source view: Change all padding=8  padding=3 Add the following style tag: to: TextLabelDirections TextLabel TextLabelPhone style = "text-align:right"

Workshop – Finis! Preview!

 Workshop – Another Login Page?
Yes – another login page. But this one will allow you to utilize your newly-acquired EGL Rich UI property and event-handling development skills. Also? This is more of an open-ended workshop – meaning that it lacks the detailed click-for-click instructions you’ve gotten used to/dependent on  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 Finished View 

 Login Web Application
Create a new package under \EGLSource\ named: businessApp Inside of the \businessApp\ 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

 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 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 RUIHandler

 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

 Miscellaneous Widgets – Introduction and Beginning of Workshop
There are a number of relatively easy-to-learn and use EGL Widgets left in the Palette that are useful: Button Hyperlink Image Note that we will cover HTML and Grid widgets separately Workshop: Create a new RUIHandler in: \mySamples\ - named: miscWidgets Add a 1-column Box Into (inside) the Box, add the following EGL Widgets: Take all of the defaults for Properties for the Widget names Add Text to match the Widget names Preview  Not very impressive, eh? Let’s jazz this up a little

 Button Widgets – Common Properties and Events
Add the following common Button tags to EGLRichUI.css: See ***Notes for source Assign the .simpleRuiButton class to the Button Preview Enhance as follows: Assign the .searchButton class to the Button’s class property Delete the text entry Specify a fixed width and height .searchButton { background: url("../images/search_button.gif"); border: 0; } .simpleRuiButton { color: maroon; font-weight: bold; border: 2 black solid; background-color: "e9e9e9"; };

 Hyperlink Widgets – Common Properties and Events
Specify the following custom properties for the Hyperlink: Preview And click the hyper-link Optionally – change the URL or some of the Hyperlink references in the EGL source, and re-test .searchButton { background: url("../images/search_button.gif"); border: 0; } .simpleRuiButton { color: maroon; font-weight: bold; border: 2 black solid; background-color: "e9e9e9"; };

 Graphic Widgets – Common Properties and Events
Specify the following custom properties for the Hyperlink: Preview And mouse-over the image Add the following functions to your RUIHandler source: Add the following Events to the Image widget: And mouse-over the image to see the rollover effect  Optional (for supreme uber-techies): Work with the Span widget – by adding it in to this RUIHandler, and experimenting with its properties (note, use Content Assist to explore salient properties) .searchButton { background: url("../images/search_button.gif"); border: 0; } .simpleRuiButton { color: maroon; font-weight: bold; border: 2 black solid; background-color: "e9e9e9"; };

Container Widgets HTML Widgets IBM Widgets

 HTML Widgets – Concepts
You may have existing HTML or HTML “code snippets” you wish to reuse or re-purpose” in Rich UI applications. This is very straightforward to do, as follows: Create “inline HTML” – where you type the tags directly inside your RUI Widget (or RUIHandler) Create “static” HTML – possibly your existing HTML, or new HTML you create using some dedicated HTML editor (FrontPage, DreamWeaver, etc.) – then import the HTML into project and include it in your Rich UI page The next few workshops will show examples of both Where to learn HTML? Just about anywhere – but.. Especially – through free info on the web There’s no shortage of books either In this section we will cover a few basic HTML tags: HR – Horizontal Ruler H1 – Heading tag Lists – Ordered and unordered DIV – a tag used to contain other content Table – a tag used to organize content Inline Frame Note – you will not use HTML to create Web Pages But you may want to use HTML tags to embellish your Rich UI applications – and/or to reuse pre-existing HTML resources. So – essentially, you will want to know “about” HTML – and how to use HTML – but you won’t have to become an HTML programmer

 HTML Widgets – Workshop
Create a new RUIHandler in: \mySamples\ - named: htmlWidgets Go immediately into Source view and add the source code in the Slide *** Notes <HR> tag <H1> tag List tags Unordered Ordered package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.Grouping; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.rui.Event; handler htmlWidgets type RUIhandler {cssFile = "css/EGLRichUI.css", initialUI = [button,Box,Div1 ],onConstructionFunction = initialization} Box com.ibm.egl.rui.widgets.Box{columns=1, padding=8,children = [HRHtml,h1html, ULHtml,h1html1, oLHtml,HRHtml1] }; button Button{text = "Change HTML in EGL",onClick ::= dynamicallyModifyUIHtml}; HRhtml HTML{text = "<hr>"}; HRhtml1 HTML{text = "<hr>"}; h1html html {text = "<h1>Unordered List</h1>"}; h1html1 html {text = "<h1>Ordered List</h1>"}; ULhtml html {text = "<ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ul>"}; OLhtml html {text = "<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ol>"}; Div1 Div {children = [tbl,iFrame] }; tbl html{text = "<table border='1'><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>"}; iFrame html{text="<iframe src ='sample1.html' width='100%' height='300px'><p>Your browser does not support iframes.</p></iframe>"}; function initialization() end function dynamicallyModifyUIHtml(e event in) ULhtml.text = "<ul> <b><li>the revised list of items</li> <li>Note the bold text</li> <li>You could concatenate as strings anyway you like</li></b></ul>"; Div Widget <Table> tag <iframe> tag

 HTML Widgets – inline HTML
Preview  Click the Change HTML in EGL button Using GOOGLE or some other search engine, if you don’t know these HTML tags, look-up their definitions on the web The next slide contains a quick study guide to the HTML tags shown here List tags Unordered <H1> tag List tags Ordered <HR> tag Div Widget <Table> tag <iframe> tag

 HTML – QuickStart and “Survival Chart”
Rules of the road: Most HTML consists of matching “tags” in the form of: <startTag> … content … </endTag> Example: <LI> My bulleted list </LI> Specific examples from the htmlWidgets view: <H1> - a text heading tag – largest font size, default font (there exist <h1>  <h6>, largest to smallest) <HR> - creates a horizontal ruler (line) in the web page <UL> - an “un-ordered” (un-numbered) list that consists of one-to-many: <LI> - List (or bulleted list entries) <OL> - same as <UL> except creates numbered lists <DIV> - a container – consisting of one column and one row (like a one-column Box widget) <TABLE> - a complex tag that organizes things like a two-dim table. Consists of: <TR> - rows <TD> - cells <IFRAME> - an inline frame. iFrames allow you to embed another RUIHandler (or another HTML or .JSP page for that matter) inline (inside) of an existing RUIHandler view  Notes - All of the above HTML tags and statements: Can be created statically (at design time) or dynamically using EGL RUI statements HTML tags have sub-properties, which are fully customize-able

Make the following modifications to the source: Change one of the <H1> to an <H5> tag – and change some of the text Change one of the <HR> tags as shown below Change some of the text in the OLhtml widget Add an extra list: <li>…your text … </li> tag-set inside the OLhtml widget Add a new textarea widget: Add this new textArea widget as the final child in the DIV1 widget Completely replace the existing tbl widget code with that found in the slide notes Make the following changes to the iFrame widget: Save – check for syntax errors Preview tbl html{text = "<table border='1'><tr><td>row 1, cell 1</td><td bgcolor='blue'> <FONT COLOR='white'> row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>"}; Note – be sure to use Content Assist (Ctrl/Spacebar) to create new widgets

Note the cause and effect revisions  Blue, right-justified, no-shadow, thick line Your changes to the lists and headers Note cell color and text-color mods New View loaded into the <iframe> New TextArea tbl html{text = "<table border='1'><tr><td>row 1, cell 1</td><td bgcolor='blue'> <FONT COLOR='white'> row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>"};

 OPTIONAL – Static HTML Served as a LocalHTML Widget
If you have completely static (no need to dynamically build) HTML stream – or streams – it might make sense to organize it as a set of HTML files, dynamically added to your View, but organized in your project as separate files (and not inline). This will allow you to create this HTML using an intelligent editor (like FrontPage or DreamWeaver). Try the following: From Project Explorer, create a new Folder under \WebContent\ named: HTML In this folder, create a new HTML file, named: colSpan Note – you’ll find HTML files under the Web folder category Replace the boilerplate HTML with the source found in the ***Slide Notes – at the top (it’s a single line) In your \EGLSource\ folder, create a new EGL package named: utilities In the utilities package, create a new RUIHandler, named: localHTML Replace the “boiler plate” statements with the code also found in this ***Slide Notes In your HTMLWidgets RUIHandler, add a new widget for local HTML: Add this widget as the bottom (final) child under the DIV1 widget Preview <table width="100%" border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td id="cell1", colspan="2">January</td></tr><tr><td colspan="2">February</td> </tr></table> //The Utility Widget - LocalHTML package utilities; Delegate LocalHTMLFinishedLoading() end handler localHTML type RUIWidget{ tagName = "div"} src String { getMethod=getSrc, setMethod=setSrc }; whenFinished LocalHTMLFinishedLoading; private function setText(text string in) innerHTML = text; end function setSrc(src string in) if (strlib.indexOf(src, " == 0) uri String = document.location; lastSlash int = Strlib.characterLen(uri); while (lastSlash > 0 && uri[lastSlash:lastSlash] != "/") lastSlash -= 1; src = uri[1:lastSlash] + src; restService call restService.invokeGet(src) returning to setText; this.src = src; if (whenFinished != null) whenFinished(); function getSrc() returns (string) return (src);

Rich UI Widgets Course Units: IBM Widgets Grouping TabFolder
Simple Menu DataGrid Tree Control Drag & Drop Popup Pages Complex Layout UIs

 Grouping Widgets – Common Properties and Events – 1 of 2
Grouping Widgets are similar to fieldsets in HTML You can look up a fieldset tag online Add the following new tag to EGLRichUI.css  Create a new RUIHandler in: \mySamples\ - named: groupingSample Go immediately into Source view and completely replace the boiler-plate source code with the code in the Slide *** Notes Preview If time permits, follow the steps on the next slide to enhance the View package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Grouping; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.idl.java.class; import egl.ui.columns; handler groupingSample type RUIhandler {cssFile = "css/EGLRichUI.css", initialUI = [ Box ],onConstructionFunction = initialization} Box com.ibm.egl.rui.widgets.Box{ padding=8, children = [groupCust]}; groupCust grouping{class = "outputTextSmallRed", text = "Enter Customer Information ", children = [box2]}; box2 box{columns = 2,children = [textFirst, fieldFirst, textLast, fieldLast, textPhone, fieldPhone, text , field ] }; textFirst TextLabel{text = "First Name:"}; textLast TextLabel{text = "Last Name:"}; textPhone TextLabel{text = "Phone:"}; text TextLabel{text = " Address:"}; fieldFirst TextField{}; fieldLast TextField{}; fieldPhone TextField{}; field TextField{}; function initialization() end

 Grouping Widgets – Common Properties and Events – 2 of 2
 Select, copy & paste the grouping widget, the box and all of the textlabels and text fields (as shown below) in the source. Make the following modifications Change the text= and children= properties Change the box widget name – and change its children= identifier(s) Modify the TextLabel and TextField widgets (name and text properties) Add groupAddr to the children property of box: Also add columns=1 as a property of box Preview  Optional – add a button, that onClick, changes the grouping.Text value package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Grouping; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.idl.java.class; import egl.ui.columns; handler groupingSample type RUIhandler {cssFile = "css/EGLRichUI.css", initialUI = [ Box ],onConstructionFunction = initialization} Box com.ibm.egl.rui.widgets.Box{ padding=8, children = [groupCust]}; groupCust grouping{class = "outputTextSmallRed", text = "Enter Customer Information ", children = [box2]}; box2 box{columns = 2,children = [textFirst, fieldFirst, textLast, fieldLast, textPhone, fieldPhone, text , field ] }; textFirst TextLabel{text = "First Name:"}; textLast TextLabel{text = "Last Name:"}; textPhone TextLabel{text = "Phone:"}; text TextLabel{text = " Address:"}; fieldFirst TextField{}; fieldLast TextField{}; fieldPhone TextField{}; field TextField{}; function initialization() end

 Optional Workshop - Grouping Widgets – Example View
The Grouping widget actually has a number of additional properties you may want to utilize: Legend font styling Legend block styling Thicker Grouping borders Create a new RUIHandler in \mySamples\ named: groupingSampleExpanded Replace the boiler-plate code in this file with the copy & paste the grouping RUIhandler code in the Slide ***Notes. Preview (see results below) Feel free to experiment with different Rich UI properties and events. package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Grouping; import com.ibm.egl.rui.widgets.TextLabel; handler groupingSampleExpanded type RUIHandler{initialUI = [ui]} Group1 Grouping { text = "Example 1", children = [ new TextLabel{text = "This is what default grouping looks like"} ]}; Group2 Grouping { text = "Example 2", legend.font="Courier", legend.color="red", children = [ new TextLabel{text = "The legend font for this example should be Courier/red.<br>The border should use the default rendering."} Group3 Grouping { borderWidth=5, borderStyle="solid", borderColor="orange", padding=31, text = "<div style='background:orange; padding:5;'><b><i>Example 3<br>Also known as Three</i></b></div>", children = [ new TextLabel{text = "<br>This grouping has a fat orange border. "+ "<br>Padding around the text inside the grouping is 31. <br>" + "The legend shows as bold italic using HTML, and it spans two rows."} ], fontSize = "12", id = "ssas"}; ui Box{font = "Verdana", columns=1, margin=23, children =[group1, group2, group3]}; end

 TabFolder Widget – Concepts
Tabs are common widgets for organizing dependent or related business data and functional views The steps in creating a Tab widget will include: Create the RUIHandler Add a widget of type tabFolder to your RUIHandler Use Content Assist (Ctrl+Spacebar) to allow the tooling to add any imports Add the tabFolder inside a box widget For each tab, use the tabFolderVar.addTab(“tab heading”,tabContent); API Preview Let’s check things out…but before we start? We’ll learn how to make RUIWidgets out of RUIHandlers for component reuse

 Creating RUIWidgets from RUIHandlers
So – while you’ve been creating RUIHandlers all along, in order to learn the Rich UI editor and the language terms & concepts, in reality (with your production projects), you will be creating more RUIWidgets than RUIHandlers – as RUIWidgets are the primary component of reuse within RUI technology If you’re starting from scratch, it will probably make sense to create: A RUIHandler who’s only purpose is to act as a testing container for a single RUIWidget The RUIWidget – which you will be able to reuse … and you’ll work within this process framework, during the final workshops for this course But since you’ve got a # of useful widgets already (in the form of existing RUIHandlers) let’s see how to modify them and make them into RUIWidgets: Open the file – in Source mode Copy and paste the entire RUIHandler statement Comment out the original statement Modify the following lines: Change: type RUIHandler  type RUIWidget Add a new Div widget (use content assist) – with a children = property that is the same as the original initialUI = property Change initialUI  to targetWidget = (reference your new Div widget) 1. 3. 2.

 Workshop – Creating RUIWidgets out of RUIHandlers
Following these steps (repeated below for your convenience) – create RUIWidgets out of the following RUIHandlers: groupingSample htmlWidgets miscWidgets textFields Steps: Open the file – in Source mode Copy and paste the entire RUIHandler statement Comment out the original statement Modify the following lines: Change: type RUIHandler  type RUIWidget Add a new Div widget (use content assist) – with a children = property that is the same as the original initialUI = property Change initialUI  to targetWidget=ui //(reference your new Div widget) 1. 3. 2.

 Tab Widgets – Common Properties and Events
Workshop: Create a new RUIHandler in: \mySamples\ - named: tabSample Go immediately into Source view and (using Content Assist) add the source code shown here  Notes: The TabFolder widget is an IBM-supplied custom widget that takes as a parameter a TabFolderPage. The TabFolderPage widget allows you to define: The Tab label (name=) The widget loaded in to the tab (widget=) The TabFolder also has a number of useful properties for customizing its behavior and UI. We’ll see these in an upcoming workshop Save and Preview Or…you can pick these source statements from the Slide ***Notes box Box{columns = 1,children = [tabFolder]}; groupingSample groupingSample{}; htmlWidgets htmlWidgets{}; miscWidgets miscWidgets{}; textFields textFields{}; tabFolder TabFolder {width = 625,height = 400, content.marginTop = 15, pages = [ new TabFolderPage { name = "Grouping Sample", widget = groupingSample }, new TabFolderPage { name = "HTML Widgets", widget = htmlWidgets}, new TabFolderPage { name = "Miscellaneous Widgets", widget = miscWidgets}, new TabFolderPage { name = "Text Fields", widget = textFields} ] };

 TabFolder Widget Workshop – Extending the Base Functionality
Click each tab Ensure that the widgets embedded in the tabFolderPages still work as before There may be additional functionality you’d want to see in tabFolders in order to handle common dynamic U.I. requirements, such as: Pre-selecting a given tab: Upon loading the view Explicitly (as per the specifications in your business requirements – for example, if each tab represents a step in a work-flow, opening a given tab programmatically, etc.) Knowing (programmatically – from within your RUIHandler) what tab a user is on when an event occurs – and taking appropriate business logic action Adding graphics to the tab itself Changing (customizing) the default style properties Explicitly sizing the tab control Forwarding (selecting “next tab”) with a button .searchButton { background: url("../images/search_button.gif"); border: 0; } .simpleRuiButton { color: maroon; font-weight: bold; border: 2 black solid; background-color: "e9e9e9"; };

 Tab Widgets – Extended Functionality
Here’s a screen capture of our TabFolder view with a number of the desired techniques implemented: Show the currently-selected tab Graphics in the tabs Pre-select a tab Explicit size To implement this yourself: From the slide ***Notes, copy/paste all of the code Replace your existing tabSample.egl code with the ***Notes EGL statements Preview On the next slide we annotate some of the more important language constructs package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.CheckBox; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.Image; import egl.ui.rui.Event; import egl.ui.rui.Widget; import tab.TabFolder; import tab.TabFolderPage; handler tabSample type RUIhandler {initialUI = [box],onConstructionFunction = initialization} box Box{columns = 1,children = [tabFolder]}; groupingSample groupingSample{}; htmlWidgets htmlWidgets{}; miscWidgets miscWidgets{}; textFields textFields{}; tabFolder TabFolder {width = 720,height = 400, content.marginTop = 15, behaviors = [addImageToPage1, addCheckBoxToPage3 ], listeners = [ tabSelected ], pages = [ new TabFolderPage { name = "Grouping Sample", widget = groupingSample }, new TabFolderPage { name = "HTML Widgets", widget = htmlWidgets}, new TabFolderPage { name = "Miscellaneous Widgets", widget = miscWidgets}, new TabFolderPage { name = "Text Fields", widget = textFields} ] }; function initialization() miscWidgets.fadeIn(4000, null); tabFolder.selected = "HTML Widgets"; end function addImageToPage1(name String in, tab Div in) if (name == "Grouping Sample") tab/*Folder*/.children = [ new Image { src = "tab/images/cross.png", marginTop = 2, marginRight = 5 }, tab/*Folder*/.children[1] ]; function addCheckBoxToPage3(name String in, tab Div in) if (name == "Text Fields") tab/*Folder*/.children[1], new CheckBox { selected = true, marginLeft = 5 } function tabSelected(tabName String in, widget Widget in, tabSelected boolean in) if (tabSelected) SysLib.writeStderr("Currently selected tab: \"" + tabName + "\""); // function click(e Event in) // button Button = e.widget; // case (button.text) // when ("Change Grouping Label") // tabFolder.selected = "HTML Widgets"; // when ("select tab 3") // tabFolder.selected = "Page 3"; // when ("select tab 1") // tabFolder.selected = "Page 1"; // end // end

 Tab Widgets – Extended Sample – Optional Workshops
Read the annotated comments carefully – noting the operational language constructs Optional Workshops: Pre-select a different tab, upon initial view rendering in the browser Add a different graphic – to a different tab Add a different Rich UI Widget – to a different tab (suggestion, use a small simple widget)

 Simple Menu Widgets – Common Properties and Events
Standard (rich) Menu Widget Most business applications will drive their functionality from a common menu Rich UI apps will be no different There are several menu widget options available: Standard (rich) menu widget – which: Is recursive (allowing for multiple levels of sub-menu) Allows for embedding different widgets in-line Simple menu widget – which: Allows for one level of sub-menu Is populated from string variables in a dynamic array In this workshop, you’ll learn how to use the simple menu widget, and how to populate it from dynamic (server-side) data. Steps include: Creating a new RUIHandler that: Calls a service (in our case, this will be a Library function) to populate the dynamic array of strings Assigns the strings to the simple menu widget Customize the .css for the menu simple Menu Widget

 Simple Menu Widgets – Coding Constructs
Create a new RUIHandler in \mySamples\ named: SimpleMenuDemo Using Content Assist, edit the source code, and add the statements shown here  Note the following: Call to ServiceLibrary to load the array Assignment to a dynamic array of type any Defining a custom event listener Preview

 Optional – Simple Menu Widgets
Modify: \WebContent\css\EGLRichUI.css Under: .SimpleMenuTitle { Add: color: white; Under: .SimpleMenuItem { Add: color: white; Background-color: #5a9bd1; Modify: SimpleMenuDemo Change the case statement shown below Preview and try out the techniques Optionally add another when clause, to hit your companies web site on-select of some other menu option

 Tree Widgets – Concepts
Tree Widgets are common and useful components for displaying hierarchical information: Menus and links Related application data: Customers > Orders > OrderItems, etc Plain text …or… Text + Graphics (icons) Rich UI’s Tree widget is composed of: Tree Nodes – which contain the text and/or graphics Behaviors – which respond to user events In our example, we’ll supply event-handlers for: onClick, onMouseOver, onMouseOut The steps in creating a Tree widget include: Create the RUIHandler Add a widget of type Tree to your RUIHandler Use Content Assist (Ctrl+Spacebar) to allow the tooling to add any imports Add the Tree inside a box widget Add code that: Loads the Tree dynamically, from an external source Responds to user/browser events Collapse/Expand a tree category Click a node Preview

 Tree Control Workshop
First create a new package under the EGLSource package named treeControl Next right-click over the \treeControl\ package and create a new RUIHandler named: TreeHandler Copy & Paste everything in the Slide ***Notes over the boiler-plate EGL statements Preview Note that the values in the tree come from the ServiceLibrary  These values would more typically be assigned via calls to back-end services But in this case, the Library call will do (We’ll learn how to call back-end services in an upcoming section) Now, let’s break down the code to create a tree widget package treeControl; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.TextLabel; import com.ibm.egl.rui.widgets.Tree; import com.ibm.egl.rui.widgets.TreeNode; import com.ibm.egl.rui.widgets.TreeTooltip; import egl.ui.rui.Event; Import libraries.ServiceLibrary; import libraries.treeValues; handler TreeHandler type RUIhandler{initialUI =[ui, Image, msg], onConstructionFunction = initialization} Image com.ibm.egl.rui.widgets.Image{text = "Please click a Tree Control Element"}; ui Box{children =[firstTree]}; msg TextLabel{}; firstTree Tree{width = 240, padding = 9, backgroundColor = "white", behaviors =[click, tooltip.setTooltips]}; tooltip TreeTooltip{provider = showTooltip, tooltip.delay = 1000}; tooltipText HTML{}; tooltipResponse Box{children =[tooltipText]}; tr TreeValues[0]; //A dynamic array of string values for the tree widget sz int; //size of tree values function initialization() treeNodes TreeNode[0]; //A dynamic array of TreeNode widget variables //Call a library, and return a nested array of strings ServiceLibrary.loadTree(tr); //Call a service function to populate the array sz = tr.getSize(); //How many array "categories"? for(i int from 1 to sz by 1) //for each category, create a TreeNode categoryNode TreeNode{text = tr[i].nodeName, imageURL = tr[i].nodePicture}; treeNodes ::= categoryNode; end firsttree.children = treeNodes; //And assign the TreeNode to the Tree //This function creates a mouse-over tool-tip on the rows in the Tree //Note that you might want to provide different information function showTooltip(node TreeNode) returns(Box) tooltipText.text = "This is a tooltip for <font color=red><b>"+ node.text+"</b></font> [" + "id='"+ node.id + "', " + "img='"+ node.image.src + "', " + "class='"+ node.class + "', " + node.children.getSize()+" children]"; //tooltipText.text = "This is a tooltip for: " + node.text; return(tooltipResponse); //This function is an event-handler for browser-click function click(node TreeNode in) node.span.cursor = "pointer"; //Change the mouse-pointer node.onClick ::= handleNodeClick; //If Click? Invoke handleNodeClick function node.onMouseOver ::= showFeedback; //If MouseOver? Invoke showFeedback function node.onMouseOut ::= hideFeedback; //If MouseOut? Invoke hideFeedback function //This function is fired onMouseOver. It makes the current node light yellow function showFeedback(e Event in) node TreeNode = e.widget; node.backgroundColor = node.backgroundColor; node.span.backgroundColor = "lightyellow"; e.stopPropagation(); //This function is fired onMouseOut. It returns the node to its previous (background) color function hideFeedback(e Event in) node.span.backgroundColor = node.backgroundColor; //This function is fired onMouseClick it does two things: //1. Makes the node red - then blue (upon the 2nd click) //2. For the current category Node, invokes a function to load the child nodes function handleNodeClick(e Event in) if(node.span.color == "red") node.span.color = "blue"; else node.span.color = "red"; msg.text = node.span.text; node.span.fontWeight = "bold"; image.src = node.image.src; //assign the node icon to the large image msg.text = node.text; //Just here for debugging for(sel int from 1 to sz) //Find out what category or node was clicked if(tr[sel].nodeName == node.text) //If a category? expandNode(sel); //Expand the category in the Tree //This function expands the current category node,with child node values function expandNode(sel int) treeNodes TreeNode[0]; //an array of TreeNode widgets for(i int from 1 to sz by 1) //iterate over the tr dynamic array of values items TreeNode[0]; //declare another set of TreeNode widgets for child items itemCount int = tr[i].nodeValues.getSize(); //How many values under the current category? if(sel == i) //if this is the currently selected category node? for(j int from 1 to itemCount by 1) //Load the category's child node values as follows: //new TreeNode widget{properties - including text, imageURL} itemNode TreeNode{text = tr[i].nodeValues[j].nodeValue, imageURL = tr[i].nodeValues[j].nodePic}; items ::= itemNode; //Concatenate the widget to the array of items (widgets) //re-draw the other categories in the Tree categoryNode TreeNode{text = tr[i].nodeName, imageURL = tr[i].nodePicture, children = items}; firsttree.children = treeNodes; //Assign all of the widget values to the RUI Tree menu

 Tree Control – EGL Rich UI Code – 1 of 3
In the RUIHandler code for treeControl.egl there are quite a few new EGL Rich UI coding constructs. We have annotated them in the source, but will attempt to amplify our explanations in these slides Declarations: Widget variables and properties Of note the Tree widget: - Width, Padding - backgroundColor, behaviors The event-behaviors consist of: User click and user mouse-over (which generates a toolTip TreeTooltip – a widget that allows Mouse-over help text ToolTipResponse is a box widget Tr TreeValues(0) is a standard EGL Dynamic array of strings that is Used to populate the Tree widget EGL Business Logic: In this initial function, the code: Retrieves the values into the dynamic array Iterates over the array, and creates the initial (highest level – categories) tree nodes Assigns the treeNodes to the Tree widget

Here are all of the EGL functions bound to browser/events (except for onClick – which get’s its own slide) Declarations: showTooltip – returns an inline HTML formatted response to the user’s mouse-over. This function is activated by the Tree widget’s setToolTips property The click function tests for which browser/user event occurred (that you have handled in this RUI code) – and invokes an EGL function based on the event showFeedback and hideFeedback simply set a background color to a node of a tree, when you mouse-over it.

The handleNodeClick function: Colors the clicked TreeNode Changes the image (to the clicked TreeNode) Changes the msg.text Determines which TreeNode was clicked – and passes its array index to the expandedNode function The expandNode function: Iterates over the dependent array items For the clicked TreeNode – a new set of widgets are dynamically created Then the categories are re-built as treenodes and the nodes are assigned to the tree widget Note: Read the inline comments very carefully – as they document the Rich UI language features used to implement a Tree Widget’s onClick functionality

 A Frameset-Style Web Page Template Layout – using .css
Along with learning how to design your Views with boxes, you will want to develop a number of U.I. templates, that act as the framework for your RUIHandler: Organization Layout Static text and graphics – common to most or all web pages In this workshop, you will learn one approach to this – using DIV layouts and custom .css definitions Using this sample, you can customize to your specific U.I. templatized requirements

 Workshop – Create a Custom .css in your Project
From Project Explorer: Open the com.ibm.egl.education.widgets project Expand \WebContent\ then expand \css\ Copy floatLayout.css - and paste it into the \WebContent\css\ package in your EGLRichUI project

 Workshop – A Standard Frameset-Style Template Layout Using .css
Inside of the \mySamples\ package, create a new RUIHandler, named: frameSetLayout From the Slide ***Notes – copy and paste all of the replacement code From the EGL source editor, completely replace all of the boiler-plate code Review the code briefly, noting the following elements: Reference to the custom .css in the RUIHandler The various DIV widgets The child widgets inside the DIV widgets Save and Preview Run in an external browser Resize the browser Try running the page in an external browser package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.Span; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.columns; handler frameSetLayout type RUIHandler{cssFile = "css/floatLayout.css", initialUI =[floats ]} floats Div{font = "Arial", marginLeft = 22, id = "container", children =[headerDiv, leftDiv, centerDiv, footerDiv]}; headerDiv Div{id = "top", children =[headerMsg]}; leftDiv Div{id = "leftnav", children =[leftMsg]}; centerDiv Div{id = "content", children =[centerMsg]}; footerDiv Div{id = "footer", children =[footerMsg]}; //widgets headerMsg TextLabel{class = "head1", Text = "This is a 'liquid layout' using floating divs"}; leftMsg TextLabel {text = "This is the left navigation area where you normally put " + "things like a tree widget, or an accordian widget, or just a bunch of links."}; footerMsg TextLabel{class = "footer1", Text = "In this box you could place your privacy policy, for instance. Or some links."}; centerMsg Span{text = "This is main content area where you put your, eh, main content. " + "Notice that we don't use any boxes to define this layout. " + "We don't use EGL boxes that are implemented using tables. " + "The entire layout is done with divs and CSS. " + "It resizes when the parent container is resized (that is why the web community calls it 'liquid')<p>" + "You could create the same layout using RUI Boxes. In that case you would need 5 <tt>Box</tt> instances (each implemented as an HTML <tt>TABLE</tt>), " + "one for the header, one for the 2 columns, one for the footer, and one to hold them all.<p>" + "This example was inspired by the following excellent tutorial:<ul>" + "<b>Floatutorial, simple tutorial on CSS floats</b><br>" + "<a href= + "Associated with <a href= Standards Group</a>.</ul>" + "In this sample, 5 'id's are being used: <tt>container</tt>, <tt>top</tt>, <tt>leftNav</tt>, <tt>content</tt>, and <tt>footer</tt>.<p>" + "See <tt>floatLayout.css</tt> for the styling that is automatically applied to this layout."} ; end

Workshop – Add Your Own Customized Widgets to the View
 In this workshop, you’ll use the frameSetLayout RUIHandler to contain some of the other widgets – including their functionality. Eventually you’ll produce the view shown below

 Workshop – Create Widgets From RUIHandlers
Recall from the TabFolder workshop how to create RUIWidgets from RUIHandlers Change the type to RUIWidget Change initialUI to targetWidget (and move all elements into a single box, if necessary, as targetWidget can – at most – refer to a single widget, not an array) Start by making RUIWidgets out of: SimpleMenuDemo, and TreeHandler Make the following modifications to the frameSetLayout RUIHandler: Add two new boxes to the header Add the Tree widget in to the lefDiv Add a center-aligned graphic (see code) into the footerDiv Add a # of boxes with children as shown here  Add image widgets, with src= properties as shown here  Add the TreeHandler and SimpleMenuDemo widgets 

 Workshop – Preview the frameSetLayout RUIHandler
Feel free to experiment with: U.I. properties of the existing widgets; add other widgets into the layout divs; add browser/user event-behaviors you’ve learned

 (Run-time) Drag & Drop Programming Techniques
Run-time Drag & Drop operations refer to Rich UI applications that allow users to pick up (select – drag) and drop a piece of data or an image – on top or inside of some other some other field or control in the browser. Upon drop some event is fired off, such as: A value is changed in a target input text field A total is updated – say, as a result of adding a retail item to a shopping cart A row (or rows) are moved from one table to another Etc. This kind of live simulation (similar to the control board in “Minority Report”) is very appealing to users – as it simplifies their workflow. As you can imagine, programming this in JavaScript/HTML is no walk-in-the-park. However EGL Rich UI provides language constructs to simplify the effort. They include: Events for selecting, dragging and dropping A means of creating a temporary container with the dragged control inside All the rest of the Rich UI coding structures for advanced dynamic user interface work In this workshop, you will create a RUIHandler like this – that allows browser/ruin-time Drag & Drop behavior for: - Text values - Graphics 

 Workshop – A Run-Time Drag & Drop RUIHandler
Inside of the \mySamples\ package, create a new RUIHandler, named: dnd From the Slide ***Notes – copy and paste all of the replacement code From the EGL source editor, completely replace all of the boiler-plate code Review the code briefly (really briefly – a detailed walk-through follows starting on the next slide) Save and Preview. Drag & Drop the text field Drag and Drop some of the graphic items onto the Shopping Cart package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.Image; import com.ibm.egl.rui.widgets.ListMulti; import com.ibm.egl.rui.widgets.Shadow; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.rui.Event; import egl.ui.rui.Widget; handler dnd type RUIHandler{cssFile = "css/EGLRichUI.css", initialUI =[boxCalc, line1, shadow, boxShopcart, line2], onConstructionFunction = initialization} //Textfield to be dragged in the browser myTextField TextField{text = "What a drag!", backgroundColor = "white", width = 120, onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text2 textfield{width = 120}; //the target field for the text drag & drop dx, dy, idx int; //intermediate x/y coordinate holding fields for the drag & drop operation //The temporary container (a shadow) that you drag around in the broswer (and its properties) shadow Shadow{zIndex = 2, position = "absolute", visibility = "hidden", //note position absolute and visibility hidden are key attributes div = new Div{width = "100px", background = "white", opacity = .5, style = "border: 1px solid black"}}; //A number of boxes - that are used to simply control placement and organize the UI boxCalc box{columns = 2, children =[myTextField, text2]}; boxShopCart box{columns = 2, children =[boxItemViewer, boxCart]}; boxItemViewer box{width = 500, height = 200, columns = 1, children =[boxItem, itemDescription, itemPrice, boxPager]}; boxCart box{padding=8,columns = 1, children =[cartImage, boxCartTags]}; boxCartTags box{columns = 2, children =[cartAmountLbl, cartamount, cartItemCountLbl, cartItemCount]}; boxItem box{height = 133, children =[currentItem], alignment = com.ibm.egl.rui.widgets.BoxLib.ALIGN_CENTER}; boxpager box{columns = 2, children =[imgBack, imgForward]}; //Temporary (WORKING STORAGE) variables items myitems[0]; //An array of records that are displayed as graphics + text item myitems; //Temp field for populating the array cartAmountWS money(9, 2); //Temporary totalers for the shoping cart cartItemCountWS int; //... //A set of widgets line1 html{text = "<HR>"}; //An HTML separator line2 html{text = "<HR>"}; //... cartamount textLabel{class = "textRightCL"}; //A series of labels for the UI cartItemCount textlabel{class = "textRightCL"}; //Note - some have custom .css classes cartAmountLbl textLabel{text = "Order amount: "}; // primarily for alignment cartItemCountLbl textLabel{text = "Number of items in cart: "}; itemDescription TextLabel{class = "textCenterCL"}; //... itemPrice TextLabel{class = "textCenterCL"}; //A set of image widgets - some with event-handlers cartImage image{src = "images/cart.jpg"}; imgForward image{src = "images/next.jpg", onClick ::= nextItem}; imgBack image{src = "images/prev.jpg", onClick ::= prevItem}; //The image to be dragged - note separate functions for this operation currentItem image{onStartDrag = startImg, onDrag = dragImg, onDropOnTarget = dropImg}; function initialization() valueItems(); //Fill in the internal dynamic record array of item values initialItem(); //And show an initial item in the Image widget end function start(myWidget Widget in, x int in, y int in) returns(boolean) //When the user begins a D&D operation, dynamically create a new TextLabel //...with the label's text initialized to the dragged field's text shadow.div.children = [ new TextLabel {padding = 6, text = myTextfield.text} ]; shadow.visibility = "visible"; //Make the Shadow container visible return(true); //allow the D&D operation to proceed //This event hapens for each mouse movement in a drag operation function drag(myWidget Widget in, drop Widget in, x int in, y int in) shadow.x = x + 4; //render the Shadow container 4X4 pixels over and down shadow.y = y + 4; //...from the cursor position during the Drag operation if(drop == text2) //If you're about to drop onto the "text2" widget text2.background = "LightYellow"; //Let the user know by turning it yellow else text2.background = "white"; //This event occurs upon widget "drop" function drop(widget Widget in, drop Widget in, x int in, y int in) if(drop == text2) //If you've dropped onto the "text2" widget text2.text = mytextfield.text; //make text2's.text value = the drag'd widget value shadow.visibility = "hidden"; //Upon drop, hide the Shadow text2.background = "white"; //...and turn the text widget's background back to white //Same functionality, except for an image function startImg(myWidget Widget in, x int in, y int in) returns(boolean) img Image = myWidget; //create a new image widget = to the dragged widget //Create a new shadow container with the new img widget as a child shadow.div.children =[new Image{src = img.src, opacity = .5}]; text2.text = ""; //optional - reset text2.text shadow.visibility = "visible"; //render the shadow container return(true); function dragImg(myWidget Widget in, drop Widget in, x int in, y int in) shadow.x = x + 4; shadow.y = y + 4; if(drop == cartImage) //If you're about to drop onto the "text2" widget boxCart.borderColor = "#ddd"; //put a border around the target widget boxCart.borderWidth = 1; boxCart.borderStyle = "solid"; boxCart.borderWidth = "0px"; //update the cart values with the "current selected array" values function dropImg(widget Widget in, drop Widget in, x int in, y int in) if(drop == cartImage) cartAmountWS += items[idx].price; cartItemCountWS += 1; cartamount.text = cartAmountWS; cartItemCount.text = cartItemCountWS; shadow.visibility = "hidden"; function initialItem() idx = 1; currentItem.src = items[idx].src; itemDescription.text = items[idx].title; itemPrice.text = items[idx].price; function nextItem(e event in) if(idx == 4) idx = 0; idx += 1; function prevItem(e event in) if(idx == 1) idx = 5; idx -= 1; function valueItems() item.src = "images/r1.jpg"; item.title = "Laptop PC"; item.price = ; items.appendElement(item); item.src = "images/r3.jpg"; item.title = "Old Fashioned Desktop PC"; item.price = ; item.src = "images/r2.jpg"; item.title = "1920's Metal Safe"; item.price = ; item.src = "images/r4.jpg"; item.title = "Old Fashioned Serial Mouse"; item.price = 20.05; record myItems src string; title string; price money;

 DND RUIHandler – Fields and Properties
Of note: The “to-be-dragged” widget must have three required eventHandlers that reference EGL functions: onStartDrag onDrag onDropOnTarget An absolute-positioned shadow container widget will be used to contain the dragged widget. What this implies, is that: When you start dragging the onStartDrag function is invoked (this code is shown on the next slide) The function in your code will “copy” the dragged widget inside a Shadow container that is used to show what’s being dragged on-screen It looks like you’re dragging the widget but you’ve made a temporary copy of the widget and are dragging the copy around inside a new, dynamically created container We have defined a separate group of functions for dragging the image widget. This is not technically necessary, but will make understanding the example easier.

 DND RUIHandler – Functions for Dragging & Dropping the Text Widget
Of note: The valueItems() function simply fills in a dynamic record array of: Graphic URL strings Item price and description strings The start function is invoked for the widget with the onStartDrag event handler. This function creates the new, temporary (shadow) container, and in it, creates a new TextLabel and assigns it the text value from the dragged widget It makes the shadow container visible The drag function is invoked for each mouse movement. It places the shadow container at absolute x/y coordinates +4 from the cursor. If the widget you’re hovering over is the text2 (our target) widget, it shows you this, by highlighting the background The drop function sets the text2 widget’s value equal to the dragged widget’s.text value. It also hides the shadow container and returns the text2 widget’s background to the original (white) color

 DND RUIHandler – Functions for Dragging & Dropping the Image Widget
Of note: Like the previous start function, this function is invoked for the widget with the onStartDrag event handler. This function creates the new, temporary (shadow) container, and in it, creates a new image widget and assigns it the src value from the dragged widget. It also makes the image widget opaque It makes the shadow container widget visible The drag function is invoked for each mouse movement. It places the shadow container at absolute x/y coordinates +4 from the cursor. If the widget you’re hovering over is the cartImage (our target) widget, it shows you this by creating a thin gray border around the image. The drop function updates a number of internal values with the value from the associated (current) image from the dragged widget It also hides the shadow container and returns the boxCart’s widget’s borderWidth back to zero.

 Optional Workshop Your Very Own Drag and Drop-Able Top 5 List – 1 of 3
Assume that you were to create a Drag & Drop widget as follows: There are five TextField widgets – that are initially valued as You need to allow users to: Enter new values (these are after all, TextFields) Drag and drop individual TextField widgets on top of other TextField widgets – swapping the contents of both the dragged and dropped widgets  Process: Create a new RUIHandler Copy/Paste the following artifacts from the DND RUIHandler into your new RUIHandler: Shadow myTextField The start(), drag() and drop() functions Then, make the following code additions/modifications to the widget declarations divmain div{width = 302, borderColor = "#ddd",borderWidth = 2, borderStyle = "solid", children = [text1, text2, text3, text4, text5]}; text1 textField{text = "AAAAA",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text2 textField{text = "BBBBB",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text3 textField{text = "CCCCC",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text4 textField{text = "DDDDD",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text5 textField{text = "EEEEE",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; shadow Shadow{zIndex = 2, position = "absolute", visibility = "hidden", //note position absolute and visibility hidden are key attributes div = new Div{width = "100px", background = "white", opacity = .5, style = "border: 1px solid black"}}; If you’re pressed for time, check the Slide ***Notes

Changes to the start() function Add this function: Changes to the drag() function

Changes to the drop() function A complete sample solution is in the Slide ***Notes (you’re welcome) package sandbox; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.ListMulti; import com.ibm.egl.rui.widgets.Shadow; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.rui.Widget; // RUI Handler // handler widgetArrays type RUIhandler {initialUI = [ Box,shadow],onConstructionFunction = initialization} Box com.ibm.egl.rui.widgets.Box{ padding=8, children=[divmain] }; divmain div{width = 302, borderColor = "#ddd",borderWidth = 2, borderStyle = "solid", children = [text1, text2, text3, text4, text5]}; text1 textField{text = "AAAAA",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text2 textField{text = "BBBBB",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text3 textField{text = "CCCCC",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text4 textField{text = "DDDDD",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; text5 textField{text = "EEEEE",onStartDrag = start, onDrag = drag, onDropOnTarget = drop}; shadow Shadow{zIndex = 2, position = "absolute", visibility = "hidden", //note position absolute and visibility hidden are key attributes div = new Div{width = "100px", background = "white", opacity = .5, style = "border: 1px solid black"}}; function initialization() // SysLib.writeStdout("Hi Chris"); end function start(myWidget Widget in, x int in, y int in) returns(boolean) textTemp TextField = myWidget; //tempfield for multiple drag'd widgets shadow.div.children = [ new TextLabel {padding = 6, text = textTemp.text} ]; shadow.visibility = "visible"; //Make the Shadow container visible return(true); //allow the D&D operation to proceed //This event hapens for each mouse movement in a drag operation function drag(myWidget Widget in, drop Widget in, x int in, y int in) shadow.x = x + 4; //render the Shadow container 4X4 pixels over and down shadow.y = y + 4; //...from the cursor position during the Drag operation setBackgroundColor();// white-out all the backgrounds case (drop) when (text1) text1.background = "LightYellow"; when (text2) text2.background = "LightYellow"; when (text3) text3.background = "LightYellow"; when (text4) text4.background = "LightYellow"; when (text5) text5.background = "LightYellow"; otherwise //shadow.visibility = "hidden"; //Make the Shadow container visible //This event occurs upon widget "drop" function drop(myWidget Widget in, drop Widget in, x int in, y int in) //This if tests for dropping outside the boundary of the RUIHandler's "document" if (drop == text1 || drop == text2 || drop == text3 || drop == text4 || drop == text5) else setBackgroundColor(); shadow.visibility="hidden"; return; //Initialize temp widgets with the RUIHandler widgets textDrag TextField = myWidget; textDrop TextField = drop; textTemp textField{}; //a widget to temporarily hold the drop value TextTemp.text = textDrop.text; textDrop.text = textDrag.text; textDrag.text = textTemp.text; shadow.visibility = "hidden"; function setBackgroundColor() text5.background = "white"; text2.background = "white"; text3.background = "white"; text4.background = "white"; text1.background = "white";

 Data Table Widget Data Tables are a very popular and common way to organize and display data in business applications. EGL Rich UI ships with a powerful and flexible widget that allows the programmer to display data and manipulate it in many ways. It’s called the Grid widget. When we are done with this workshop having learned how to use the Grid widget, we will have created a view similar to this… Sort-able Column Headers  Alternate Row Colors

 Data Table Workshop – Create New Package and Library
In order to complete this exercise, we will need some data to work with For learning purposes, we will provide you with some hard coded data Let’s first create a package for our data. Right-click over the EGLSource source folder and select New  EGL Package At the screen that pops-up, name the package customerData Next right-click over the customerData package and create a new EGL Library Name the file CustomerInfo

 Create customerInfo Library Records and Data
Delete everything in the customerInfo file. You should now have a file with nothing in it Copy the code in the notes section of this slide and Paste it into the customerInfo file. You should have no errors and see something like the following! This file contains a record definition, which uses data items declared above the record. The library then declares an array variable of the record type and assigns it values Now that we have data to work with, let’s move on to creating a Data Table package customerData; // basic library library customerInfo Customers Customer[] = [ new Customer{ CustomerID = "1", Firstname="Fred", Lastname="Filibuster", Phone="(201) ", Street="14 Maple Avenue", City ="3060", State = "NY", Postalcode="12345"}, new Customer{ CustomerID = "2", Firstname="Andrew", Lastname="Lundquist", Phone="(221) ", Street="21 Grand Boulevard", City ="Raleigh", State = "CT", Postalcode="23782"}, new Customer{ CustomerID = "3", Firstname="Brice", Lastname="Kingman", Phone="(261) ", Street="14 Mayberry Drive", City ="Winston Salem", State = "NY", Postalcode="37483"}, new Customer{ CustomerID = "4", Firstname="Francine", Lastname="Liebowitz", Phone="(414) ", Street="1234 Politics Circle", City ="Sacramento", State = "NY", Postalcode="12309"}, new Customer{ CustomerID = "5", Firstname="Ornette", Lastname="Coleman", Phone="(518) ", Street="5829 Two Pines Trail", City ="Coventry", State = "NJ", Postalcode="06238"}, new Customer{ CustomerID = "6", Firstname="Ellen", Lastname="Springsteen", Phone="(712) ", Street="88 Allen Street", City ="Manchester", State = "CA", Postalcode="90210"}, new Customer{ CustomerID = "7", Firstname="Martin", Lastname="St. Louis", Phone="(670) ", Street="54 Belvedere Lane", City ="West Hartford", State = "CT", Postalcode="48723"}, new Customer{ CustomerID = "8", Firstname="Sergey", Lastname="Sharov", Phone="(413) ", Street="14 Belmont Circle", City ="Carey", State = "NY", Postalcode="18232"}, new Customer{ CustomerID = "9", Firstname="Naomi", Lastname="Hudak", Phone="(860) ", Street="43 Spring Street", City ="Hebron", State = "NV", Postalcode="65232"}, new Customer{ CustomerID = "10", Firstname="Abigail", Lastname="Freeman", Phone="(201) ", Street="358 Pondfield Road", City ="Ridgewood", State = "NJ", Postalcode="04750"}, new Customer{ CustomerID = "11", Firstname="Robin", Lastname="Cassidy", Phone="(212) ", Street="33 Brookstone Place", City ="Carey", State = "NY", Postalcode="12434"}, new Customer{ CustomerID = "12", Firstname="Jennifer", Lastname="Nuce", Phone="(201) ", Street="405 Origami Boulevard", City ="Los Angeles", State = "CA", Postalcode="90210"}, new Customer{ CustomerID = "13", Firstname="Doug", Lastname="Potter", Phone="(860) ", Street="932 Hilltop Road", City ="Wethersfield", State = "CT", Postalcode="06109"}, new Customer{ CustomerID = "14", Firstname="Francis", Lastname="Giordano", Phone="(908) ", Street="572 Cucumber Lane", City ="Fair Lawn", State = "NJ", Postalcode="07232"} ]; end dataitem CustomerID int end dataitem FirstName STRING end dataitem LastName STRING end dataitem Phone STRING end dataitem Address STRING end dataitem Street STRING end dataitem City STRING end dataitem State STRING end dataitem Postalcode STRING end record Customer CustomerID CustomerID; FirstName FirstName; LastName LastName; Phone Phone; Address Address; Street Street; City City; State State; Postalcode Postalcode;

 Create New Package and RUIHandler
First let’s create a new package Right-click over the EGLSource source folder and select New  EGL Package At the screen that pops-up, name the package dataGrid Next right-click over the dataGrid package and create a new EGL Rich UI Handler Name the file DataTableBasics Click Finish

 Create Your First Grid Widget
Now, let’s drag a Grid widget onto the RUIHandler Make sure to drag the Grid from under EGL Widgets and not Dojo When asked for a variable name of your Grid, name it myFirstGrid Now switch to the source view of the Rich UI Editor Don’t be intimidated by the code! We will make sense of it

 Customize the Grid Widget Properties
First let’s experiment with the columns property The columns property takes an array of GridColumn RUIWidgets The GridColumn RUIWidget itself has several properties including Name – The actual name of the field in the record to be displayed (case sensitive) DisplayName – The name to be used as the column header when the Grid is rendered on the page Width – The width of the column Adjust the variable declaration so it looks as follows Next, delete the data property from the myFirstGrid variable declaration (and don’t forget to delete the trailing comma after the close square bracket – see screen capture) Add the following line of code in the initialization function  Note that .data is the property of the Grid RUIWidget that corresponds to the detail rows displayed in the grid at run-time. The actual values can be sourced from a service or library call, but what’s significant here, is that a grid widget’s .data property must be assigned to a dynamic array of type: any[];

 Preview Grid Widget (so far)
Save the page and then go to the Preview view of the EGL Rich UI Editor Currently only two columns are being displayed, even though each array record of data passed to the Grid widget contains nine fields (we’ll get to the other seven fields later) Note the alternating row colors Note the gray header cells

 Add Additional Grid Columns
Go ahead and add the following new GridColumns to the Grid variable’s columns property You should now see a data table on the page with five columns and 14 rows. You should also understand the relationship between dynamically declaring new grid columns, and the columns displayed in a dataGrid widget Let’s take a further look into some of the other Grid properties Behaviors – The ability to add behaviors to the Grid as a whole HeaderBehaviors – The ability to add behaviors to just the column headers of the data table

 Add New Behaviors  What is a “Behavior”?
Edit the grid variable declaration again to add the following behaviors property. The behaviors property accepts an array of behaviors. Add the behavior outlined in red below Save the page, Preview and examine the results. Notice how the cells (except for Customer ID) have almost no padding now Why not the Customer ID column? How would you change the grid code so that Customer ID does not have a fixed-width?  What is a “Behavior”? An EGL Rich UI widget behavior is a defined event handler that is invoked when certain elements in a widget are created. Behaviors typically do things like change presentation characteristics, add extra widgets, or add extra event handlers. For Grid, behaviors can be specified on both header cells and data cells. For Menu, behaviors exist on menu items. For Tree widgets, a behavior is invoked for each tree node being created.

 Add a GridSelector Next, let’s create a variable of type GridSelector Do so anywhere inside of the RUIHandler (and outside of the initialization function) Now return to the behaviors property of the Grid and add the following property (don’t forget the trailing comma after GridBehaviors.tightCells,) Save the page and Preview. Notice the results: Clicking inside of a row will fire off the GridSelector event and turn the row green Holding down the Ctrl key will allow you to click and select multiple rows

  Add a Column Sorter How about another behavior?
Go ahead and create a new variable of type GridSorter inside of your RUIHandler Now add gridSorter.columnSorter property to the headerBehaviors array Save the page and view the results. Click the column headers to re-sort the rows 

 Add a Column Header Tooltip
Another very popular feature in many applications is what’s called a ToolTip. A tool tip is a message that will pop-up when a user mouses (hovers) over something. Create the following variable of type ToolTip, and the function called headerTooltips. Copy/Paste code available in the notes Now return to the headerBehaviors property of the Grid and add the following tool tip as a grid column header behavior. Notice that you are referencing the function (headerToolTips) and not the Tooltip variable headerTooltip Tooltip { text = "Click to sort this column", delay=1000 }; function headerTooltips(grid Grid in, td Widget in, row any in, ignoreRowNumber int in, column GridColumn in) headerTooltip.enable(td); end

 Drag & Drop – Add 2nd Grid
Save the RUIHandler code, and note the new functionality Now that we have explored many of the functions that the Grid Widget offers, let’s take a look at two final use cases: Row Drag & Drop Table data cell Drag & Drop  In the same RUIHandler (DataTableBasics.egl) create the following new Grid This Grid will serve as the empty Grid that data is dropped into You may get errors because of missing import statements, press Ctrl+Shift+O to fix these errors mySecondGrid Grid { columns = [ new GridColumn{name = "CustomerID", displayName = "Customer ID"}, new GridColumn{name = "FirstName", displayName = "First Name"}, new GridColumn{name = "LastName", displayName = "Last Name"}, new GridColumn{name = "Phone", displayName = "Phone"}, new GridColumn{name = " Address", displayName = " Address"} ], behaviors = [ GridBehaviors.whiteCells ], headerBehaviors = [ GridBehaviors.grayCells ], id = "grid2", data = (new any[]) };

 Add Drag & Drop Support
Next, let’s add some code onto the RUIHandler that will give us the browser/run-time Drag & Drop support we learned about earlier in this section of the course. For this part of the lab, Copy/Paste code is provided in the slide ***Notes.  Steps: Copy the Slide *** Notes code now. Place this code anywhere within the EGL functions section of the RUIHandler Press Ctrl+Shift+O – to resolve missing imports for these new statements By doing this you have: Created a second grid and given it no data Placed code that will allow for drag and drop between the two grids onto the RUIHandler  Now that we’ve got two grids, let’s put them into Rich UI box, in order to get them next to each other. Add the following code to the RUIHandler (Preferably at the top – and don’t forget to press Ctrl+Shift+O to add referenced widget imports) Note that we are creating a box and giving it three children. The first two children are Box’s themselves created implicitly (and given our Grids as children). The last child is a Widget which will appear during drag and drop (it is initially set to visibility = hidden) ////////////////////////////////////////////////////////////////////////////////////////// // // SUPPORT FROM DRAG AND DROP BETWEEN TWO GRIDS showWhatWeAreDragging Shadow { position="absolute", visibility="hidden", div = new Div { padding = 3, borderStyle = "solid", borderWidth=1, backgroundColor = "lightblue" } }; function startDragGridSelection(widget Widget in, x int in, y int in) returns(boolean) length int = gridSelector.selectedRows.getSize(); if (length > 0) text String = "<div style='margin-bottom:-1'><table>"; for (n int from 1 to length by 1) tr Widget = gridSelector.selectedRows[n]; text += "<tr>"+tr.innerHTML+"</tr>"; end text += "</table></div>"; showWhatWeAreDragging.div.innerHTML = text; showWhatWeAreDragging.visibility="visible"; showWhatWeAreDragging.opacity=1.0; showWhatWeAreDragging.x=x+4; showWhatWeAreDragging.y=y+4; return (true); else return (false); function dragGridSelection(widget Widget in, dropTarget Widget in, x int in, y int in) function dropGridSelection(widget Widget in, dropTarget Widget in, x int in, y int in) parent Widget = dropTarget.logicalParent; if (parent.id == "grid2") data any[] = []; for (n int from 1 to gridSelector.selection.getSize() by 1) row any = gridSelector.selection[n]; if (row != null) data.appendElement(row); mySecondGrid.data = data; showWhatWeAreDragging.fadeOut(700, hideDragFeedback); gridSelector.clear(mySecondGrid); function hideDragFeedback() showWhatWeAreDragging.visibility = "hidden";

 Drag & Drop – Event-Handler Bindings for Drag & Drop Operations
Now that we’ve created a new Box to house our Grid’s, let’s go ahead and adjust our RUIHandler’s initialUI property to take the new Box instead of our first Grid Finally, we need to add some more properties to myFirstGrid Note that the functions referenced by these properties were defined inside the copy/paste code on the previous slide Save and Preview Click and select one or more rows as you did before, from myFirstGrid (on the left). Then, drag them to mySecondGrid (on the right), dropping them on the grid column header to add the rows. Check out all the other grid behaviors to verify that they have been unaffected by adding your new functionality package dataGrid; // rui handler import egl.rui.RUIHandler; import egl.rui.utilities.DragAndDropSupport; import egl.rui.utilities.DragFunction; import egl.rui.widgets.Box; import egl.rui.widgets.Div; import egl.rui.widgets.Grid; import egl.rui.widgets.GridBehaviors; import egl.rui.widgets.GridColumn; import egl.rui.widgets.GridSelector; import egl.rui.widgets.GridSorter; import egl.rui.widgets.GridTooltip; import egl.rui.widgets.Shadow; import egl.rui.widgets.Td; import egl.rui.widgets.TextLabel; import egl.rui.widgets.Tooltip; import egl.rui.widgets.Tr; import egl.rui.widgets.Widget; import egl.ui.position; import customerData.customerInfo; handler DataTableBasics type RUIHandler { onConstructionFunction = onConstructionFunction, initialUI = [layoutBox] } layoutBox Box{ margin = 20, children = [new Box{children = [myFirstGrid], margin = 10}, new Box{children = [mySecondGrid], margin = 10}, showWhatWeAreDragging]}; myFirstGrid Grid{ columns = [ new GridColumn{name = "CustomerID", displayName = "Customer ID"}, new GridColumn{name = "FirstName", displayName = "First Name"}, new GridColumn{name = "LastName", displayName = "Last Name"}, new GridColumn{name = "Phone", displayName = "Phone"}, new GridColumn{name = " Address", displayName = " Address"} ], behaviors = [ GridBehaviors.alternatingColor, GridBehaviors.tightCells, GridSelector.enableSelection, myTooltip.setToolTips headerBehaviors = [ GridBehaviors.grayCells, GridSorter.columnSorter, headerToolTips data = customerInfo.Customers as any[] }; mySecondGrid Grid { columns = [ behaviors = [ GridBehaviors.whiteCells ], headerBehaviors = [ GridBehaviors.grayCells ], data = (new any[])}; GridSelector GridSelector{ color = "lightgreen" }; GridSorter GridSorter{}; myTooltip GridToolTip{ provider = textToolTip, toolTip.delay = 2000}; function textToolTip(row any in, fieldName String in, td TD in) returns(Box) toolTipText TextLabel{ borderLeftStyle="solid", borderLeftWidth=1, paddingLeft=7, marginLeft=7 }; toolTipBox Box{ columns = 1, children = [toolTipText]}; toolTipText.text = "This is a tooltip for field='"+fieldName+"', text='"+td.widget.innerText+"', and value='"+row[fieldName]+"'. "+ "<br /><font color=red><b>Note:</b></font>"+ "Tooltips can contain anything, including links: <a target=_blank href= Cafe</a>."; return (toolTipBox); end headerTooltip Tooltip { text = "Click to sort this column", delay=1000 }; function headerTooltips(grid Grid in, td TD in, row any in, ignoreRowNumber int in, column GridColumn in) headerTooltip.enable(td); ////////////////////////////////////////////////////////////////////////////////////////// // // SUPPORT FROM DRAG AND DROP BETWEEN TWO GRIDS dragAndDrop DragAndDropSupport { widget = myFirstGrid, startFunction = startDragGridSelection, dragFunction = dragGridSelection, dropFunction = dropGridSelection showWhatWeAreDragging Shadow { position="absolute", visibility="hidden", div = new Div { padding = 3, borderStyle = "solid", borderWidth=1, backgroundColor = "lightblue" } function startDragGridSelection(dropTarget any in, x int in, y int in) returns(boolean) length int = gridSelector.selectedRows.getSize(); if (length > 0) text String = "<div style='margin-bottom:-1'><table>"; for (n int from 1 to length by 1) tr TR = gridSelector.selectedRows[n]; text += "<tr>"+tr.widget.innerHTML+"</tr>"; text += "</table></div>"; showWhatWeAreDragging.div.widget.innerHTML = text; showWhatWeAreDragging.widget { visibility="visible", opacity=1.0, x=x+4, y=y+4 }; return (true); else return (false); function dragGridSelection(dropTarget any in, x int in, y int in) showWhatWeAreDragging.x=x+4; showWhatWeAreDragging.y=y+4; function dropGridSelection(dropTarget any in, x int in, y int in) if (GridBehaviors.hasParent(dropTarget, mySecondGrid)) data any[]; for (n int from 1 to gridSelector.selection.getSize() by 1) dict Dictionary { }; dict.insertAll(gridSelector.selection[n]); data ::= dict; mySecondGrid.data = data; showWhatWeAreDragging.widget.fadeOut(700, hideDragFeedback); myFirstGrid.data = myFirstGrid.data; gridSelector.clear(); function hideDragFeedback() showWhatWeAreDragging.widget.visibility = "hidden"; function onConstructionFunction()

 Data Table – With Row Drag & Drop: Preview
 Optional workshop: From inside the myFirstGrid’s behaviors and headerBehaviors, copy/paste properties, and enable mySecondGrid for: Alternate row colors Column sort Tight cells

Data Table – Drag & Drop of Individual DataTable Cells
Drag & Drop is so popular with Web 2.0 applications, that we’re going to cover one final use case – which is cell-by-cell Drag & Drop (see the screen capture below). As we’ve done in previous workshops, we will annotate and walk through the important aspects of the EGL code Note – the code in this Drag & Drop sample is in the: com.ibm.egl.education.widgets project: Feel free to open and Preview before continuing on with these slides.

Drag & Drop of Individual DataTable Cells – Annotated Code – 1 of 2
Recall from your previous Drag & Drop examples that you need to define: 1. behaviors for enabling the Drag & Drop (in this example the behavior is: enableCellDragging. 2. A Shadow widget – which is an HTML <DIV> tag, that will be dynamically created at run-time, to contain the value of what is selected and dragged (in this case, a dataGrid cell value). This is what’s being dragged

Drag & Drop of Individual DataTable Cells – Annotated Code – 2 of 2
Compare this with the previous Drag & Drop example. Note that the only difference between the two is that in this example, you’re dragging a table cell - In actuality? An HTML: <TD> value </TD>. Study the code below. You should recognize the EGL Rich UI coding elements annotated for here and more importantly, the coding pattern to do cell Drag & Drop.

 Another Data Table Use Case – a Paging Grid – 1 of 3
You will definitely need to create a page-able dataGrid for your Rich UI applications. To help you with this, IBM has pre-defined just such a widget, that allows you to customize things such as # of rows displayed, etc. Create a new EGL Rich UI Handler called PagingGridBasics under the dataGrid package In your new RUIHandler, code the following PagingGrid (or grab the Copy/Paste code for this snippet from the Slide ***Notes, and replace your entire boiler-plate code). Note the new widget features: PagingGrid widget visibleRows property Preview  package dataGrid; import egl.ui.color; import egl.ui.columns; import egl.ui.displayname; import customerData.customerInfo; import grid.PagingGrid; handler PagingGridBasics type RUIhandler {initialUI = [myPagingGrid],onConstructionFunction = initialization} //Here's the initial pagingGrid widget code - the courseWare will describe a # of modifications... myPagingGrid pagingGrid {columns = [ new com.ibm.egl.rui.widgets.GridColumn{name = "CustomerID", displayName = "Customer ID"}, new com.ibm.egl.rui.widgets.GridColumn{name = "FirstName", displayName = "First Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = "LastName", displayName = "Last Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = " Address", displayName = " Address"} ], visibleRows = 3, //How many rows in view at a time data = customerInfo.customers as any[] }; function initialization() end

Try changing the following properties of the PagingGrid view – and enhance it as follows: Add additional columns (note – get the specifics by looking at customerInfo.Customers) Change the visibleRows Change the PagingGrid’s general properties: BackgroundColor, Height, Width, Color, borderColor/BorderStyle/BorderWidth OPTIONAL workshop: From the dataTableBasics.egl, copy the code in to do: Grid.behaviors: Alternate row colors Tight cells Row selection Grid.headerBehaviors Column sorting Gray cells Tooltips See next slide for a screen capture of the code needed to the optional lab

When all else fails, use this… Code what’s below, or hit the Slide ***Notes for a copy/paste solution Also – remember that you will need to add in the imports (Ctrl/Shift/O) package dataGrid; import com.ibm.egl.rui.widgets.Grid; import com.ibm.egl.rui.widgets.GridColumn; import com.ibm.egl.rui.widgets.GridSelector; import com.ibm.egl.rui.widgets.GridSorter; import com.ibm.egl.rui.widgets.Tooltip; import egl.ui.rui.Widget; import Grid.PagingGrid; import customerData.customerInfo; handler PagingGridBasics type RUIhandler {initialUI = [myPagingGrid],onConstructionFunction = initialization} //Here's the initial pagingGrid widget code - the courseWare will describe a # of modifications... myPagingGrid pagingGrid {backgroundColor = "AliceBlue", width = 600, borderColor = "gray",borderStyle = "groove",borderWidth = "8", grid.behaviors = [ com.ibm.egl.rui.widgets.GridBehaviors.alternatingColor, com.ibm.egl.rui.widgets.GridBehaviors.tightCells, gridSelector.enableSelection ], grid.headerBehaviors = [ com.ibm.egl.rui.widgets.GridBehaviors.grayCells, gridSorter.columnSorter, headerToolTips ], columns = [ new com.ibm.egl.rui.widgets.GridColumn{name = "CustomerID", displayName = "Customer ID"}, new com.ibm.egl.rui.widgets.GridColumn{name = "FirstName", displayName = "First Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = "LastName", displayName = "Last Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = "Phone"}, new com.ibm.egl.rui.widgets.GridColumn{name = "State", displayName = "ST"}, new com.ibm.egl.rui.widgets.GridColumn{name = " Address", displayName = " Address"} ], visibleRows = 8, //How many rows in view at a time data = customerInfo.customers as any[] }; gridSelector GridSelector {color="LightYellow"}; gridsorter GridSorter{}; headerTooltip Tooltip { text = "Click to sort this column", delay=1000 }; function headerTooltips(grid Grid in, td Widget in, row any in, ignoreRowNumber int in, column GridColumn in) headerTooltip.enable(td); end function initialization()

 One more OPTIONAL Use Case
(Just ‘cause we knew you’d ask) How would you get this  Paging buttons relocated: Bottom Right-justified Give up? Not so fast… From PagingGridBasics.egl, double-click on: pagingGrid Press F3 – enough times to open the pagingGrid.egl source code in the Editor Find the targetWidget= property … what widget does it point to? Right: ui - a plain old box, with two children. Okay, so how would we switch the button and grid order? Right. Switch their order inside the box properties  Now (the $64,000 question) – “How would you right-justify the buttons in the button box”? RIGHT! Add: alignment=1, to the grid properties Moral: “It’s all just EGL”, Chris Laffra, Rich UI Language Architect, February 7th, 2009 package dataGrid; import com.ibm.egl.rui.widgets.Grid; import com.ibm.egl.rui.widgets.GridColumn; import com.ibm.egl.rui.widgets.GridSelector; import com.ibm.egl.rui.widgets.GridSorter; import com.ibm.egl.rui.widgets.Tooltip; import egl.ui.rui.Widget; import Grid.PagingGrid; import customerData.customerInfo; handler PagingGridBasics type RUIhandler {initialUI = [myPagingGrid],onConstructionFunction = initialization} //Here's the initial pagingGrid widget code - the courseWare will describe a # of modifications... myPagingGrid pagingGrid {backgroundColor = "AliceBlue", width = 600, borderColor = "gray",borderStyle = "groove",borderWidth = "8", grid.behaviors = [ com.ibm.egl.rui.widgets.GridBehaviors.alternatingColor, com.ibm.egl.rui.widgets.GridBehaviors.tightCells, gridSelector.enableSelection ], grid.headerBehaviors = [ com.ibm.egl.rui.widgets.GridBehaviors.grayCells, gridSorter.columnSorter, headerToolTips ], columns = [ new com.ibm.egl.rui.widgets.GridColumn{name = "CustomerID", displayName = "Customer ID"}, new com.ibm.egl.rui.widgets.GridColumn{name = "FirstName", displayName = "First Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = "LastName", displayName = "Last Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = "Phone"}, new com.ibm.egl.rui.widgets.GridColumn{name = "State", displayName = "ST"}, new com.ibm.egl.rui.widgets.GridColumn{name = " Address", displayName = " Address"} ], visibleRows = 8, //How many rows in view at a time data = customerInfo.customers as any[] }; gridSelector GridSelector {color="LightYellow"}; gridsorter GridSorter{}; headerTooltip Tooltip { text = "Click to sort this column", delay=1000 }; function headerTooltips(grid Grid in, td Widget in, row any in, ignoreRowNumber int in, column GridColumn in) headerTooltip.enable(td); end function initialization()

 Another Use Case – How to Reference the “Selected Row”
One question that probably will come to mind sooner – rather than later – is the question of, “how do I select a row in a dataGrid – and take some action based on the row selected?” We’ve already seen that you can automatically (calling the gridSelector behavior widget) turn the selected row a different color – but how about actually doing something tangible with the row selected? Like opening another dataGrid with rows dependent upon the row selected, etc It’s actually very easy to do this – as it’s already built-in to the gridSelector’s functionality. From the PagingGridBasics’ code: modify + add the following: Change to gridSelect properties. Ad a behavior to run on row click: onClick of a dataTable row, use the first occurrence in the selection[…] array (which references the row selected)

 Do We Have Time For One More Use Case
 Do We Have Time For One More Use Case? (Substituting Other Widget Types in dataGrid Rows) Another typical Use Case revolves around substituting complex widgets into dataGrid Rows (in place of the default TextLabels). This is relatively easy to do, but involves using a new IBM-supplied widget, called the EditableGrid. Assume you had to create the following view: Where: All of the fields are editable Checkboxes are used for boolean datatypes ComboBoxes can be used for selection controls The RUIHandler responds to each update ‘event’ – allowing you to save or persist changes Let’s see how to pull this together

 Substituting Other Widget Types in dataGrid Rows – 1 of 4
In the \dataGrid\ package, create a new RUIHandler, named: rowWidgetSub Copy and paste the code from the Slide ***Notes, over the boiler-plate statements Save and Preview. Note the run-time behavior: Sorting Row mouse-over Row selection Modify a value: A text field A check box Select a different state Move to (select) a new row Note that the RUIHandler is “aware” of what row (and what value) has been updated Let’s look at the EGL language and coding patterns to do this… //1. You should copy the: blueFade.png and rowWidget.css, from the com.ibm.egl.education.widgets \WebContent\css\ … to the EGLRichUI \WebContent\css\ directory //2. code for the RUIHandler package dataGrid; import com.ibm.egl.rui.widgets.Grid; import com.ibm.egl.rui.widgets.GridColumn; import com.ibm.egl.rui.widgets.GridSelector; import com.ibm.egl.rui.widgets.GridSorter; import egl.ui.rui.Event; import egl.ui.rui.EventHandler; import egl.ui.rui.Widget; import Grid.EditableGrid; import Grid.EditableGridColumn; import Grid.EditableGridValidators; import customerData.Customer; import customerData.customerInfo; handler rowWidgetSub type RUIhandler {cssFile = "css/rowWidget.css", initialUI = [layout], onConstructionFunction = start} //run the start function upon before rendering the view layout com.ibm.egl.rui.widgets.Box{padding = 8, columns = 2, children =[grid]}; gridSorter GridSorter { }; //Add sorting capability to the grid gridSelector GridSelector {}; //Add row selection capability to the grid //The Editable Grid Widget. Note an implementation of many standard functions through // local (to this RUIHandler) EGL function calls: alternatingColorRows, highlight, etc. grid EditableGrid { headerBehaviors = [gridSorter.columnSorter], behaviors = [gridSelector.enableSelection, alternatingColorRows, highlight] , onChange ::= gridChanged }; //A dynamic array of strings, representing valid states validStates String[] = [ "CA", "CT", "DE", "NC", "NJ", "NV", "NY", "TX", "WA", "WI" ]; function createColumns(locationValues String[] in) grid.columns = [ new EditableGridColumn { name = "CustomerID", displayName = "ID", width = 80, validator = EditableGridValidators.IsNotEmpty }, name = "Firstname", displayName = "First name", width = 110, validator = EditableGridValidators.IsString name = "Lastname", displayName = "Last name", width = 110, name = "EliteStatus", displayName = "Elite", width = 80, validator = EditableGridValidators.IsBoolean name = "Phone", displayName = "Phone Number", width = 120, name = "State", displayName = "ST", width = 120, validValues = validStates } ]; end function start() createColumns(validStates); grid.setData(customerInfo.Customers as any[]); function alternatingColorRows(grid Grid in, td Widget in, row any in, rowNumber int in, column GridColumn in) if (rowNumber % 2 == 1) td.parent.class = "EglRuiGridOddRow"; td.parent.setAttribute("RowClass", "EglRuiGridOddRow"); function highlight(grid Grid in, td Widget in, row any in, rowNumber int in, column GridColumn in) td.onMouseOver ::= cellHover; td.onMouseOut ::= cellOut; function cellHover(e Event in) e.widget.parent.class = "EglRuiGridHoverRow"; function cellOut(e Event in) e.widget.parent.class = e.widget.parent.getAttribute("RowClass"); function gridChanged(e Event in) writestdout("now save grid "+grid.changedRows.getSize()); for (n int from 1 to grid.changedRows.getSize()) writestdout(""+n+" "+servicelib.convertToJSON(grid.changedRows[n] as Customer));

From the EGL statements note the following: Standard RUIHandler declaration – although the code to implement the Editable Grid columns is in the start function (next slide) Standard Grid widget functionality for: Sorting, Selection New widget type – Editable grid – that’s been included in the: com.ibm.rui.widgets.education project In this new widget, we are mixing implementations of: Behaviors defined in this RUIHandler Behaviors defined in the standard gridSelector and gridSorter widgets An array of string values (that will ultimately end up as a combo-box)

In the start() function we: Invoke a widget function to define individual columns for the grid – setting custom properties and specifying validators and/or validValues: Note that by default: - Boolean fields  Checkboxes - Other types  Edit-able Input fields - validValues  comboBoxes In the grid.setData, we assign an any[] array – as usual

In the remaining EGL functions, we’re exposing the Rich UI coding techniques used to do things such as: Mouse-over and Cell-hover Alternating rows Grid value-changed event-listener (defined) These could be embedded in the Editable grid, but are shown here to illustrate the nature of the coding patterns

 EGL Rich UI Programming – Popup Dialogs
Popup pages or dialogs are ubiquitous requirements for business applications. And even have been for decades. We’d better learn how to implement them in Rich UI. They relate to some parent widget’s information typically contain: Dependent or expansion information on data in some parent widget Capturing or selecting information in a display that would simplify data entry Showing some exceptional condition or information in an eye-catching manner The curious thing? You already have the tools. (No way? Yes way.) Steps: Design the popup page (nothing new here) – except Code the properties to: Hide/Show the box that contains whatever widgets (or just a widget) you wish to pop up (If placing the Popup relative to another widget on-screen) capture and utilize the x/y coordinates of the parent widget – see example Code the necessary event-handlers for the processing in the Popup In the workshop, we’ll create a RUIHandler which contains a Popup that displays a list of states for selection  You will activate the Popup by double-clicking in a field

 Create Popup RUIHandler – Code Explanation 1 of 2
In the \mySamples\ folder create a new RUIHandler named: dialogHandler From the Slide ***Notes – copy and paste the code therein, over the boiler-plate statements Save Preview – Click in the State textField  Now let’s break the Rich UI code constructs down… Consider the following… In fieldState – we define an onClick event The states string array is just that. You would populate it typically using a call to a Web Service (next section of this Tutorial) The stateValues widget is our popup. It needs its own onClick event-handler (function). It also needs to be initially hidden and its position must be absolute, in order to dynamically assign it to the x/y coordinates of fieldState package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.Grouping; import com.ibm.egl.rui.widgets.List; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.idl.java.class; import egl.ui.columns; import egl.ui.rui.Event; handler dialogHandler type RUIhandler {cssFile = "css/EGLRichUI.css", initialUI = [ui,stateValues],onConstructionFunction = initialization} Box com.ibm.egl.rui.widgets.Box{columns = 1,padding=8, children = [groupCust, groupAddr]}; ui Div {children = [box, button ] }; Button button{text="Change Grouping Label",onClick ::= changeLabel}; groupCust grouping{class = "outputTextSmallRed", text = "Enter Customer Information ", children = [box2]}; box2 box{columns = 2,children = [textFirst, fieldFirst, textLast, fieldLast, textPhone, fieldPhone, text , field ] }; textFirst TextLabel{text = "First Name:"}; textLast TextLabel{text = "Last Name:"}; textPhone TextLabel{text = "Phone:"}; text TextLabel{text = " Address:"}; fieldFirst TextField{}; fieldLast TextField{}; fieldPhone TextField{}; field TextField{}; groupAddr grouping{class = "outputTextSmallRed", text = "Enter Customer Address Information ", children = [box3]}; box3 box{columns = 2,children = [textStreet, fieldStreet, textCity, fieldCity, textState, fieldState, textZip, fieldZip] }; textStreet TextLabel{text = "Street Address:"}; textCity TextLabel{text = "City:"}; textState TextLabel{text = "State:"}; textZip TextLabel{text = "Zip:"}; fieldStreet TextField{}; fieldCity TextField{}; fieldState TextField{onClick ::= selectState}; //To select a state, click in the TextField fieldZip TextField{}; states string[0]; //An array of strings inserted into the Popup //A list widget that IS the Popup. Note the important properties... //onClick event - for the selected value. Initial visibilty: hidden. Position: absolute stateValues List{onClick ::= singleSelFunc,visibility = "hidden",position = "absolute", background = "lightgrey"}; function initialization() populateStates(); //Add strings to the array, and the array to the popup list end function changeLabel(e event in) groupAddr.text = "New Group Label Heading"; //Make the list Popup visible. Set it's x/y coordinates relative to the state TextField function selectState(e event in) stateValues.x = e.widget.x; stateValues.y = e.widget.y; stateValues.visibility = "visible"; //Make the popup list visible function singleSelFunc(e event in) row int = stateValues.selection as int; //Find the list row selected fieldState.text = states[row]; //assign the associated states array value stateValues.visibility = "hidden"; //and re-hide the popup function populateStates() states.appendElement("CA"); states.appendElement("CT"); states.appendElement("DE"); states.appendElement("NJ"); states.appendElement("NY"); states.appendElement("TX"); states.appendElement("WA"); states.appendElement("WI"); stateValues.setValues(states);

 Create Popup RUIHandler – Code Explanation 2 of 2
From initialization, we invoke the function (populateStates) to create the internal array selectState is the function that: Assigns the x/y coordinates of stateField to the popup list widget And unhides the widget singleSelFunc assigns the selected value of list widget to fieldState.text, and re-hides the widget

 OPTIONAL – Create Your Own Popup
On your own (or using the screen-shot given below) – create a popup like the one shown here to capture a comment and re-display it

Rich UI and Services Course Units:
Web Services and Rich UI Architecture Calling a Service - Process Flow (steps) Rich UI Service Calls Language Constructs Service Calls and the Rich UI Event-Driven Programming Model Workshops and Examples Calling a 3rd Party Service Calling a Mainframe CICS/COBOL Service Creating and calling an EGL Web Services

 Separation of Server-Side and Rich UI Elements – 10,000 Foot View
While RUIWidgets and RUIHandlers are the main focus for creating pages and widgets they are able to call out to EGL Programs, Libraries, and Services. However, unlike EGL/JSF – where the vast majority of the work occurred on the server, in the Rich UI environment all EGL parts are generated to JavaScript. This helps reinforce a clean separation between: Server-Side (business logic/data access) Client-Side (U.I. elements) Business Logic deployed as Web Services EGL Generated RUI JavaScript running in a browser Service calls tie the UI Logic to the server side business logic

 EGL/JSF – Run-Time Model – 1,000 Foot View
In Server/Side EGL/JSF applications Your business logic accesses and processes data Which is bound to .JSF components and their underlying Java Classes Which – at run-time, emit (generate) HTML tags + data Which is sent back to the browser  Using EGL/JSF, almost everything results in Server-Side Run-Time cycles (relatively little happens in a standalone browser environment) Java Classes HTML tags Dynamic Content Rendered in the browser Data Store Emits Form Submit Server-Side Client-Side

 EGL/Rich UI – Run-Time Model – 1,000 Foot View
In EGL/Rich UI applications Your Rich UI application – which runs in the browser, makes service calls to EGL (or non-EGL) Server-Side functionality which access enterprise data or enterprise applications  Users interact with your Rich UI application. Server-side components are cleanly de-coupled from Client/Side (Rich UI) application functionality. And because a RUIHandler consists of JavaScript running in the browser, there promises to be significant improvements in: Server-based application performance – due to functionality/cycles offloaded to the RUIHandler Browser-based dynamic processing capabilities and functionality – ummm, simply due to Rich UI RUIHandler Application Generated JavaScript + HTML Server-Side Application(s) Rendered in the browser Data Store Service  Calls JSON String Data  Server-Side Client-Side

 Rich UI Service Functionality – 500 Foot View
So, your Rich UI applications depend on web services for their business data I/O. There are two categories of service: SOAP Web Services – data is transmitted through a standard WSDL (Web Service Description Langue) file: You access the WSDL through an EGL interface Recall that you learned how to do this in your previous EGL classes or work. Note that these Web Services can be: EGL Java Web Services CICS Web Services – System z RPG Web Services – System i 3rd Party Web Services – any language, any computing platform REST Web Services – data is typically transmitted in JSON (JavaScript Object Notation) strings: In this section we will focus on accessing SOAP Web Services through WSDL files We will cover REST services and JSON string handling in an appendix to this course

 Rich UI Service Functionality – 100 Foot View
What you will have to do before calling services from your EGL Rich UI applications: Create or access the WSDL If using EGL/Java, follow the steps in the EGL Foundation Tutorial to: Ensure that your web (not Rich UI, web server) project’s build file descriptor has the proper options set. Create or code a Service part Define the Service part to the Services Descriptor Generate the WSDL If using CICS there are tools in RDz, and Service Flow Modeler to create WSDL files If using RPG there are automated facilities in RDi-SOA for creating EGL services (specifically, an EGL Web Services Wizard) If using a 3rd Party Web Service: Access the WSDL Ensure that all elements of the WSDL are supported by both the target platform and by EGL The toolset will produce validation warnings and diagnostics if there are problems at Generate time 2. Import the WSDL into your Rich UI project and create the EGL Client Interface 3. (Optionally) Test the WSDL using the Web Services Explorer facility 4. Create the service calls from your EGL RUIWidget(s) – next slide

 Rich UI Service Statements – 10 Foot View
There are four elements in the statement construction pattern to call a Web Service from an EGL Rich UI view: Declare the service variable Code the service call – which can be broken down further: Call to the service.function(…) The parameter list The service callback reference The service exception handling function reference Code the Web Service Callback Function Code the Web Service exception-handling function Note these elements in this simple example 1. 2.2. 2.1. 2.3. 2.4. Dude…what’s a “Callback Function”? Hang on –we’ll be getting to that shortly. 3. 4.

 Rich UI Service Call Statement – 1 Foot View
call serviceName.operationName(argumentList) returning to myCallbackFunction onException myExceptionHandler {timeOut = milliseconds}; serviceName Name of a variable based on an Interface part (see previous section on creating an EGL interface from a WSDL operationName Name of the Interface part’s function argumentList List of arguments, each separated from the next by a comma. myCallbackFunction Name of a callback function that is available to the call statement. In most cases, the function is in the same Rich UI handler or in a library. myExceptionHandlerFunction (Optional) Name of a exception handler that is available to the call statement. In most cases, the exception handler is in the same Rich UI handler or in a library. Most of the above does not represent “new learning stuff”, except for possibly the “callback function”. So let’s dig into that a little more…

 Callback and onException Functions – Code (still 1 foot view)
function callBackFunc(Positional Parameter List) //assign data returned from service call to Rich UI fields //(optionally) do other processing end Positional Parameter List You will need to define one argument for each out or inout parameter in the Web Service function call associated with the Callback Including one for the return argument These parameters must “datatype match” – positionally with the Call statements arguments to the Web Service function serviceExceptionFunc(excp anyException in) //Parse the excp fields //Take action depending on the what has happened Example  (Code in Slide ***Notes) call WebService.Function (arg1, arg2, arg3) returning to callBackFunction… Function callBackFunction (arg1Type, arg2Type, arg3Type, returnType) //assuming the Web Service has a returns(dataType) argument //Note - this function traps deep service exception errors and displays them function handleException(excp anyexception in) s String = "An exception has occurred: " + excp.message + " <br>"; if(excp isa ServiceInvocationException) s += "Detail1: " + (excp as serviceInvocationException).detail1 + " <br>"; s += "Detail2: " + (excp as serviceInvocationException).detail2 + " <br>"; s += "Detail3: " + (excp as serviceInvocationException).detail3 + " <br>"; end SysLib.writeStdout(s);

 RUI Programming Model – “Callback” Functions
EGL functions that respond to asynchronous and preemptive browser or system events (a system event example might be the return of control from a Service call to a RUIHandler) are self-contained – that is, they are modular and independent or isolated packets of code. The antithesis of monolithic programs. This event-driven software model requires that you manage – programmatically direct – the return of control from an event to the appropriate EGL Function that will handle the event. Such a function might: Move data from a service-based data access call to an array that populates a Grid Validate user data entry – returning appropriate error messages Redirect to some other functionality, inside or out of your RUIHandler, etc. The common name for this kind of function is: “Callback” Function You can think of a Callback Function simply as an event handler that is called by the event dispatcher in response to an asynchronous event When a browser event invokes one of your EGL functions you specify (associate) the Callback function to your EGL logic Function through the through the Events tab When a system event (i.e. a return from a Service call) invokes one of your EGL Functions, in order for it to do so you must have specified the name of the EGL Function in the returning to modifier of the Service call statement

Traditional vs. Event-Driven Programming Models
Do processing … Call a service  Wait … Service call returns!  Do more processing Do processing … Call a service  (Specify a “Callback” Function) Do more processing Service call returns!  (“Callback” Function is automatically invoked) Traditional Procedural Run-time model (Next Sequential Instruction programming idiom) Event-Driven Rich UI Run-time model (Modular, independent functions) What does the above have to do with events? See next slide for yet more details…

Service Calls (and Callbacks) on the “Event Pipeline”
Events in the Browser Do InitialProcessing Render RUI view in the browser Event - onClick captured in RUIHandler, handled as an EGL Function Call a service (note that calling a service does NOT pre-req. a browser/user event) Event - Service call returns (EGL “Callback” Function automatically invoked) Do something with data from the service call  User clicks a button Control immediately returns to the browser Database Enterprise Data Event Pipeline RUI Handler (EGL) code

 Your First Rich UI Service Call Workshop
Time for a lab! Let’s see how much of the previous material sunk in. The only way to find out? Develop a Service Call from scratch, and run it from a Rich UI application. You will use an existing WSDL – so at the risk or repeating ourselves, the steps are: 1. Access the WSDL 2. Import the WSDL into your Rich UI project and create the EGL Client Interface 3. (Optionally) Test the WSDL using the Web Services Explorer facility Well no … we will skip this step for now 4. Create the service calls from your EGL RUIHandler and Preview (test) onClick Event Rich UI Call Service Passing: - City Name - Country CallBack Function text returned Return Current Weather information In an XML string

 Access the 3rd Party WSDL
Open a browser and go to When the page loads, click View the Full List When the Full List is done loading, do a search for Global Weather Find and click on the following result: 

 Save the 3rd Party .WSDL File to Your Project
At the next page, right-click over the WSDL file and select Save Link As… From there, change the file type to All Files and add the .wsdl extension to the File Name. Hint: Make sure to save the WSDL in a location where you can find it.  Return to the EGL Rich UI editor and Right-click over the EGLSource folder. Create a new package called wsdl Find &copy the globalWeather.wsdl file you just saved, and paste it into the wsdl package 

 Generate the EGL Client Interface for the Service
Your project should now look as follows! Right-click over the WSDL file and select EGL Services  Create EGL Client Interface…

 Review the Generated Interface Code
A wizard will pop-up. Click Finish You should now have a new package and EGL File automatically created for you.  At this point, from Project Explorer: Select your EGLRichUI project Right-click and select Generate The file should look like this… (note the functions and string parameters)

 Create the RUIHandler to Call the Service
Now, right click over the NET.weberviceX.www package and create a new EGL Rich UI Handler File. Name the file Weather Next, code the following UI Components! Copy/paste code available in the notes layoutBox Box{columns = 2, children = [cityName, cityField, countryName, countryField, getWeatherButton]}; cityName TextLabel{text = "City Name: "}; cityField TextField{}; countryName TextLabel{text = "Country: "}; countryField TextField{}; getWeatherButton Button{text = "Get Weather!", onClick ::= goGetWeather}; resultString TextLabel{};

 Layout the UI for the RUIHandler (to call the Service)
Next, add the layoutBox and resultString to the RUIHandler’s initialUI property. Save the file, you should now have the following output. Next, let’s add an onClick event to the Button This event will call the service and store the result in resultString To call the service, we will simply create a variable of the Service Interface (take a look at the code that was generated for us if you’re confused) From there we can use a basic call statement to call the service function, and then specify a callback. The callback is a function that will execute when a result is returned from the service call. The input parameter for the callback function must match what the service returns

 Code the Calling, Callback and onException Functions
Code (or use Copy/Paste code from the Slide ***Notes) the following three functions in the RUIHandler The function fired off by the onClick event This function will make the actual service call to the weather service The Callback function for the service That assigns the value returned (if any) The onException function – that uses some advanced EGL string “casting” (redefining the excp record on the fly) to format and display run-time error messages //Call the service function (with callback on onException functions) function goGetWeather(e event in) globalWeatherSoap GlobalWeatherSoap call globalWeatherSoap.GetWeather(cityField.text, countryField.text) returning to callBackFunction onException handleException; end //CallBack Function function callBackFunction(res string in) resultString.text = res; //Note - this function traps deep service exception errors and displays them function handleException(excp anyexception in) s String = "An exception has occurred: " + excp.message + " <br>"; if(excp isa ServiceInvocationException) s += "Detail1: " + (excp as serviceInvocationException).detail1 + " <br>"; s += "Detail2: " + (excp as serviceInvocationException).detail2 + " <br>"; s += "Detail3: " + (excp as serviceInvocationException).detail3 + " <br>"; SysLib.writeStdout(s);

 Preview and Test Give the page a shot (note that only major international cities are available – i.e. Paris, London, NY, Pittsburgh, Raleigh, etc. Missing are places like Glen Rock, Wake Forest, Coventry, etc.) As you shall see, this particular service returns an XML string into the .text property of the resultString RUIWidget

 Your Second Rich UI Service Call Workshop
So now, we’ll really find out how much of the previous material sunk in. It’s time for you to develop a Web Services call from a Rich UI application without being given all the explicit steps Again, from the site: Select the Full List and do a find on: Amortization Copy down the Amortization Calculator’s wsdl (save it in your \wsdl\ folder as a .wsdl file Use the tooling to generate an interface to the WSDL and call the service: Generate the EGL Services > Create EGL Client Interface – and note the code produced takes parameters all of type: float Create a new RUIHandler named: amortizationCalc And either on your own – or using the EGL RUIHandler code in the notes page, define variables and functionality for calling the Web Service package sandbox; import com.ibm.egl.rui.widgets.TextLabel; import webservices.AmortizationCalculator; // RUI Handler // handler mortgageCalc2 type RUIhandler {initialUI = [ Box ],onConstructionFunction = initialization} Button com.ibm.egl.rui.widgets.Button{ text="Button", onClick ::= calcMortgage }; Principal com.ibm.egl.rui.widgets.TextField{}; TextLabel1 com.ibm.egl.rui.widgets.TextLabel{ text="Principal:" }; Interest com.ibm.egl.rui.widgets.TextField{}; TextLabel2 com.ibm.egl.rui.widgets.TextLabel{ text = "Interest rate:" }; nbrPayments com.ibm.egl.rui.widgets.TextField{}; TextLabel3 com.ibm.egl.rui.widgets.TextLabel{ text="Number of Payments:" }; Amount TextLabel{}; TextLabel4 com.ibm.egl.rui.widgets.TextLabel{ text="Amount:" }; Box com.ibm.egl.rui.widgets.Box{ padding=8,width=333,height=120, backgroundColor = "AliceBlue", children = [ TextLabel1, Principal,TextLabel2, Interest,TextLabel3, nbrPayments,TextLabel4, Amount, Button ], columns = 2 }; calcRec calcMortgageRec; function initialization() end function calcMortgage(e event in) amortizationCalculator AmortizationCalculator calcRec.principal = Principal.text; calcRec.interestRate = Interest.text; calcRec.numberOfPayments = nbrPayments.text; call amortizationCalculator.calculate(calcRec.principal, calcRec.interestRate, calcRec.numberOfPayments) returning to displayResults onException displayResultsCICSException; function displayResults (results float in); Amount.text = results; // function executed if CICS Services call gives an exception function displayResultsCICSException(exp AnyException in) e ServiceInvocationException = exp; Syslib.writeStdout("An error occurred. " + e.message + " " + e.detail3); record calcMortgageRec type basicRecord principal float; interestRate float; numberOfPayments float; amount float;

 Call a Mainframe CICS/Web Service
So – if we’re to believe the hype surrounding Web Services then how different or how much harder) would it be to call a mainframe, CICS/COBOL web service? Answer: Not hard/not different. Skeptical? (fair enough…let’s see try one on for size) In the com.ibm.egl.education.widgets project, there’s a WSDL file named: EPSCSMR.wsdl This WSDL was created by Regi Barosa/IBM using RDz tooling. It calls a CICS/COBOL subroutine to (yes, once again!) calculate mortgage rates. This services runs on an IBM mainframe in Dallas, TX From the above, what are the inputs ? How could you figure out the data types (hint – use the WSDL editor’s Source mode)

 Call a Mainframe CICS/Web Service – 1 of 5
Copy the EPSCSMR.wsdl file, from the education project to your EGLRichUI project – and put it in the \WebContent\wsdl\ folder. - As you’ve done twice now, use the tooling to create the EGL Interfaces for the EPSCSMR.wsdl file. - Note that you will get two separate source files: * EPSCSMRTIInterace – the inputs needed to call the CICS Web Service on the host * EPSCSMRTOInterface – essentially the output or returned data from the CICS/COBOL program The EGL Rich UI coding pattern will be: Call the CICS/COBOL Service with the inputs Return to the Callback Function from the CICS/COBOL Service receiving the outputs as parameters

Using your prodigious EGL Rich UI programming skills, create the following simple U.I. in your \sandbox\ package: We named ours: regisService – but you can pick any name you like And … well…okay (you twisted our arms) Since there’s really nothing new in the U.I. use the Copy/Paste code in the Slide ***Notes package sandbox; //Note this import is important… import com.EPSCSMRTI. import egl.ui.rui.Event; import files.target.EPSCSMRPortType; // RUI Handler // handler regisService type RUIhandler{initialUI =[mainBox ], onConstructionFunction = initialization, cssFile = "css/EGLRichUI.css"} //Widgets and containers for the UI paymentField com.ibm.egl.rui.widgets.TextLabel{}; paymentLabel com.ibm.egl.rui.widgets.TextLabel{text = "Payment:"}; calculateButton com.ibm.egl.rui.widgets.Button{text = "Calculate", onClick ::= onClick}; TextLabel com.ibm.egl.rui.widgets.TextLabel{}; termField com.ibm.egl.rui.widgets.TextField{}; TextField com.ibm.egl.rui.widgets.TextField{}; termLabel com.ibm.egl.rui.widgets.TextLabel{text = "Term:"}; interestRateField com.ibm.egl.rui.widgets.TextField{}; interestRateLabel com.ibm.egl.rui.widgets.TextLabel{text = "Rate:"}; amountField com.ibm.egl.rui.widgets.TextField{}; amountLabel com.ibm.egl.rui.widgets.TextLabel{text = "Amount:"}; mainBox com.ibm.egl.rui.widgets.Box{padding = 8, children =[amountLabel, amountField, interestRateLabel, interestRateField, termLabel, termField, TextLabel, calculateButton, paymentLabel, paymentField ], columns = 2, backgroundColor = "AntiqueWhite"}; function initialization() end function onClick(e event in)

Here’s what the onClick function should look like. As before, you can develop this by hand, or use the Copy/Paste code in the Slide ***Notes Is there anything new in these statements? Not really. A useful technique though, is to change the button text and disable it while the Web Service is off being accessed. Also the Input variable of type: DFHCOMMAREA has an import for it (see prior Slide ***Notes) function onClick(event Event in) cicsService //Service Variable input DFHCOMMAREA{}; //Record containing parameters to send to CICS //Initialize fields to literal values + user input data input.epspcom_number_of_months = 0; input.epspcom_year_month_ind = "y"; input.epspcom_number_of_years = termField.text; input.epspcom_principle_data = amountField.text; input.epspcom_quoted_interest_rate = interestRateField.text; // Disable the button while the call is in progress calculateButton.text = "Calling..."; calculateButton.disabled = true; //Call the Web Service - passing the input version of the DFHCOMMAREA record call cicsService.EPSCSMRTOperation(input) returning to displayResults_cics onException displayResultsCICSException; end

Here is the CallBack and onException function. The only new coding construct herein is the fully-qualified parameter type on: displayResults_cics This coding pattern is necessary because there’s already a record named: DFHCOMMAREA that’s being referenced through an import statement You can copy this code from the Slide ***Notes (it’s probably easier than typing it all in) function displayResults_cics(results com.EPSCSMRTO. in) // Enable the button but change its label to: "Calculate Again" calculateButton.text = "Calculate Again"; calculateButton.disabled = false; //re-enable the button paymentField.text = results.epspcom_return_month_payment; end // function executed if CICS Services call gives an exception function displayResultsCICSException(exp AnyException in) e ServiceInvocationException = exp; Syslib.writeStdout("An error occurred. " + e.message + " " + e.detail3);

Preview the RUIHandler Enter values such as those shown in this screen capture  And click the button. The actual functionality is running on an IBM mainframe in Dallas, TX Try passing different values in to the Web Service for: Amount Rate Term Note the response time and speedy performance (not bad for an old mainframe)  Now it’s time to move on, and work with EGL-generated Web Services. We’ll start by reviewing the steps needed to create a Web Service then generate the WSDL, then we’ll discuss using the WSDL in your Rich UI project.

 Review of EGL Services – Steps for Creating and Consuming Web Services
Here are the steps you will take to create a Web Service – from your Web or Application server project: Start Tomcat – or WebSphere (see ***Notes) Customize your project’s Build File Create and generate a Web Service Code the service Generate the service Generate the WSDL for your Service – may need to customize the service port (end point) Test the WSDL Using Web Services Explorer Consume the Web Service (If using a 3rd Party WSDL) Import or copy the EGL-generated WSDL to your Client/Project Generate or create the EGL Client Interface(s) from the WSDL In the EGL Rich UI process - code a variable of <serviceName> type Code the call to the ServiceVar.function – passing parameters and returning to a Callback function (From the Servers Tab in the Web Perspective) Start Tomcat or start WebSphere Note that if you don’t have a server yet defined for your project, create one before continuing Notes: Your Tomcat web server must be started in order to finish this workshop

 (Review) Customize Your Project’s Build-File – and Generate Your Project
You need to select the serverType you will be publishing the Web Server to Open EGLWeb.eglbld Un-check Show only specified options Scroll down to find the serverType option Use the combo-box to select the serverType for your project WEBSPHERE TOMCAT Select the serverType 

 (Review) Create a new EGL Web Service
In your server-side project (i.e. NOT in your Rich UI project) you will create your custom EGL Web Services - typically (although not necessarily) in a package named something like \services\ under \EGLSource\ Notes: While not absolutely necessary – it’s a common Web Services development practice to name a service with an upper-case letter. 1. Create a New > Service See ***Notes 2. Check:  Create as web service

 (Review) Create a new EGL Web Service – continued
Recall that EGL Services are simply EGL business logic parts. As such they allow full programming access to the complete EGL language. From EGL Services you can: Access data: DB2, Informix, DL/I, VSAM/QSAM, MQ, CSV (Excel spreadsheet) files – and other sequential files Access existing EGL applications and business logic Access mainframe functionality: System z – COBOL/CICS, IMS TM (MPP/QBMP) programs System i – RPG, CL or COBOL programs The above COBOL programs can be native (hand-coded) or EGL-generated Access Java applications an frameworks Access C/C++ .DLLs and applications …etc… Here’s a sample Service   After ensuring that your project settings are complete: (From Project Explorer) Generate your EGLWeb Project Notes: package services; service zipService function caTestbk(zipIn char(5)) returns(int) if(zipIn >= "90001" && zipIn <= "96000") return(0); else return(-1); end

 (Review) Generate the WSDL for Your Web Service
You will then Generate the Web service - From Project Explorer After successfully generating the WSDL, you can open it in the Content Area – it’s located under: \WebContent\WEB-INF\wsdl\ Optionally, you can test the Web Service But before continuing, you may need to customize the WSDL “end-points” – the port# for the WSDL address.  Note: An “end-point” is the URL (ping-able web address) of where your application server is “listening” for incoming calls to your Web Service. For WebSphere users: If you have more than one WebSphere Application Server image installed on your machine (i.e. if you have WebSphere 6.0 AND WebSphere 6.1) – you will have to change the WSDL port. The Web Service generation tooling will create the port # for the Web Service URL as: This works if you have only one WebSphere server on your machine. If you have two WebSphere servers: Open the ZipService.WSDL file in Source mode, and change the wsdl soap address location (it’s at the bottom of the file) from 9080 to: 9081 If you have three WebSphere servers: Open the ZipService.WSDL file in Source mode, and change the wsdl soap address location (it’s at the bottom of the file) from 9080 to: 9082 Note that if you get a generation error, similar to: Severity and Description Path Resource Location Creation Time Id javax.xml.rpc cannot be resolved to a type EGLWeb/src/ws/services ZipService.java line ** Please ensure that your Server configuration and run-time settings are valid and correct for this workspace. ***Notes

 (Review) Test the Web Service – Interactively – 1 of 2
RBD contains an interactive Web Services test facility called the Web Services Explorer. You can use this tool to test your Web Service functionality effectively, before embedding calls to it from your service client. You invoke the Web Services Explorer by: Right-Clicking over the generated .wsdl file Selecting: Test with Web Services Explorer Notes: If you do not see the Web Services/Test with Web Services Explorer option: From Window, Preferences… General, Capabilities - there is a capability called "Web Service Developer" that may or may not be checked and probably has "(locked)' next to it. Find the "Advanced" button in the bottom right of the pane a click it. A new dialog with another list of capabilities will pop up. Locate "Web Service Developer" on the new list and expand it. Check "Web Service Development" and "OK" your way out of preferences.

 (Review) Test the Web Service – Interactively – 2 of 2
This opens the Web Services Explorer – and opens your Service in the Navigator All of the services functions are exposed as Actions for you to test. You will fill in parameter values, press Go and view the results in the Status view *** Your Application Server must be still be started Notes:

 (From your Rich UI Project) Create an EGL Client Interface to the WSDL
From Project Explorer in your EGL Rich UI project you will: Right-click over the WSDL Select: EGL Services > Create EGL Client Interface… Notes:

 (Review) Create an EGL Client Interface to the WSDL
If a duplicate EGL part name exists, you will need to rename the EGL source and interface files The EGL source file name The Interface name Note – that this will be the exception, not the rule in calling services from EGL Rich UI Notes: Because the tooling will put this Interface in the same folder as the original Service source file in the EGLWeb project, you needed to rename the file name Because there is already an EGL part name for the service (ZipService), you need to give the interface a different name

 Create the Web Service
Time to roll up the sleeves and create some of our own services: From your EGLWeb project: Start your web or application server Create a new Service part in the \EGLSource\services\ folder, named: RUIServices Be sure to check:  Create as WEB (SOAP) service  function loginService(uid string, pwd string) returns(boolean) siteuser Siteuser; get siteuser into Siteuser.userId, Siteuser.Password with #sql{ select EGL.SITEUSER.USER_ID, EGL.SITEUSER.PASS_WORD from EGL.SITEUSER where user_ID = :uid and pass_word = :pwd }; if(sysVar.sqlData.sqlcode == 0) return(true); else return(false); end If you’re prompted to Deploy the EGL Service? Allow the tooling to generate and deploy the Service to your application server before continuing

 Create the EGL Login Function in the Service
Here is the code for Logging in  We’re using the old Siteuser table that has USER_ID and Pass_Word columns You can either code this from scratch, using explicit SQL, or copy/paste this function from the Slide ***Notes When you’ve saved and all syntax errors are cleaned up: From Project Explorer, Generate the entire EGLWeb project This will create a wsdl folder under \WebContent\WEB-INF\ With your new RUIServices.wsdl file in it function loginService(uid string, pwd string) returns(boolean) siteuser Siteuser; get siteuser into Siteuser.userId, Siteuser.Password with #sql{ select EGL.SITEUSER.USER_ID, EGL.SITEUSER.PASS_WORD from EGL.SITEUSER where user_ID = :uid and pass_word = :pwd }; if(sysVar.sqlData.sqlcode == 0) return(true); else return(false); end

 (OPTIONAL) Test the Web Service using Web Services Explorer
Before proceeding with additional UI work (and potentially complicating your testing process) – From Project Explorer: Right-click over the RUIServices.wsdl Select Web Services > Test with WebServices Explorer Select loginService – and type values for: uid and pwd - click Go In the Status area, verify a (true) return code from the service call Note that you may need to restart your application server, in order to publish and run

 Create the EGL Client Interface
So, now we’re ready to do unto the EGL Web Service, as we did unto the 3rd Party Services. From Project Explorer Copy the wsdl file: from EGLWeb project to the EGLRichUI project. Put it in a \WebContent\wsdl\ folder Note that you may have to create the new \wsdl\ folder under \WebContent\ Right-click over the wsdl and select: EGL Services > Create EGL Client Interface… Generate the EGLRichUI project

 Call the Web Service from your Login View
So – let’s see how we did? Open your loginPage.egl, and modify the existing business logic. It’s probably best at this point, to copy/paste the code in from the Slide ***Notes Here’s the finished product. What’s new? Answer: Nothing Which rocks. How about one more? The USERID field The PASSWORD field function callServiceFunc (e event in) RUIServices RUIServices call rUIServices.loginService(textfieldUI.text, PasswordTextField.text) returning to checkUID onException handleException; end function checkUID (uid string in, pwd string in, ret boolean in) if(ret) msg.text = "You are logged in"; else msg.text = "No soup for you!"; textFieldUI.select(); //re-select the invalid value in the text field end //end function //Note - this function traps deep service exception errors and displays them function handleException(excp anyexception in) s String = "An exception has occurred: " + excp.message + " <br>"; if(excp isa ServiceInvocationException) s += "Detail1: " + (excp as serviceInvocationException).detail1 + " <br>"; s += "Detail2: " + (excp as serviceInvocationException).detail2 + " <br>"; s += "Detail3: " + (excp as serviceInvocationException).detail3 + " <br>"; SysLib.writeStdout(s);

Create a Web Service to Populate a Rich UI dataGrid
So, let’s combine the dataGrid you’ve been learning about with Services. This workshop will show you an end-to-end process where you: Create a Web Service that returns an array of customer records, based on a search argument Create a RUIHandler that: Calls the service – passing a user-entered-partial string Returning (in the Callback function) all of the rows found into the dataGrid The visual representation of the run-time architecture is shown in this picture… onClick Event Call Service Function RUIHandler Callback Function RUIHandler EGLWeb Project Service Browser WebSphere Tomcat Service Server EGLDerbyR7

 Create the Web Service
Same steps as before From your EGLWeb project: Make sure that your web or application server is started Create a new Service part in the \EGLSource\services\ folder, named: customerServices Be sure to check:  Create as WEB (SOAP) service  Here is the code for accessing customer table data You can either code this from scratch, using explicit SQL, or copy/paste this function from the Slide ***Notes When you’ve saved and all syntax errors are cleaned up: From Project Explorer, Generate the entire EGLWeb project This will create a wsdl folder under \WebContent\WEB-INF\ containing your new customerServices.wsdl file function getOneCustomerSearch(customer Customer inout) returns(boolean) get customer; if(SysVar.sqlData.sqlcode == 0) return(true); else return(false); end function getCustomerSearch(custString string in, customers Customer[] out) returns(int) custString = custString + "%"; get customers with #sql{ select EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME, EGL.CUSTOMER.LAST_NAME, EGL.CUSTOMER.PASSWORD, EGL.CUSTOMER.PHONE, EGL.CUSTOMER. _ADDRESS, EGL.CUSTOMER.STREET, EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS from EGL.CUSTOMER where LAST_NAME like :custString order by EGL.CUSTOMER.CUSTOMER_ID asc }; sz int = size(customers); return(sz);

 (OPTIONAL) Test the Web Service using Web Services Explorer
As before, you may want to test with the Web Services Explorer From Project Explorer: Right-click over the customerServices.wsdl Select Web Services > Test with WebServices Explorer Select getCustomerSearch – and type values for custString: S Click Go In the Status area, verify a (true) return code from the service call Note that you may need to restart your application server, in order to publish and run Optionally – you might want to test getOneCustomerSearch

 Create the EGL Client Interface
Copy the wsdl file: from EGLWeb to EGLRich UI – and put it in the \WebContent\wsdl\ folder Right-click over the wsdl and select: EGL Services > Create EGL Client Interface… Generate the EGLRichUI project

 Call the Web Service from your Login View
So – it’s time to call customerServices from a RUIHandler In the \mySamples\ folder, Create a new RUIHandler named: customerSearchGrid Copy/paste the code in from the Slide ***Notes – and overlay the boilerplate EGL source - Note the various widgets - Note especially the code that calls the Web Service Save and run package mySamples; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.Grid; import com.ibm.egl.rui.widgets.GridBehaviors; import com.ibm.egl.rui.widgets.GridColumn; import com.ibm.egl.rui.widgets.GridSelector; import com.ibm.egl.rui.widgets.GridSorter; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.rui.Event; import egl.ui.rui.Widget; import customerList.customerServiceLibrary; import eglderbyr7.data.Customer; import services.customerServices; handler customerSearchGrid type RUIhandler {initialUI = [layout],onConstructionFunction = initialization} layout com.ibm.egl.rui.widgets.Box{width = 222, padding = 8, backgroundColor = "lightyellow", columns = 2, children =[searchlbl, searchtext, button, customerGrid]}; statusMessage TextLabel{text = "", marginBottom = 5, width = 500}; button Button{color = "SteelBlue",text = "Call Web Service",onClick ::= searchCustomers, width = "144"}; searchLbl TextLabel{text = "Search text", font = "Verdana", color = "SteelBlue", fontWeight = "bolder", fontSize = "11pt"}; searchText TextField{}; selectedRow any; customers Customer[0]; gridSorter GridSorter{}; gridSelector GridSelector{selectionChangedListener = chooseCustomer, color = "lightyellow"}; customerGrid Grid{width = 700,color = "Gray", behaviors =[processGrid, gridSelector.enableSelection, com.ibm.egl.rui.widgets.GridBehaviors.tightCells, GridBehaviors.alternatingColor], headerBehaviors =[ GridBehaviors.grayCells, gridSorter.columnSorter ], columns =[new GridColumn{name = "CustomerID", displayName = "ID"}, new GridColumn{name = "Firstname", displayName = "First Name"}, new GridColumn{name = "Lastname", displayName = "Last Name"}, new GridColumn{name = " address", displayName = " "}, new GridColumn{name = "Phone", displayName = "Phone",width = 222}, new GridColumn{name = "City", displayName = "City"}, new GridColumn{name = "State",displayName = "State"}, new GridColumn{name = "PostalCode", displayName = "PostalCode"}]}; function initialization() end function searchCustomers(e event in) sz int; statusMessage.text = "Loading Customers..."; customerServices customerServices call customerServices.getCustomerSearch(searchText.text, customers, sz) returning to searchCustomersReturn onException searchCustomersExcp; function searchCustomersReturn(customers Customer[] in, retc int in) customerGrid.data = customers as any[]; function searchCustomersExcp(excp anyException in) SysLib.writeStdout(excp.message); function chooseCustomer() selected Customer = gridSelector.selection[1]; function processGrid(grid Grid in, td Widget in, row any in, ignoreRowNumber int in, column GridColumn in) // if(column.name == "Lastname") // html HTML = td.children[1]; // tField TextField{text = html.text, fontWeight = "bold"}; // td.children =[tField]; // end

 OPTIONAL LABS – dataGrids and Web Services
1. In customerSearchGrid: Uncomment processGrid – note that this is a custom behavior, for grid widgets. It allows you to substitute widgets for the defaults in rows. Note the reference to this in the widget declaration 2. Calling the getOneCustomerSearch Web Service, populate a RUIHandler like this  Notes: The UI is not that important …but… Copy/Paste code is found in the next slide You will need to make sure that you import the correct version of the customer record – to match the type referenced

 OPTIONAL LABS – dataGrids and Web Services
The solution Copy/Paste code is in the slide notes. Note the following run-time elements and events…  onClick Event Call Service Function package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.Grouping; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.core.bindservice; import egl.ui.rui.Event; import eglderbyr7.data.Customer; import services.customerServices; // RUI Handler // handler customerRowSearch type RUIhandler{cssFile = "css/EGLRichUI.css", initialUI =[ Box, button, custID ], onConstructionFunction = initialization} Box com.ibm.egl.rui.widgets.Box{columns = 1, padding = 8, children =[ groupCust, groupAddr]}; ui Div{children =[box, button, CustID]}; Button button{width = 177, text = "Get Customer Number:", onClick ::= searchCustomers, padding = 6}; groupCust grouping{class = "outputTextSmallRed", text = "Enter Customer Information ", children =[box2 ]}; box2 box{columns = 2, children =[textFirst, fieldFirst, textLast, fieldLast, textPhone, fieldPhone, text , field ]}; textFirst TextLabel{text = "First Name:"}; textLast TextLabel{text = "Last Name:"}; textPhone TextLabel{text = "Phone:"}; text TextLabel{text = " Address:"}; fieldFirst TextField{}; fieldLast TextField{}; fieldPhone TextField{}; field TextField{}; custID TextField{width = 80,padding = 8, text = 1}; groupAddr grouping{class = "outputTextSmallRed", text = "Enter Customer Address Information ", children =[box3 box3 box{columns = 2, children =[textStreet, fieldStreet, textCity, fieldCity, textState, fieldState, textZip, fieldZip]}; textStreet TextLabel{text = "Street Address:"}; textCity TextLabel{text = "City:"}; textState TextLabel{text = "State:"}; textZip TextLabel{text = "Zip:"}; fieldStreet TextField{}; fieldCity TextField{}; fieldState TextField{}; fieldZip TextField{}; function initialization() end function searchCustomers(e event in) customer Customer; sz int; customer.CustomerId = custID.text as int; customerServices call customerServices.getOneCustomerSearch(customer) returning to searchCustomersReturn onException searchCustomersExcp; function searchCustomersReturn(customer Customer in, customerFound boolean in) if(customerFound) fieldCity.text = customer.City; field .text = customer. Address; fieldFirst.text = customer.FirstName; fieldLast.text = customer.LastName; fieldPhone.text = customer.Phone; fieldState.text = customer.State; fieldStreet.text = customer.Street; fieldZip.text = customer.Postalcode; else custID.text = "No customer found."; custID.focus(); custID.select(); function searchCustomersExcp(excp anyException in) SysLib.writeStdout(excp.message); RUIHandler Callback Function RUIHandler EGLWeb Project Service WebSphere Tomcat Service EGLDerbyR7

 OPTIONAL LABS – Code Free Workshop – Get Orders for a Customer – 1 of 6
Copy/Paste code is in the slide notes (function name mis-spelling and all). Note the following run-time elements and events… Create a new Web Service in your EGLWeb project This service should have a function that takes in an integer – representing a customer_ID and returns an array of order records for that customer Be sure to: Generate your EGLWeb project Restart your app-server // Function Declarations function customerOrderSerivce(cid int in, orders orders[] out) returns(boolean) get orders with #sql{ select EGL.ORDERS.ORDER_ID, EGL.ORDERS.CUSTOMER_ID, EGL.ORDERS.ORDER_AMOUNT, EGL.ORDERS.ORDER_DETAILS, EGL.ORDERS.ORDER_DATE, EGL.ORDERS.ORDER_STATUS from EGL.ORDERS where customer_ID = :cid order by EGL.ORDERS.ORDER_ID asc }; end

Test your new Web Service with the Web Services Explorer facility

Copy the WSDL from your EGLWeb to your EGLRichUI project, and generate an EGL Client Interface…. Then – from Project Explorer, Generate your EGLRich UI Project

From PagingGridBasics.egl: Copy the existing myPagingGrid pagingGrid specifications and paste them inside the file Make the modifications to the: columns and gridSelector shown below Note: Type VERY VERY carefully

Still from PagingGridBasics.egl: Add the functions, and make the modifications shown below Once again, type VERY VERY carefully Okay, okay – you win. This slide contains the finished code in the ***Notes package dataGrid; import com.ibm.egl.rui.widgets.Grid; import com.ibm.egl.rui.widgets.GridColumn; import com.ibm.egl.rui.widgets.GridSelector; import com.ibm.egl.rui.widgets.GridSorter; import com.ibm.egl.rui.widgets.Tooltip; import egl.ui.rui.Event; import egl.ui.rui.Widget; import Grid.PagingGrid; import customerData.Customer; import customerData.customerInfo; import eglderbyr7.data.Orders; import services.orderServices; handler PagingGridBasics type RUIhandler {initialUI = [myPagingGrid,myOrdersGrid],onConstructionFunction = initialization} //Here's the initial pagingGrid widget code - the courseWare will describe a # of modifications... myPagingGrid pagingGrid {backgroundColor = "AliceBlue", width = 600, borderColor = "gray",borderStyle = "groove",borderWidth = "8", grid.behaviors = [ com.ibm.egl.rui.widgets.GridBehaviors.alternatingColor, com.ibm.egl.rui.widgets.GridBehaviors.tightCells, gridSelector.enableSelection ], grid.headerBehaviors = [ com.ibm.egl.rui.widgets.GridBehaviors.grayCells, gridSorter.columnSorter, headerToolTips ], columns = [ new com.ibm.egl.rui.widgets.GridColumn{name = "CustomerID", displayName = "Customer ID"}, new com.ibm.egl.rui.widgets.GridColumn{name = "FirstName", displayName = "First Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = "LastName", displayName = "Last Name"}, new com.ibm.egl.rui.widgets.GridColumn{name = "Phone"}, new com.ibm.egl.rui.widgets.GridColumn{name = "State", displayName = "ST"}, new com.ibm.egl.rui.widgets.GridColumn{name = " Address", displayName = " Address"} ], visibleRows = 8, //How many rows in view at a time data = customerInfo.customers as any[] }; myOrdersGrid pagingGrid {backgroundColor = "AliceBlue", new com.ibm.egl.rui.widgets.GridColumn{name = "OrderID"}, new com.ibm.egl.rui.widgets.GridColumn{name = "CustomerID"}, new com.ibm.egl.rui.widgets.GridColumn{name = "OrderAmount"}, new com.ibm.egl.rui.widgets.GridColumn{name = "OrderDetails"}, new com.ibm.egl.rui.widgets.GridColumn{name = "OrderDate"}, new com.ibm.egl.rui.widgets.GridColumn{name = "OrderStatus"} ], visibleRows = 4 //How many rows in view at a time gridSelector GridSelector { selectionChangedListener = chooseCustomer, color = "LightYellow" }; gridsorter GridSorter{}; headerTooltip Tooltip { text = "Click to sort this column", delay=1000 }; function headerTooltips(grid Grid in, td Widget in, row any in, ignoreRowNumber int in, column GridColumn in) headerTooltip.enable(td); end function initialization() function chooseCustomer() selected Customer = gridSelector.selection[1]; orderServices orderServices orders orders[0]; _return boolean; call orderServices.customerOrderSerivce(selected.CustomerID, orders, _return) returning to searchOrdersReturn onException searchOrdersExcp; function searchOrdersReturn(orders orders[] in, retc int in) myOrdersGrid.data = orders as any[]; function searchOrdersExcp(excp anyException in) SysLib.writeStdout(excp.message);

Preview and test the RUIHandler package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.Div; import com.ibm.egl.rui.widgets.Grouping; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.core.bindservice; import egl.ui.rui.Event; import eglderbyr7.data.Customer; import services.customerServices; // RUI Handler // handler customerRowSearch type RUIhandler{cssFile = "css/EGLRichUI.css", initialUI =[ Box, button, custID ], onConstructionFunction = initialization} Box com.ibm.egl.rui.widgets.Box{columns = 1, padding = 8, children =[ groupCust, groupAddr]}; ui Div{children =[box, button, CustID]}; Button button{width = 177, text = "Get Customer Number:", onClick ::= searchCustomers, padding = 6}; groupCust grouping{class = "outputTextSmallRed", text = "Enter Customer Information ", children =[box2 ]}; box2 box{columns = 2, children =[textFirst, fieldFirst, textLast, fieldLast, textPhone, fieldPhone, text , field ]}; textFirst TextLabel{text = "First Name:"}; textLast TextLabel{text = "Last Name:"}; textPhone TextLabel{text = "Phone:"}; text TextLabel{text = " Address:"}; fieldFirst TextField{}; fieldLast TextField{}; fieldPhone TextField{}; field TextField{}; custID TextField{width = 80,padding = 8, text = 1}; groupAddr grouping{class = "outputTextSmallRed", text = "Enter Customer Address Information ", children =[box3 box3 box{columns = 2, children =[textStreet, fieldStreet, textCity, fieldCity, textState, fieldState, textZip, fieldZip]}; textStreet TextLabel{text = "Street Address:"}; textCity TextLabel{text = "City:"}; textState TextLabel{text = "State:"}; textZip TextLabel{text = "Zip:"}; fieldStreet TextField{}; fieldCity TextField{}; fieldState TextField{}; fieldZip TextField{}; function initialization() end function searchCustomers(e event in) customer Customer; sz int; customer.CustomerId = custID.text as int; customerServices call customerServices.getOneCustomerSearch(customer) returning to searchCustomersReturn onException searchCustomersExcp; function searchCustomersReturn(customer Customer in, customerFound boolean in) if(customerFound) fieldCity.text = customer.City; field .text = customer. Address; fieldFirst.text = customer.FirstName; fieldLast.text = customer.LastName; fieldPhone.text = customer.Phone; fieldState.text = customer.State; fieldStreet.text = customer.Street; fieldZip.text = customer.Postalcode; else custID.text = "No customer found."; custID.focus(); custID.select(); function searchCustomersExcp(excp anyException in) SysLib.writeStdout(excp.message);

Creating an end-to-end RESTful Service
Chris Laffra

 Create an End-to-end EGL Web Service using REST only
From your EGLWeb project: Create a new Service part in the \EGLSource\services\ folder, named: RUIRestServices Be sure to check:  Create as WEB (REST) service  Here is the service code You can either code this from scratch, or copy/paste this function from the Slide ***Notes When you’ve saved and all syntax errors are cleaned up: From Project Explorer, Generate the entire EGLWeb project If you have not deployed your service yet, do it now by running it on the Tomcat server you selected before: service RUIRestServices function addNumbers(number1 int in, number2 int in) returns(int) return (number1 + number2); end

 Consume an End-to-end EGL Web Service using REST only
In the Project Explorer, right-mouse click your service and say: EGL Services Extract Interface… In the wizard, select the EGLSource folder in the RUI Project Copy the RUI code from the Slide ***Notes All EGL REST services use this pattern: Note: If you are seeing errors, make sure to Generate your service project Run your service on Tomcat Verify that Tomcat is using port 8080 You have 2 projects: A service project that is deployed on TOMCAT A RUI project that invokes the service using an interface import services.IRUIRestServices; handler RUIRestServiceTest type RUIhandler { onConstructionFunction = start} function start() svc IRUIRestServices { baseURI = " }}; call svc.addNumbers(3, 4) returning to showResult onException serviceLib.serviceExceptionHandler; end function showResult(result int in) writeStdout(result);

Rich UI Inter-Program Communication
Course Rich UI Inter-Program Communication Units: Inter-Program Communication Invoking functions in other Widgets and RUIHandlers InfoBus Comprehensive Workshop The Web 2.0 Development Process with Rich UI The workshop Appendix

RUI Application Run-Time Architecture – 10,000 Foot View
Independent entities JSF Application RUI “Application” Forwards to Invokes Composed of RUI Handler RUI Handler Invokes Composed of Composed of RUI Handler “embedded part” RUIWidget (RUIHandler) RUIWidget (RUIHandler) Calls function in Invokes Calls function in ExternalType Invoke existing JavaScript RUI Library UI Logic, Service Calls RUI Library UI Logic, Service Calls Accesses Server Side Data Databases Enterprise Applications EGL Server Side Processes Services Libraries Programs MQ External Files DL/I Java …or… RPG COBOL SQL or other File I/O

Rich UI Application = RUIHandler + RUIWidgets – Review
A scaled-down model of an EGL Rich UI application might be a single RUIHandler – composed of several RUIWidgets. Each RUIWidget is composed of one-to-many elementary widgets (similar to a record / group fields and elementary fields) Both RUIHandlers and RUIWidgets have: Properties Behaviors All of the properties and behaviors: Are exposed in EGL Rich UI model Can be specified (programmed) according to the requirements of your application From this example – can you find the following elements – RUIHandler, which is composed of: A text field (an elementary) RUI Widget as header text (in blue) RUIWidget #1 – which is composed of: Eight input fields, Eight Text fields, Two buttons, RUIWidget #2 – a Tab Control RUIWidget which is composed of: An Employee List RUIWidget Three other tabs – which contain additional RUIWidgets (within the tabs)

RUIHandler + RUIWidgets – Properties/Function Reference-ability
From any RUIHandler: You can add any RUIWidget or RUIHandler to the main/parent RUIHandler as a variable You can access and manipulate the variable RUIWidget’s/RUIHandler’s public properties with carte’ blanche. And you can also invoke the added RUIWidget’s/RUIHandler’s public functions through either: Direct calls, Delegates or using a Rich UI messaging system known as the InfoBus You would use Direct Calls when the functionality in question was tightly-coupled You would use the InfoBus when the functionality in question was loosely-coupled (i.e. when for example you were creating Web 2.0 “mash-up” applications) Best Practice Advice myRUIHandler WidgetVariable {Declared access to Properties} … Can manipulate non-private WidgetVariable properties and can invoke non-private WidgetVariable functions using EGL Rich UI statements SomeOtherRUIHandler //Functions  Can use either the InfoBus or direct calls to invoke a function in SomeOtherRuiHandler  InfoBus de-couples the information from producers and consumers of information Avoid from having to specify detailed connections between the handlers Standardize on how any handler can talk to any handler Direct Calls Delegates – standardize on the interface De-coupled case InfoBus (makes it easier to add separate concerns) – more scalable, simplifies the implementation of the handler that implements the item Item stays really clean Decouples components in system, makes it easier to debug, best practice for real world. Listeners use Delegates – more direct connections for events. Sort of arbitrary – when you decide when to use the InfoBus, and when to not. If really closely working together – and designed to be a pair use direct calls (really tight objects, meant to work together) – use direct calls In Real Estate example – (esp. Mash ups) – where you have separate components, use the InfoBus. Esp. where components don’t “know about each other” With InfoBus – have to manage the namespace of the keys, etc.

 Workshop – RUIHandler/RUIWidgets Properties Reference-ability
To understand how easy it is to access and manipulate Widget properties from a RUIhandler do the following: From: \mySamples\ create a new, RUIHandler named: embeddedRUIWidget Replace the boiler-plate EGL code, with the Slide ***Notes statements Study the statements – and note the use of the .dot syntax to reference widget variable properties Save Preview Click the button  So – that’s how easy it is to extend RUIWidgets and their properties through their use (and reuse) in custom RUIHandlers. Now let’s look at calling functions in RUIWidgets. package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.TextField; import egl.ui.rui.Event; // RUI Handler // handler embeddedRUIWidget type RUIhandler {initialUI = [box],onConstructionFunction = initialization} //Simple Widgets lbl html{text="My TextLabel"}; fld TextField{text="My TextField"}; btn button{text = "click to change properties",onClick ::= overRideProperties}; //Complex Widget grp groupingSample{width = 800}; //box box Box{columns = 1, children = [btn, lbl, fld, grp]}; function initialization() end function overRideProperties(e event in) lbl.backgroundColor = "lightyellow"; lbl.text = "And <i>(oh my goodness!!!)</i> - I've turned yellow"; fld.text = "See, I can change .text and .width properties - no problem :-)"; fld.width = "444"; grp.Button.text = "I can also over-ride a custom widget's button embedded within a widget"; grp.Button.width = 555; grp.groupcust.width = 600; grp.groupAddr.text = "Yo - I've changed background color"; grp.groupAddr.backgroundColor = "aliceblue"; grp.groupcust.text = "See - it's true (you can change custom widget properties)";

 Workshop – RUIHandler/RUIWidgets Invoking Functions
To understand how easy it is to invoke functions in a Widget variable from a RUIhandler do the following: Edit the EGL source in: embeddedRUIWidget Add the code shown here in the screen capture: Note that some of the functions have been collapsed in the source view Save Preview Click the button  So – that’s how easy it is to extend RUIWidgets, setting their properties and calling their functions from custom RUIHandlers. Now let’s look at calling functions using the InfoBus package mySamples; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.HTML; import com.ibm.egl.rui.widgets.TextField; import egl.ui.rui.Event; // RUI Handler // handler embeddedRUIWidget type RUIhandler {initialUI = [box],onConstructionFunction = initialization} //Simple Widgets lbl html{text="My TextLabel"}; fld TextField{text="My TextField"}; btn button{text = "click to change properties",onClick ::= overRideProperties}; //Complex Widget grp groupingSample{width = 800}; //box box Box{columns = 1, children = [btn, lbl, fld, grp]}; function initialization() end function overRideProperties(e event in) lbl.backgroundColor = "lightyellow"; lbl.text = "And <i>(oh my goodness!!!)</i> - I've turned yellow"; fld.text = "See, I can change .text and .width properties - no problem :-)"; fld.width = "444"; grp.Button.text = "I can also over-ride a custom widget's button embedded within a widget"; grp.Button.width = 555; grp.groupcust.width = 600; grp.groupAddr.text = "Yo - I've changed background color"; grp.groupAddr.backgroundColor = "aliceblue"; grp.groupcust.text = "See - it's true (you can change custom widget properties)";

 Hop on the InfoBus – Calling From one RUIHandler or RUIWidget to Another
RUIHandlers and RUIWidgets – like the EGL Functions they contain – are independent programming units. As such when you wish to invoke an EGL function in RUIHandlerB – from an EGL function in RUIHandlerA you will actually post a message (fire an event) on an EGL-supplied run-time system called the “InfoBus”. This is how it works. “Called” RUIHandler – typically in a “start-up” function subscribes to (registers a listener for) an InfoBus message identified by a string parameter value. This string is the event name. The “Calling” RUIHandler – in the EGL function that will be used to invoke the function in RUIHandlerB “publishes” a message to the InfoBus – with two parameters: EGL Function to invoke …named in subscribe EGL event handling Function. Note two Parameters InfoBus Message Identifier (event) “Called” RUIHandler package sandbox; import com.ibm.egl.rui.widgets.TextLabel; import com.ibm.egl.rui.infobus.InfoBus; Handler embeddedHandler Type RUIHandler {onConstructionFunction=start} feedback TextLabel{}; function start() InfoBus.subscribe("myInfoBusMsg", showPublish); end function showPublish(eventName STRING in, data ANY in) feedback.text = "The " + eventName + " event occurred and passed: " + data as string; “Calling RUIHandler” import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.Div; import egl.ui.rui.Event; Handler InfoBusTest Type RUIHandler { initialUI = [myButton, myDiv] } myButton Button{text = "Publish the event", onClick ::= clickHandler}; myDiv Div { children = [new embeddedHandler{}.feedback] }; function clickHandler(e Event in) InfoBus.publish("myInfoBusMsg", "Some data - passed to the called RUIHandler"); InfoBus Message (event) Identifier (spelled exactly the same as the subscribe parameter) Parameter value passed in as the 2nd variable See ***Notes

InfoBus – One RUIHandler Invoking Functionality in Another
 InfoBus – One RUIHandler Invoking Functionality in Another “Called” RUIHandler or RUIWidget … Startup EGL Function InfoBus.subscribe(“eventID”, functionName); EGL Function named in subscribe(parm1, parm2) Subscribe to (listen for) any event named: eventID   User clicks a button InfoBus “Calling” RUIHandler or RUIWidget … EGL Function invoked by some event that should call/invoke the other RUIHandler InfoBus.publish(“eventID”, variableValue); … other functionality From Chris Laffra on infoBus, performance and passing records: The InfoBus accepts anys. That means that handlers are passed by reference, and there is zero performance overhead. However, when you pass a record to the InfoBus, EGL will translate the record into an any, which means creating a placeholder and copy all the fields. So, there is a certain performance overhead to sending records over the bus. However, the fact that the record is copied generates a side-effect, namely, changes made to the record by a receiving InfoBus listener will go unnoticed to the publisher. The safest thing from an architectural approach is to use basic types and/or widgets/ruihandlers as the object you pass around the InfoBus.  Publish a message for an event named: eventID The InfoBus will find the named listener: “eventID” and will invoke the EGL function in the subscribe statement

 Workshop – InfoBus – Simple Example – 1 of 3
 To understand how easy it is to publish and subscribe on the InfoBus in order to call a Widget function from a RUIhandler (or in this case, another RUIHandler’s function from a RUIHanlder) do the following: From: \sandbox\ create a new, RUIHandler named: embeddedHandler Replace the boiler-plate EGL code, with the Slide ***Notes statements Study the statements – and note the use of the .dot syntax to reference widget variable properties Save embeddedHandler is now listening for an InfoBus message mamed: “myInfoBusMsg” package sandbox; import com.ibm.egl.rui.widgets.TextLabel; import com.ibm.egl.rui.infobus.InfoBus; Handler embeddedHandler Type RUIHandler {onConstructionFunction=start} feedback TextLabel{}; function start() InfoBus.subscribe("myInfoBusMsg", showPublish); end function showPublish(eventName STRING in, data ANY in) feedback.text = "The " + eventName + " event occurred and passed: " + data as string; And when a message with that name arrives, the function: showPublish is invoked automatically

To understand how easy it is to publish and subscribe on the InfoBus in order to call a Widget function from a RUIhandler (or in this case, another RUIHandler’s function from a RUIHanlder) do the following: From: \sandbox\ create a new, RUIHandler named: InfoBusTest Replace the boiler-plate EGL code, with the Slide ***Notes statements Study the statements – and note the use of the .dot syntax to reference widget variable properties Save Preview Click the button embeddedHandler is now listening for an InfoBus message mamed: “myInfoBusMsg” package sandbox; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.Div; import egl.ui.rui.Event; import com.ibm.egl.rui.infobus.InfoBus; Handler InfoBusTest Type RUIHandler { initialUI = [myButton, myDiv] } myButton Button{text = "Publish the event", onClick ::= clickHandler}; myDiv Div { children = [new embeddedHandler{}.feedback] }; function clickHandler(e Event in) InfoBus.publish("myInfoBusMsg", "Some data - passed to the called RUIHandler"); end

Preview InfoBusTest  … and click the button   Create widget instance InfoBus System Library

 Workshop – RUIHandler/RUIWidget Interoperability – Another Example – 1 of 4
Let’s apply our new Rich UI coding skills used to demonstrate the interoperability of Widgets to a more interesting use case – our tabFolder. We will demonstrate the following: RUIHandler calling RUIWidget (variable): Properties Function RUIWidget calling back to a RUIHandler (parent) using the InfoBus Note this is a somewhat complicated use case. If you have any questions on the reasons for any of the coding constructs behind the lab steps, ask your instructor to explain  Steps: Open the following files into the Content Area: tabSample.egl, groupingSample.egl, htmlWidgets.egl, miscWidgets.egl, textFields.egl Make the following changes to the existing code: In groupingSample.egl – modify the changeLabel(…) function  By doing this, you are publishing an event to the InfoBus that will be picked up in tabSample, and used to open a different tab based on clicking the button in the RUIWidget > Save your changes to groupingSample.egl

In tabSample: Modify the initialization() function – as shown below Add the callBackFunction(…) as shown here

 Save your coding changes to all the .egl files
 Workshop – RUIHandler/RUIWidget Interoperability – Another Example – 3 of 4 Still in tabSample: Modify the tabSelected(…) function – as shown below  Save your coding changes to all the .egl files

Preview. Test the functionality by following this script: When the view loads, click Grouping Sample – note the following: tabSample changed the top box’s color to Moccasin And it changed the bottom fieldset’s label Click the button in Grouping Sample Text Fields will open – via an InfoBus message published in groupingSample that is subscribed in tabSample, and used to specify: tab.selected(); It also changed the rollover graphic in Miscellaneous widget Click the Miscellaneous Widgets tab (to verify this) Then click HTML Widgets (which changes the rollover graphic in Miscellaneous Widgets) So click the Miscellaneous Widgets tab again (to verify this)

EGL Rich UI – Application Development “Best Practices”
You will design your Rich UI applications as a collection of: RUIHandlers – which are reusable components and contain: RUIWidgets – which represent widgets Custom – may or may not be reusable IBM Supplied – example: Textarea, ListBox, Grid, DIV, etc. 3rd Party (Silverlight, Dojo, etc.) Calls to external JavaScript functionality You will put multiple widgets together in a container widget: DIV, Box, floatLeft/floatRight, etc. RUIHandlers and RUIWidgets may be: Visual Non-visual (i.e. calls to the business functionality in your system) Both You will start the initial U.I. layout, by creating and testing your visual elements as RUIHandlers. Then change the RUIHandlers to become RUIWidgets, if you wish to use them in mash-ups or in the dynamic layout of your application in the browser Example – hide/show U.I. elements based on business functional processes and rules

RBD/EGL Development Course Units:
EGL Rich UI – Model View Controller (MVC)

Model/View/Controller – Development Pattern
The programming paradigm or pattern of Model-View-Controller has become somewhat mainstream in recent years. A design utilizing this concept will be readable, maintainable, and scalable. The concept however is most heavily centered on the JEE programming model. The roles of each are as follows: Model – Encapsulates the information (data) and the methods to operate on that information (business logic). View – Presents the model (most often a dynamic web page such as a JSP). Controller – Processes user events and drives model and view updates. To whit: Requests by the user are handled by the view and processed by the controller. The controller then accesses the business logic contained within the model. The model then passes data back to the view which dynamically builds a new UI for the user. The process is repeated over again (that’s why this is called a pattern)

Model/View/Controller – Rich UI Implementation
In the realm of Rich UI, this particular use case doesn’t strictly apply. After all, Rich UI is strictly used to build dynamic UI’s! You can think of Rich UI as building both the view and controller, which can access the model by making service calls. However, the idea of Model-View-Controller is so good that we’ve enabled its concepts when programming in RUI. So what do we do? We provide a framework that utilizes the concept of MVC to simulate a traditional HTML form. Note that support for some of the standard DataItem properties (like dateFormatting, and money types) is also done through Rich UI’s MVC

Model/View/Controller
Perhaps this is one thing you have been missing when programming in Rich UI? Wouldn’t you like the ability to submit an entire form which automatically validates itself! Look no further than the MVC framework shipped with Rich UI The roles of each are as follows: Model – The underlying data accessed from within Rich UI (ex. could be a record or EGL variable) View – The widget displaying the data (ex. A TextField, CheckBox, etc) Controller – The bridge between displaying the data from the model, in the view. The controller also provides a simple interface for validating the input. Last but not least, the framework allows us to encompass all of this into a single form. That form can then be submitted and everything validated at once. Of course, different logic will be implemented by you for each case.

 Model/View/Controller
Let’s take a look at this functionality by doing a workshop. Create a new package under the EGLRichUI project called mvc Next, right-click over the mvc package and create a new Rich UI Library called ValidationMessages

Inside of the ValidationMessages library, copy/paste the code in the notes and replace any existing text in the file. For now lets just skip the explanation of this file and come back to it  Next, create a new file under WebContent  properties called ValidationMessages-en_US.properties package mvc; Library ValidationMessages type RUIPropertiesLibrary firstName String; lastNameMSG String; InvalidAge String; noAge String; adult String; TYPECHECK String; end

Now copy the text from the notes and paste it into the properties file we just created. Next, create a new RUI Handler called EmployeeInfo under the mvc package. lastNameMSG=You must enter a last name firstName=Missing first name TYPECHECK=A type check has occurred InvalidAge=Age must be numeric noAge=You must enter an age adult=Age must be greater than 20

Inside of the EmployeeInfo file, copy/paste the record in the notes below the RUI Handler This record will function as the Model, or the data for our Rich UI Handler. Notice how the model correlates with the ValidationMessages record we just created record Employee type BasicRecord firstName string{inputRequired = yes, InputRequiredMsgKey = "firstName", ValidationPropertiesLibrary = ValidationMessages}; lastName InputRequiredMsgKey = "lastNameMsg", ValidationPropertiesLibrary = ValidationMessages}; inputRequiredMsgKey = "noAge", typeChkMsgKey = "InvalidAge", ValidationPropertiesLibrary = ValidationMessages}; salary float{ZeroFormat = no, TypeChkMsgKey = "typeCheck", ValidationPropertiesLibrary = ValidationMessages}; isManager boolean; end

So now that we have our model defined, lets go ahead and create the view portion of the implementation (reminder: a view is what will display the data) It is only fitting that we create a widget to display each piece of data in the model. In doing so, you will add the following code to the RUI Handler. Copy/Paste code is provided in the notes. Press: Ctrl/Shift/O – to bring in the missing import statements firstNameField TextField{}; lastNameField TextField{}; age TextField{}; salary TextField{}; isManager CheckBox{};

We have now completed both the model and view portions of the MVC architecture. You may be wondering how the model and view are tied together, if so read-on! But first, lets create a variable of the Employee record in our RUI Handler *** Important – be sure to select the MVC record for the import. Now we will code the controller, which in turn will tie the model to the view Don’t worry, the syntax is the same as if we were creating a variable of a normal widget! To the right is a sample implementation of a controller Notice that we are simply creating a variable of type Controller The controller takes an annotated property This property accepts a model and a view as parameters Notice that the model is simply the data variable, and the view is simply the UI widget variable. Once again, press Ctrl/Shift/O

Creating a controller isn’t so bad is it? Now lets create controllers for each field on our page. Copy/paste code is provided in the notes. Since there really is no better way to teach this, the code provided is heavily commented. We will rely on these comments and simple intuition to teach the remaining controller concepts not explained. The code in the notes should simply be pasted below the view widgets. firstNameController Controller { @MVC { model=employee.firstName, view=firstNameField as Widget } }; lastNameController Controller { @MVC { model=employee.lastName, view=lastNameField as Widget } ageController Controller { @MVC { model=employee.age, view=age as Widget }, validators ::= isAdult salaryController Controller { @MVC { model=employee.salary, view=salary as Widget }, commitHelper=commitSalary isManagerController Controller { // define the four helpers before we set the view and model retrieveModelHelper = getManagerModel, retrieveViewHelper = getManagerCheckBox, publishHelper = setManagerCheckBox, commitHelper = setManagerModel, // set the model and view after setting up the helpers @MVC { model=employee.isManager, view=isManager as Widget } // // The following three functions teach the MVC pattern about a widget // it does not support out of the box. In this case we expose a checkbox // that represents a boolean value function setManagerCheckBox(value string in) isManager.selected = (value == "true"); end function setManagerModel(value string in) employee.isManager = (value == "true"); function getManagerCheckBox() returns(string) if (isManager.selected) return ("true"); else return ("false"); function getManagerModel() returns(string) if (employee.isManager) // The following function helps the MVC pattern with special logic // to run when committing a value from the UI to the model. // In this case we take the value in the UI and modify it before setting the model. function commitSalary(s String in) intValue float = s; xmasBonus int = 10; employee.salary = intValue + xmasBonus; // custom business logic // The following function is an extra validator that was attached to the // controller for the ageField. Acceptable values are ages 21 and older. function isAdult(S String in)returns(String?) if (s > 20) return (null); return (ValidationMessages.getMessage(ValidationMessages.adult, []));

Note the additional functions we utilize in certain controllers, such as validators Remember that the code is heavily commented. Utilize those comments and examine the Controller widget itself in order to understand the remaining functionality available. So, now that we have implemented the entire MVC spectrum, what’s left? Well, as we discussed on previous slides, forms are often used to group models, views, and controllers together.

Grouping all of this data so that a single submit can be issued is the ultimate goal of the framework. Doing so will introduce a couple of new widgets! Returning to our code, lets create an array of form fields. These are essentially the items we want inside of our form. The syntax consists of a String you would like displayed on the page and which controller it conforms to. Add the following code to your RUI Handler above the view code Copy/paste code provided in the notes entryFields FormField[] =[ new FormField{displayName = "First Name: ", controller = firstNameController}, new FormField{displayName = "Last Name: ", controller = lastNameController}, new FormField{displayName = "Age: ", controller = ageController}, new FormField{displayName = "Salary: ", controller = salaryController}, new FormField{displayName = "Is Manager: ", controller = isManagerController} ];

Now that we’ve got our form fields, lets create a form! Add the following lines of code to your RUI Handler Don’t forget to press Ctrl/Shift/O Note that this is simply a declaration of a new widget that encompasses the form fields. By now you should be realizing that this form is actually a UI widget, meaning it generates and displays components and data on the page.

Finally, we have one last step! We need to create a event that will trigger the submission of the form! Let’s add a button to the page that will do just that Add the following code… Note that we are also adding the button to the initialUI property of the RUIHandler Finally, go to the next slide to add the submit logic

Copy the code in the notes section of the slide and paste it into the RUIHandler (for readability’s sake, paste it below the existing functions in the RUIHandler) Note that the code is commented sufficiently so that understanding the logic should be intuitive. Finally, let’s preview the page… // // This function submits the form. If the form agrees all entries are valid, // we can commit all the values from the UI into the model. // After that we can run some logic to persist the model, or take it to the // next step in a wizard dialog, for instance. Function submit(e Event in) if (employeeForm.isValid()) employeeForm.commit(); // do the actual submit logic (e.g., call a service) end

Course RBD/EGL Development Units: JavaScript ExternalType

 Calling custom JavaScript from Rich UI
So what happens if you’ve already got a bunch of custom JavaScript written within your company?? Does it all go to waste now that you’ve got Rich UI? The answer to this question is no. Rich UI provides a way to interface with any custom JavaScript that you may currently have. Lets do a workshop that is twofold! We will write and call some logic written in pure JavaScript, then write and call a widget written in pure JavaScript. Create the following folder structure inside of the com.ibm.egl.education.widgets project under the WebContent folder. customJavaScript  functions customJavaScript  widgets

Next, under the WebContent  customJavaScript  functions folder, create a new JS file called customFunctions.js Once the file is created, copy the code in the notes and paste it into the file. Note the constructor, which is simply a function that is executed when an object of this class is created. Also note the hello function. This is our custom function which takes a parameter and returns a string! egl.defineClass( 'customJavaScript.functions', 'customFunctions', { "constructor" : function() }, "hello" : function(name) return ("Hello " + name); } });

Next, under the WebContent  customJavaScript  widgets folder, create a new JS file called customWidgets.js Once the file is created, copy the code in the notes and paste it into the file. Notice the “showButton” function, which creates our custom widget using pure JavaScript egl.defineWidget( 'customJavaScript.widgets', 'customWidgets', // this class 'egl.ui.rui', 'Widget', // the super class 'div', // dom element type name { "eze$$initializeDOMElement" : function(){ //initialize widget variables here }, "constructor" : function(){ //initialization logic here "showButton" : function(){ var button = document.createElement("button"); var buttonText = document.createTextNode('Ready!'); button.appendChild(buttonText); this.eze$$DOMElement.appendChild(button); } });

Now that we have our custom JavaScript written, lets create an ExternalType to interface with this code! Create a new EGL Package under the same project called customJavaScript. Next create a new EGL Source File called customExternalTypes package customJavaScript; // externalType externalType customFunctions extends Widget type JavaScriptObject { relativePath = "customJavaScript/functions", javaScriptName = "customFunctions" } // Function Declarations function hello(name string in) returns(string); end externalType customWidget extends Widget type JavaScriptObject { relativePath = "customJavaScript/widgets", javaScriptName = "customWidgets" function showButton();

Now that we have created the custom JavaScript and the ExternalType to interface to that JavaScript, let’s create a RUI Handler and integrate it all together. Create a new Rich UI Handler under the customJavaScript package called customExternalTypesDemo Note that there is copy/paste code in the notes! package customJavaScript; import com.ibm.egl.rui.widgets.Box; import com.ibm.egl.rui.widgets.Button; import com.ibm.egl.rui.widgets.TextField; import com.ibm.egl.rui.widgets.TextLabel; import egl.ui.rui.Event; // RUI Handler // handler customExternalTypesDemo type RUIhandler {initialUI = [div],onConstructionFunction = initialization, cssFile="css/com.ibm.egl.education.widgets.css"} myWidget customWidget{}; myVar customFunctions{}; div Box{ id = "div", children = [textFd, Textlb, myButton , myWidget], columns = 2}; textFd TextField{ text = "Scott" }; TextLb TextLabel{}; myButton Button{ onClick ::= pop, text = "Call ExternalJavaScript!" }; function initialization() end function pop(e Event in) textLb.text = myVar.hello(textFd.text); myWidget.showButton();

Preview the page and note the functionality. Note that the workshop we did was not the traditional hand holding. We expect that if you are calling custom JavaScript you are well versed in this genre and should be able to move forward by simply being presented with the concepts!

Course RBD/EGL Development Units: Deployment

Deployment Deploying a Rich UI application consists of generating all of your code into one single HTML file. Doing so is fairly simple, and is done for you by the tooling. For deployment you have three options: Deploy as straight HTML artifacts Deploy into a Dynamic Web Project targeted to WAS Deploy into a Dynamic Web Project targeted to Tomcat In any case, if services calls are made from within the application, we must make sure that the environment contains the Rich UI Proxy. If deploying into a dynamic web project targeted to either WAS or Tomcat, this is taken care of for you! If deploying as straight HTML artifacts, a proxy (possibly written in PHP) must be provided manually.

 Deployment First lets switch our generation mode to Deployment
Go to Window  Preferences  EGL  Rich UI Once the change has been made, click apply and OK. The IDE will prompt you to ask if you want to re-generate all artifacts, simply click OK

 Deployment Now that our code has been generated for deployment, lets deploy! Right-click over the project and select Deploy EGL Rich UI Application

 Deployment A wizard will pop-up, and for our purposes, we will select the following options. Click Next

 Deployment On the next screen in the wizard we are given the opportunity to name the output html file, asked where we want the code generated, and given the opportunity to make some globalization settings We can either generate the code to an existing project, or have the wizard create a brand new Dynamic Web Project

 Deployment Finally click Next and then Finish
Now expand the project where your code was generated and look under the WebContent folder. Notice all of the generated artifacts and the main html file which contains all of the generated RUI Code

 Deployment For deployment, there exists one final step!
We must export and deploy the Dynamic Web Project. This can be done by exporting a WAR file, or in the case of a WAS project, exporting an EAR file. As long as you have generated your code to a Dynamic Web Project, all service calls should work since the proxy is also generated!

RBD/EGL Development Course Units: What is Web 2.0? Learn EGL Rich UI
Programming in EGL Rich UI Learn EGL Rich UI Appendix Under Construction

Rational Business Developer

Similar presentations

Presentation on theme: "Rational Business Developer"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Rational Business Developer

Similar presentations

Presentation on theme: "Rational Business Developer"— Presentation transcript:

Similar presentations

About project

Feedback