Web Development Tips for PL/SQL Programmers

How Does a PL/SQL Programmer Get Started with Web Development?

Learn FireFox’s Firebug or Chrome’s developer tool, HTML, CSS, DOM, AJAX, and JavaScript

Are you an expert server side software developer who needs to migrate to a browser based environment like Oracle Application Express (APEX)? Then this free tutorial is for you; it will help you to “break the back” on the somewhat steep learning curve that is required when you start learning how to effectively use client side browser tools like FireFox’s Firebug and Chrome’s developer tool. APEX expert and author Patrick Cimolini leads you, step by step, from a simple “hello world” web page to some real-world APEX pages; showing you along the way how to use the browser tools to inspect, test, and debug your HTML, CSS, DOM, AJAX, and JavaScript code.

The tutorial introduces the audience to the important browser development tools that are required in order to take advantage of the web’s browser based environment. Students are shown how to analyse and debug a web page by using the development tools that are built into the FireFox and Chrome browsers. The webinar starts with a simple “hello world” web page and then progresses, step by step, into real-world APEX pages where HTML, CSS, DOM, AJAX, and Javascript must be inspected, tested, and debugged. We’ll de-mystify the web tools and help you achieve a level of comfort and confidence when working with the client side web tools.

This free training is segmented into several separate lessons:

  1. Introduction & Agenda (2:11)
  2. Languages and Tools You Should learn (4:03)
  3. Demonstration: Use Google Chrome Inspect Element to Learn from the Experts (3:41)
  4. Using Hello World to Learn Chrome’s Inspect Element Tool (4:39)
  5. Adding CSS to Hello World (The Class and ID Selectors) (2:47)
  6. Demonstration: Adding CSS (5:56)
  7. A Word About Webkit (1:58)
  8. Introduction to and Debugging JavaScript (2:43)
  9. Demonstration: Debugging JavaScript (5:37)
  10. Inspecting AJAX Network Traffic (7:33)
  11. Oracle APEX Example: Borrowing HTML Elements from Existing Pages (8:41) (click on video below)
  12. CSS in APEX (1:37)

Date: Dec 17, 2013

For more Web Development Training see out HTML5, CSS3 and JavaScript class.

NOTE: Some corporate firewalls will not allow videos hosted by YouTube.


Oracle APEX Example: Borrowing HTML Elements from Existing Pages

Web Developer Primer for PL/SQL


11. Example Borrowing HTML Elements from Existing Pages


>> Patrick:  Let’s now do an APEX example. Quite a common use case here is, say your boss wants a new button on a page and is not really happy with the default style of the button. They say, “Just go out to the Internet and find something that’s looks better, sexier, cooler and all that sort of stuff.” 




Let’s see how from a high-level how you would approach that.




Let’s get back into the browser and let’s put this down here. You can see okay. Your boss said, “Okay. Let’s add a button here.” I’ve already taken the liberty of actually putting a button up here. Of course this button if you click on it does nothing. It’s just a button.


Your boss says, “Oh I’m glad the button is there but now it looks kind of bland.” He says, “My daughter has got to put her own website up and it’s being hosted by GoDaddy and they have real, cool, green buttons. I’d like a nice GoDaddy button here.”


What you can do is go to someplace like GoDaddy. You can see that they’ve got a nice looking green button here. 




If you want to bring this button into APEX, how do you go about approaching that problem? 


One of the first things you want to do is come to the GoDaddy button and simply right-click on it. “Inspect Element.” There you go. Now we can see on the HTML side, it’s automatically highlighted for us. We can see that that button is really not a button. It is actually in fact an anchor tag. That is good information to get.


These id’s and classes are of course specific to GoDaddy, so you’re not too worried about that. But what you want to do is have a look at the styling over here because fundamentally, what you want to do is copy the styling from here into APEX. So what you do is you start clicking on these checkmarks. You see that minimum width does have an effect.


One a time, just go through some of these things. The alignment of the text goes from center if you click that off, so that seems to be important. If you go through the styling elements here and figure out what’s important to you. That block stuff seems important, the background color of course is important, and you keep on going. You see down here the border bottom. If you click that off, you see that that little underline at the bottom of the button goes away if you click that off. So that’s fairly important.




What you do here is once you find out what’s important, you can highlight all of this and copy it somewhere to a text file. Of course, I’ve already done that. I just don’t want to do the details here for you. I’m just showing you the overall general approach. You come here, you find out what the styling is, and then you go back to APEX and you look at your APEX button. You go, “Okay, I got this GoDaddy styling. How do I get it inside APEX?”


One of the first things you can do of course is right-click on your index button and inspect the element. Have a quick look at it. 




Here you see instead of a reference, you actually got a span tag here that’s surrounding the text that might be useful, it might not be. But that’s good information to have. You actually see that the button itself just like the GoDaddy button is an anchor tag. This is an indication that we’re probably in good shape here for pulling that in. Here, in this case, you really don’t care about the style because you really want to replace the style.




Now where do you go to replace the style? Let’s have a look at the button here. Let’s put the developer tool down. Now let’s look at the button itself.


We’ll go into the APEX development environment. Let me just make this just a bit bigger. There we go.




We go and edit the page. Let’s double-click on the button. 




What we want to do here is maybe look at the attributes to find a little more about this button. The style is template-based. It gives us a bit of information. It’s using a template called “Button.” That’s where the styling comes from.


Let’s go into shared components. That’s where the templates live. 




Here, under “User Interface” tab we have a link here called “Templates.” Let’s drill in there. Let’s filter this by the type of button. This is already pre-selected for us. I did that earlier today. We can see that there is our template button. Let’s click on that and see what we’ve got here.


The interesting stuff of course is in the definition. We can see here is where our anchor tag is actually in fact defined. You see it’s a href class, etc. and here’s the span. There’s the label that’s got substitution variable here. That looks pretty straightforward.


Since this is just HTML, it is quite possible for us to actually add a style tag. But we don’t want to do it here because this particular template is probably used in many other places in our application, so we go on to break the entire application. 




The way to approach this is to actually create a copy of this template and then customize it. You can see over here on this report this copy icon. If you press that, you can actually make a faithful copy of your template, which is what I did earlier. Here I created this “Button_myGreen.” Let’s click on that and see what I did. If we go into the definition…




That’s a bit small. What I’m going to do here is just highlight that. Let’s Ctrl+C that. I’m going to put this tag into Notepad++. There we go. This is what I did to my custom template.


Down here I’ve left the old syntax. You can see that we’ve got this original code and I’ve commented that out. It is a class uButton.


Over here you can see that there’s that span tag. What I’ve done here is I’ve actually changed that and I actually created another class called my_uButton. I’ve actually defined that up here in this particular style tag that I’ve added to this template. All of this with these CSS properties, this is what I copy from the GoDaddy site. 




What I did over here is – I found that the span tag here really wasn’t all that useful so I simply took it out. Now we have this redefined template with all of this code in. Let’s just minimize that now. Let’s go back to our APEX.


What we need to do now is go back to our application. Go to our page 2, go into our button, and go to the “Attributes” tab, change the template from “Button” to “Button_myGreen.” That’s the one I just created. Apply changes.




If I run this, I get this GoDaddy button and embed it into my APEX application.  


Copyright 2017

Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!