Oracle APEX Master-Detail-Detail pagina met FOEX

Wel eens een master-detail-detail pagina in Oracle APEX gemaakt, zoals gebruikers dat gewend waren in Oracle Forms?

Waarbij je zowel in het master als in de detail blokken records kan toevoegen?
En ook nog kan zoeken e.d.?
Over het algemeen ben je dan dagen bezig met de ontwikkeling van zo’n pagina. Veel regels PL/SQL code, die collections doorlopen, md5 checksums controleren, code voor inserts, updates, deletes, enz. Ben je dit zat, dan loont het de moeite om eens naar FOEX te kijken. Waarschijnlijk heb je als bezoeker van de afgelopen OGh APEX World op 19 april jl. in Zeist, al van FOEX gehoord. FOEX is een plug-in framework voor APEX, wat bestaat uit meer dan 80(!) plug-ins en gebaseerd is op de Sencha Ext Js library.

In dit artikel wordt in een aantal stappen uitlegd hoe je het bovenstaande voorbeeld zelf kan maken in FOEX.

Ga eerst naar http://tryfoexnow.com en vraag een workspace aan. Doorloop de instructies in http://www.tryfoexnow.com/c/foex/FOEX%20First%20Steps.pdf. Daarmee installeer je ook de FOEX Developer Addon. Deze addon is noodzakelijk in FOEX, maar biedt ook veel extra’s, zoals syntax highlighting, die bij het ontwikkelen van ‘gewone’ APEX applicaties ook erg handig is.

Zoals hierboven te zien is, is er een Create FOEX Page knop bijgekomen, die de wizard voor het aanmaken van een FOEX pagina opstart. Het enige wat hier verder is aangepast, is een extra trigger op de tabel DEMO_ORDERS om ORDER_ID te vullen met een sequence.

Ok, laten we beginnen:

1. Klik op Create FOEX Page, vul pagina nummer en de titel, bijvoorbeeld 10 en Customer & Orders.
2. Open de pagina om deze aan te passen:

3. Klik op Create FOEX Region en geef de titel Customers, parent region Centre Pane en region type FOEX Grid. Als query gebruiken we

select    dcr.customer_id
,         dcr.cust_first_name
,         dcr.cust_last_name
from      demo_customers    dcr

en klik op Create.

Je ziet nu dat er twee nieuwe subregions gecreëerd zijn, een FOEX Grid en een Report region. Deze laatste bevat uiteraard de query en de Report Columns. Overigens is de Condition Type van dit region op Never! Alles, het ophalen van data, zoeken, insert, update, delete, enz. wordt nu afgehandeld in FOEX.  Klik maar eens op Run, dan zie je het volgende resultaat:

Laten we nu het e.e.a. aanpassen, zodat we ook Customers kunnen aanmaken en verwijderen.

4. Zet bij de kolommen CUST_FIRST_NAME en CUST_LAST_NAME, de Display As op Text Field.
5. Doe een rechter muis klik op de FOEX Grid region Customers en kies Create Region Button. Geef als Button Name Add en als Action Defined by Dynamic Action.
6. Edit de zojuist aangemaakte Add button en verander de Button Icon in Add en Database Action in SQL INSERT Action.
7. Herhaal de stappen 5 en 6 maar dan voor het aanmaken van de Delete button, met de overeenkomstige icon en action.
8. Ga nu naar Customers (FOEX Grid) – Region Attributes en verander Allowed Operation in Create, Update, Delete. Controleer of de Edit Mode op Row Editing staat en vul bij Source   Table/View/Collection for CRUD Operations, DEMO_CUSTOMERS. Zorg ervoor dat de Primary Key Columns op Customer ID staat.
9. Start deze pagina. Je kan nu op gegevens zoeken, gegevens toevoegen, veranderen en verwijderen!

10. We maken nu een hidden page item Px_CUSTOMER_ID, waarmee we straks de grids kunnen synchroniseren.

Maak nu een grid voor de orders.
11. Klik op Create FOEX Region en geef de titel Orders, parent region Centre Pane en region type FOEX Grid. Als query gebruiken we:

select    dor.order_id
,         dor.customer_id
,         dor.order_timestamp
,         dor.order_total
from      demo_orders     dor
where     dor.customer_id = :Px_CUSTOMER_ID

en klik op Create.

Ook hier weer het e.e.a. aanpassen voor de layout, enz.

12. Als je Run Page had gedaan, dan heb je gezien dat er een tab Customers is en een tab Orders. Ik wil beide grids op één pagina hebben. Daarvoor zet je bij Region Attributes van de Centre Pane, de waarde voor Layout op Vertical Stack Regions (vbox).
13. We zetten in de Orders grid, Display as bij ORDER_ID en CUSTOMER_ID op Hidden en ORDER_TIMESTAMP op Date Picker.
14. Zet bij CUSTOMER_ID, de Default Type op Item en de Default op Px_CUSTOMER_ID.

Nu moet de Orders grid nog de orders van de geselecteerde Customer tonen. Dit gaat eenvoudig in de volgende 2 stappen:

15. Zet bij FOEX-Grid Orders de Region Attributes Flexible Size Ratio op 1 en Loading Grid Data op Load on Demand. Zet ook meteen Allowed Operations op Create, Update, Source Table op DEMO_ORDERS en Primary Key Column op ORDER ID. Dan kunnen we straks ook meteen orders toevoegen en/of aanpassen.
16. Creëer een Dynamic Action voor de FOEX-Grid Customers, met de naam Selecteer Customer, bij Event kies je FOEX Grid – After Row Select, als Action kies je FOEX Grid Row Select Set Item Values, met Column CUSTOMER_ID en voor Page Item Px_CUSTOMER_ID en klik uiteindelijk op Create.
17. Voeg bij de zojuist aangemaakte Dynamic Action, nog een tweede action toe, die een Refresh doet van Region Orders.
18. Voeg als laatste bij Orders nog een Add button toe, zoals ook gedaan stappen 5 en 6.

We kunnen nu bij Customers een regel selecteren en krijgen dan de daarbij horende Orders te zien, die wel eventueel kunnen aanpassen, of een nieuwe kunnen toevoegen!

Op dezelfde manier kan je ook een Order Items grid toevoegen. Je krijgt dan een scherm wat kan lijken op:

Wanneer een order item wordt aangepast, wordt door een trigger het totaal bij de order bijgewerkt. Door de refresh wordt deze ogenblikkelijk getoond.

Zoals je ziet, zijn in de punten 1 tot en met 17, maar 2 queries gebruikt, en verder is er alleen het e.e.a. ingesteld in de verschillende FOEX plug-ins. Dus verder geen regel PL/SQL code. Probeer dat maar eens net zo snel voor elkaar te krijgen in standaard APEX!!!

Uiteraard is dit maar een korte demo van de mogelijkheden van FOEX. Op hun website http://tryfoexnow.com/ zijn nog heel veel meer mogelijkheden te bekijken. FOEX kan dus een zeer waardevolle toevoeging zijn bij het bouwen van APEX applicaties.

Deze pagina bekijken? Kijk dan op: http://demo.tryfoexnow.com/apex/f?p=596:10

Dit Artikel is geschreven door:
Arnoud Aten
Senior Oracle Consultant
Itium