Web Development Primer for PL/SQL - Demonstration: Borrowing HTML Elements from Existing Pages

Web Developer Primer for PL/SQL - Example: Borrowing HTML Elements from Existing Pages

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.