Spring 2008 6.831 User Interface Design and Implementation 1Lecture 11: Declarative UI UI Hall of Fame or Shame?Spring 2008 6.831 User Interface Design and Implementation 2Source: Daniel P.B. Smith, Risks Digest, v24 n44 Today’s hall of fame or shame candidate is this DVD player. The arrow keys on a DVD player are supposed to move a cursor highlight around the screen. If you look carefully at the picture, however, you’ll see that the arrow diamond has been rotated by 45 degrees. Think about: - natural mapping - consistency, both external and internal Today’s Topics• Declarative user interface•HTML•CSS• Model-based UISpring 2008 6.831 User Interface Design and Implementation 3Declarative vs. Procedural• Declarative programming–Saying what you want• Procedural programming–Saying how to achieve itSpring 2008 6.831 User Interface Design and Implementation 4DeclarativeA tower of 3 blocks.Procedural1. Put down block A.2. Put block B on block A.3. Put block C on block B. Today we’ll be talking about ways to implement user interfaces using higher-level, more abstract specifications – particularly, declarative specifications. The key advantage of declarative programming is that you just say what you want, and leave it to an automatic tool to figure out how to produce it. That contrasts with conventional procedural programming, where the programmer has to say, step-by-step, how to reach the desired state. HTML is a Declarative UI Language•HTML declaratively specifies a view hierarchy<div id=“main”><div id=“toolbar”><button><img src=“cut.png”></img>Cut</button></div> <textarea id=“editor”></textarea></div>Spring 2008 6.831 User Interface Design and Implementation 5divdiv textareabuttonimgtextCut Our first example of declarative UI programming is HTML, which is a declarative specification of a view hierarchy. An HTML element is a component in the view hierarchy. The type of an element is its tag, such as div, button, and img. The properties of an element are its attributes. In the example here, you can see the id attribute (which gives a unique name to an element) and the src attribute (which gives the URL of an image to load in an img element); there are of course many others. There’s an automatic algorithm, built into every web browser, that constructs the view hierarchy from an HTML specification – it’s simply an HTML parser, which matches up start tags with end tags, determines which elements are children of other elements, and constructs a tree of element objects as a result. So, in this case, the automatic algorithm for this declarative specification is pretty simple. We’ll see more complex examples later in the lecture.Declarative HTML vs. Procedural JavaHTML<div id=“main”><div id=“toolbar”><button><img src=“cut.png”></img>Cut</button></div> <textarea id=“editor”></textarea></div>Spring 2008 6.831 User Interface Design and Implementation 6Java SwingJPanel main = new JPanel();JPanel toolbar = new JPanel();JButton button = new JButton();button.setIcon(…);button.setLabel(“Cut”);toolbar.add(button);main.add(toolbar);JTextArea editor = new JTextArea();main.add(editor);Cut To give an analogy that you should be familiar with, here’s some Swing code that produces the same interface procedurally. By comparison, the HTML is more concise, more compact – a common advantage of declarative specification. Note that neither the HTML nor the Swing code actually produces the layout shown in the picture, at least not yet. We’d have to add more information to both of them to get the components to appear with the right positions and sizes. We’ll talk about layout later. Declarative HTML vs. Procedural DOMHTML<div id=“main”><div id=“toolbar”><button><img src=“cut.png”></img>Cut</button></div> <textarea id=“editor”></textarea></div>Spring 2008 6.831 User Interface Design and Implementation 7Document Object Model (DOM) in Javascriptvar main = document.createElement(“div”);main.setAttribute(“id”, “window”);var toolbar = document.createElement(“div”);toolbar.setAttribute(“id”, “toolbar”);var button = document.createElement(“button”);var img = document.createElement(“img”);img.setAttribute(“src”, “cut.png”);button.appendChild(img);var label = document.createTextNode(“Cut”);button.appendChild(label);toolbar.appendChild(button);window.appendChild(toolbar);var editor = document.createElement(“textarea”);editor.setAttribute(“id”, “editor”);window.appendChild(editor);Cut Here’s procedural code that generates the same HTML component hierarchy, using the Javascript programming and the Document Object Model (DOM). DOM is a standard set of classes and methods for interacting with a tree of HTML or XML objects procedurally. (DOM interfaces exist not just in Javascript, which is the most common place to see it, but also in Java and other languages.) There are a lot of similarities between the procedural code here and the procedural Swing code on the previous page – e.g. createElement is analogous to a constructor, setAttribute sets attributes on elements, and appendChild is analogous to add. Incidentally, you don’t always have to use the setAttribute method to change attributes on HTML elements. In Javascript, many attributes are reflected as properties of the element (analogous to fields in Java). For example, obj.setAttribute(“id”, value) could also be written as obj.id = value. Be warned, however, that only standard HTML attributes are reflected as object properties (if you call setAttribute with your own wacky attribute name, it won’t appear as a Javascript property), and sometimes the name of the attribute is different from the name of the property. For example, the “class” attribute must be written as obj.className when used as a property.Mixing Declarative and Procedural CodeHTML<div id=“main”><textarea id=“editor”></textarea></div><script>var toolbar = document.createElement(“div”);toolbar.setAttribute(“id”, “toolbar”);toolbar.innerHTML = “<button><img src=‘cut.png’></img>Cut</button>”;var editor = document.getElementById(“editor”);var main = editor.parentNode;main.insertBefore(toolbar, editor);</script>Spring 2008 6.831 User Interface Design and Implementation 8divdiv textareabuttonimgtextCut To actually create a working interface, you frequently need to use a mix of declarative
View Full Document
Unlocking...