First Steps. Release 2.2.0

Transcription

1 First Steps Release May 2016

2 FOEX First Steps, Release Copyright 2016, FOEX GmbH. All rights reserved. Authors: Peter Raganitsch, Matt Nolan, Dietmar Gabauer 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.

3 Contents ABOUT... 4 PREREQUISITES... 4 INSTALLING THE FOEX DEVELOPER ADDON... 5 INSTALL FDA ON FIREFOX... 5 INSTALL FDA ON GOOGLE CHROME... 5 FDA INSTALL VERIFICATION... 6 CREATING A FOEX APPLICATION... 7 ENSURE THE APEX SAMPLE DATABASE APPLICATION IS INSTALLED... 8 COPY ONE OF THE FOEX TEMPLATE APPLICATIONS CREATING YOUR FIRST FOEX PAGE ADDING A GRID TO MY FIRST FOEX PAGE ADDING A TREE TO MY FIRST FOEX PAGE ADDING A FORM TO MY FIRST FOEX PAGE ADDING A TREE GRID TO MY FIRST FOEX PAGE ADDING A TOOLBAR TO MY FIRST FOEX PAGE... 28

4 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. Prerequisites This Document is based on the assumption that on the Oracle APEX Instance you are going to test the FOEX Plugin Framework is already installed and a Workspace exists with the Demo Applications installed. If that is not the case please refer to FOEX Plugins Installation Guide, which is part of the FOEX Software Package. Alternatively you can evaluate FOEX online by visiting and sign up for a trial workspace which will have everything needed for to complete this guide. For Development of FOEX Applications a current Version of Firefox Browser or Google Chrome Browser is required.

5 Installing the FOEX Developer Addon Note: with V2.0 we changed the FDA and rewrote it from scratch. If you already have an older version installed, please remove that from your browser addons/extensions. 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 1. Download the File and save it to your computer 2. Start Firefox 3. Go to your APEX Workspace, log in, open the Application Builder and edit a FOEX Application 4. Now take the File fda_firefox.xpi and drag it onto the Application Builder 5. The Browser asks if you want to install this addon. Press Install 6. 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 Simply go to the Google Chrome Webstore and install the FDA extension there. If this link doesn t work for you, then follow these steps: 1. Open Google Chrome 2. Go to the Extensions Page (Window Extensions) 3. Click the Get more Extensions link in the bottom left corner 4. This has opened the Chrome Webstore in a new tab 5. Now search for FDA in the top left search field 6. Choose the FDA from FOEX GmbH and add it to your browser

6 FDA Installation Verification After a successful install of the FDA you should see the blue FOEX logo at the top right corner of the APEX 5 application builder page. Notice that you are inside an application. If you don t please log an entry on forum.tryfoexnow.com

7 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 these things already, so this is simplest method to get started. 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.

8 Ensure the APEX Sample Database Application is Installed Note: we will use tables in this guide which are installed by the sample database application 1. Log on to your Workspace 2. Open the Application Builder 3. If the application is not installed please click the create application button

9

10

11 Copy one of the FOEX Template Applications 1. The workspace should contain the Sample Database Application, FOEX Documentation/Demo Application and one FOEX Template Applications as per the screenshot below. In total you should see 3 applications as per the image below (the installation of the 2 FOEX applications are described in the FOEX Installation Guide) 2. Click on FOEX Template Application Theme From the Taskbar on the right side of the Page choose Copy this Application 4. Choose a new Application Id and a new Application Name 5. Click Next

12 6. Confirm by clicking Copy Application 7. We have our new application with everything required to use the FOEX Plugin Framework.

13 Creating your 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 please ensure that it is activated / enabled in your browser addons/extensions) 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). Check the West Pane and accept the default Show Regions as Tabs layout. (Note: the center pane is always checked since this pane is mandatory)

14 6. You will then instantly see the new Page in the Page Designer

15 Adding a Grid to my First FOEX Page Now that your first FOEX page has been created you can now use the FOEX Developer Addon to quickly create our first Grid Component 1. Open your newly created page e.g. My First FOEX Page in APEX Page Designer, right click on region Center Pane and select Create FOEX Sub Region from the context menu ( Note: if you cannot see this menu item then the FOEX Developer Addon is not installed correctly ) 2. The following Create FOEX Region Dialog will appear 1. Enter Region Title 2. Check that Parent Region is..center Pane 3. Select the Grid Symbol

16 4. Enter your Query e.g. SELECT * FROM DEMO_CUSTOMERS 5. After Click Create 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.

17 6. Next run the page and you should see the following If you encountered any issues please log a question on our Support Forum.

18 Adding a Tree to my First FOEX Page 1. Open your newly created page e.g. My First FOEX Page in APEX Page Designer, right click on region West Pane and select Create FOEX Sub Region from the context menu 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 Tree as the region type

19 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.

20 8. Run the page and you should see the following output (after you expand the nodes in your tree) If you encountered any issues please log a question on our Support Forum.

21 Adding a Form to my First FOEX Page 1. Open your newly created page e.g. My First FOEX Page in APEX Page Designer, right click on region Center Pane and select Create FOEX Sub Region from the context menu (Note: if you can t see this context menu item, the FOEX Developer Add- on is not installed correctly) 2. The following dialog should appear 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 Form as the region type 6. Accept DML (Table/View) default as the Form Type 7. 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) 8. 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. 9. Check/Uncheck desired actions and columns to include.

22 10. Click the Create button 11. Rearrange Regions, that Form- Region is below Grid- Region (if it isn t done already)

23 12. Run the page and you should see the following 13. Select Attributes node of Form Example Region 14. Locate the Order By attribute and add CUST_LAST_NAME to order the form by customer last name and automatically add navigation buttons to the form.

24 15. Locate and select node Attributes of region Form Example Field Container and set Default Label Width to Save and Run the page and click the new added First button to load the first record. If you encountered any issues please log a question on our Support Forum.

25 Adding a Tree Grid to my First FOEX Page 1. Open your newly created page e.g. My First FOEX Page in APEX Page Designer, right click on region Center Pane and select Create FOEX Sub Region from the context menu 2. The following dialog should appear 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..center Pane 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

26 7. Click the Create 8. Rearrange Regions, that Tree Grid- Region is below Form- Region Compare with the following screenshot

27 9. Run the page and you should see the following If you encountered any issues please log a question on our Support Forum.

28 Adding a Toolbar to my First FOEX Page 1. Open your newly created page e.g. My First FOEX Page in APEX Page Designer, right click on region Viewport and select Create FOEX Sub Region from the context menu 2. Select FOEX Pane 3. Enter the Title North pane and select the Viewport as the Parent Region 4. Click Create

29 5. Select the Attributes node of the North Pane 6. At the APEX Property Editor set Height and Min.Height to 40 and Under FOEX Config set Prevent Header to Yes 7. Create a New region at North Pane (Repeat Steps 1-3) 8. Select FOEX Toolbar 9. Enter the following details making sure the Parent Region is set to the North Pane created in step 4.

30 10. Click Create 11. The following structure should now appear 12. Right click on Toolbar and select Create Button

31 13. At the Property Editor do the following changes Name LOGOUT Action Redirect to URL Target &LOGOUT_URL. Button Icon fx-icon lock-open 14. Run the page and you should see the following output In this guide hopefully you gained an understanding of how you can get started using the FOEX Plugin Framework and how quick and easy it can be to create pages and regions. 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.