Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

APEX jQuery

AUSOUG November 2014, Kscope15 Deep Dive
by

Scott Wesley

on 14 July 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of APEX jQuery

Scott Wesley
Using CSS & Applying jQuery
A Guide for PL/SQL Developers
www.packtpub.com/content/oracle-apex-techniques/video
@swesley_perth
Oracle APEX
Compliments
APEX/ADF/...
pages generated by
UPDATE
employees
SET
salary = salary * 1.5
WHERE
name =
'SCOTT'
UPDATE
html_page
SET
text =
'Hello Universe'
WHERE
elementID =
'myReport'
AND
tag =
'h1'
you might say...
Batman is to Robin
as jQuery is to CSS

<HTML>
<TITLE>My home page</TITLE>
<BODY>

<H1>
jQuery Demos
</H1>
<P>Let me tell you about my favourite science communicators:

<UL

id="communicators"
>
<LI> Carl Sagan
<LI
class="coolCat"
> Neil deGrasse Tyson
<LI> Eugenie Scott
</UL>
</BODY>

<script type="text/javascript"
src="
https://code.jquery.com/jquery-1.11.1.js
"></script>
<style>
.coolCat {font-weight:bold;}
</style>
</HTML>
www.artzstudio.com/2009/04/jquery-performance-rules/
var $theCat = $('li.coolCat');

$theCat.css('color','red');
$theCat.css('background-color','orange');
$theCat.fadeIn('fast');
always on my mind
2nd only to a picture
What is?
Why use it?
What's CSS


SQL analogy
Browser tools
jQuery terminology
Syntax comparisons
Cheat sheets

Callbacks
Ajax
Dynamic Actions


Adopting plugins
Performance
Learning
Apex 3.x
APEXLib
jquery_notes.txt
Tablet application
This presentation
node.js
web components
LESS/SASS
bootstrap
JSON
D3.js
My history
Possible future
HTML
HEAD
TITLE
BODY
H1
P
UL
LI
LI
LI
SQL
jQuery
Dynamic Actions
Learning Curve
jQuery?
The SQL Analogy
Browser Tools
A DOM Manipulation library
What is the DOM?
SCOTT
KYLIE
EDDIE
5000
4000
3500
100
101
102
ID
NAME
SALARY
$(
'#myReport h1'
).text(
'Hello Universe'
);

id="myReport"
<h1>Hello Universe</h1>
Syntax Examples
$(
'#communicators li:first'
).text()
$(
'#communicators li:eq(1)'
).addClass(
'coolCat'
)
$(
'body h1'
).hide()
$(
'.coolCat'
).closest(
'ul'
)
What's CSS
Enhancements for touch screens
TouchPunch
Enlargement
Touch Row
Pagination
Performance
Ajax Callbacks
Adopting Plug-ins
Responsive image gallery
plugins.jquery.com/blueimp-bootstrap-image-gallery/
Include jQuery/CSS files
Create named report template
or Shared Components -> List
Create HTML Region for modal widget
github.com/blueimp/Bootstrap-Image-Gallery/blob/master/README.md
Datepickers
instead of button
touchpunch.furf.com
Enable sliders, drag/drop
vs scroll/search
add to page templates
$(
'#communicators li'
).css(
'color','red'
)
$('myText').val()
<UL id="communicators">
angular.js
div.ui-datepicker {
font-size: 200%;
}
table.ui-datepicker-calendar>tbody>tr > td >a {
padding:10px;
}
wasted real estate
$('#myReport h1').text()
$('#report_p4_emps')
.find('td[headers="ENAME"]')
.css('color','red');
get
set
$('#myReport h1').text(
'Hello Universe'
);
'Listen' for click on <tr>
Page load / After Refresh
$('#report_p7_emp table tbody tr').on('click', ...
.chaining
$(this).find('td[headers="EMPNO"]').text()
<tr>
this = row clicked
find EMPNO column
return text value
7521
$(pThis)
.closest('tbody')
.children('tr.rowHighlightClassic')
.removeClass("rowHighlightClassic");

$(pThis).addClass("rowHighlightClassic");
highlightRowClassic(this);
<tr>
traverse up to body
locate any highlighted rows
remove existing highlight
add highlight to current row
PL/SQL -> JavaScript
'Hello '||'Universe'
'Hello '+"Universe"
UPPER('Hello Universe')
"Hello Universe".toUpperCase()
LENGTH('Hello Universe')
"Hello Universe".length
2 = TO_NUMBER('2')
2 == parseInt("2")
Data structures
var me = {
name: "Scott"
,vintage: 1979
}

me.name
me person%ROWTYPE;

me.name := 'Scott';
me.vintage := 1979;
planet VARCHAR2(20) := 'Earth';
var planet = 'Earth';
if 1 = 2 then
end if;
if (1 == 2) {
}
var y = [ 1, 2, 3 ];
y[0] == 1
// true
type t_array is varray(3) of number;
v_array t_array;

v_array := t_array(1,2,3);
for ( var i = 0; i < y.length; i++ ) {
console.log('val:'+y[i]);
}
for rec in 1..v_array.count loop
dbms_output.put_line('val:'||rec);
end loop;
planet == '' ? 'Mars' : planet
COALESCE(planet, 'Mars')
function do_something (p_id number)
return number is
begin ... end;
function do_something(p_id) {
...
}
'this'
Callbacks
$('#p7_emp h1').on('click', function(event) {
console.log(this);
console.log(event.data);
});
this.value == $(this).val()
Forms
JavaScript
when-new-form-instance
load
when-validate-item
change
pre-query
beforerefresh
when-mouse-click
when-button-pressed
click
touchstart
& common functions
Traversing
children
siblings

closest
parent
find

first
last
not
Manipulation
addClass
removeClass
hasClass
css

attr
val
text
html

height
width
Effects
.hide
.show

.slideUp
.slideDown

.toggle
Events
.bind
.change
.click

.focus
.load
.ready
.trigger

event.target
event.data
records
arrays
loops
concat
built-ins
length
conversion
variables
if boolean
nvl
functions
<h1>Employees</h1>
generates the HTML
jQuery
manipulates the DOM
and can talk to the db
just like an Oracle Forms trigger
Why?
not just use Dynamic Actions?
got to do with it?
What is
document.getElementById('myText').value
except jQuery behaves like array, not item
browser parses into DOM
why not just use
APEX wizards?
'Supplementary'
provides flexibility
some benefits comparable
to using PL/SQL Packages
#communicators li {

color : red;
}
www.w3schools.com/jquery/jquery_ref_selectors.asp
'Selectors'
why
how
potential
think
agenda
.text(
'Neil Tyson'
)
display: none;
== 'Carl Sagan'
datepicker, autocomplete...
Syntax
& Semantics
use chrome or go home
Syntax
Events
CSS - on the fly
JavaScript - on the fly
<input type='text'
id='myText'

/>
jQuery
native JavaScript
HTML
<input type='text'
class='myItems'
/>
$('.myItems')
A callback function is executed
after
the current effect is finished.
var ajaxRequest = new htmldb_Get
(null
,$v('pFlowId')
'APPLICATION_PROCESS=CB_OLD',
,$v('pFlowStepId')
);
ajaxRequest.addParam(
'x01', $v('P12_EMPNO')
);
var ajaxReturn = ajaxRequest.get();
$s('P12_SAL', ajaxReturn);
console.log('Before');
apex.server.process
(
"CB_AJAX"
,{ // pData

x01 : $v('P12_EMPNO')
,pageItems : '#P12_EMPNO'
}
,{ // pOptions
dataType : "text"

,async : false
,success : function(pData) {

console.log('* Success');
$s('P12_SAL', pData);
}
}
);
console.log('After');
'Undocumented'
Before
*Success
After
Before
After
*Success
true
false
jQuery.ajax() wrapper
APEX 4.2
Since 3.x
APEX 4.x
Dynamic Actions
where empno =
apex_application.g_x01
in
out
synchronous - next action waits
trigger on sal?
asynchronous
synchronous
Ajax
Employees
Click anchor
Process / Render
Edit Employee
Submit
DML
Open page
Validate / Fetch
Ajax
Classic Web Application Model
https://web.archive.org/web/20080702075113/http://www.adaptivepath.com/ideas/essays/archives/000385.php
Ajax: A New Approach to Web Applications
Jesse James Garrett, February 2005
(synchronous)
Google Suggest, Circa 2005
Callback
Respond to row click / tap
Terminology
This way, browsers do not have to find the same element(s) more than once.
in the report
find the ENAME column
set font color red
F12
$s('P7_OPENME', theVal);
onChange Dynamic Action
Click row
open page/modal with selected item
Alternative Patterns
Future Learning
console.log('Value' || this.value);
Pure
jQuery
Dynamic Actions
http://stackoverflow.com/questions/24902925/jquery-text-set-modifies-more-than-get
<span>
<img src="/i/f_spacer.gif" class="my_class">
blah
</span>
$('img.my_class').parent().html(
'<img src="/i/f_spacer.gif" class="my_class">'
+'New text');
$('img.my_class').parent().contents().last()[0].nodeValue = 'New Text';
Techniques improve over time
Still PL/SQL programmer in the fingers
"I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail"
Abraham Maslow, 1966
"To a man with a hammer, everything looks like a nail"
Mark Twain, <no citation ever>
"The problem with internet quotes is that you cant always depend on their accuracy"
- Abraham Lincoln, 1864
"If one has a hammer one tends to look for nails"
- Silvan Tomkins, 1963
quoteinvestigator.com/2014/05/08/hammer-nail/
More than one way to...
.parent().parent().parent()
.parentsUntil('tr').parent()
.
closest
('tr')

bind()/live() -> delegate() -> on()
jQuery changes too
jQuery
everything
Keep using Dynamic Actions
start experimenting with jQuery Selector
not even a drop of jQuery
first demo - get/set within console
define raw ability
second demo
from small things big things grow
slider on touch devices
embiggen datepicker
third demo - track down cell attributes
potential + tools = productivity
fourth demo - event data
when
this
, then that
Pure
jQuery
Dynamic Actions
declarative
one javascript
spaghetti
expertise
modularisation
integrated
$(this).
attr
('
data
-cost')
$(this).
data
('cost')
demo
demo
demo
demo
demo
Options


b) Tablet/Smartphone in hand (demo outcomes)




c) Somewhere to make notes (ideas a plenty)
apex.oracle.com/pls/apex/f?p=
jquery15

Fundamentals
Application
Frameworks
node.js
JSON
practice
experience
concepts
syntax
web components
plug-ins
jQuery
pl/sql
declarative, great for learning
look, test, debug
breakpoints, ajax, sockets
network, resources, events
needs
handy
wants
Know Selectors
Know jQuery
when-mouse-down
grassroots-oracle.com/search/label/COALESCE
chaining
traversing
effects
$('*').find('td[headers*=E]')
select *
from entire_dom
where tag = 'td'
and node like '%E%'
full table scan
$('#p2_emp').find('td[headers*=E]')
Region attributes
Dynamic Action
Refresh region
#myReport
unique index
.myClass
non-unique
#myReport td:first
rownum=1
#1 - Descend from #id

<HTML>
<TITLE>My home page</TITLE>
<BODY>
<H1>jQuery Demos</H1>
<P>Let me tell you about my favourite science communicators:
<UL id="communicators">
<LI> Carl Sagan
<LI class="coolCat"> Neil deGrasse Tyson
<LI> Eugenie Scott
</UL>
</BODY>

<script type="text/javascript"
src="https://code.jquery.com/jquery-1.11.1.js"></script>
<style>.coolCat {font-weight:bold;}</style>
</HTML>
#communicators li.coolCat
#2 - Tags before classes
because it maps to native JavaScript method
getElementsByTagName()
#3 - Cache jQuery objects
with coolCat as ()
select ...
#4 - Chaining - even better
$('li.coolCat')
.css('color','red')
.css('background-color','orange')
.fadeIn('fast');
var $theList = $('#communicators');
theCats = $theList.find('li.coolCat');
theFirst = $theList.find('li:first');
#5 - Subqueries
#6 - Limit direct DOM manipulation
Bulk Binding
Limit SQL - PL/SQL context switching
for (...)
$('').append();
for (...)
aString += blah[i];

$('').html(aString);
#10 - Compress your JS
project#MIN#.js
#7..8..9..
big is good
blog.dareboost.com/2014/04/jquery-performance-optimization/
learn.jquery.com/performance/optimize-selectors/
Specificity
// Unoptimized:
$( "div.data .coolCat" );

// Optimized:
$( ".data td.coolCat" );
it's all about
specific
less specific
localise
target
which of many divs?
use index
inspect element
is
F12 also opens console
what's actually used
component triggers
get attributes
traverse the tree
selectors
Find the balance
"the complexity goes somewhere"
1) Set items
2) Run PL/SQL
3) Refresh region
JavaScript onLoad
handles the lot
listen for click
execute PL/SQL on demand
send parameters
refresh once complete
fifth demo - AJAX calls
Dynamic Actions vs jQuery
flexibility
because IR icon view isn't
extreme example
APEX++
your friend
just cut & paste
always returns only "Value"
1.7
1.4.2
1.3
1.0
(google) visualisations
References
jQuery Selector Reference
www.w3schools.com/jquery/jquery_ref_selectors.asp
codylindley.com/jqueryselectors
HTML/CSS/JS Reference
developer.mozilla.org
w3schools.com
jpillora.com/base64-encoder
Base64 Encoder
caniuse.com
Browser Compatibility
oscarotero.com/jquery
jQuery Cheat Sheet
stackoverflow.com
* jsfiddle.com
* jsperf.com
community.oracle.com
www.colorhexa.com
Colour Selection
CSS
HTML
jQuery
Forums
docs.oracle.com/cd/E37097_01/doc/doc.42/e35127/toc.htm
APEX API Reference
tpetrus.blogspot.com.au/2013/03/ajax-in-apex-introduction-and-techniques.html
APEX
AJAX in APEX
cssmediaqueries.com
Media Queries
css-tricks.com
Awareness
html5rocks.com
HTML5
www.odtug.com/apex
Community
json.parser.online.fr
JSON Parser
code.google.com/p/plsql-utils
Alexandria
2000
2008
tinyurl.com/jquery15
a) APEX Environment (emp)
community.oracle.com/message/
12942837
Dynamic Action: "wait for result"
Talk to:
Anthony Rayner
re: lunch and learn question
www.eberapp.com/pls/apex/f?p=BLOG:READ:0::::ARTICLE:2116700346816536
Jeff Eberhard: Pass Multiple Values from Report to Dynamic Action
Talk to: Tom Petrus
$('#
report_
p7_emp .uReport
tr
').on('click',...
$('#
p7_emp
.uReport').on('click',
'tr'
, ...
listen for row click
Tom Petrus
JavaScript in Tabular Forms
Basic
Advanced
Look out in tabular forms
Wizard driven
Column ordering
f01 - id
f02 - ename
order by 2, 1
Manual (apex_item)
Uniqueness
name = f01
id = f01_0001
'f01_'||rownum
HTML/browser does not enforce unique #id
Full transcript