Martin B. Nielsen, MBNDATA

Meetup February 2019 APEX Front end development

Ballerup, 2019

MBNDATA

APEX Full Stack Developer

MBNDATA

APEX Test Workspace

MBNDATA

http://apex.oracle.com

APEX 18.2

http://apex.oracle.com

APEX Architecture

MBNDATA

Backend:DBA, Datamodelling,

SQL, PL/SQL

Webservices, JavaAPEX, CSS, JavaScript

Front End - APEX

MBNDATA

Styling• Theme• Theme Style• Templates• Theme-roller• Live template options

Client side logic• Dynamic Actions

Demo - APEX Front end

Front End - Custom

MBNDATA

Styling

Client side logic

Browser Devtools

MBNDATA

CSS Primer - Selectors

MBNDATA https://devhints.io/css

CSS Primer - Properties

MBNDATA https://www.w3schools.com/cssref/

SASS Primer

MBNDATA

https://sass-lang.com/guide

CSS Demo

JavaScript Primer

MBNDATA

1.Javascript Native2.Namespaces3.JQuery4.APEX Javascript API

JavaScript Compatibility

MBNDATA

http://kangax.github.io/compat-table/es6/

JavaScript Primer

MBNDATA

JavaScript Compatibility

MBNDATA https://www.w3counter.com/globalstats.php?year=2018&month=12

JavaScript Demo

APEX Nitro

MBNDATA

https://github.com/OraOpenSource/apex-nitro

APEX Nitro

MBNDATA

APEX Nitro - Setup

MBNDATA

1. Install node (npm)2. npm install -g apex-nitro3. apex-nitro config

APEX Nitro - Setup

MBNDATA

1. Install node (npm)2. npm install -g apex-nitro3. apex-nitro config 4. Configure you APEX Application

Nitro Demo

Thank You

Questions ?

MBNDATA

https://apexea.oracle.com/