FOEX First Steps First Steps.pdfThe!FOEXDeveloper!Addon!(FDA)!is!aBrowser!Extension!for!Firefox!or!Google!Chrome!that ... ClickonFOEXTemplate%Application%–%Theme%24!! 5

First Steps

Release 1.1.0

February 2013

FOEX First Steps, Release 1.1.0 Copyright © 2013, FOEX GmbH. All rights reserved. Authors: Peter Raganitsch, Matt Nolan This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or de-‐compilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error-‐free. If you find any errors, please report them to us in writing.

Contents ABOUT ............................................................................................................................................ 4 REQUIREMENTS .............................................................................................................................. 4 INSTALLING THE FOEX DEVELOPER ADDON ..................................................................................... 5

INSTALL FDA ON FIREFOX ......................................................................................................................... 5 INSTALL FDA ON GOOGLE CHROME ........................................................................................................... 7

CREATING A FOEX APPLICATION ...................................................................................................... 9 COPY THE FOEX TEMPLATE APPLICATION ................................................................................................. 10

CREATING THE FIRST FOEX PAGE ................................................................................................... 11 ADDING A GRID TO MY FIRST FOEX PAGE ...................................................................................... 13 ADDING A TREE TO MY FIRST FOEX PAGE ...................................................................................... 16 ADDING A FORM TO MY FIRST FOEX PAGE .................................................................................... 18 ADDING A TREE GRID TO MY FIRST FOEX PAGE ............................................................................. 20 ADDING A TOOLBAR TO MY FIRST FOEX PAGE ............................................................................... 22 APPENDIX A: CREATING A FOEX APPLICATION FROM SCRATCH ..................................................... 30 APPENDIX B: LOAD/UPDATE ALL FOEX PLUGINS IN AN EXISTING APPLICATION ............................. 32

About This Document is designed to show you how to quickly get started using FOEX and creating FOEX Applications. It does not go into any in depth explanation of the plugins or features. Please see the documentation application for more complex examples and usage of FOEX plugins and raise any questions on our Support Forum.

Requirements This Document is based on the assumption that on the Oracle APEX Instance you are going to test the FOEX Plugins Framework is already installed and set up and a Workspace with the Demo Applications is installed. If that is not the case please refer to FOEX Plugins Installation Guide, which is part of the FOEX Shipment. For Development of FOEX Applications a current Version of Firefox Browser or Google Chrome Browser is required.

Installing the FOEX Developer Addon The FOEX Developer Addon (FDA) is a Browser Extension for Firefox or Google Chrome that improves Usability of handling FOEX Components in the Oracle APEX Application Builder.

Install FDA on Firefox The FDA in Firefox requires the Greasemonkey Addon. If this one is already installed you can skip the steps 4-‐7.

1. Download the File http://tryfoexnow.com/c/DeveloperAddon/V110/foex_developerAddon.user.js

2. Start Firefox 3. Open the Tools Menu and Pick “Add-‐ons” 4. On Tab “Get Add-‐ons” go to the search box in the top right corner and search

for Greasemonkey

5. Pick Greasemonkey from the List of Available Add-‐ons and Press “Install”

Note: if Greasemonkey doesn’t show in that list it is probably already installed.

6. Close the Add-‐ons Tab 7. Go to your APEX Workspace, log in and open the Application Builder 8. Now take the File foex_developerAddon.user.js from the addon folder of the

FOEX zip and drag it onto the Application Builder

9. The Browser asks if you want to install this user-‐script. Press Install

10. When refreshing the Page you should now see the FOEX Developer Addon

Toolbar at the Bottom of the Application Builder Page.

Install FDA on Google Chrome Google Chrome supports User Scripts natively.

1. Download the File http://tryfoexnow.com/c/DeveloperAddon/V110/foex_developerAddon.user.js

2. Start the Chrome Browser 3. Open the Window Menu and Pick “Extensions” 4. Tick the “Developer mode” Checkbox in the top-‐right corner

5. Now take the File foex_developerAddon.user.js from the addon folder of the

FOEX zip and drag it onto the Extensions Screen 6. The Browser shows a warning and asks for confirmation to proceed. Press

“Continue”

7. When opening an Oracle APEX Application Builder Page you should now see

the FOEX Developer Addon Toolbar at the end of that Page

Creating a FOEX Application To start a new FOEX Application we strongly recommend that you copy the FOEX Template Application. FOEX Applications require certain objects (Plugins, Application Items, Templates, Application Processes, Pages, …) to be fully functional. The Template Application contains all those things already, so this is the easier way to go. Important Notes:

1. The default Page template of the template application is “FOEX Page”. This page template is designed specifically for pages which have the FOEX Viewport or FOEX Desktop plugins defined on them. If you do not define a FOEX Viewport or Desktop plugin on the page please change your page template to a standard APEX Page template e.g. “No Tabs – Left Sidebar”. Using the “FOEX Page” Template for regular APEX Pages (without FOEX Viewport) will result in a long FOEX loading Icon and then a blank page.

2. The FOEX Viewport, FOEX Desktop, and FOEX Window plugins are always the top level region i.e. they never have a parent region defined. All other plugins when used on a page are defined as children of the above plugins.

3. If you encounter any issues please log a question on our Support Forum.

Copy the FOEX Template Application

1. Log on to your Workspace 2. Open the Application Builder 3. If this workspace contains the FOEX Demos and Templates (how to install these is

described in FOEX Installation Guide) you should see those 4 Applications

4. Click on FOEX Template Application – Theme 24 5. From the Taskbar on the right side of the Page choose Copy this Application 6. Choose a new Application Id and a new Application Name 7. Press Next 8. Confirm by pressing Copy Application 9. There it is, a new Application

10. Continue with Creating the first FOEX Page in the next Chapter

Creating the first FOEX Page After we created a FOEX Application we can now start to create our first FOEX Page, containing a Viewport and Panes.

1. Log on to your Workspace 2. Open the Application Builder 3. Open the previous created Application 4. Now press the highlighted Create FOEX Page Button

( Note: if you cannot see this button then the FOEX Developer Addon is not installed correctly )

In APEX 4.2.1

5. A Modal Window appears where you can enter Page ID, Title, and choose which Panes your Page should contain e.g. North, South, East, West

6. Press Create to complete the FOEX Page Wizard 7. You instantly can see the new Page in the list of Pages

8. Click on the newly created Page to open it

Adding a Grid to my First FOEX Page Now that you first FOEX page has been created you can now use the FOEX Developer Addon to quickly create a Grid. (we recommend using the FOEX Developer addon to create all Grids, Forms, Trees within your FOEX application)

1. Edit your newly created page e.g. “My First FOEX Page” and click the “Create FOEX Region” button ( Note: if you cannot see this button then the FOEX Developer Addon is not installed correctly )

2. The following Create FOEX Region Dialog will appear

3. Enter the Region Title 4. Ensure that the Parent region is set to a child region of a pane e.g. in this example

“Center Pane” 5. Select “FOEX Grid” as the region type

6. Enter your Query e.g.

7. Click “Create” and you should now see the following structure e.g. a grid plugin region with a child report region. Note: the report is set to “Never” since FOEX only uses the meta data of this region for the grid plugin.

8. Next run the page and you should see the following output when running the page

If you encountered any issues please log a question on our Support Forum.

Adding a Tree to my First FOEX Page


2. The following dialog should appear

3. Enter the Region Title e.g. Tree Example 4. Ensure that the Parent region is set to a child region of a pane e.g. in this example

“West Pane” 5. Select “FOEX Tree” as the region type 6. Enter the following example Query

SELECT REGION_ID AS ID , PARENT_REGION_ID AS PID , REGION_NAME AS TEXT , NULL AS URL , NULL AS DISPLAY_SEQ , 'fx-icon application-cascade' AS CSS_CLASS , NULL AS INFO , NULL AS CUSTOM FROM APEX_APPLICATION_PAGE_REGIONS WHERE APPLICATION_ID = :APP_ID AND PAGE_ID = :APP_PAGE_ID

7. Click the Create button and the following region structure should be added to the

page e.g.

8. Run the page and you should see the following output (after you expand the nodes in your tree)


Adding a Form to my First FOEX Page



3. Enter the Region Title e.g. Form Example

4. Ensure that the Parent region is set to a child region of a pane e.g. in this example “Center Pane”

5. Select “FOEX Form” as the region type 6. Enter the table name e.g. DEMO_CUSTOMERS. Once you enter a valid table name a

list of columns to include will be displayed (as in the above dialog example)

7. By default the Primary Key Item will be chosen for you and is the name of the page item for the first column in the list. Note: the primary key must be a valid page item that exists on the page and as a child item of contained within a child fieldcontainer/fieldset region of the form plugin.

8. Check/Uncheck desired actions and columns to include.

9. Click the Create button and the following region structure should appear

10. Run the page and you should see the following


Adding a Tree Grid to my First FOEX Page



3. Enter the Region Title e.g. Tree Grid Example 4. Ensure that the Parent region is set to a child region of a pane e.g. in this example

“CenterPane” 5. Select “FOEX Tree Grid” as the region type 6. Enter the following example Query

SELECT REGION_ID AS ID , PARENT_REGION_ID AS PID , REGION_NAME AS TEXT , NULL AS URL , DISPLAY_SEQUENCE AS DISPLAY_SEQ , 'fx-icon application-cascade' AS CSS_CLASS , NULL AS INFO , NULL AS CUSTOM , DISPLAY_SEQUENCE AS DISPLAY_SEQUENCE , ITEMS AS ITEM_COUNT , BUTTONS AS BUTTON_COUNT , SOURCE_TYPE AS SOURCE_TYPE FROM APEX_APPLICATION_PAGE_REGIONS r WHERE APPLICATION_ID = :APP_ID AND PAGE_ID = :APP_PAGE_ID

7. Click the Create button and the following region structure should be added to the page e.g.

8. Run the page and you should see the following


Adding a Toolbar to my First FOEX Page

1. Edit your newly created page e.g. “My First FOEX Page” and create a new region using the standard APEX create region method

2. Select “Region on this Page”

3. Select Plugins

4. Select FOEX Pane

5. Enter the Title “North pane” and select the Viewport as the Parent Region

6. Enter the following details:

7. Click Create Region

8. Edit the Region Attributes of the North Pane region by right clicking on the region in the Tree

9. Under FOEX Settings set “Prevent Header” to Yes

10. Create a New region on the page (Repeat Steps 1-‐3)

11. Select “FOEX Toolbar”

12. Enter the following details making sure the Parent Region is set to the “North Pane” created in step 7.

13. Accept the defaults and click “Create Region

14. The following structure should now appear

15. Right click on “Toolbar Example” and select “Create Region Button”

16. Set the button name to LOGOUT and click Next e.g

17. Create the button

18. Edit the newly created LOGOUT button

19. Under FOEX Settings set the Button Icon to “fx-‐icon lock-‐open”

20. Under Action When Button Clicked a. Action: Redirect to URL b. UTL Target: &LOGOUT_URL.

21. Run the page and you should see the following output

For more details and Examples on using FOEX plugins see the Documentation Application and edit the demo pages to get a better understanding on how to use them.

APPENDIX A: Creating a FOEX Application from Scratch

1. Log on to your Workspace 2. Open the Application Builder 3. Press the yellow Create > Button to create a new Application 4. Choose Database Application and whatever settings and layout may fit your needs 5. At the end create the Application

6. Open the new Application in Application Builder

7. To add the most important Objects for a FOEX Application go to SQL Workshop -‐>

SQL Commands 8. There enter

BEGIN FX_P_DEVELOPER_ADDON.Check_Preconditions(<AppId>);

END; and run the command

9. This adds some Objects to your Application, as you can see now in Application

Builder

Now go to Shared Components -‐> Plugins and Import all those Plugins you want to use in this Applications. The Plugins are contained in the FOEX – Zip File in the sub folder /apex/

APPENDIX B: Load/Update all FOEX Plugins in an existing Application To import all FOEX Plugins in an existing Application we have provided a SQL Script in the FOEX – Zip File in the sub folder /apex/<apex-‐version>. The File is called load_all_plugins_into_app_id.sql .

1. On the command line (DOS Box, Terminal, …) CD into the FOEX/apex/<apex_version> directory

2. Start SQLPLUS and connect as your Application Parsing Schema e.g. SQLPLUS myschema/password

3. Run the script and pass your application-‐id as argument:

@load_all_plugins_into_app_id.sql 123

4. Edit the FOEX Settings Plugin and ensure the settings are correct

a. Navigate to Shared Components -‐> Component Settings

b. Filter the plugin list for the “FOEX Settings” plugin

c. Ensure the appropriate settings are defined

Note: during development we recommend that State Saving and Caching is disabled to ensure that changes you make in the builder are visible immediately in runtime development mode. Whereas if the settings were enabled it’s possible an older cached/state value might cause confusion as to why the change might have no effect.

That’s all that’s required, your application should now contain all the plugins within the FOEX plugin framework. If something doesn’t work as expected please log a question on our Support Forum.

Documents

FOEX First Steps First Steps.pdfThe!FOEXDeveloper!Addon!(FDA)!is!aBrowser!Extension!for!Firefox!or!Google!Chrome!that ... ClickonFOEXTemplate%Application%–%Theme%24!! 5