® IBM Software Group © 2006 IBM Corporation Dependent Combo-Box U.I. Development This Learning Module walks you through the options and development techniques.

Slides:



Advertisements
Similar presentations
Fathom Overview Workshop on using Fathom in School Improvement Planning (SIP)
Advertisements

1.NET Web Forms DataGrid © 2002 by Jerry Post. 2 Data Grid Has Many Uses  The grid uses HTML tables to display multiple rows of data. It is flexible.
® IBM Software Group © 2006 IBM Corporation JSF dataTables – Basic Properties and Development Techniques Part I – of a 3-part section on the use of the.
Creating a Drop Down List Boxes – without Submit Button Dave Pai ICS100 – Spring 2007.
Lesson 4 Advanced Forms Handling. Aggravations Long forms that make you scroll out of the normal viewing area Lets create a scrollable form that is a.
® IBM Software Group © 2006 IBM Corporation Additional AJAX Examples and Workshops This learning module provides additional AJAX use cases and examples.
Macros Tutorial Week 20. Objectives By the end of this tutorial you should understand how to: Create macros Assign macros to events Associate macros with.
Project Implementation for COSC 5050 Distributed Database Applications Lab6.
Computer Science 101 Web Access to Databases Overview of Web Access to Databases.
® IBM Software Group © 2006 IBM Corporation EGL / SOA – Creating and Consuming EGL Web Services This Learning Module shows how to utilize the RBD tooling.
® IBM Software Group © 2006 IBM Corporation JSF dataTables – Advanced use of Properties and Development Techniques Part III – of a 3-part section on the.
® IBM Software Group © 2006 IBM Corporation The Eclipse Data Perspective and Database Explorer This section describes how to use the Eclipse Data Perspective,
® IBM Software Group © 2006 IBM Corporation JSF Menu Component How to create and use JSF Menu components to add custom static and programmatic (dynamic)
Project Implementation for COSC 5050 Distributed Database Applications Lab5.
® IBM Software Group © 2006 IBM Corporation How to read/write XML using EGL This Learning Module shows how to utilize an EGL Library to read/write an XML.
® IBM Software Group © 2006 IBM Corporation JSF Tab Controls This Learning Module shows how to develop server-side EGL applications with dynamic content.
® IBM Software Group © 2006 IBM Corporation Display contents of a Data Table in Excel right from the browser – No POI needed This section describes how.
® IBM Software Group © 2006 IBM Corporation Creating JSF/EGL Template Pages This section describes how to create.JTPL (Java Template Pages) using the Page.
® IBM Software Group © 2006 IBM Corporation JavaScript – and EGL and.JSP Pages This learning module describes the use of JavaScript in your EGL and.JSP.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
© 2008 RightNow Technologies, Inc. Dynamic Forms in Customer Portal Overview.
Databases and LINQ Visual Basic 2010 How to Program 1.
Server-side Scripting Powering the webs favourite services.
® IBM Software Group © 2006 IBM Corporation JSF Tree Control This Learning Module describes the use of the JSF Tree Control – for hierarchical organization.
® IBM Software Group © 2006 IBM Corporation EGL Programming – Data Parts and Assignment Statements – 4 – Arrays These slides walk you through the terms.
Web Technologies Website Development Trade & Industrial Education
Copyright 2007, Information Builders. Slide 1 WebFOCUS Maintain – Enhancing Objects with JavaScript Mark Derwin Information Builders Information Builders.
Project Implementation for COSC 5050 Distributed Database Applications Lab3.
Website Development with Dreamweaver
® IBM Software Group © 2006 IBM Corporation Programmatically Rendering and Hiding JSF Controls This section describes how to hide and show JSF controls.
CSCI 6962: Server-side Design and Programming Introduction to Active Server Pages.
® IBM Software Group © 2006 IBM Corporation JSF/EGL Component Properties Deep Dive This section walks you through the options and settings for JSF Component.
Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How.
1 Data Bound Controls II Chapter Objectives You will be able to Use a Data Source control to get data from a SQL database and make it available.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Copyright 2007, Information Builders. Slide 1 Enhancing Maintain Applications with HTML Mark Derwin and Mark Rawls Information Builders.
0 eCPIC User Training: Dependency Mapper These training materials are owned by the Federal Government. They can be used or modified only by FESCOM member.
® IBM Software Group © 2006 IBM Corporation “Essential” HTML Tags and Page Development Techniques This Learning Module describes the standard HTML tags.
® IBM Software Group © 2006 IBM Corporation.JSP Page Flow – and Managing State in your Web Application This learning module covers the salient features.
® IBM Software Group © 2006 IBM Corporation JSF Progress Bar This Learning Module shows how to integrate EGL/JSF functionality into a run-time progress.
® IBM Software Group © 2006 IBM Corporation EGL/Web Project QuickStart – 2 of 4 – Creating the Business Logic Layer These slides walk you through the process.
HTML Form Widgets. Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back.
® IBM Software Group © 2006 IBM Corporation Individual Cell Coloring – in a JSF dataTable Control You may need to programmatically (using EGL) change the.
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
® IBM Software Group © 2006 IBM Corporation Using JSF Mini-Calendar Controls This section describes how to use a JSF Mini-Calendar Control with EGL It.
® IBM Software Group © 2006 IBM Corporation JSF File Upload Control This Learning Module describes the use of the JSF File Upload component – for allowing.
® IBM Software Group © 2006 IBM Corporation Web JSF Overview – RBD Tooling – for Web Development This unit introduces you to the aspects of the RBD tooling.
® IBM Software Group © 2006 IBM Corporation “Essential” JSF Components and EGL Bindings This Learning Module describes the foundation terms and concepts.
® IBM Software Group © 2006 IBM Corporation Finding Out Which Submit Button Was Clicked – and Other JSF Command Button Techniques This section describes.
® IBM Software Group © 2006 IBM Corporation EGL/Web Project QuickStart – 1 of 4 – Creating the Data Access Layer These slides walk you through the process.
® IBM Software Group © 2006 IBM Corporation JSF Panel – Section Controls This Learning Module shows how to develop server-side EGL applications with dynamic.
INTRODUCTION TO ACCESS. OBJECTIVES  Define the terms field, record, table, relational database, primary key, and foreign key  Create a blank database.
® IBM Software Group © 2006 IBM Corporation JSF Rich Text Area Component This Learning Module describes the use of the JSF Rich Text Area component – for.
HTML FORMS The TEXT Object Presented By: Ankit Gupta.
XPages Example: Generating Dynamic Editable Fields from a Document Collection Author: John Mackey Groupware Solutions Inc.
® IBM Software Group © 2006 IBM Corporation AJAX-Enabling Your JSF Components and Web Pages This learning module covers the use of AJAX technology to enable.
WaveMaker Visual AJAX Studio 4.0 Training Java Script Events.
LESSON : EVENTS AND FORM VALIDATION -JAVASCRIPT. EVENTS CLICK.
This screen may be skipped altogether if the user chooses a report from the server and clicks Ad Hoc or Edit or whatever. Also, the next screen would ordinarily.
® IBM Software Group © 2006 IBM Corporation EGL.CSV (Excel) File Reading and Writing This section describes how to access.CSV (Excel Spreadsheet) files.
Section 10.1 Define scripting
JavaScript, Sixth Edition
Oracle Application Express (APEX)
System I (AS400) Login You will need to develop Login procedures for your web applications. This short section describes how to do this for System I.
Quickr Places & Templates Introduction
Conditionally Confirming a Submit
System I (AS400) Login You will need to develop Login procedures for your web applications. This short section describes how to do this for System I.
Events: Changed and Input
Dynamically Populating a Multiple Selection List Box
To access our web services, go to……
Presentation transcript:

® IBM Software Group © 2006 IBM Corporation Dependent Combo-Box U.I. Development This Learning Module walks you through the options and development techniques for creating two or more combo-boxes whose contents are programmatically-dependent upon user-selection.

2 Last update: 12/04/2007 Dependent ComboBoxes  It is another common U.I. requirement to have a page display related comboBoxes, that allow the user to:  Select from a populated ComboBox-1  Which fires off a server-side process that populates ComboBox-2  …etc.  This technique is easy to achieve with RBD/EGL. Here’s how:  Create the default page  Create the JSFHandler that loads arrays for the comboBox and processes the user selection  And also programmatically hides/shows the combo-box  Let’s try it 

3 Last update: 12/04/2007  Dependent ComboBoxes Lab  Create a new page, named: dependentComboBoxes.jsp  Add an HTML to the page: 3 Rows/1 Column, Width: 100%  Copy/Paste the code in the Notes section of this slide, and replace the existing JSFHandler source  Note the following:  The arrays:  States is the parent array – it will load the top combo-box  Customers is the dependent array – the SQL statement reads rows from the (combo-box) selected state  The SQL statement  The visibility expressions  Press Ctrl/S to save your code

4 Last update: 12/04/2007  Create the ComboBoxes  From Page Data:  Drag statesCB onto the page – create a ComboBox  Drag customersCB onto the page – create another ComboBox  Drag getCustForState onto the page – create a Submit Button  Select the customersCB ComboBox, and from Properties/All Attributes  Select the rendered attribute, then Compute… vis  Select the vis boolean field  Run the page on the server. Select a state with customers: New Jersey, California, Connecticut, New York, etc.  Select a state without customers 

5 Last update: 12/04/2007  OPTIONAL – Firing off the Function “onchange” – 1 of 2  Another common functional requirement in dependent combo-box applications is for the form to be submitted when the user selects a value in the combo-box (not requiring them to click a submit button, but merely select a new value). This can be accomplished by adding a single JavaScript statement to an onchange event for the combo-box: document.getElementById(' : ').click(); document.getElementById(' : ').click(); Document.getElementById – a JavaScript statement that returns the address of a component (' : ') (' : ') – the fully qualified (JSF-ID) component name in the HTML.click();.click(); – a JavaScript API that “clicks” a Submit Button  Example from our project: document.getElementById('form1:buttonGetCustForState1').click(); document.getElementById('form1:buttonGetCustForState1').click();  Note that the above example assumes:  Default Form Id  Default Button Id: – if you dragged the GetCustForState function onto the page

6 Last update: 12/04/2007  OPTIONAL – Firing off the Function “onchange” – Workshop  Where to enter the onchange JavaScript function? StateAbbrev  Select the StateAbbrev combo-box. Quick Edit view  From the Quick Edit view onchange  Select the onchange event and code the statement shown here…  Run the page – and see how it works!  See notes on one more optional technique…(hiding the Submit Button) QuickEditView