DOCSLIB.ORG

Final Report

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Final Report SKETCHI - FROM SKETCHES TO GUIS Johnathan Tunnicliffe Supervisor: Dr Simon Colton Individual Project Report for MEng Computing, Imperial College London [email protected] June 2009 ABSTRACT Despite the dominance of Graphical User Interfaces (GUIs) in both consumer and business applications, there is still no simple, straightforward way of producing them. Manual coding requires a programmer to do a designer’s job whilst drag-and-drop tools produce verbose, difficult-to-read code. Various tools and techniques have been created over the years to aid developers in producing GUIs whilst reducing some of the prerequisite knowledge required. However, there is still a wealth of expertise needed regarding the specific widget toolkit to use these tools and produce a good quality interface for an end user. This report discusses a new, more natural tool that developers can use to build GUIs particularly for Swing in Java. We explore transforming sketches and natural input into the code for user interfaces. We have implemented a new GUI design tool that removes the learning curve in creating GUIs, produces concise code and requires minimal user intervention and prior toolkit knowledge. The results show that we can produce quality GUIs from natural input with minimal widget toolkit knowledge. Furthermore, the code created is more concise and of a higher quality than existing tools. The final finding is that we can abstract the toolkit so a single GUI sketch can produce code for multiple toolkits and programming languages. 1 ACKNOWLEDGEMENTS I would firstly like to thank my supervisor Dr Simon Colton for his excellent project idea as well as his help throughout the duration of the project. I would also like to thank my family, girlfriend and friends for helping me through university and pushing me over the finish line after four long years. 2 TABLE OF CONTENTS 1 INTRODUCTION ...............................................................................................6 1.1 MOTIVATION ......................................................................................... 6 1.1.1 Knowledge Barrier.....................................................................................6 1.1.2 Achieving Good Layout............................................................................7 1.1.3 Quality of Generated Code.......................................................................7 1.2 CONTRIBUTIONS ..................................................................................... 8 1.3 REPORT STRUCTURE ................................................................................ 9 2 BACKGROUND .............................................................................................. 10 2.1 GUI BASICS ........................................................................................ 10 2.1.1 What is a GUI?..........................................................................................10 2.1.2 Human Interface Guidelines ..................................................................11 2.1.3 GUI Toolkits..............................................................................................11 2.2 CURRENT GUI BUILDING METHODS............................................................ 15 2.2.1 Coding by Hand.......................................................................................15 2.2.2 GUI Builders: WYSIWYG .......................................................................15 2.2.3 Using a Markup Language to Specify GUIs.........................................21 2.3 INPUT RECOGNITION.............................................................................. 26 2.3.1 Artificial Neural Networks.....................................................................26 2.3.2 Pixel Overlay.............................................................................................30 2.3.3 Receptors ...................................................................................................31 2.3.4 Case-Based Reasoning.............................................................................34 2.4 LAYOUT MANAGEMENT .......................................................................... 36 2.4.1 Basic Layout Techniques.........................................................................36 2.4.2 The Dark Art of Java Layout Management ..........................................38 2.4.3 Inferring Correct Layout .........................................................................42 3 DESIGN CONSIDERATIONS........................................................................... 44 3.1 AIMS................................................................................................. 44 3.2 CRITIQUE OF EXISTING TECHNIQUES ........................................................... 44 3.2.1 Problems with Manual Coding..............................................................44 3.2.2 Problems with Current GUI Builders....................................................45 3.2.3 Problems with Specifying in Markup Languages ...............................47 3.2.4 Conclusion of Criticisms .........................................................................47 3.3 DESIGN.............................................................................................. 47 3.3.1 High Level Architecture..........................................................................48 3.3.2 Implementation Choices .........................................................................48 3.3.3 Application Components........................................................................49 3.3.4 Application States ....................................................................................51 3.3.5 Component Interaction ...........................................................................52 3 3.3.6 Sketchi Flexibility .....................................................................................53 4 INPUT DETECTION & CLASSIFICATION ....................................................... 54 4.1 DETECTION......................................................................................... 54 4.2 CLASSIFICATION ................................................................................... 55 4.2.1 Case-Based Reasoning.............................................................................57 4.2.2 Receptor Patterns .....................................................................................59 4.2.3 Suggesting a Classification .....................................................................61 4.2.4 Enhancing the Receptor Encoding.........................................................62 4.2.5 Incorporating Other Features.................................................................63 4.2.6 Learning From the User ..........................................................................67 4.3 SUMMARY OF INPUT DETECTION AND CLASSIFICATION .................................... 67 5 AUTOMATED LAYOUT GENERATION ........................................................... 68 5.1 LAYOUT GENERATOR ARCHITECTURE.......................................................... 68 5.2 MIGLAYOUT ........................................................................................ 70 5.2.1 Inferring Columns & Rows.....................................................................72 5.2.2 Adding Component Constraints ...........................................................74 5.3 SUMMARY OF AUTOMATED LAYOUT GENERATION .......................................... 75 6 CODE GENERATION..................................................................................... 76 6.1 MODELLING THE GUI............................................................................. 76 6.2 ABSTRACT CODE GENERATION ................................................................. 77 6.3 SUMMARY OF CODE GENERATION .............................................................. 81 7 EXPERIMENTAL DESIGN ............................................................................... 82 7.1 INPUT RECOGNITION RATES ..................................................................... 82 7.2 LAYOUT GENERATION FLEXIBILITY ............................................................. 83 7.3 QUALITY OF CODE GENERATION ............................................................... 83 7.4 PROJECT BRIEF ASSIGNMENT .................................................................... 84 7.5 USABILITY TESTING ............................................................................... 84 7.5.1 End-user Testing ......................................................................................84 7.5.2 Nielsen’s Usability Heuristics ................................................................86 7.6 PERFORMANCE TESTING.......................................................................... 86 7.7 ROBUSTNESS & STABILITY ....................................................................... 87 7.7.1 Monkey Testing........................................................................................87 7.7.2 Stress Testing ............................................................................................88 8 RESULTS & ANALYSIS.................................................................................. 89 8.1 INPUT RECOGNITION RATES ..................................................................... 89 8.2 LAYOUT GENERATION FLEXIBILITY ............................................................. 91 8.3 QUALITY OF CODE GENERATION ..............................................................
Load more

Recommended publications
  • R&S®BBA100 Broadband Amplifier Open
    R&S®BBA100 Broadband Amplifier Open Source Acknowledgment 5353.8300.00 – 01 /RL/1/EN 01.00 / Broadcasting 3575.4620.02 M: - T - PAD Open Source Acknowledgment R&S BBA100 Introduction Contents 1 Introduction ......................................................................................... 3 1.1 Disclaimer ..................................................................................................................... 3 1.2 How to obtain the source code .................................................................................. 3 2 Software packages ............................................................................. 4 3 Verbatim license texts ........................................................................ 7 3.1 Apache License 2.0 ..................................................................................................... 7 3.2 GNU Library General Public License, Version 2.0 (LGPL 2.0) ..............................10 3.3 Boost Software License ............................................................................................18 3.4 GNU General Public License, Version 2.0 (GPL 2.0) ..............................................18 3.5 GNU Lesser General Public License, Version 2.1 (LGPL 2.1) ...............................24 3.6 Mozilla Public License, Version 1.1 (MPL 1.1) ........................................................32 3.7 MIT ...............................................................................................................................40 3.8 JDOM License
    [Show full text]
  • Swing: Components for Graphical User Interfaces
    Swing: Components for Graphical User Interfaces Computer Science and Engineering College of Engineering The Ohio State University Lecture 22 GUI Computer Science and Engineering The Ohio State University GUI: A Hierarchy of Nested Widgets Computer Science and Engineering The Ohio State University Visual (Containment) Hierarchy Computer Science and Engineering The Ohio State University Top-level widgets: outermost window (a container) Frame, applet, dialog Intermediate widgets: allow nesting (a container) General purpose Panel, scroll pane, tabbed pane, tool bar Special purpose Layered pane Atomic widgets: nothing nested inside Basic controls Button, list, slider, text field Uneditable information displays Label, progress bar, tool tip Interactive displays of highly formatted information Color chooser, file chooser, tree For a visual (“look & feel”) of widgets see: http://java.sun.com/docs/books/tutorial/uiswing/components Vocabulary: Widgets usually referred to as “GUI components” or simply “components” History Computer Science and Engineering The Ohio State University Java 1.0: AWT (Abstract Window Toolkit) Platform-dependent implementations of widgets Java 1.2: Swing Most widgets written entirely in Java More portable Main Swing package: javax.swing Defines various GUI widgets Extensions of classes in AWT Many class names start with “J” Includes 16 nested subpackages javax.swing.event, javax.swing.table, javax.swing.text… Basic GUI widgets include JFrame, JDialog JPanel, JScrollPane, JTabbedPane,
    [Show full text]
  • Adult Coloring Journal : Health & Wellness (Pet Illustrations, Pastel Floral)
    ADULT COLORING JOURNAL : HEALTH & WELLNESS (PET ILLUSTRATIONS, PASTEL FLORAL) Author: Courtney Wegner Number of Pages: 162 pages Published Date: 20 May 2016 Publisher: Adult Coloring Journal Press Publication Country: United States Language: English ISBN: 9781357676728 DOWNLOAD: ADULT COLORING JOURNAL : HEALTH & WELLNESS (PET ILLUSTRATIONS, PASTEL FLORAL) Adult Coloring Journal : Health & Wellness (Pet Illustrations, Pastel Floral) PDF Book For instructors, this is a great book if they don t have their own class notes one can teach straight from the book. The Art and Science of Photovoltaics series was developed to fill this education gap. " Human being is inseparable from animality. One of the core underpinnings of Eclipse is SWT, the Standard Widget Toolkit. This book was published as a special issue of Development in Practice. Visit a dinosaur dig site or a famous dinosaur track site-- and even make your own cast of fossilized tracks. This ground breaking work should be of special interest to life science professionals working in the areas of knowledge management, data mining, and visualization. ABOUT THE SERIES: The Very Short Introductions series from Oxford University Press contains hundreds of titles in almost every subject area. Built around a comprehensive directory of professional qualifying bodies each professional area is described in depth and its qualifications identified and explained. Another force behind successful habit change is belief in the ability to change the habit. Each play introduces students to a specific world culture by looking at holidays celebrated in that culture. You'll discover fresh and re-energized lessons, completely updated research, and vibrant vignettes from new colleagues and old friends who have as much passion for their subjects as you do.
    [Show full text]
  • Proveos User Manual
    User Manual Contents Welcome .............................................................................................. 5 How proVEOS Works ...........................................................................................7 Installing the proVEOS Software for Windows ..................................... 9 Configuring Firewall Software .............................................................................10 Installing the Windows proVEOS Software .........................................................14 Signing in to proVEOS ........................................................................................24 Installing the proVEOS Software for Mac........................................... 29 Configuring the Firewall ......................................................................................30 Installing the Mac proVEOS Software.................................................................32 Signing in to proVEOS ........................................................................................34 Presenting with proVEOS ................................................................... 37 Starting a Presentation .......................................................................................40 Managing Participants ........................................................................................40 Chatting with Participants ...................................................................................45 Playing Music and Movies ................................................................
    [Show full text]
  • Java Programming
    CHAPTER 15 Advanced GUI Topics In this chapter, you will: Use content panes Use color Learn more about layout managers Use JPanels to increase layout options Create JScrollPanes Understand events and event handling more thoroughly Use the AWTEvent class methods Handle mouse events Use menus Unless noted otherwise, all images are © 2014 Cengage Learning Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. CHAPTER 15 Advanced GUI Topics Understanding the Content Pane The JFrame class is a top-level container Java Swing class. (The other two top-level container classes are JDialog and JApplet.) Every GUI component that appears on the screen must be part of a containment hierarchy. A containment hierarchy is a tree of components that has a 802 top-level container as its root (that is, at its uppermost level). Every top-level container has a content pane that contains all the visible components in the container’s user interface. The content pane can directly contain components like JButtons, or it can hold other containers, like JPanels, that in turn contain such components. A top-level container can contain a menu bar. A menu bar is a horizontal strip that conventionally is placed at the top of a container and contains user options.
    [Show full text]
  • LWUIT Developer's Guide
    Lightweight UI Toolkit Developer’s Guide Part No. 07-08-10 July 2010 Copyright © 2008, 2010 Oracle and/or its affiliates. All rights reserved. This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing. If this is software or related software documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, the following notice is applicable: U.S. GOVERNMENT RIGHTS Programs, software, databases, and related documentation and technical data delivered to U.S. Government customers are "commercial computer software" or "commercial technical data" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, the use, duplication, disclosure, modification, and adaptation shall be subject to the restrictions and license terms set forth in the applicable Government contract, and, to the extent applicable by the terms of the Government contract, the additional rights set forth in FAR 52.227-19, Commercial Computer Software License (December 2007). Oracle America, Inc., 500 Oracle Parkway, Redwood City, CA 94065.
    [Show full text]
  • Overview Known Issues Platform Support Windows Linux Mac Setup
    LiveCode 6.5.0 Release Notes 11/27/13 Overview Known issues Platform support Windows Linux Mac Setup Installation Uninstallation Reporting installer issues Activation Multi-user and network install support (4.5.3) Command-line installation Command-line activation Proposed changes Engine changes Full screen scaling mode. Improved image editing tools. Take account of keyboard visibility in Android "effective working screenrect". Notify engine of changes to keyboard visibility. Crash when attempting to print to file on linux. Fullscreen modes cause clipped text on Windows Printing text to PDF on Windows can result in poor layout. Server graphics support The fullscreenModes are now camel-case. PCRE library updated to version 8.33 libUrlSetSSLVerification now supported on mobile platforms Resolution Independence New Graphics Layer Multiple Density Support Density Mapped Images Future Plans More control over automatic scaling Hi-DPI support on desktop platforms. New global property colorDialogColors Integration of revFont external Enhanced 'filter' command Filtering items Matching regular expressions Storing the output in another container Adoption of 'convert' semantics Backward compatibility Text Measurement The optional *recursively* adverb has been added to union and intersect commands 1 LiveCode 6.5.0 Release Notes 11/27/13 Xpath functions Syntax Usage Standalones now set default font settings the same as the IDE. Setting the filename of an image which already has a filename causes the property to be unset and 'could not load image' in
    [Show full text]
  • COMP1006/1406 Notes 2
    COMP1406/1006 - Design and Implementation of Computer Applications Winter 2006 2 Applications and LayoutManagers What's in This Set of Notes? We look here at how to create a graphical user interface (i.e., with windows) in JAVA. Creating GUIs in JAVA requires adding components onto windows. We will find out how to do this as well as look at an interesting JAVA feature called a "LayoutManager" that automatically arranges components on the window. This allows us to create simple windows without having to worry about resizing issues. Here are the individual topics found in this set of notes (click on one to go there): • 2.1 Creating a Basic GUI Application • 2.2 Components and Containers • 2.3 Layout Managers o 2.3.1 NullLayout o 2.3.2 FlowLayout o 2.3.3 BorderLayout o 2.3.4 CardLayout o 2.3.5 GridLayout o 2.3.6 GridBagLayout o 2.3.7 BoxLayout 2.1 Creating a Basic GUI Application Recall that a Graphical User Interface (GUI) is a user interface that has one or more windows. A frame: • is the JAVA terminology for a window (i.e., its a window frame) • represented by the Frame and JFrame classes in JAVA • used to show information and handle user interaction • has no security restrictions ... can modify files, perform I/O, open network connections to other computers, etc.. The following code creates a basic window frame in JAVA and shows it on the screen: javax.swing.JFrame frame = new javax.swing.JFrame("This appears at the top of the window"); frame.setSize(300, 100); frame.setVisible(true); Here is what it looks like: Although this code for bringing up a new window can appear anywhere, we typically designate a whole class to represent the window (that is, the JAVA application).
    [Show full text]
  • Customizing Eclipse RCP Applications Techniques to Use with SWT and Jface
    Customizing Eclipse RCP applications Techniques to use with SWT and JFace Skill Level: Intermediate Scott Delap ([email protected]) Desktop/Enterprise Java Consultant Annas Andy Maleh ([email protected]) Consultant 27 Feb 2007 Most developers think that an Eclipse Rich Client Platform (RCP) application must look similar in nature to the Eclipse integrated development environment (IDE). This isn't the case, however. This tutorial will explain a number of simple techniques you can use with the Standard Widget Toolkit (SWT) and JFace to create applications that have much more personality than the Eclipse IDE. Section 1. Before you start About this tutorial This tutorial will explain a number of UI elements that can be changed in Eclipse RCP, JFace, and SWT. Along the way, you will learn about basic changes you can make, such as fonts and colors. You will also learn advanced techniques, including how to create custom wizards and section headers. Using these in conjunction should provide you the ability to go from a typical-looking Eclipse RCP application to a distinctive but visually appealing one. Prerequisites Customizing Eclipse RCP applications © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 1 of 40 developerWorks® ibm.com/developerWorks You should have a basic familiarity with SWT, JFace, and Eclipse RCP. System requirements To run the examples, you need a computer capable of adequately running Eclipse V3.2 and 50 MB of free disk space. Section 2. Heavyweight and lightweight widgets Before diving into techniques that can be used to modify SWT, JFace, and Eclipse RCP in general, it's important to cover the fundamental characteristics of SWT and how they apply to the appearance of the widget set.
    [Show full text]
  • IBMが注力するオープンソース・プロジェクト ― Eclipseとdojo Toolkit ―
    解 説 2 IBMが注力するオープンソース・プロジェクト ― EclipseとDojo Toolkit ― 昨今のソフトウェア 開 発における重 要な要 素である Article 2 オープンソース・ソフトウェア。中でも、IBM が注力す Open Source Projects that IBM Invests in るオープンソース・プロジェクトとして、Eclipse と Dojo - Eclipse and Dojo Toolkit - Toolkit があります。Eclipse は、JavaTM ベースの統合 Open source software is an important factor in software 開発環境としての地位を確立し、さらにリッチ・クライア development today. Among many open source projects, IBM ントのプラットフォームとして 、 また、 サ ー バー・ サイドの is investing in the Eclipse and the Dojo Toolkit. The Eclipse is プラグイン技術として利用範囲を広げています。 一方、 dominant in the Java IDE area and continues to evolve as well as a rich client platform and a server-side plug-in Dojo Toolkit は、Web ブラウザー上で動作するリッチ・ technology, while the Dojo Toolkit is an emerging open インターネット・アプリケーションの開発に欠かせない、 source project that provides JavaScript libraries for developing rich internet applications. This article introduces 高機能 JavaScriptTM ライブラリーとして、製品での利 the latest activities and features on both open source 用が進んでいる注目株のオープンソース・プロジェクトで projects. す。本稿では、この二つのオープンソース・プロジェクト の動向をご紹介します。 ❶ ますます重要になるオープンソース ア開発へとそのターゲット・エリアを広 げ ています 。さらには、 開発環境としてだけではなく、 例 えばリッチ・クライアントの Linux®をはじめとしたオープンソースの潮流は、ソフト 基盤としての活用や、サーバー環境での活用もすでに始 ウェア開発の現場で注目され始めた黎明期から、質・種 まって いるの で す （ 図1）。 類ともに飛躍的な進歩を遂げています。オープンソースの 利用は、システム開発期間の短縮やコミュニティーによる Java開発環境から 統合開発環境、 Eclipse3.4 品質向上といったコスト削 減 のメリットに 加 えて 、 特 定 の ベ デスクトップ・プラットフォームへ Eclipse3.3 ンダーの技術に対する依存を避け、将来にわたる柔軟な Eclipse3.2 Web開発 システム構築のための重要な選択肢となっています。 Eclipse3.1 本稿では、そのようなオ ープンソース・プロジェクトの 中 組み込みデバイス開発 Eclipse3.0 から、IBM が注力する「Eclipse」と「Dojo Toolkit」 リッチ・クライアント Eclipse2.0
    [Show full text]
  • The Glib/GTK+ Development Platform
    The GLib/GTK+ Development Platform A Getting Started Guide Version 0.8 Sébastien Wilmet March 29, 2019 Contents 1 Introduction 3 1.1 License . 3 1.2 Financial Support . 3 1.3 Todo List for this Book and a Quick 2019 Update . 4 1.4 What is GLib and GTK+? . 4 1.5 The GNOME Desktop . 5 1.6 Prerequisites . 6 1.7 Why and When Using the C Language? . 7 1.7.1 Separate the Backend from the Frontend . 7 1.7.2 Other Aspects to Keep in Mind . 8 1.8 Learning Path . 9 1.9 The Development Environment . 10 1.10 Acknowledgments . 10 I GLib, the Core Library 11 2 GLib, the Core Library 12 2.1 Basics . 13 2.1.1 Type Definitions . 13 2.1.2 Frequently Used Macros . 13 2.1.3 Debugging Macros . 14 2.1.4 Memory . 16 2.1.5 String Handling . 18 2.2 Data Structures . 20 2.2.1 Lists . 20 2.2.2 Trees . 24 2.2.3 Hash Tables . 29 2.3 The Main Event Loop . 31 2.4 Other Features . 33 II Object-Oriented Programming in C 35 3 Semi-Object-Oriented Programming in C 37 3.1 Header Example . 37 3.1.1 Project Namespace . 37 3.1.2 Class Namespace . 39 3.1.3 Lowercase, Uppercase or CamelCase? . 39 3.1.4 Include Guard . 39 3.1.5 C++ Support . 39 1 3.1.6 #include . 39 3.1.7 Type Definition . 40 3.1.8 Object Constructor . 40 3.1.9 Object Destructor .
    [Show full text]
  • Decwindows Motif Guide to Application Programming
    DECwindows Motif Guide to Application Programming Order Number: AA–PGZEB–TE January 1994 This document describes the programming interface for widgets provided by Digital in the DECwindows Motif Version 1.2 Toolkit. This document also includes tutorial programming information for the DECwindows Motif Version 1.2 Toolkit. Revision/Update Information: This is a revised manual. Operating System: OpenVMS AXP Version 1.5 VMS Version 5.5–2 Software Version: DECwindows Motif Version 1.2 for OpenVMS AXP DECwindows Motif Version 1.2 for OpenVMS VAX Digital Equipment Corporation Maynard, Massachusetts January 1994 The information in this document is subject to change without notice and should not be construed as a commitment by Digital Equipment Corporation. Digital Equipment Corporation assumes no responsibility for any errors that may appear in this document. The software described in this document is furnished under a license and may be used or copied only in accordance with the terms of such license. No responsibility is assumed for the use or reliability of software on equipment that is not supplied by Digital Equipment Corporation or its affiliated companies. Restricted Rights: Use, duplication, or disclosure by the U.S. Government is subject to restrictions as set forth in subparagraph (c)(1)(ii) of the Rights in Technical Data and Computer Software clause at DFARS 252.227-7013. © Digital Equipment Corporation 1994. All Rights Reserved. The postpaid Reader’s Comments forms at the end of this document request your critical evaluation to assist in preparing future documentation. The following are trademarks of Digital Equipment Corporation: Alpha AXP, AXP, Bookreader, DEC, DECpaint, DECterm, DECwindows, DECwrite, Digital, eXcursion, OpenVMS, VAX, VAX DOCUMENT, VMS, XUI, and the DIGITAL logo.
    [Show full text]