Oracle APEX Tutorial for Beginners (APEX 5.0)

1- Introduction

In this document, I will instruct you to work with Oracle Application Express (Oracle APEX) 5.x:
You can see instruction document of installing and configuring Oracle APEX on:

2- Create Workspace

First, you need to log in the administration system of Oracle APEX in order to declare a Workspace. A Workspace will work with a SCHEME in
database. Workspace contains Applications (including a system of forms, reports, and so on), managing users who participate in programming, or users who use the application.
You need to create new Workspace:
Enter:
  • Workspace Name: DEV_WORKSPACE
  • Workspace ID: 1234567

type=i&imageId=361326" style="max-width:100%">

You can select a SCHEMA available in Database. Here I create a new SCHEMA named DEV with password dev123.
In the previous step, you created a SCHEMA named DEV. It means 1 user database is created and named DEV.



In this step, you need to declare a administration User of Workspace. It is not a user database, but it is a administration user of this Workspace. It is capable of creating applications, other Users
as programmers, or users who use the application... 

type=i&imageId=361374" style="max-width:100%">

type=i&imageId=361396" style="max-width:100%">

type=i&imageId=361402" style="max-width:100%">

Your Workspace has been created. You can see the list of current Workspace and edit if you want.

3- Work with Workspace

In the above step, you created a Workspace named DEV_WORKSPACE. Now we will log in and work with this Workspace.
Enter:
  • Workspace: DEV_WORKSPACE
  • User Name: devadmin
  • Password: devadmin123
In the first time of logging in Workspace, the system require you to change your password, but you can keep your password intact.
You are logged in DEV_WORKSPACE Workspace.

4- User and Group Management in Workspace

After logging in  Workspace as an acting admin, you can create users and groups for Workspace.

type=i&imageId=361494" style="max-width:100%">

type=i&imageId=361498" style="max-width:100%">

Enter:

type=i&imageId=361508" style="max-width:100%">

User dev01 has been created.

type=i&imageId=361530" style="max-width:100%">

Now you can log out the system in order to log in with user dev01. You are now ready for programming Oracle APEX.

type=i&imageId=361540" style="max-width:100%">

5- View table and data

You need to log in with a user as the role of a programmer.

type=i&imageId=361552" style="max-width:100%">

Look at Objects in Schema through Object Browser.
In the previous step, you created Schema DEV through Oracle APEX. This schema currently has system tables and some DEMO tables available in  Oracle APEX,
and some related Sequences.

6- Create Application

In Oracle APEX, you can create an application in accordance with one of three types:
  1. Desktop Application
  2. Websheet Application
  3. Mobile Application
For a beginner Oracle APEX,  it is best to have an example with Database Desktop Application. In fact, this application still runs on the web but its interface
is quite similar to a typical Desktop application.
In this document, I instruct you to create a Hello World Oracle Apex application in form of Database Desktop Application.

6.1- Create Database Desktop Application

Create new Database Desktop Application:

type=i&imageId=444042" style="max-width:100%">

Click button to create a new application:
Enter the name of the application:
  • Hello Database Desktop Application

type=i&imageId=444071" style="max-width:100%">

By default, Home page is created simultaneously with the application. You can add other pages into the application by clicking "Add Page". It is best to add them later.
Your application has been created. Its ID is 115 and it has two Login & Home pages.
Currently, Home page has not been designed. However, you can click on the icon  to test the web.

type=i&imageId=444270" style="max-width:100%">

6.2- Create your first page

Next, we add a page displaying a list of departments (DEPT Table) and a page used to create and edit the information of departments. To be simple, we create this page in form of an available Template
of Oracle APEX. In the next part, I will instruct you to create a new page from a blank page so that you can thoroughly understand the issue.
Select  "Form on a Table with Report". To this template, Oracle APEX will provide you with two pages which include a page of list of departments (DEPT) and a form
of creating (and edit) information of departments.
First,  Oracle APEX requires you to enter the information for the page containing the list of departments (DEPT). Page ID is an important attribute you have to remember. I grant
2 to ID of this page. (Note: Home page's ID is 1).
Select DEPT table:

type=i&imageId=444645" style="max-width:100%">

Enter Menu:
  • New Navigation Menu Entry: Dept List (2)
Choose columns to display:
Next, enter the information of Form page. Here I grant 3 for Page ID.

Page Mode:

  • Normal: It means when you click on creating a new department, the web will move to a new page so that you can enter the information of the department.
  • Model Dialog: It means when you click on creating a new department, a Dialog will display  so that you can enter the information.
Select Primary Key Column:

type=i&imageId=444698" style="max-width:100%">

When you create a new DEPT record, DEPTNO column will be automatically granted for a value by DEPT_SEQ sequence.

type=i&imageId=444712" style="max-width:100%">

type=i&imageId=444715" style="max-width:100%">

type=i&imageId=444723" style="max-width:100%">

Two pages have been created. First, have a trial run.

type=i&imageId=444807" style="max-width:100%">

OK, everything is perfect. Return to design screen to discover what Oracle APEX has created.

type=i&imageId=444840" style="max-width:100%">

Oracle APEX creates two pages in form of "Interactive Report" and "DML Form".
Click "Form on DEPT (3)" to edit.

type=i&imageId=444978" style="max-width:100%">

In the above illustrative image, you will see the design desktop is divided into three parts:

  1. Items of the page, including Regions, Buttons, and Processing.
  2. Interface of the page. A page usually has six regions:
    • PAGE HEADER
    • PAGE NAVIGATION
    • BREADCRUMB BAR
    • CONTENT BODY
    • FOOTER
    • INLINE DIALOGS

3. When you select a item of the page as mentioned in part 1, its attributes will display in part 3 (this region).

Example: You click on PAGE item,change the attribute of Page Mode into "Model Dialog", and click on save as the following illustrative image:

type=i&imageId=445001" style="max-width:100%">

And rerun this page.
A Dialog will be opened and it allows you to enter the information of a new department.

type=i&imageId=445033" style="max-width:100%">

6.3- Create a page from scratch

In the above parts, I introduced you how to quickly create a web with processing codes automatically created by  Oracle APEX. In order to understand  Oracle APEX much
more, in this part, I will recreate the above example from scratch without using available templates of  Oracle APEX
This is the model of 2 pages I will create:

type=i&imageId=445075" style="max-width:100%">

  • Create Page

type=i&imageId=463187" style="max-width:100%">

Select blank page:

type=i&imageId=463205" style="max-width:100%">

Page list of departments (DEPT) will be put on the menu.

type=i&imageId=463216" style="max-width:100%">

type=i&imageId=463223" style="max-width:100%">

A blank page was created. We create the shown list of departments, this region will be included in "Content Body" section.

type=i&imageId=463373" style="max-width:100%">

A new region has been created:

type=i&imageId=463382" style="max-width:100%">

Enter information into the region you create:
  1. Title: Dept List
  2. Type: Interactive Report
  3. Source SQL Query: Select DEPTNO, DNAME, LOC from DEPT
  4. SAVE
Now you can press the RUN (), for testing

type=i&imageId=463640" style="max-width:100%">

You need to add a column that contains editing icons, as shown below:
Choose Node Attributes in "Dept List" section. And setting the properties as shown below:

type=i&imageId=463678" style="max-width:100%">

With:

  • Link Column = Link to Single Row View

That means that when you click on the icon view (modify) records, the application will jump to a default page (displays record information)



If you want to jump to his customizable page you can set up (which will be discussed later).

  • Link Column = Link to Custom Target
Rerun this page:

type=i&imageId=463718" style="max-width:100%">

Web page will turn to a default page, and show information that you have selected.

Form

Next, we create a Form page, when you click to modify or create a department, it will turn to this page.

type=i&imageId=463791" style="max-width:100%">

type=i&imageId=463842" style="max-width:100%">

Một trang trắng đã được tạo ra, chúng ta sẽ tạo một vùng chứa form.
Enter informations for new creating region:
  • Title: Form on Dept
  • Type: Static Content
Note: With type of "Region Type = Static Content". You need to create Items in this region, and write display processing and handling (insert, update, delete) data to DB. 
We will create three fields:
  • Hidden: DEPTNO
  • Text Field: DNAME
  • Text Field: LOC
Drag and drop an Hidden item into ITEMS area as shown below:
Setting properties for Item:

type=i&imageId=571210" style="max-width:100%">

Similarly create 2 TEXT-FIELD:

type=i&imageId=464027" style="max-width:100%">

Testting:
The user selects a record on list (page 4) to modify, it will be turned to Form page (page 5) and pass ID of record. You need to make a Process (On Pre-Rendering) on page 5 to load data and shown
on Form:

type=i&imageId=571219" style="max-width:100%">

Make a process in:

  • Pre-Rendering/After Header

This process will be called before the page is shown.

type=i&imageId=464156" style="max-width:100%">

Enter:
  • Name: Fetch/load row From DEPT
  • Type: Automatic Row Fetch
  • Table Name: DEPT
  • Primary Key Column: DEPTNO
  • Primary Key Item: P5_DEPTNO

type=i&imageId=464183" style="max-width:100%">

Turn back page 4 (Dept List (4)) for configuration transmits parameters from page 4 to page 5.

type=i&imageId=464238" style="max-width:100%">

Save and test page:

type=i&imageId=464247" style="max-width:100%">

Next, we add new creating functions and Save record as shown below:
On page 4:
Next Jump to page 5.
Kéo thả các Button vào các vị trí trên màn hình thiết kế như hình minh họa dưới đây:

type=i&imageId=470984" style="max-width:100%">

When you click CANCEL on page 5, the website will go to page 4.
Setting properties for CANCEL button:
  • Button Name: CANCEL
  • Label: Cancel
  • Action: Redirect to Page in this Application

type=i&imageId=471178" style="max-width:100%">

type=i&imageId=471181" style="max-width:100%">

  • DELETE_IMMEDIATELY

When click button DELETE_IMMEDIATELY, record will be delete without prompting. We'll setting attributes for this button:
  • Button Name: DELETE_IMMEDIATELY
  • Label: Delete (Immediately)
  • Action: Submit Page
  • Database Action: SQL DELETE Action
This button will show up if the P5_DEPTNO not null:
  • Condition Type: Item not null
  • Condition Item: P5_DEPTNO

type=i&imageId=471246" style="max-width:100%">

  • DELETE_CONFIRM

When click this button, the application ask user whether want to delete this record or not. 

Set up attributes for DELETE_CONFIRM button:
  • Button Name: DELETE_CONFIRM
  • Label: Delete (confirm)
  • Action: Redirect to URL
  • Target: javascript:apex.confirm('Are you sure?','DELETE_CONFIRM');
  • Database Action: SQL DELETE action
Condition for this button appear on page.
  • Condition Type: Item is NOT NULL
  • Condition Item: P5_DEPTNO
Note:



apex.confirm (text, BUTTON_NAME)
 is an available javascript function on APEX, it will display a Dialog requires user confirm action before executing definition action on BUTTON_NAME.



This button will appear on web page when P5_DEPTNO is not null. 
You can also define a javacript variable and use it on whole web page.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//
Declare a variable named htmldb_delete_message
varhtmldb_delete_message='Would
you like to perform this delete action?

';

 
//
Or:
//
"DELETE_CONFIRM_MSG" is a constant available in APEX.
//
It has value: Would you like to delete this thực action?
 
 
varhtmldb_delete_message='"DELETE_CONFIRM_MSG"';
 
 
//
Then can use this variable in the whole page.
 
apex.confirm(htmldb_delete_message,'DELETE_CONFIRM');

type=i&imageId=474968" style="max-width:100%">

  • SAVE_EDIT

This button will shown for user to modify available record on DB (make an Update order on DB).
  • Button Name: SAVE_EDIT
  • Label: Save (edit)
  • Action: Submit Page
  • Database Action: SQL UPDATE action
Condition for this button display on page. 
  • Condition Type: Item is NOT NULL
  • Condition Item: P5_DEPTNO

type=i&imageId=474851" style="max-width:100%">

  • SAVE_CREATE

  • Button Name: SAVE_CREATE
  • Label: Save (create)
  • Action: Submit Page
  • Database Action: SQL INSERT action
  • Condition
    • Type: Item is NULL
    • Item: P5_DEPTNO
  • Process

Next, we add 3 Process:

  1. Get PK: Check P5_DEPTNO has assigned value or not, if not, we will assign the value for it from DEPT_SEQ (Use in case of Save Insert).
  2. Process Row of Dept: Execute actions (Insert, Update, or Delete).
  3. Reset Page: Delete statuses.

type=i&imageId=469999" style="max-width:100%">

Create a new process named "Get PK", and enter attribute values:
  • Name: Get PK
  • Type: PL/SQL Code
  • PL/SQL Code:
?
1
2
3
4
5
6
7
begin
    if
:P5_DEPTNO
isnullthen
        selectDEPT_SEQ.nextval
          into:P5_DEPTNO
          fromdual;
    endif;
end;
Next, you create the Processer "Process Row of DEPT" with attributes:
  • Name: Process Row of DEPT
  • Type: Automatic Row Processing (DML)
  • Table Name: DEPT
  • Primary Key Column: DEPTNO
  • Primary Key Item: P5_DEPTNO
  • Support Operations:
    • Insert
    • Update
    • Delete
Next, you create process "Reset page" and attribute configuration "Only used for deleting record" for it.



Conditions for this process to be executed is the request that contains word "DELETE", it means that it will be executed when you click DELETE_IMMIDIATELY or DELETE_CONFIRM button.
After the process is completed (Insert, update, delete) on page 5, to turn back page 4, you need a processing in "After Processing"

type=i&imageId=475067" style="max-width:100%">

type=i&imageId=475078" style="max-width:100%">

Now, You can Save the changes in design screen and try the application: 

type=i&imageId=475337" style="max-width:100%">

7- Oracle APEX Programming Tutorial (continue)

You can read more document:

[精]Oracle APEX 5.0 入门教程(一) Form表单的更多相关文章

  1. Solr7.3.0入门教程,部署Solr到Tomcat,配置Solr中文分词器

    solr 基本介绍 Apache Solr (读音: SOLer) 是一个开源的搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现.Apache ...

  2. 天河微信小程序入门《四》:融会贯通,form表单提交数据库

    天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

  3. Laravel教程 七:表单验证 Validation

    Laravel教程 七:表单验证 Validation 此文章为原创文章,未经同意,禁止转载. Laravel Form 终于要更新这个Laravel系列教程的第七篇了,期间去写了一点其他的东西. 就 ...

  4. Laravel教程 六:表单 Forms

    Laravel教程 六:表单 Forms 此文章为原创文章,未经同意,禁止转载. Form laravel 5.2 之后请使用 laravelcollective/html 替换 illuminate ...

  5. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  6. SpringMVC.入门篇《二》form表单

    SpringMVC.入门篇<二>form表单 项目工程结构: 在<springmvc入门篇一.HelloWorld>基础上继续添加代码,新增:FormController.ja ...

  7. Bootstrap入门(五)表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  8. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  9. Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)

    一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...

随机推荐

  1. wampserver -- 解决Exception Exception in module wampmanager.exe at 000F15A0

    Learn from: http://hi.baidu.com/spt_form/item/4b4533476c3b92a6de2a9f78 系统:windows2003 32bit wampserv ...

  2. hdu 5195 DZY Loves Topological Sorting 线段树+拓扑排序

    DZY Loves Topological Sorting Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/sho ...

  3. Delphi XE 4,Rad Studio XE 4 官方下载,更新Update 1(附破解)

    http://blog.csdn.net/maxwoods/article/details/8842889 XE4 Update1 下载: http://altd.embarcadero.com/do ...

  4. windows样式(style)参考

    [WTL] 窗体Style的含义比较有用的设置:(1)WS_POPUP:弹出式窗体,没有标题栏!WS_BORDER:细的黑边框WS_OVERLAPPED:一般的有标题栏的窗体,见多了.WS_CHILD ...

  5. Windows 配置 Apache Python CGI

    提示:安装Apache可参考 https://jingyan.baidu.com/article/0eb457e53c019f03f1a905c7.html 1.  打开URL: https://ww ...

  6. 空间索引网格大小无效的解决方法The spatial index grid size is invalid

    原名引至:http://www.cnblogs.com/linhugh/archive/2012/07/24/2606439.html   之前在做shp数据导入Geodatabase中时,程序运行出 ...

  7. Arcgis license 服务无法启动的解决问题

    来自:http://blog.csdn.net/u013719339/article/details/51240312 1.检查服务开没开.打开资源管理器然后按照下面就出现了.也可以打开运行——ser ...

  8. 百度地图js小结

    1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...

  9. 用C#调用Windows API向指定窗口发送按键消息 z

    用C#调用Windows API向指定窗口发送 一.调用Windows API. C#下调用Windows API方法如下: 1.引入命名空间:using System.Runtime.Interop ...

  10. js 中三层引号问题

    方式1: '[{"Company": "XYZ","Description": "\"TEST\"" ...