Transcript

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.” 

 

[pause]

 

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

 

[pause]

 

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. 

 

[pause]

 

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.

 

[pause]

 

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. 

 

[pause]

 

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.

 

[pause]

 

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.

 

[pause]

 

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

 

[pause]

 

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. 

 

[pause]

 

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. 

 

[pause]

 

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…

 

[pause]

 

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. 

 

[pause]

 

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.

 

[pause]

 

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

 

Copyright SkillBuilders.com 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!

 

×
Podcast
×