SlideShare uma empresa Scribd logo
1 de 23
Baixar para ler offline
D


    Creating Web 2.0 applications made easy
What about me?


• Oracle since v5, Forms 2.3, Case*Designer etc
• Presenter at UKOUG (4x), OOW (3x), Collab (1x),
   ODTUG (2x), OBUG, OGH, etc..
• Oracle ACE Director [DB Dev]
• Co-author of Expert Oracle Application Express
APEX 4.0 - What do you like best?
WHY ?
Declarative definition
of client-side behaviour…

…without needing to know
 JavaScript
Just specify

           When
           Action
           What
Specification 1

The application should disable the Alternate
Number field until the Phone Number field is
filled in.
   –   When: Phone Number is null
   –   Action : Disable
   –   What : Alternate Phone
   –   ( False: Enable Alternate Phone )
Specification 2

The application should hide the List Price and
Product Image if the Product Available is No.
   – When: Product Available = ‘N’
   – Action : Hide
   – What :
      • List Price
      • Product Image region



   – Opposite :
      • Show List Price
      • Show Product Image region
Specification 3

The application should have a button that
allows users to increase all customers credit
limit.
   – When: Button clicked
   – Action : Update credit limit
   – What : [none]
Specification 4

The application should set Credit Limit’s color
according to the amount (green if < 5000, red
if > 5000).
   – When : Credit Limit changes
   – Action : Change color
   – What : Credit Limit itself
Debugging
• Switch on ‘Debug’
• Check the Console
Debugging
• Switch on ‘Debug’
• Check the Console
• Use console.log(this);
Debugging
•   Switch on ‘Debug’
•   Check the Console
•   Use console.log(this);
•   Check your AJAX processes
Performance
• Downloads and executes additional code
• Increases page size
Learn about HTML and the DOM
 • What is the DOM?
   – Document Object Model
   – How your browser “sees” a web page
   – Allows access /manipulation of content

 • Methods
   – Select elements
   – Traverse the hierarchy
   – Manipulate elements

 • Events
   – User actions fire events in DOM
   – We can attach code to these events
       • Like triggers in the DB
Learn JavaScript (jQuery)
  • What is JavaScript?
    – Well… it’s not Java!
    – Client side (browser) scripting language
    – Allows us to make HTML applications interactive

  • jQuery & jQuery UI built in
    – JavaScript libraries that make things easier

  • Dynamic Actions are generating JavaScript
Learn CSS
 • What is CSS?
   – Cascading Style Sheets
   – Rules that are applied to element
       • Pertain to visual aspects: location, fonts, colors, etc.
   – Closest rule wins (almost always)

 • Selectors
   – Used to target which elements rules are applied to
   – Common selectors include
       • HTML tag: input
       • HTML ID: #the_elements_id
       • Class: .the_elements_class
       • Pseudo-class: a:hover
Specification 5
  Edit customer in popup window and reflect
  the changes immediately in the report.
Buy   this   Book
Questions
To Do List




             21
Thank you


Logica | Meander 901 P.O. Box 7015 | 6801 HA Arnhem | The Netherlands | www.logica.com
Contact: Roel Hartman - Lead Technical Architect Oracle: +31 (0) 26 3765 000 M: +31 (0) 6 2954 3729 E: roel.hartman@logica.com
All slides © 2011 Logica



Logica is a business and technology service company, employing 39,000 people. It provides business consulting, systems integration and outsourcing to clients around the world, including many of
Europe's largest businesses. Logica creates value for clients by successfully integrating people, business and technology. It is committed to long term collaboration, applying insight to create
innovative answers to clients’ business needs. Logica is listed on both the London Stock Exchange and Euronext (Amsterdam) (LSE: LOG; Euronext: LOG). More information is available at
www.logica.com
Done in 60 seconds - Creating Web 2.0 applications made easy

Mais conteúdo relacionado

Semelhante a Done in 60 seconds - Creating Web 2.0 applications made easy

Feature driven agile oriented web applications
Feature driven agile oriented web applicationsFeature driven agile oriented web applications
Feature driven agile oriented web applications
Ram G Athreya
 
Mridul_Halder_Resume
Mridul_Halder_ResumeMridul_Halder_Resume
Mridul_Halder_Resume
Mridul Halder
 
Bapi_Sarkar_Resume_Update
Bapi_Sarkar_Resume_UpdateBapi_Sarkar_Resume_Update
Bapi_Sarkar_Resume_Update
Bapi Sarkar
 
The Yin and Yang of Software
The Yin and Yang of SoftwareThe Yin and Yang of Software
The Yin and Yang of Software
elliando dias
 

Semelhante a Done in 60 seconds - Creating Web 2.0 applications made easy (20)

Dubbo and Weidian's practice on micro-service architecture
Dubbo and Weidian's practice on micro-service architectureDubbo and Weidian's practice on micro-service architecture
Dubbo and Weidian's practice on micro-service architecture
 
An Introduction to Domain Driven Design in PHP
An Introduction to Domain Driven Design in PHPAn Introduction to Domain Driven Design in PHP
An Introduction to Domain Driven Design in PHP
 
Enabling Telco to Build and Run Modern Applications
Enabling Telco to Build and Run Modern Applications Enabling Telco to Build and Run Modern Applications
Enabling Telco to Build and Run Modern Applications
 
A Case for Outside-In Design
A Case for Outside-In DesignA Case for Outside-In Design
A Case for Outside-In Design
 
Feature driven agile oriented web applications
Feature driven agile oriented web applicationsFeature driven agile oriented web applications
Feature driven agile oriented web applications
 
Just the Job: Employing Solr for Recruitment Search -Charlie Hull
Just the Job: Employing Solr for Recruitment Search -Charlie Hull Just the Job: Employing Solr for Recruitment Search -Charlie Hull
Just the Job: Employing Solr for Recruitment Search -Charlie Hull
 
How Celtra Optimizes its Advertising Platform with Databricks
How Celtra Optimizes its Advertising Platformwith DatabricksHow Celtra Optimizes its Advertising Platformwith Databricks
How Celtra Optimizes its Advertising Platform with Databricks
 
TechnoCube - Introduction of web development company
TechnoCube - Introduction of web development companyTechnoCube - Introduction of web development company
TechnoCube - Introduction of web development company
 
Power to the People: A Stack to Empower Every User to Make Data-Driven Decisions
Power to the People: A Stack to Empower Every User to Make Data-Driven DecisionsPower to the People: A Stack to Empower Every User to Make Data-Driven Decisions
Power to the People: A Stack to Empower Every User to Make Data-Driven Decisions
 
Inventory managment system
Inventory managment systemInventory managment system
Inventory managment system
 
From prototype to production - The journey of re-designing SmartUp.io
From prototype to production - The journey of re-designing SmartUp.ioFrom prototype to production - The journey of re-designing SmartUp.io
From prototype to production - The journey of re-designing SmartUp.io
 
Mridul_Halder_Resume
Mridul_Halder_ResumeMridul_Halder_Resume
Mridul_Halder_Resume
 
Orpos and store practices
Orpos and store practicesOrpos and store practices
Orpos and store practices
 
Presenting Data – An Alternative to the View Control
Presenting Data – An Alternative to the View ControlPresenting Data – An Alternative to the View Control
Presenting Data – An Alternative to the View Control
 
Migrating from a monolith to microservices – is it worth it?
Migrating from a monolith to microservices – is it worth it?Migrating from a monolith to microservices – is it worth it?
Migrating from a monolith to microservices – is it worth it?
 
Choosing the right Technologies for your next unicorn.
Choosing the right Technologies for your next unicorn.Choosing the right Technologies for your next unicorn.
Choosing the right Technologies for your next unicorn.
 
Bapi_Sarkar_Resume_Update
Bapi_Sarkar_Resume_UpdateBapi_Sarkar_Resume_Update
Bapi_Sarkar_Resume_Update
 
Tiago Fonseca & Rui Velho - Syone & Leroy Merlin - OSL19
Tiago Fonseca & Rui Velho - Syone & Leroy Merlin - OSL19Tiago Fonseca & Rui Velho - Syone & Leroy Merlin - OSL19
Tiago Fonseca & Rui Velho - Syone & Leroy Merlin - OSL19
 
Proud to be polyglot
Proud to be polyglotProud to be polyglot
Proud to be polyglot
 
The Yin and Yang of Software
The Yin and Yang of SoftwareThe Yin and Yang of Software
The Yin and Yang of Software
 

Mais de Roel Hartman

Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Roel Hartman
 
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Roel Hartman
 

Mais de Roel Hartman (17)

Wizard of ORDS
Wizard of ORDSWizard of ORDS
Wizard of ORDS
 
APEX Bad Practices
APEX Bad PracticesAPEX Bad Practices
APEX Bad Practices
 
Tweaking the interactive grid
Tweaking the interactive gridTweaking the interactive grid
Tweaking the interactive grid
 
Docker for Dummies
Docker for DummiesDocker for Dummies
Docker for Dummies
 
A deep dive into APEX JET charts
A deep dive into APEX JET chartsA deep dive into APEX JET charts
A deep dive into APEX JET charts
 
Mastering universal theme
Mastering universal themeMastering universal theme
Mastering universal theme
 
Ten Tiny Things To Try Today - Hidden APEX5 Gems Revealed
Ten Tiny Things To Try Today - Hidden APEX5 Gems RevealedTen Tiny Things To Try Today - Hidden APEX5 Gems Revealed
Ten Tiny Things To Try Today - Hidden APEX5 Gems Revealed
 
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
 
APEX printing with BI Publisher
APEX printing with BI PublisherAPEX printing with BI Publisher
APEX printing with BI Publisher
 
Troubleshooting APEX Performance Issues
Troubleshooting APEX Performance IssuesTroubleshooting APEX Performance Issues
Troubleshooting APEX Performance Issues
 
Automated testing APEX Applications
Automated testing APEX ApplicationsAutomated testing APEX Applications
Automated testing APEX Applications
 
5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX
 
Striving for Perfection: The Ultimate APEX Application Architecture
Striving for Perfection: The Ultimate APEX Application ArchitectureStriving for Perfection: The Ultimate APEX Application Architecture
Striving for Perfection: The Ultimate APEX Application Architecture
 
XFILES, the APEX 4 version - The truth is in there
XFILES, the APEX 4 version - The truth is in thereXFILES, the APEX 4 version - The truth is in there
XFILES, the APEX 4 version - The truth is in there
 
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
 
Creating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with googleCreating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with google
 
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 

Done in 60 seconds - Creating Web 2.0 applications made easy

  • 1. D Creating Web 2.0 applications made easy
  • 2. What about me? • Oracle since v5, Forms 2.3, Case*Designer etc • Presenter at UKOUG (4x), OOW (3x), Collab (1x), ODTUG (2x), OBUG, OGH, etc.. • Oracle ACE Director [DB Dev] • Co-author of Expert Oracle Application Express
  • 3. APEX 4.0 - What do you like best?
  • 5. Declarative definition of client-side behaviour… …without needing to know JavaScript
  • 6. Just specify When Action What
  • 7. Specification 1 The application should disable the Alternate Number field until the Phone Number field is filled in. – When: Phone Number is null – Action : Disable – What : Alternate Phone – ( False: Enable Alternate Phone )
  • 8. Specification 2 The application should hide the List Price and Product Image if the Product Available is No. – When: Product Available = ‘N’ – Action : Hide – What : • List Price • Product Image region – Opposite : • Show List Price • Show Product Image region
  • 9. Specification 3 The application should have a button that allows users to increase all customers credit limit. – When: Button clicked – Action : Update credit limit – What : [none]
  • 10. Specification 4 The application should set Credit Limit’s color according to the amount (green if < 5000, red if > 5000). – When : Credit Limit changes – Action : Change color – What : Credit Limit itself
  • 11. Debugging • Switch on ‘Debug’ • Check the Console
  • 12. Debugging • Switch on ‘Debug’ • Check the Console • Use console.log(this);
  • 13. Debugging • Switch on ‘Debug’ • Check the Console • Use console.log(this); • Check your AJAX processes
  • 14. Performance • Downloads and executes additional code • Increases page size
  • 15. Learn about HTML and the DOM • What is the DOM? – Document Object Model – How your browser “sees” a web page – Allows access /manipulation of content • Methods – Select elements – Traverse the hierarchy – Manipulate elements • Events – User actions fire events in DOM – We can attach code to these events • Like triggers in the DB
  • 16. Learn JavaScript (jQuery) • What is JavaScript? – Well… it’s not Java! – Client side (browser) scripting language – Allows us to make HTML applications interactive • jQuery & jQuery UI built in – JavaScript libraries that make things easier • Dynamic Actions are generating JavaScript
  • 17. Learn CSS • What is CSS? – Cascading Style Sheets – Rules that are applied to element • Pertain to visual aspects: location, fonts, colors, etc. – Closest rule wins (almost always) • Selectors – Used to target which elements rules are applied to – Common selectors include • HTML tag: input • HTML ID: #the_elements_id • Class: .the_elements_class • Pseudo-class: a:hover
  • 18. Specification 5 Edit customer in popup window and reflect the changes immediately in the report.
  • 19. Buy this Book
  • 22. Thank you Logica | Meander 901 P.O. Box 7015 | 6801 HA Arnhem | The Netherlands | www.logica.com Contact: Roel Hartman - Lead Technical Architect Oracle: +31 (0) 26 3765 000 M: +31 (0) 6 2954 3729 E: roel.hartman@logica.com All slides © 2011 Logica Logica is a business and technology service company, employing 39,000 people. It provides business consulting, systems integration and outsourcing to clients around the world, including many of Europe's largest businesses. Logica creates value for clients by successfully integrating people, business and technology. It is committed to long term collaboration, applying insight to create innovative answers to clients’ business needs. Logica is listed on both the London Stock Exchange and Euronext (Amsterdam) (LSE: LOG; Euronext: LOG). More information is available at www.logica.com