AC11: Declarative UI

The purpose of this activity is to learn more about the difference between declarative and procedural user interface programming, particularly in the context of HTML and CSS programming.

For this exercise, we'll be using two handy tools created by Jesse Ruderman:

• Real-time HTML Editor, http://htmledit.squarefree.com
• Javascript Shell, http://www.squarefree.com/shell

These exercises are known to work in Firefox; results may vary in other browsers.

1 Declarative HTML

Use the Real-time HTML editor to create several elements:

• a button, using a <button> element
• a checkbox, using an <input type="checkbox"> element
• a drop-down list, using a <select> element with one or more <option> elements under it
• a panel surrounding two of the widgets but not the third, using a <div> element. (Do you see any effect when you put the div around them?)

(You shouldn't need it for this exercise, but here's a reference to elements and attributes in HTML 4.0.)

2 Declarative CSS

Now create a <style> element to hold CSS rules, and use CSS rules to change the appearance of your widgets:

• button { font-weight: bold }
• div { background-color: lightblue; padding: 10px }

Add the attribute id="x" to one of your elements, and write one more CSS rule:

• #x { font-size: 20pt }

(Again, you shouldn't need it for this exercise, but here's a reference to CSS properties and CSS selectors.)

3 Hybrid Declarative/Procedural

Make a bookmark from this shell bookmarklet (adapted from Jesse Ruderman's Web Development Bookmarklets). Then go back to your HTML editing tab, and click on the bookmark you just made. You should see a window pop up with a Javascript shell prompt. Try typing a few Javascript expressions to get the hang of it:

• 2+2
• alert("hello")
• document.body.innerHTML

What does the last expression produce? Using what you've learned, write a Javascript expression that adds another button to your HTML tree. (Javascript strings can be manipulated much like Java strings.)

4 Procedural Tree Manipulation

Now add a textbox using the following Javascript expressions:

• textbox = document.createElement("input")
• textbox.type="text"
• textbox.value="your name here"
• document.body.appendChild(textbox)

Modify it a bit more, procedurally, and look at the results:

• textbox.value = "Ben"

Now display its declarative specification with document.body.innerHTML. What's missing?

Now add another button using declarative specification, just as you did in the previous problem. Then try to assign to textbox.value. What happens?