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"

m
 
(24 intermediate revisions by 2 users not shown)
Line 10: Line 10:
 
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.  
 
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.  
+
The EGL source files include EGL <span style="font-style: italic;">custom type</span>''s'', which are type definitions that you create. For example, a Service type contains logic, and a Record type can be the basis of a variable that you declare in your Service type.  
  
Packages are important because they separate parts into different contexts, or ''namespaces'':  
+
Packages are important because they separate types 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.  
+
*A type name might be duplicated in two different packages, and any EGL source code can reference each type precisely. The main benefit of namespaces is that different teams can develop different EGL types without causing name collisions.  
*Each part name in a given package is unique within that package:  
+
*Each type 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 type in one package can easily reference another type in the same package by specifying the type name. For example, here is a declaration of a record that is based on the Record type named '''MyRecordType''': myRecord MyRecordType{};  
**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.
+
**A type in one package can also reference a type in a second package by giving the package name and type name, or by a shortcut that involves importing the type.
  
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.  
+
One project can reference the types 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:  
+
Your next task in this tutorial is to create the following projects:<br>  
 
+
<br>  
+
  
 
;PaymentService  
 
;PaymentService  
:Holds an EGL Service part and related definitions  
+
:Holds an EGL Service type and related definitions  
 
;PaymentClient  
 
;PaymentClient  
:Holds the Rich UI handlers and related definitions  
+
:Holds the Rich UI Handler types and related definitions  
 
;PaymentShared  
 
;PaymentShared  
:Holds parts used both on the Web client (the browser) by the handlers and on the Web application server by the EGL services.
+
:Holds types used both on the Web client (the browser) by the handlers and on the Web application server by the EGL services.
  
 
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.  
 
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 service project to the build path for the client project and the shared project to the build path for both the service and client projects.  
+
Types in one project can use types in a different project. EGL uses a ''build path'' to search for unresolved references. Later in this lesson, you will add the service project to the build path for the client project and the shared project to the build path for both the service and client projects.  
  
 
== Create the PaymentShared project  ==
 
== Create the PaymentShared project  ==
  
To create the shared parts project:  
+
To create the project that contains shared types:  
  
 
#If you have been working with EGL in the current workspace, click '''File &gt; New''' '''&gt; EGL Project'''. If you have not been working with EGL, you might need to click '''File &gt; New''' '''&gt; Other''' and then expend '''EGL''' and click '''EGL Project'''. <br>  
 
#If you have been working with EGL in the current workspace, click '''File &gt; New''' '''&gt; EGL Project'''. If you have not been working with EGL, you might need to click '''File &gt; New''' '''&gt; Other''' and then expend '''EGL''' and click '''EGL Project'''. <br>  
Line 48: Line 46:
 
;EGLSource  
 
;EGLSource  
 
:Put your packages and source files here.  
 
:Put your packages and source files here.  
 +
;EDT System Libraries
 +
:Access the read-only type definitions that are already provided.
 
;src  
 
;src  
 
:Put any custom Java source files here. These files are not overwritten during the generation process.  
 
:Put any custom Java source files here. These files are not overwritten during the generation process.  
Line 53: Line 53:
 
:EGL uses this folder for JAR files that support the Java Runtime Environment.
 
:EGL uses this folder for JAR files that support the Java Runtime Environment.
  
Once you add your first EGL program, the following additional directories will be added automatically  
+
Once you add your first EGL program, the following additional directories will be added automatically:
  
 
;generatedJava  
 
;generatedJava  
Line 67: Line 67:
  
 
#Click '''File &gt; New''' '''&gt; EGL Project'''.  
 
#Click '''File &gt; New''' '''&gt; EGL Project'''.  
#On the '''EGL Project''' window, enter project name '''PaymentService''', click template <span style="font-weight: bold;">B</span>'''asic''', and click '''Next'''.<br>  
+
#On the '''EGL Project''' window, enter project name '''PaymentService''', click template <span style="font-weight: bold;">B</span>'''asic''' and then '''Next'''.<br>  
 
#On the '''EGL Settings''' window, check '''Override Generation Settings''', uncheck '''JavaScript Generator''', and click '''Next'''.<br>[[Image:EDT Tutorial edt richui sql02 service project settings.jpg|PaymentService project EGL settings]]  
 
#On the '''EGL Settings''' window, check '''Override Generation Settings''', uncheck '''JavaScript Generator''', and click '''Next'''.<br>[[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) <br>and click '''Finish'''.<br>[[Image:EDT Tutorial edt richui sql02 service project EGL path.jpg|PaymentService project EGL build path]]
+
#On the '''EGL BuildPath''' window, check '''PaymentShared''' (the service project uses types in the shared project) <br>and click '''Finish'''.<br>[[Image:EDT Tutorial edt richui sql02 service project EGL path.jpg|PaymentService project EGL build path]]  
 +
#Change In the '''Java Build Path''', add PaymentShared as the required project. <br>[[Image:EDT Tutorial edt richui sql02 service project Java build path.JPG|PaymentService project Java build path]]
 +
 
 +
::<br>This step ensures that the output generated for PaymentService will be able to access the output generated for PaymentShared.
  
 
== Create the PaymentClient project  ==
 
== Create the PaymentClient project  ==
Line 80: Line 83:
 
#On the '''EGL Project''' window, enter project name '''PaymentClient''', click template '''Web 2.0 client application''', <br>and click '''Next'''.<br>[[Image:EDT Tutorial edt richui sql02 create client project.jpg|Create PaymentClient EGL project]]  
 
#On the '''EGL Project''' window, enter project name '''PaymentClient''', click template '''Web 2.0 client application''', <br>and click '''Next'''.<br>[[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 click '''Next'''.[[Image:EDT Tutorial edt richui sql02 client project web settings.jpg|PaymentClient project Web settings]]  
 
#On the '''Web 2.0 Client Application Settings''' window, accept the default values and click '''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]]
+
#On the '''EGL BuildPath''' window, check '''PaymentShared''' and '''PaymentService''' (the client project uses types in the shared and service projects) and left click on '''Finish'''.<br>[[Image:EDT Tutorial edt richui sql02 service project EGL path(new).JPG|PaymentClient project EGL build path]]
 +
#Configure the '''Java Build Path''' of the project by adding the required service project.
 +
 
 +
    [[Image:EDT Tutorial edt richui sql02 service project Java build path2.JPG|Configure Java Build Path]]  
  
 
EGL creates a project named '''PaymentClient'''. When you first add a Rich UI project to your workspace, two other projects are added automatically:  
 
EGL creates a project named '''PaymentClient'''. 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_''versionNumber''; and
*org.eclipse.edt.rui.widgets_0.7.0
+
*org.eclipse.edt.rui.dojo.remote_''versionNumber'' or (if you are developing a mobile application) org.eclipse.edt.rui.dojo.mobile.widgets_''versionNumber&nbsp;''.
  
These two projects contain widgets and other support files that you use in creating a Rich UI application.  
+
The two projects provide access to widgets and other definitions that you use when creating a Rich UI application.  
  
In addition to the directories that EGL created for the basic project, a Web 2.0 project includes the following directory:  
+
The folder structure for the '''PaymentClient''' project includes the '''WebContent''' directory, which contains support files such as cascading style sheets (CSS) and images:<br>
  
<br>  
+
[[Image:EDT Tutorial edt richui sql03 explore.jpg|The Project Explorer view shows the new project and folders.]]<br>  
  
;WebContent
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>
:Contains support files, such as cascading style sheets (CSS) and images. <br>
+
 
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[Image:EDT Tutorial edt richui sql03 explore.jpg|The Project Explorer view shows the new project and folders.]]
+
 
+
<br>  
+
  
 
== Lesson checkpoint  ==
 
== Lesson checkpoint  ==
Line 104: Line 105:
 
In this lesson, you completed the following tasks:  
 
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 types that are used in both in the service and the Rich UI application  
 
*Created an EGL project for the services used in the application  
 
*Created an EGL project for the services used in the application  
 
*Created an EGL project for Web 2.0 Rich UI pages to be used in the application
 
*Created an EGL project for Web 2.0 Rich UI pages to be used in the application
Line 112: Line 113:
 
*Set up the database connection  
 
*Set up the database connection  
 
*Create the database table  
 
*Create the database table  
*Create a Record part, retrieving most information from a database.
+
*Create a Record type, retrieving most information from a database.
  
{| class="FCK__ShowTableBorders" style="float: right;"
+
{| style="float: right;" class="FCK__ShowTableBorders"
 
|-
 
|-
 
| [[EDT:Tutorial: RUI With DataBase Lesson 1|&lt; Previous]] &#124; [[EDT:Tutorial: RUI With DataBase Lesson 3|Next &gt;]]
 
| [[EDT:Tutorial: RUI With DataBase Lesson 1|&lt; Previous]] &#124; [[EDT:Tutorial: RUI With DataBase Lesson 3|Next &gt;]]

Latest revision as of 16:56, 5 July 2012

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 custom types, which are type definitions that you create. For example, a Service type contains logic, and a Record type can be the basis of a variable that you declare in your Service type.

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

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

One project can reference the types 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:

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

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.

Types in one project can use types in a different project. EGL uses a build path to search for unresolved references. Later in this lesson, you will add the service project to the build path for the client project and the shared project to the build path for both the service and client projects.

Create the PaymentShared project

To create the project that contains shared types:

  1. If you have been working with EGL in the current workspace, click File > New > EGL Project. If you have not been working with EGL, you might need to click File > New > Other and then expend EGL and click EGL Project.
  2. On the EGL Project window, enter project name PaymentShared, click template Basic, and click Next.
    Create PaymentShared EGL project
  3. On the EGL Settings window, accept the default values and click Finish.
    PaymentShared project EGL settings

EGL creates a project named PaymentShared. Note the folders inside the directory:
            The Project Explorer view shows the new project and folders.

EGLSource
Put your packages and source files here.
EDT System Libraries
Access the read-only type definitions that are already provided.
src
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.

Once you add your first EGL program, the following additional directories will be added automatically:

generatedJava
EGL places the Java files it generates here.
EDT Java runtime
EGL uses this folder for JAR files that support the EDT Java Runtime Environment.


Create the PaymentService project

To create an EGL service project:

  1. Click File > New > EGL Project.
  2. On the EGL Project window, enter project name PaymentService, click template Basic and then Next.
  3. On the EGL Settings window, check Override Generation Settings, uncheck JavaScript Generator, and click Next.
    PaymentService project EGL settings
  4. On the EGL BuildPath window, check PaymentShared (the service project uses types in the shared project)
    and click Finish.
    PaymentService project EGL build path
  5. Change In the Java Build Path, add PaymentShared as the required project.
    PaymentService project Java build path

This step ensures that the output generated for PaymentService will be able to access the output generated for PaymentShared.

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. Click File > New > EGL Project.
  2. On the EGL Project window, enter project name PaymentClient, click template Web 2.0 client application,
    and click Next.
    Create PaymentClient EGL project
  3. On the Web 2.0 Client Application Settings window, accept the default values and click Next.PaymentClient project Web settings
  4. On the EGL BuildPath window, check PaymentShared and PaymentService (the client project uses types in the shared and service projects) and left click on Finish.
    PaymentClient project EGL build path
  5. Configure the Java Build Path of the project by adding the required service project.
    Configure Java Build Path 

EGL creates a project named PaymentClient. When you first add a Rich UI project to your workspace, two other projects are added automatically:

  • org.eclipse.edt.rui.widgets_versionNumber; and
  • org.eclipse.edt.rui.dojo.remote_versionNumber or (if you are developing a mobile application) org.eclipse.edt.rui.dojo.mobile.widgets_versionNumber .

The two projects provide access to widgets and other definitions that you use when creating a Rich UI application.

The folder structure for the PaymentClient project includes the WebContent directory, which contains support files such as cascading style sheets (CSS) and images:

The Project Explorer view shows the new project and folders.

     

Lesson checkpoint

In this lesson, you completed the following tasks:

  • Created an EGL project for developing types that are used in both in the service and the Rich UI application
  • Created an EGL project for the services used in the application
  • Created an EGL project for Web 2.0 Rich UI pages to be used in the application

In the next lesson, you will

  • Set up the database connection
  • Create the database table
  • Create a Record type, retrieving most information from a database.
< Previous | Next >

Back to the top