Ras Bodik CS 164 (Fall 2004)1A Small GUI LanguageRas Bodik CS 164 (Fall 2004)2Administrivia •PA5:–due Thu Dec 9– if you’ve ran out of late days, you can still submit late, with a penalty of 10%/day– submit not later than Sunday Dec 12•PA6: –due Monday, Dec 13– your test cases may be selected as benchmarks to declare the winner– winner to be declared at the final examRas Bodik CS 164 (Fall 2004)3Lecture Outline• Follow-up to Dave’s lecture– a do-it-yourself language for GUI programming– design and implementation– from Fall 2003 final exam (design was given)– see the exam for more details on this language• HKN Course Survey– with a few curious questions from meRas Bodik CS 164 (Fall 2004)4The problem•Problem:– we have a GUI library– happy with its functionality– but client programs are too tedious to write – clients contain repetitive code Æ opportunity!•Solution: – design a small language – a declarative language (state what, not how) – a simple, convenient layer over a complicated library– client programs will be concise, easy to developRas Bodik CS 164 (Fall 2004)5What is GUI programming?1. creating windows, menus2. linking them to actions in client code• our example language will take care of only the firstRas Bodik CS 164 (Fall 2004)6A hypothetical GUI library• Key elements: –widgets• label (text)• dialog box (for entering strings)• button (such as Cancel)• selection button (select zero or more options)• radio buttons (select exactly one of multiple options)–windows • contain widgets and (nested) windows• content organized in rows• an optional window titleRas Bodik CS 164 (Fall 2004)7An example windowTwo windows nested in their parent window. The left window contains selection buttons; the right window contains radio buttons.three widgets: a text, a dialog box, and a button.Top-level window.Ras Bodik CS 164 (Fall 2004)8Client code for the example window// the constructor's argument is always the parent window; Window top = new Window(null); // top-level window is parentlesstop.setTitle(``Find'');// The first row of the top-level windowText t = new Text(top); t.setPosition(0,0);// sets position within the parent window, given as x,y coord.// position is relative to top left corner of parent window// values are in percent of the parent sizet.setLabel("Find what:");Dialog d = new Dialog(top); d.setPosition(20,0);d.setWidth(18*someConstant); // there are 18 dashes in <--...-->Button f = new Button(top); f.setType(REGULAR_BUTTON);f.setPosition(80,0); f.setLabel("Find Next");// Second row of the top level window// Left nested window Window w1 = new Window(top);w1.setPosition(0,50); Selection s1 = new Selection(w1); s1.setPosition(0,0);s1.setLabel("Match whole word only");Selection s2 = new Selection(w1); s2.setPosition(0,50);s2.setLabel("Match case"); s2.setSelected(true); // this selection is checked// Right nested windowWindow w2 = new Window(top); w2.setPosition(45,50);w2.setTitle("Direction"); w2.setFramed(true);Button r1 = new Button(w2); r1.setType(RADIO);r1.setPosition(0,0); r1.setLabel("Up");Button r2 = new Button(w2); r2.setType(RADIO);r2.setPosition(50,0); r2.setLabel("Down");r2.setSelected(true); // this button is checked// The very last elementButton c = new Button(top); c.setType(REGULAR_BUTTON);c.setPosition(80,50); c.setLabel("Cancel");// Finally, draw the entire window (it draws its subwindows, // too, of course)top.draw();Ras Bodik CS 164 (Fall 2004)9The client code in detail (1)• Create top-level window– the constructor's argument is always the parent window– top-level window is parentless (null argument)Window top = new Window(null); – set title: null argument means window has no titletop.setTitle(“Find”);Ras Bodik CS 164 (Fall 2004)10The client code in detail (2)• Now create the first widget (the text label)Text t = new Text(top); t.setLabel("Find what:");– set position within the parent window, given as x,y coord (in percent of the parent size)– position is relative to top left corner of parent windowt.setPosition(0,0);• The second widet (the dialog box))Dialog d = new Dialog(top); d.setPosition(20,0);– set dialog box width (in percent of the parent width)d.setWidth(50);Ras Bodik CS 164 (Fall 2004)11The client code in detail (3)• Similarly, create the third widget (the Find button)Button f = new Button(top); f.setLabel("Find Next");f.setType(REGULAR_BUTTON);f.setPosition(80,0); Ras Bodik CS 164 (Fall 2004)12The client code in detail (4)• Create the left nested window Window w1 = new Window(top);w1.setPosition(0,50); • Create the selection buttons within the nested windowSelection s1 = new Selection(w1); s1.setPosition(0,0);s1.setLabel("Match whole word only");Selection s2 = new Selection(w1); s2.setPosition(0,50);s2.setLabel("Match case"); – this selection button is initially checkeds2.setSelected(true);Ras Bodik CS 164 (Fall 2004)13The client code in detail (5)• Create the right nested window Window w2 = new Window(top); w2.setPosition(45,50);w2.setTitle("Direction"); w2.setFramed(true);• Create the selection buttons within the nested windowButton r1 = new Button(w2); r1.setType(RADIO); r1.setPosition(0,0); r1.setLabel("Up");Button r2 = new Button(w2); r2.setType(RADIO); r2.setPosition(50,0); r2.setLabel("Down");– this radio button is initially checkedr2.setSelected(true); Ras Bodik CS 164 (Fall 2004)14The client code in detail (6)• The last widgetButton c = new Button(top); c.setType(REGULAR_BUTTON);c.setPosition(80,50); c.setLabel("Cancel");• Finally, draw the top-level window (will draw its sub-windows, too)top.draw();Ras Bodik CS 164 (Fall 2004)15Designing a higher-level language (1)• What level of abstraction do we want? • One painfully low-level detail:– the GUI code had to specify coordinates– can we avoid specifying these coordinates? idea: • organize widgets into rows, specified by the programmer• have the compiler for our small language compute coordinates for us• less flexibility (cannot fine tune positions) but faster programming• Another low-level detail we’d alike to avoid– specifying parents of windows– windows (nearly) always nested, so let’s use nested scoping to convey parenthoodRas Bodik CS 164 (Fall 2004)16Rows: a concept in our new languageTwo windows nested in their parent window.
View Full Document
Unlocking...