Use Plugin Code Editor - Part 1/4: Demo

If you want to use Code Editor plugin in Oracle APEX internal applications, you need 6 steps below to make it happen from scratch.

• get an application with f4000 theme (see Use Theme: APEX 5.0)
• import f4000 to your APEX and export plugin "Code Editor"
• create test pages using Code Editor
• detect and add missed CSS and JavaScript files
• grant corresponding privilege to application parsing schema
• check issues and fix
• rock and roll

Note: Here using internal Theme APEX5.0 is not mandatory but it's helpful from scratch.

Now, you could jump over these steps,  import my demo applications and start you work with Code Editor.

Demo

If you find page loading without GIFs, please click HD GIFs link below (Due to the GIF size, it will take a while to load.):

• Native
• Hybrid
• Migrated

Native

Main features:

• theme APEX 5.0 supported
• all item type Code Editor plugins
• with 9 supported code modes
• with 11 items based on supported modes (PL/SQL Expression and Function Body support two return types)
• item binding validations
• not null check
• max length check
• syntax check for supported code modes
• expand to dialog and restore
• select and update

Hybrid

Main features:

• theme APEX 5.0 supported
• Hybrid Code Editor plugins
• 9 item type Code Editor plugins
• 2 region type CLOB Code Editor plugins
• with 9 supported code modes
• validation
• syntax check for supported code modes from toolbar and after submit
• expand to dialog and restore
• select and update

Migrated

For migrated demo, there are 3 pages. 

• "Native - Migrated" page is a copy from Native page but using theme 42
• "Hybrid - Migrated" page is a copy from Hybrid page but using theme 42
• "Editor to Textarea" page is a copy from "Native - Migrated" but using textarea to replace item type plugin

Main features:

• theme 42 supported
• resize when navigation menu collapse or expand
• Editor to Textarea specific
• not-null check
• max-length check
• syntax check for supported code modes

Code

All demo page source code can be found in my github repo Use-APEX-Plugin-Code-Editor.

• 5.1.0 Plugin CodeEditor Demo - Migrated.sql: Migrated demo app exported from APEX 5.1.0 
• 5.1.0 Plugin CodeEditor Demo Login.sql: Login app exported from APEX 5.1.0 
• 5.1.0 Plugin CodeEditor Demo.sql: Demo app exported from APEX 5.1.0
• 5.1.1 Plugin CodeEditor Demo - Migrated.sql: Migrated demo app exported from APEX 5.1.1
• 5.1.1 Plugin CodeEditor Demo Login.sql: Login app exported from APEX 5.1.1
• 5.1.1 Plugin CodeEditor Demo.sql: Demo app exported from APEX 5.1.1

How to start

After import, please grant privileges below to your application parsing schema.

-- adjust to proper apex schema
grant execute on apex_050100.wwv_flow_f4000_plugins to &owner;   -- for plugin rendering
grant execute on apex_050100.wwv_flow_f4000_util to &owner;      -- for syntax check

See more

• Use Plugin Code Editor - Part 1/4: Demo
• Use Plugin Code Editor - Part 2/4: Intro
• Use Plugin Code Editor - Part 3/4: Custom
• Use Plugin Code Editor - Part 4/4: Retrospect