Jump to: navigation, search

Difference between revisions of "EDT:Tutorial: RUI With DataBase Lesson 1"

(New page: Access a database with EGL Rich UI {| style="float: right" |< Previous | [[EDT:Tu...)
 
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[EDT:Tutorial: Access a database with EGL Rich UI|Access a database with EGL Rich UI]]
+
[[EDT:Tutorial: Access a database with EGL Rich UI|Access a database with EGL Rich UI]]  
  
 +
<br>
  
 
{| style="float: right"
 
{| style="float: right"
|[[EDT:Tutorial: RUI With Database Introduction|&lt; Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 2|Next >]]
+
|-
 +
| [[EDT:Tutorial: RUI With Database Introduction|&lt; Previous]] &#124; [[EDT:Tutorial: RUI With DataBase Lesson 2|Next &gt;]]
 
|}
 
|}
= Lesson 1: Plan the application =
 
  
Design your application on paper before you begin coding.
+
= Lesson 1: Plan the application  =
 +
 
 +
Design your application on paper before you begin coding.  
  
 
When you plan an application, do as follows:  
 
When you plan an application, do as follows:  
  
<ul><li>List your objectives, as this tutorial did earlier.  
+
*List your objectives, as this tutorial did earlier.  
<li>Sketch the interface.
+
*Sketch the interface.  
<li>Consider the flow of events.
+
*Consider the flow of events.  
<li>Identify the application structure.
+
*Identify the application structure.
</ul>
+
  
 +
<br>
  
== Sketch the interface ==
+
== Sketch the interface ==
  
Use this sketch as a guide when you create the components
+
Use this sketch as a guide when you create the components of the interface:[[Image:EDT Tutorial edt richui sql01 sql sketch sm.jpg|A sketch of the two sections, one showing all records and the other showing all fields in a selected record.]]  
of the interface:[[Image:EDT_Tutorial_edt_richui_sql01_sql_sketch_sm.jpg|A sketch of the two sections, one showing all records and the other showing all fields in a selected record.]]
+
  
At
+
At the left are three buttons ('''Add''', '''Delete''', and '''Sample''') and a data grid; on the right are two buttons ('''Clear''' and '''Save''') and a single-record layout.  
the left are three buttons ('''Add''', '''Delete''',
+
and '''Sample''') and a data grid; on the right are
+
two buttons ('''Clear''' and '''Save''')
+
and a single-record layout.
+
  
 +
== Consider the application flow  ==
  
== Consider the application flow ==
+
At run time, the user can do as follows:
  
 +
*Click the '''Sample''' button to delete all rows from the database table, to add sample rows, and to display the sample rows in the data grid.
 +
*Click the '''Add''' button to add an almost empty row to the database and to display that data.
 +
*Click the '''Delete''' button to delete, from the database, the data that was displayed in the currently selected row of the data grid.
 +
*Click the '''Clear''' button to remove content from the single-record layout.
 +
*Click a row of the data grid to copy the details of that row to the single-record layout.
 +
*Change the details in the single-record layout and click the '''Save''' button to update the related database row.
  
 +
The reader might disagree with this flow of events. For example, why not have the user clear the single-record layout, type data into the layout, and click the '''Add''' button to create a database row that has useful data from the start? That change is one of many options, and a good learning strategy is to follow the steps of this tutorial and to use the lessons learned for a production-level application.
  
At run time, the user can do as follows:
+
== Identify the application structure  ==
  
<ul><li>Click the '''Sample''' button to delete all rows
+
When you write a complex Rich UI application, you write code in several Rich UI handlers, each of which corresponds to a web page or to a section of a web page. However, in this tutorial you develop only one handler. As noted earlier, a handler can access services, some of which you might develop by using an EGL Service type.  
from the database table, to add sample rows, and to display the sample
+
rows in the data grid.
+
<li>Click the '''Add''' button to add an almost empty
+
row to the database and to display that data.
+
<li>Click the '''Delete''' button to delete, from
+
the database, the data that was displayed in the currently selected
+
row of the data grid.
+
<li>Click the '''Clear''' button to remove content
+
from the single-record layout.
+
<li>Click a row of the data grid to copy the details of that row to
+
the single-record layout.
+
<li>Change the details in the single-record layout and click the '''Save''' button
+
to update the related database row.
+
</ul>
+
  
 +
Whenever possible, use preexisting resources. Your Rich UI application will use the following EGL projects that are provided with the product:
  
The reader might disagree with this flow of events. For
 
example, why not have the user clear the single-record layout, type
 
data into the layout, and click the '''Add''' button
 
to create a database row that has useful data from the start? That
 
change is one of many options, and a good learning strategy is to
 
follow the steps of this tutorial and to use the lessons learned for
 
a production-level application.
 
  
  
== Identify the application structure ==
+
;org.eclipse.edt.rui.dojo_''version''
 +
:Provides the following widget types for this tutorial:
  
  
 +
:*DojoButton
 +
:*DojoCheckbox
 +
:*DojoComboBox
 +
:*DojoCurrencyTextBox
 +
:*DojoDateTextBox
 +
:*DojoTitlePane
 +
All those widget types are based on Dojo, as are many other widgets that are available to you. For background details on that technology, see Dojo toolkit (http://dojotoolkit.org).
  
When you write a complex Rich UI application, you write
 
code in several Rich UI handlers, each of which corresponds to a web
 
page or to a section of a web page. However, in this tutorial you
 
develop only one handler. As noted earlier, a handler can access services,
 
some of which you might develop by using an EGL Service part.
 
  
Whenever
 
possible, use preexisting resources. Your Rich UI application will
 
use the following EGL projects that are provided with the product:
 
  
<dl><dt>org.eclipse.edt.rui.dojo_0.7.0
+
;org.eclipse.edt.rui.widgets_''version''
<dd>Provides the following widget types for this tutorial:
+
:Provides the following widget types for this tutorial:  
  
<ul><li>DojoButton
 
<li>DojoCheckbox
 
<li>DojoComboBox
 
<li>DojoCurrencyTextBox
 
<li>DojoDateTextBox
 
<li>DojoTitlePane
 
</ul>
 
  
All those widget types are based on Dojo, as are many other
+
:*DataGrid
widgets that are available to you. For background details on that
+
:*GridLayout
technology, see Dojo
+
:*TextField
toolkit (http://dojotoolkit.org).
+
:*TextLabel
  
<dt>org.eclipse.edt.rui.widgets_0.7.0
 
<dd>Provides the following widget types for this tutorial:
 
  
<ul><li>DataGrid
 
<li>GridLayout
 
<li>TextField
 
<li>TextLabel
 
</ul>
 
  
</dl>
 
  
 +
<br> You will develop the following logic:
  
You will develop the following logic:
 
  
<dl><dt>SQLService
 
<dd>A dedicated service that interacts with a database table.
 
<dt>PaymentLib
 
<dd>A library that can provide code to several handlers
 
<dt>PaymentFileMaintenanceHandler
 
<dd>The handler that defines the web application.
 
</dl>
 
  
 +
;SQLService
 +
:A dedicated service that interacts with a database table.
 +
;PaymentLib
 +
:A library that can provide code to several handlers
 +
;PaymentFileMaintenanceHandler
 +
:The handler that defines the web application.
  
  
== Lesson checkpoint ==
 
  
In this lesson, you completed the following tasks:
+
== Lesson checkpoint  ==
  
<ul><li>Sketched the application interface
+
In this lesson, you completed the following tasks:
<li>Considered the runtime flow of events.
+
<li>Identified the application structure
+
</ul>
+
 
+
In the next lesson, you create a Derby database and a table.
+
  
 +
*Sketched the application interface
 +
*Considered the runtime flow of events.
 +
*Identified the application structure
  
 +
In the next lesson, you create the EGL source projects in which you will define the application programs.
  
 
{| style="float: right"
 
{| style="float: right"
|[[EDT:Tutorial: RUI With Database Introduction|&lt; Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 2|Next >]]
+
|-
 +
| [[EDT:Tutorial: RUI With Database Introduction|&lt; Previous]] &#124; [[EDT:Tutorial: RUI With DataBase Lesson 2|Next &gt;]]
 
|}
 
|}
 
  
 
[[Category:EDT]]
 
[[Category:EDT]]

Latest revision as of 13:36, 5 July 2012

Access a database with EGL Rich UI


< Previous | Next >

Lesson 1: Plan the application

Design your application on paper before you begin coding.

When you plan an application, do as follows:

  • List your objectives, as this tutorial did earlier.
  • Sketch the interface.
  • Consider the flow of events.
  • Identify the application structure.


Sketch the interface

Use this sketch as a guide when you create the components of the interface:A sketch of the two sections, one showing all records and the other showing all fields in a selected record.

At the left are three buttons (Add, Delete, and Sample) and a data grid; on the right are two buttons (Clear and Save) and a single-record layout.

Consider the application flow

At run time, the user can do as follows:

  • Click the Sample button to delete all rows from the database table, to add sample rows, and to display the sample rows in the data grid.
  • Click the Add button to add an almost empty row to the database and to display that data.
  • Click the Delete button to delete, from the database, the data that was displayed in the currently selected row of the data grid.
  • Click the Clear button to remove content from the single-record layout.
  • Click a row of the data grid to copy the details of that row to the single-record layout.
  • Change the details in the single-record layout and click the Save button to update the related database row.

The reader might disagree with this flow of events. For example, why not have the user clear the single-record layout, type data into the layout, and click the Add button to create a database row that has useful data from the start? That change is one of many options, and a good learning strategy is to follow the steps of this tutorial and to use the lessons learned for a production-level application.

Identify the application structure

When you write a complex Rich UI application, you write code in several Rich UI handlers, each of which corresponds to a web page or to a section of a web page. However, in this tutorial you develop only one handler. As noted earlier, a handler can access services, some of which you might develop by using an EGL Service type.

Whenever possible, use preexisting resources. Your Rich UI application will use the following EGL projects that are provided with the product:


org.eclipse.edt.rui.dojo_version
Provides the following widget types for this tutorial:


  • DojoButton
  • DojoCheckbox
  • DojoComboBox
  • DojoCurrencyTextBox
  • DojoDateTextBox
  • DojoTitlePane

All those widget types are based on Dojo, as are many other widgets that are available to you. For background details on that technology, see Dojo toolkit (http://dojotoolkit.org).


org.eclipse.edt.rui.widgets_version
Provides the following widget types for this tutorial:


  • DataGrid
  • GridLayout
  • TextField
  • TextLabel




You will develop the following logic:


SQLService
A dedicated service that interacts with a database table.
PaymentLib
A library that can provide code to several handlers
PaymentFileMaintenanceHandler
The handler that defines the web application.


Lesson checkpoint

In this lesson, you completed the following tasks:

  • Sketched the application interface
  • Considered the runtime flow of events.
  • Identified the application structure

In the next lesson, you create the EGL source projects in which you will define the application programs.

< Previous | Next >