http://www.udev.info
Mail/Login: Password : forgot my password!
[UPDATE MODE]
Back

HTML Basics

Direct link http://www.udev.info/uniface/html-basics
Written by -GHAN- // Tags: html basic uniface

This article will by time show how to handle the RIA voodoo without being in need of DSP (the new dynamic server pages introduced in V9.4). I will try to put this RIA thing a bit back in place to let you understand WHAT IT DOES and HOW THIS WORKS! This requires being open to web techniques! I will try to teach how to use all this to in different publications.

This will be the foundation for you starting with RIA, WEB and HTML.

AJAX, RIA, WEB2.0 ... all of these are smashing words surrounding us every day. And although they are new, nice, impressive and makes some people go kick-ass high I want to take it down to what it mainly is: HTML (hypertext markup language). So if someone comes along and tells you how cool and sophisticated this all is, just pay him a smile... :) ("... yeah, right!") Enough said- here we go.

Let's take a look at a simple HTML file:
SOURCE CODE
Sorry- ... please log-in or register to get this!

You may save this and try it in your favorite browser. This is nothing special but a start and we will head on very fast to the next step.

In HTML you can group things. Imagine a word processor with a chapter or a text block. Each block can be capsuled in a tag (and yes, there are more options than taking a tag). The Syntax is quiet easy:
SOURCE CODE
Sorry- ... please log-in or register to get this!

So, what is so special about this?! Nothing! :) Ok, then we should change it to get special. Every tag in HTML can have an unique ID as well as a class to which it belongs. Mostly this is important for styling the web page with CSS (cascading style sheets) but it's also used for accessing elements.

Jason (Huggins) has posted the note about CSS he held at CU2008 day 3 (webmaster class) which can be found in the download's on Uniface.info. I suggest you take a look at it since he did his work well ;)

Now let's take a focus on the unique ID of a tag! Be aware that you only mark ONE tag with this id. We will call our tag by the id "xcontent" which then has to be declared like this:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Ok, let's summarize. We have a HTML file and within a tag by the ID "xcontent". Great! Now we should learn how to modify the content of the tag.

To do so we need JavaScript- this is the (often embedded) script code for HTML files. JavaScript blocks can be declared like every other tag:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Now we can change the content of the tag. JavaScript has several methods to do so. We will take the most common and certainly comprehensive one called document.getElementById().innerHTML:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Make sure that these JavaScript commands are CASE-SENSITIVE! Furthermore I should mention JavaScript is a lame bastard :) ... If you fail somewhere you won't be told if it's not that fatal! It just won't work out.

Keep in mind

This how-to is not attended to teach you HTML or Javascript from scratch! You have to dig by yourself. What I want to show is how this can work for you! Look in the web for tutorials... there are plenty of them.

To avoid to wild experiments with all these tiny commands and tags, we should have a look at the complete source of the HTML file right now
SOURCE CODE
Sorry- ... please log-in or register to get this!

Copy it, save it to a .htm file and run it in your favorite browser. You should see two texts:

Hello, earthlings ... this is UNIFACE taking over your web browser!
and
do as I do!

Try to modify it to your personal flavor. This is easy stuff and still very powerful. But why do we do this crap if we wanted to do AJAX and the WEB 2.0 voodoo?!

Simple answer: Before we pull up the browser ragdoll and pin it with the desired needles, we need to know some basics and how this works, right? So... that's how it works! :)

Conclusions

We define (unique) blocks by giving them an id. This has to be unique and is very important! If we need to change the content of a block then we use JavaScript to do so. JavaScript can do this with the "document.getElementById('name_of_your_id').innerHTML = 'whatever';" method. This will allow us to modify the block to whatever we want.

Comments

732 view(s) / 2010-02-20 18:49:32 / LAST UPDATED: 2011-07-13 16:06:27