Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

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

(→‎Lesson 2: Connect to a new Derby database)
Line 5: Line 5:
 
|[[EDT:Tutorial: RUI With DataBase Lesson 1|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 3|Next >]]
 
|[[EDT:Tutorial: RUI With DataBase Lesson 1|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 3|Next >]]
 
|}
 
|}
−
= Lesson 2: Connect to a new Derby database  =
+
= Lesson 2: Set up the projects =
  
−
Use the Derby open source database manager to handle the data store for the application.  
+
An EGL application is organized in one or more ''projects'',
 +
each of which is a physical folder in the workspace. A project contains
 +
an EGL source folder that is provided for you, and that folder contains
 +
one or more ''packages'', which in turn contain EGL source
 +
files. This hierarchy is basic to your work in EGL: a project, then
 +
an EGL source folder, then a package with EGL source files.
  
−
This tutorial uses the open source Derby database. In this chapter, you connect to a Derby database and create the table to be accessed. Alternatively, you can connect to a Cloudscape, DB2® UDB, or SQL Server database. In any case, create the table described in this lesson.  
+
The
 +
EGL source files include EGL ''parts'', which are type definitions
 +
that you create. For example, a Service part contains logic, and a
 +
Record part can be the basis of a variable that you declare in your
 +
Service part.
  
−
Follow these steps to set up the Derby database:  
+
Packages are important because they separate parts
 +
into different contexts, or ''namespaces'':
  
−
#Install Derby plugins in the Eclipse IDE
+
<ul><li>A part name might be duplicated in two different packages, and
−
#Create an SQL database connection through the EGL Preferences.  
+
any EGL source code can reference each part precisely. The main benefit
−
#Use the Data perspective to create and connect to the database.
+
of namespaces is that different teams can develop different EGL parts
−
#Write an SQL script to create a table within the database.  
+
without causing name collisions.
−
#Disconnect from the database, as is necessary because Derby allows only one connection, which you will need during code development.
+
<li>Each part name in a given package is unique within that package:
  
−
<br>  
+
<ul><li>A part in one package can easily reference another part in the
 +
same package by specifying the part name. For example, here is a declaration
 +
of a record that is based on the Record part <tt>MyRecordPart</tt>:
  
−
== Install Derby Plugins  ==
+
myRecord MyRecordPart{};
  
−
#Download the Derby Eclipse plugins into your Eclipse IDE as directed by the Derby site. The plugins for the [http://db.apache.org/derby/releases/release-10.8.2.2.cgi Apache Derby 10.8.2.2 Release] work well. &nbsp; There will be two plugin zip files for the release:
+
<li>A part in one package can also reference a part in a second package
−
#*derby_core_plugin - provides the Derby jar files to other plugins in Eclipse.
+
by giving the package name and part name, or by a shortcut that involves
−
#*derby_ui_doc_plugin - provides an Apache Derby Nature in Eclipse for easy database application development.
+
importing the part.
−
#Extracted the plugins to the Eclipse home directory.  As a result, the eclipse/plugins directory received these folders:
+
</ul>
−
#*org.apache.derby.core_10.8.2
+
</ul>
−
#*org.apache.derby.plugin.doc_1.1.3
+
−
#*org.apache.derby.ui_1.1.3
+
  
−
== Create The EGL Service Project ==
+
One project can reference the parts in a second project,
 +
but only if the EGL build path of the referencing project identifies
 +
the referenced project. Again, this tutorial gives examples. However,
 +
in all cases, avoid using the same package name in different projects,
 +
as that usage can cause problems in name resolution.
  
−
Test that Derby is installed correctly by creating the EGL project '''paymentService''' that will access the database
+
Your next
 +
task in this tutorial is to create the following projects:
  
−
#Start Eclipse
+
<dl><dt>PaymentShared
−
#Create an EGL  and create a new EGL project
+
<dd>Holds parts used both on the Web client (the browser) by the handlers and on the Web application server by the EGL services.
−
#Right click the project name.  At the context menu, click Apache Derby > Add Apache Derby Nature.  The Derby Libraries are added.
+
<dt>PaymentService
−
#Click File > New > Other and expand Connection Profiles and double-click Connection Profile.  The Connection Profile page is displayed.
+
<dd>Holds an EGL Service part and related definitions
−
#Click Derby and name the connection; for example, Derby 10.8.2.  Click Next.
+
<dt>PaymentClient
−
#Select the circular icon at the top:  New Driver Definition.  The New Driver definition page is displayed and has a list of driver templates.
+
<dd>Holds the Rich UI handlers and related definitions
−
#Select the latest version available for the Derby Embedded JBDC Driver; for example, 10.2 Default.
+
</dl>
−
#Change the driver name to reflect your version, as reflected in the number shown for the org.apache.derby.core plugin you downloaded;
+
−
#for example, change the driver name to Derby Embedded JDBC Driver 10.8.2.
+
−
#Click the JAR list tab and ensure that the jar specified is the one that you copied from the Derby libraries in your project.
+
−
#Click the Properties tab and specify the database of interest; for example, D:\databases\PaymentDB. 
+
−
#Click the test connection; you should receive the message "Ping succeeded!"  Clear the checkbox for "Connect when the wizard completes" and check the checkbox for "Update database to current version."  Click Next.  The Summary page is displayed.  If you regret any values there, click back to the pages of interest and change values as appropriate.
+
  
−
#<br>
+
You can include all your code in a single project,
 +
but the separation shown here lets you easily deploy the two kinds
 +
of code in different ways.
  
−
== Create an SQL database connection  ==
+
Parts in one project can use parts
 +
in a different project. EGL uses a ''build path'' to search
 +
for unresolved references. Later in this lesson, you will add the '''PaymentService''' project
 +
to the build path for the '''PaymentClient''' project.
  
−
#In the top menu of the EGL workbench, click '''Window''' and then click '''Preferences''' &gt; '''EGL''' &gt; '''SQL Database Connections'''.
+
== Create the PaymentShared project ==
−
#Next to the list of connection details, click '''New'''.
+
−
#In the Connection Profile window, complete these steps:
+
−
##Under '''Connection Profile Types''', click '''Derby'''.
+
−
##In the '''Name''' field, type the following string: Derby Database Connection
+
−
##Click '''Next'''.
+
−
#In the Specify a Driver and Connection Details window, specify the following information:
+
−
##From the '''Drivers''' list, select '''Derby''' Embedded JDBC Driver 10.1 Default'''.'''
+
−
##For the '''Database location''' field, enter a simple path: C:\databases\PaymentDB The final element in the path is the name of a folder that does not yet exist.
+
−
##Specify generic login information:
+
−
##*In the '''User name''' field, enter <tt>admin</tt>
+
−
##*In the '''Password''' field, also enter <tt>admin</tt>
+
−
##Select the '''Create database (if required)''' check box.
+
−
##Select the '''Save password''' check box. When you work with live data, you might prefer not to select this option, but it simplifies the tutorial.
+
−
##Make sure that '''Connect when the wizard completes''' is selected and that '''Connect every time the workbench is started''' is cleared. [[Image:EDT Tutorial edt richui sql02 specify driver.jpg|EDT_Tutorial_edt_richui_sql02_specify_driver.jpg]]
+
−
##Click '''Test Connection'''. You should see a message that says "œPing succeeded!"? Click '''OK''' to close the message window. If the test failed, get more information by clicking '''Details''' on the failure message.
+
−
##Click '''Finish'''.
+
−
#In the Preferences window, make sure that '''Derby Database Connection''' is highlighted, then click '''OK'''.
+
  
−
== Switch to the Data perspective  ==
+
#From the file menu,left clink on '''New''' and select the '''EGL > EGL Project''' wizard.
 +
#On the '''EGL Project''' window, enter project name '''PaymentShared''', select template '''basic''', and left click on '''Next'''.[[Image:EDT Tutorial edt richui sql02 create shared project.jpg|Create PaymentShared EGL project]]
 +
#On the '''EGL Settings''' window, accept the default values and left click on '''Finish'''.[[Image:EDT Tutorial edt richui sql02 shared project settings.jpg|PaymentShared project EGL settings]]
  
−
To set up the Derby database for your application, use the Data perspective, which is a workbench perspective and different from the EGL Data view.
+
EGL creates a project named <tt>PaymentShared</tt>.
 +
Note the folders inside the directory:
  
−
To connect to the database:  
+
<dl><dt>EGLSource
 +
<dd>Put your packages and source files here.
 +
<dt>EGLGen/JavaSource
 +
<dd>EGL places the Java files
 +
it generates here.
 +
<dt>JavaSource
 +
<dd>Put any custom Java source
 +
files here. These files are not overwritten during the generation
 +
process.
 +
<dt>JRE System Library
 +
<dd>EGL uses this folder for JAR files that support the Java Runtime Environment.
 +
</dl>
 +
[[Image:EDT_Tutorial_edt_richui_sql03_service_explore.jpg|The Project Explorer view shows the new project and folders.]]
  
−
<br>
+
== Create the PaymentService project ==
  
−
#Change to the Data perspective as follows:  
+
To create an EGL service project:
−
##Click the Open Perspective button, which is located by default in the right side of the navigation bar. [[Image:EDT Tutorial edt richui sql02 open perspective.jpg|The Open Perspective button]]
+
−
##If the Data perspective is not shown on the menu, click '''Other'''.
+
−
##If you still do not see the Data perspective, select '''Show''' All'''at the bottom of the wizard. Click '''Data'''and''' then click '''OK'''. [[Image:EDT Tutorial edt richui sql02 data perspective.jpg|The Data perspective in the menu of perspectives.]]
+
−
#Locate the Data Source Explorer view, by default in the lower left corner of the workbench; and under '''Database''' Connections''', right-click '''Derby Database Connection'''.''' Click the '''Connect''' option. The option was enabled because you set the following check boxes when you created the connection: '''Create database (if required)''' and '''Connect''' when the wizard completes'''.'''
+
  
−
== Create a table  ==
+
#From the file menu,left clink on '''New''' and select the '''EGL > EGL Project''' wizard.
 +
#On the '''EGL Project''' window, enter project name '''PaymentService''', select template '''basic''', and left click on '''Next'''.[[Image:EDT Tutorial edt richui sql02 create service project.jpg|Create PaymentService EGL project]]
 +
#On the '''EGL Settings''' window, check '''Override Generation Settings''', uncheck '''JavaScript Generator''' and left click on '''Next'''.[[Image:EDT Tutorial edt richui sql02 service project settings.jpg|PaymentService project EGL settings]]
 +
#On the '''EGL BuildPath''' window, check '''PaymentShared''' (the service project uses parts in the shared project) and left click on '''Finish'''.[[Image:EDT Tutorial edt richui sql02 service project EGL path.jpg|PaymentService project EGL build path]]
  
−
While in the Data perspective, you can write an SQL script to create a table in the database.
+
== Create the PaymentClient project ==
  
−
#In the Data Source Explorer view, expand '''Derby''' Database Connection'''. Right-click the '''PaymentDB'''database''' name and click '''New SQL Script'''. [[Image:EDT Tutorial edt richui sql02 new sql script.jpg|The menu for the new database]] A new script file opens in the editor.
+
An EGL Rich UI project includes many shortcuts to speed
−
#Copy the following SQL code into the script file: CREATE TABLE PAYMENT( PAYMENT_ID INT PRIMARY KEY NOT NULL GENERATED ALWAYS AS IDENTITY (START WITH 1, INCREMENT BY 1), CATEGORY INT, DESCRIPTION CHAR(30), AMOUNT DECIMAL(10,2), FIXED_PAYMENT SMALLINT, DUE_DATE DATE, PAYEE_NAME CHAR(30), PAYEE_ADDRESS1 CHAR(30), PAYEE_ADDRESS2 CHAR(30)); In the next step, you run this code to create a table named PAYMENT. '''Note:'''
+
the development of a user interface for the web.
−
##The PAYMENT_ID column is an identity column, which means that Derby will place a unique value into that column whenever the user creates a record. Each value is one more than the last.
+
−
##The names of Derby tables and columns are always in uppercase regardless of the case of names that are in the CREATE TABLE statement.
+
−
#Right-click anywhere in the background of the editor pane, and then click '''Run SQL'''. The SQL Results view, which is by default at the bottom center of the workbench, should show the "œcreate table"? operation and a status of "œSucceeded"?. You can now expand the '''PaymentDB''' entry in the Data Source Explorer and see the columns for the new table:[[Image:EDT Tutorial edt richui sql02 exp table.jpg|The column names are under Schemas/APP/Tables/PAYMENT/Columns.]]
+
−
#Close the script file. You do not need to save the file, as you will not need it again.
+
−
#You cannot access the database from EGL source code while the Data view is using the connection. Right-click '''Derby''' database connection'''and click '''Disconnect'''.'''
+
  
−
== Lesson checkpoint  ==
+
To create an EGL Rich UI project:
  
−
In this lesson, you completed the following tasks:  
+
#From the file menu,left clink on '''New''' and select the '''EGL > EGL Project''' wizard.
 +
#On the '''EGL Project''' window, enter project name '''PaymentClient''', select template '''basis''', and left click on '''Next'''.[[Image:EDT Tutorial edt richui sql02 create client project.jpg|Create PaymentClient EGL project]]
 +
#On the '''Web 2.0 Client Application Settings''' window, accept the default values and left click on '''Next'''.[[Image:EDT Tutorial edt richui sql02 client project web settings.jpg|PaymentClient project Web settings]]
 +
#On the '''EGL BuildPath''' window, check '''PaymentShared''' and '''PaymentService''' (the client project uses parts in the shared and service projects) and left click on '''Finish'''.[[Image:EDT Tutorial edt richui sql02 service project EGL path.jpg|PaymentClient project EGL build path]]
  
−
*Created an EGL database connection
+
EGL creates a project named <tt>PaymentClient</tt> and
−
*Created a database named <tt>PaymentDB</tt>  
+
adds support projects to the workspace for Rich UI, Dojo Widgets,
−
*Created a database table named <tt>PAYMENT</tt>
+
and the Dojo runtime library. In addition to the directories that
 +
EGL created for the General project, a Rich UI project includes the
 +
following directory:
  
−
In the next lesson, you start writing application code.  
+
<dl><dt>WebContent
 +
<dd>Contains support files, such as cascading style sheets (CSS) and
 +
images.
 +
</dl>
 +
[[Image:EDT_Tutorial_edt_richui_sql03_explore.jpg|The Project Explorer view shows the new project and folders.]]
  
−
<br>  
+
When you first add a Rich UI project to your workspace, two
 +
other projects are added automatically:
 +
 
 +
<ul>
 +
<li>org.eclipse.edt.rui.dojo_0.7.0
 +
<li>org.eclipse.edt.rui.widgets_0.7.0
 +
</ul>
 +
 
 +
These two projects contain widgets and other support
 +
files that you use in creating a Rich UI application.
 +
 
 +
== Lesson checkpoint ==
 +
 
 +
In this lesson, you completed the following tasks:
 +
 
 +
<ul><li>Created an EGL project for developing parts used in both in the service and the RichUI application
 +
<li>Created an EGL project for developing a Rich UI application.
 +
<li>Modified the build descriptors in a build file; specifically,
 +
by adding database information from a connection definition in the
 +
workbench.
 +
</ul?
 +
 
 +
In the next lesson, you will
 +
<ul><li>Set up the database connection
 +
<li>Create the database table
 +
<li>Create a Record part, retrieving most information from a database.
 +
</ul>
  
 
{| style="float: right"
 
{| style="float: right"
−
|-
+
|[[EDT:Tutorial: RUI With DataBase Lesson 1|&lt; Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 3|Next >]]
−
| [[EDT:Tutorial: RUI With DataBase Lesson 1|&lt; Previous]] &#124; [[EDT:Tutorial: RUI With DataBase Lesson 3|Next &gt;]]
+
 
|}
 
|}
 +
  
 
[[Category:EDT]]
 
[[Category:EDT]]

Revision as of 13:24, 23 November 2011

Access a database with EGL Rich UI


< Previous | Next >

Lesson 2: Set up the projects

An EGL application is organized in one or more projects, each of which is a physical folder in the workspace. A project contains an EGL source folder that is provided for you, and that folder contains one or more packages, which in turn contain EGL source files. This hierarchy is basic to your work in EGL: a project, then an EGL source folder, then a package with EGL source files.

The EGL source files include EGL parts, which are type definitions that you create. For example, a Service part contains logic, and a Record part can be the basis of a variable that you declare in your Service part.

Packages are important because they separate parts into different contexts, or namespaces:

  • A part name might be duplicated in two different packages, and any EGL source code can reference each part precisely. The main benefit of namespaces is that different teams can develop different EGL parts without causing name collisions.
  • Each part name in a given package is unique within that package:
    • A part in one package can easily reference another part in the same package by specifying the part name. For example, here is a declaration of a record that is based on the Record part MyRecordPart: myRecord MyRecordPart{};
    • A part in one package can also reference a part in a second package by giving the package name and part name, or by a shortcut that involves importing the part.

One project can reference the parts in a second project, but only if the EGL build path of the referencing project identifies the referenced project. Again, this tutorial gives examples. However, in all cases, avoid using the same package name in different projects, as that usage can cause problems in name resolution.

Your next task in this tutorial is to create the following projects:

PaymentShared
Holds parts used both on the Web client (the browser) by the handlers and on the Web application server by the EGL services.
PaymentService
Holds an EGL Service part and related definitions
PaymentClient
Holds the Rich UI handlers and related definitions

You can include all your code in a single project, but the separation shown here lets you easily deploy the two kinds of code in different ways.

Parts in one project can use parts in a different project. EGL uses a build path to search for unresolved references. Later in this lesson, you will add the PaymentService project to the build path for the PaymentClient project.

Create the PaymentShared project

  1. From the file menu,left clink on New and select the EGL > EGL Project wizard.
  2. On the EGL Project window, enter project name PaymentShared, select template basic, and left click on Next.Create PaymentShared EGL project
  3. On the EGL Settings window, accept the default values and left click on Finish.PaymentShared project EGL settings

EGL creates a project named PaymentShared. Note the folders inside the directory:

EGLSource
Put your packages and source files here.
EGLGen/JavaSource
EGL places the Java files it generates here.
JavaSource
Put any custom Java source files here. These files are not overwritten during the generation process.
JRE System Library
EGL uses this folder for JAR files that support the Java Runtime Environment.

The Project Explorer view shows the new project and folders.

Create the PaymentService project

To create an EGL service project:

  1. From the file menu,left clink on New and select the EGL > EGL Project wizard.
  2. On the EGL Project window, enter project name PaymentService, select template basic, and left click on Next.Create PaymentService EGL project
  3. On the EGL Settings window, check Override Generation Settings, uncheck JavaScript Generator and left click on Next.PaymentService project EGL settings
  4. On the EGL BuildPath window, check PaymentShared (the service project uses parts in the shared project) and left click on Finish.PaymentService project EGL build path

Create the PaymentClient project

An EGL Rich UI project includes many shortcuts to speed the development of a user interface for the web.

To create an EGL Rich UI project:

  1. From the file menu,left clink on New and select the EGL > EGL Project wizard.
  2. On the EGL Project window, enter project name PaymentClient, select template basis, and left click on Next.Create PaymentClient EGL project
  3. On the Web 2.0 Client Application Settings window, accept the default values and left click on Next.PaymentClient project Web settings
  4. On the EGL BuildPath window, check PaymentShared and PaymentService (the client project uses parts in the shared and service projects) and left click on Finish.PaymentClient project EGL build path

EGL creates a project named PaymentClient and adds support projects to the workspace for Rich UI, Dojo Widgets, and the Dojo runtime library. In addition to the directories that EGL created for the General project, a Rich UI project includes the following directory:

WebContent
Contains support files, such as cascading style sheets (CSS) and images.

The Project Explorer view shows the new project and folders.

When you first add a Rich UI project to your workspace, two other projects are added automatically:

  • org.eclipse.edt.rui.dojo_0.7.0
  • org.eclipse.edt.rui.widgets_0.7.0

These two projects contain widgets and other support files that you use in creating a Rich UI application.

Lesson checkpoint

In this lesson, you completed the following tasks:

  • Created an EGL project for developing parts used in both in the service and the RichUI application
  • Created an EGL project for developing a Rich UI application.
  • Modified the build descriptors in a build file; specifically, by adding database information from a connection definition in the workbench. </ul? In the next lesson, you will
    • Set up the database connection
    • Create the database table
    • Create a Record part, retrieving most information from a database.
    < Previous | Next >
Retrieved from "https://wiki.eclipse.org/index.php?title=EDT:Tutorial:_RUI_With_DataBase_Lesson_2&oldid=279665"

Back to the top