Jump to: navigation, search

Difference between revisions of "EDT:Tutorial: RUI With Database Introduction"

(Introduction)
 
(One intermediate revision by one other user not shown)
Line 5: Line 5:
 
|[[EDT:Tutorial: Access a database with EGL Rich UI|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 1|Next >]]
 
|[[EDT:Tutorial: Access a database with EGL Rich UI|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 1|Next >]]
 
|}
 
|}
= Introduction =
+
= Introduction =
  
 +
The following image shows the main page of the application that you will create:[[Image:EDT Tutorial edt richui sql11 finished ui.jpg|The finished page contains two widgets, one a list of all records, the second showing all fields for a selected record.]]
  
The following image shows the main page of the application
+
<br> The web page displays all rows in a database table and lets the user update each one. In addition, the user can add and delete rows.  
that you will create:[[Image:EDT_Tutorial_edt_richui_sql11_finished_ui.jpg|The finished page contains two widgets, one a list of all records, the second showing all fields for a selected record.]]
+
  
 +
The technology for developing the web page with EGL Rich UI involves several steps:
  
The
+
#You write the code.
web page displays all rows in a database table and lets the user update
+
#You generate the code and deploy it to another project in the workbench. At that point, the code that is destined for a browser is in HTML and JavaScript format; but other code is in Java format, as described later.
each one. In addition, the user can add and delete rows.
+
#You deploy all the code to a server such as Apache Tomcat.
 +
#The server transmits the HTML and JavaScript code to the user's browser.  
 +
#The application both presents data to the user and accesses services that run remotely on a server.
  
The
+
<br> A main benefit of EGL Rich UI is that users can interact with a responsive, local-running web application even as services do background work such as accessing a database.
technology for developing the web page with EGL Rich UI involves several
+
steps:
+
  
<ol><li>You write the code.
+
In this tutorial, the Rich UI application accesses a service that you write and deploy along with the Rich UI application. This kind of service is called an EGL ''dedicated service''. In general, you can use a dedicated service to do tasks that other EGL-generated Java services can do, such as accessing a database or file system. However, the dedicated service is not available to other code unless you redeploy it as an EGL-generated web service.  
<li>You generate the code and deploy it to another project in the
+
workbench. At that point, the code that is destined for a browser
+
is an HTML and JavaScript format;
+
but other code is in Java format,
+
as described later.  
+
<li>You deploy all the code to a server such as Apache Tomcat.
+
<li>The server transmits the HTML and JavaScript code to the user's browser.
+
<li>The application both presents data to the user and accesses services
+
that run remotely on a server.
+
</ol>
+
  
 +
The benefit of a dedicated service results from its shared deployment with the Rich UI application. If a Rich UI application accesses a web service, your deployment of the application typically requires that you specify the service location. However, if a Rich UI application accesses a dedicated service, your deployment of the application does not require the location detail. Instead, the service will be available wherever you deploy the Rich UI application.
  
A main benefit of EGL Rich UI is that users can interact
+
'''Note:''' Invocation of a dedicated service is slow in the Rich UI editor, but access is much faster when the application and services are deployed to a server.  
with a responsive, local-running web application even as services
+
do background work such as accessing a database.
+
  
In
+
== Time required  ==
this tutorial, the Rich UI application accesses a service that you
+
write and deploy along with the Rich UI application. This kind of
+
service is called an EGL ''dedicated service''. In general,
+
you can use a dedicated service to do tasks that other EGL-generated Java services can do, such as accessing
+
a database or file system. However, the dedicated service is not available
+
to other code unless you redeploy it as an EGL-generated web service.
+
  
The
+
This tutorial takes about 3 hours to finish. If you explore other concepts related to this tutorial, it might take longer to complete.  
benefit of a dedicated service results from its shared deployment
+
with the Rich UI application. If a Rich UI application accesses a
+
web service, your deployment of the application typically requires
+
that you specify the service location. However, if a Rich UI application
+
accesses a dedicated service, your deployment of the application does
+
not require the location detail. Instead, the service will be available
+
wherever you deploy the Rich UI application.
+
<p;>'''Note:''' Invocation of a dedicated service
+
is slow in the Rich UI editor, but access is much faster when the
+
application and services are deployed to a server.
+
  
 +
You can create the EGL files you need for this application in one of the following ways:
  
== Time required ==
+
*'''Line by line (most helpful) ''': Complete the individual lessons to explore the code in small, manageable chunks, learning important keywords and concepts. This method also requires the greatest time commitment.
 +
*'''Finished code files ''': At the end of each lesson in which you develop logic, you can link to the completed code, which you can copy into the Rich UI editor.
  
This tutorial takes about
+
== Skill level  ==
3 hours to finish. If you explore other concepts related to this tutorial,
+
it might take longer to complete.
+
  
You can create the EGL files
+
Introductory
you need for this application in one of the following ways:
+
  
<ul><li>''' Line by line (most helpful) ''': Complete the individual lessons
+
== Audience  ==
to explore the code in small, manageable chunks, learning important
+
keywords and concepts. This method also requires the greatest time
+
commitment.
+
<li>''' Finished code files ''': At the end of each lesson in which
+
you develop logic, you can link to the completed code, which you can
+
copy into the Rich UI editor.
+
</ul>
+
  
== Skill level ==
+
This tutorial is designed for people who know the basic concepts of programming and want experience with EGL Rich UI.  
Introductory
+
== Audience ==
+
This tutorial is designed for
+
people who know the basic concepts of programming and want experience
+
with EGL Rich UI.
+
== System requirements ==
+
To complete
+
this tutorial, you must have the following tools and components installed
+
on your computer:
+
  
<ul><li>A copy of the EGL Development Tools downloaded from the Eclipse EGL Development Tools project at http://eclipse.org/edt/.
+
== System requirements  ==
<li>A working Internet connection.
+
</ul>
+
  
== Prerequisites ==
+
To complete this tutorial, you must have the following tools and components installed on your computer:
  
You do not need any
+
*A copy of the EGL Development Tools downloaded from the Eclipse EGL Development Tools project at http://eclipse.org/edt/.
experience with EGL to complete this tutorial.
+
*A working Internet connection.
  
== Expected results ==
+
== Prerequisites  ==
  
You will create
+
You do not need any experience with EGL to complete this tutorial.  
a working Rich UI application and database-access service.
+
  
 +
== Expected results  ==
  
==== Lessons in this tutorial ====
+
You will create a working Rich UI application and database-access service.
  
 +
<br>
  
<ul>
+
==== Lessons in this tutorial  ====
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 1|Lesson 1: Plan the application]] '''<br>
+
 
Design your application on paper before you begin coding.
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 1|Lesson 1: Plan the application]] '''<br> Design your application on paper before you begin coding.  
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 2|Lesson 2: Connect to a new Derby database]] '''<br>
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 2|Lesson 2: Set up the projects]] '''<br> Create three EGL projects, one for your RUI client code, one for services code, and one for code shared by the other two projects.  
Use the Derby open source database manager to handle the
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 3|Lesson 3: Connect to a new Derby database]] '''<br> Use the Derby open source database manager to handle the data store for the application.  
data store for the application.
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 4|Lesson 4: Create the Rich UI handler]] '''<br> Start to build the handler by using EGL wizards and then the Rich UI editor.  
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 3|Lesson 3: Set up the projects and use the EGL SQL retrieve feature]] '''<br>
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 5|Lesson 5: Create the service]] '''<br> Create a dedicated service to access the database.  
Before you write your logic, create two EGL projects, as
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 6|Lesson 6: Add code for the service functions]] '''<br> In EGL, I/O statements such as '''add''' and '''get''' access data that resides in different kinds of persistent data storage, from file systems to queues to databases. The coding is similar for the different cases.  
well as a Record part that is based on the database table.
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 7|Lesson 7: Create a library of reusable functions]] '''<br> Create a library to format money values and to associate category numbers with descriptions.  
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 4|Lesson 4: Create the Rich UI handler]] '''<br>
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 8|Lesson 8: Add variables and functions to the Rich UI handler]] '''<br> Add source code that supports the user interface.  
Start to build the handler by using EGL wizards and then
+
*'''[[EDT:Tutorial: RUI With DataBase Lesson 9|Lesson 9: Complete the code that supports the user interface]] '''<br> Next, you will complete the single-row layout, as well as the code that supports the '''Clear''' and '''Save''' buttons.  
the Rich UI editor.
+
*'''[[EDT:Tutorial: RUI With Database Lesson 10|Lesson 10: Install Apache Tomcat]] '''<br> You can use Apache Tomcat to display the web page and to run the EGL-generated service.  
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 5|Lesson 5: Create the service]] '''<br>
+
*'''[[EDT:Tutorial: RUI With Database Lesson 11|Lesson 11: Deploy and test the payment application]] '''<br> During the deployment process, EGL creates HTML files and server-specific code to match your target environment.
Create a dedicated service to access the database.
+
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 6|Lesson 6: Add code for the service functions]] '''<br>
+
In EGL, I/O statements such as '''add''' and '''get''' access
+
data that resides in different kinds of persistent data storage, from
+
file systems to queues to databases. The coding is similar for the
+
different cases.
+
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 7|Lesson 7: Create a library of reusable functions]] '''<br>
+
Create a library to format money values and to associate
+
category numbers with descriptions.
+
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 8|Lesson 8: Add variables and functions to the Rich UI handler]] '''<br>
+
Add source code that supports the user interface.
+
<li>''' [[EDT:Tutorial: RUI With DataBase Lesson 9|Lesson 9: Complete the code that supports the user interface]] '''<br>
+
Next, you will complete the single-row layout, as well
+
as the code that supports the '''Clear''' and '''Save''' buttons.
+
<li>''' [[EDT:Tutorial: RUI With Database Lesson 10|Lesson 10: Install Apache Tomcat]] '''<br>
+
You can use Apache Tomcat to display the web page and to
+
run the EGL-generated service.
+
<li>''' [[EDT:Tutorial: RUI With Database Lesson 11|Lesson 11: Deploy and test the payment application]] '''<br>
+
During the deployment process, EGL creates HTML files and
+
server-specific code to match your target environment.
+
</ul>
+
  
 
{| style="float: right"
 
{| style="float: right"
|[[EDT:Tutorial: Access a database with EGL Rich UI|&lt; Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 1|Next >]]
+
|-
 +
| [[EDT:Tutorial: Access a database with EGL Rich UI|&lt; Previous]] &#124; [[EDT:Tutorial: RUI With DataBase Lesson 1|Next &gt;]]
 
|}
 
|}
 +
  
  
 
[[Category:EDT]]
 
[[Category:EDT]]

Latest revision as of 13:24, 5 July 2012

Access a database with EGL Rich UI


< Previous | Next >

Introduction

The following image shows the main page of the application that you will create:The finished page contains two widgets, one a list of all records, the second showing all fields for a selected record.


The web page displays all rows in a database table and lets the user update each one. In addition, the user can add and delete rows.

The technology for developing the web page with EGL Rich UI involves several steps:

  1. You write the code.
  2. You generate the code and deploy it to another project in the workbench. At that point, the code that is destined for a browser is in HTML and JavaScript format; but other code is in Java format, as described later.
  3. You deploy all the code to a server such as Apache Tomcat.
  4. The server transmits the HTML and JavaScript code to the user's browser.
  5. The application both presents data to the user and accesses services that run remotely on a server.


A main benefit of EGL Rich UI is that users can interact with a responsive, local-running web application even as services do background work such as accessing a database.

In this tutorial, the Rich UI application accesses a service that you write and deploy along with the Rich UI application. This kind of service is called an EGL dedicated service. In general, you can use a dedicated service to do tasks that other EGL-generated Java services can do, such as accessing a database or file system. However, the dedicated service is not available to other code unless you redeploy it as an EGL-generated web service.

The benefit of a dedicated service results from its shared deployment with the Rich UI application. If a Rich UI application accesses a web service, your deployment of the application typically requires that you specify the service location. However, if a Rich UI application accesses a dedicated service, your deployment of the application does not require the location detail. Instead, the service will be available wherever you deploy the Rich UI application.

Note: Invocation of a dedicated service is slow in the Rich UI editor, but access is much faster when the application and services are deployed to a server.

Time required

This tutorial takes about 3 hours to finish. If you explore other concepts related to this tutorial, it might take longer to complete.

You can create the EGL files you need for this application in one of the following ways:

  • Line by line (most helpful) : Complete the individual lessons to explore the code in small, manageable chunks, learning important keywords and concepts. This method also requires the greatest time commitment.
  • Finished code files : At the end of each lesson in which you develop logic, you can link to the completed code, which you can copy into the Rich UI editor.

Skill level

Introductory

Audience

This tutorial is designed for people who know the basic concepts of programming and want experience with EGL Rich UI.

System requirements

To complete this tutorial, you must have the following tools and components installed on your computer:

  • A copy of the EGL Development Tools downloaded from the Eclipse EGL Development Tools project at http://eclipse.org/edt/.
  • A working Internet connection.

Prerequisites

You do not need any experience with EGL to complete this tutorial.

Expected results

You will create a working Rich UI application and database-access service.


Lessons in this tutorial

< Previous | Next >