1 / 26

User Interface Software Look under the hood

User Interface Software Look under the hood. Agenda Styles of tools Design tools UI toolkits GUI builder tools. Get What You Ask For. User Interface Software. What support is provided for building graphical user interfaces? UI toolkits GUI builder tools Let’s examine some background….

betha
Télécharger la présentation

User Interface Software Look under the hood

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Interface SoftwareLook under the hood Agenda • Styles of tools • Design tools • UI toolkits • GUI builder tools CS/PSY 6750

  2. Get What You Ask For CS/PSY 6750

  3. User Interface Software • What support is provided for building graphical user interfaces? • UI toolkits • GUI builder tools • Let’s examine some background… CS/PSY 6750

  4. GUI System Architecture Layered Architecture Application Higher level Tool UI Toolkit Window System OS Hardware CS/PSY 6750

  5. Window System • Virtual display abstraction • Coordinates different input devices • Provides window primitives • Important components • Graphics model • Input model • May or may not include window manager CS/PSY 6750

  6. UI Toolkit • What application programmer typically programs with • Combination of interface objects and management behaviors • Usually object-oriented now • Library of software components and routines that programmer puts together • X Windows: X Toolkit & Motif • Macintosh: Mac Toolbox, MacApp • Windows: Windows Developers’ Toolkit • Java: Swing CS/PSY 6750

  7. Higher Level Tools • Provide assistance or some automation in developing UIs • Many names • User Interface Management System UIMS • User Interface Builder • User Interface Development Environment CS/PSY 6750

  8. Application Core functionality Operations Data Interface Interface components Graphics I/O Separation of Concerns Should these be separated in code? Why? Why not? CS/PSY 6750

  9. How Does a Toolkit Work? • What exactly does it provide? • How is it organized? Toolkit Workings • User takes actions, interacts with interface • Those actions must be delivered to application in meaningful ways • Application takes appropriate actions, perhaps updating display CS/PSY 6750

  10. Seeheim Model Conversational model Applicationinterface Dialogcontrol Presentation Dominant model for long time CS/PSY 6750

  11. Object Model • UI is collection of interactor objects (often called widgets) • User directly manipulates them • Objects responsible for transmitting user actions to application in meaningful ways Application UI User CS/PSY 6750

  12. Locus of Control • “Traditional” software • Control is in system, query user when input needed • Event-driven software • Control is with user (wait for action) • Code reacts to user actions • More difficult to write code this way, harder to modularize, etc. CS/PSY 6750

  13. Event-Driven Program • Initialize display & system • Repeat • Wait for and get next user action • Decipher action • Take appropriate action • Update display • Until Done CS/PSY 6750

  14. Event-Driven Program UI Mainapplicationcode System Entrypoint What’s that? CS/PSY 6750

  15. Callback Routine • Software procedure, part of application • Invoked when particular action occurs to UI component, such as pressing a PushButton • Procedure is invoked with event parameters CS/PSY 6750

  16. Example – X & Motif • Object-oriented hierarchy of UI interactors called widgets • Associate callback routines in your code with them • Interface is built up by putting child widgets “onto” parent widgets CS/PSY 6750

  17. Widget Graphical user interface interactor object CS/PSY 6750

  18. Widget Hierarchy • Widgets organized into inheritance hierarchy Primitive Text Label Button Scroll Bar Push Button Drawn Button Toggle Button CS/PSY 6750

  19. Widget • Visual appearance • Set of tailorable attributes • Interactive behavior PushButton { Color BackGround; int MarginLeft; int MarginRight; int BorderWidth; Pixmap ArmPixmap; Boolean FillOnArm; CallbackList ActivateCallback; } CS/PSY 6750

  20. Widget Use • Set up widget attributes • Create widget object (as child of parent widget) • Define callback or event procedure for widget CS/PSY 6750

  21. Widget and Callback n = 0; xmstr = XmStringCreate("Color",XmSTRING_DEFAULT_CHARSET); XtSetArg(args[n], XmNlabelString, xmstr); n++; XtSetArg(args[n], XmNbackground, red); n++; colorbut = XtCreateManagedWidget("colorbutton", xmPushButtonWidgetClass,focusrowcol, args, n); XtAddCallback(colorbut, XmNactivateCallback, colorChangeCB, id); void colorChangeCB(Widget w, XtPointer userdata, XtPointer evtdata) { // Actions } CS/PSY 6750

  22. Main Program Event Loop voidCheckXEvents() { XEvent xev; while (XtAppPending(_context)) { XtAppNextEvent(_context, &xev); XtDispatchEvent(&xev); } } CS/PSY 6750

  23. OO Systems • Java’s GUI programming done with AWT and Swing • More distributed model (separate threads) • Primary action here is dispatching events to objects (widgets) as messages • Delegation important • Can make particular objects responsible for event handling CS/PSY 6750

  24. GUI Builder Tools • Why build graphical (visual) interface with textual commands? • Why not show what you want it to look like? • Visual builder tools: Visual Basic, Visual C++, Borland Delphi, Symantec Cafe CS/PSY 6750

  25. Tool Methods • Work area (interface being built) • Drag and drop interactors/widgets onto work area • Specify position, color, look, etc. • Often provide Build/Test modes CS/PSY 6750

  26. Example: dtbuilder (Motif) CS/PSY 6750

More Related