HCI-1 PDF

IT1906 User Interface Development UI Framework and Toolkit A framework is a well-defined environment that exposes toolkits, functions or algorithms that can be used to develop new applications. It contains specific structure for creating applications, b...

IT1906 User Interface Development UI Framework and Toolkit A framework is a well-defined environment that exposes toolkits, functions or algorithms that can be used to develop new applications. It contains specific structure for creating applications, building executable version of applications, and sometimes including mechanism for deploying and/or running an application. The terms “development platform” and “software development platform” are used to describe frameworks (Harris Geospatial Solutions, Inc., n.d.). A toolkit, on the other hand, is a library of precomposed UI objects and predefined set of events or routines that are composed from the lower level UI software layer. The UI toolkit abstracts the system details of handling events, which makes programming easier and more convenient while creating user-friendly interfaces. Using a toolkit also promotes the creation of an interface with a consistent look, feel, and mechanism. The UI objects often take the form of a manipulable graphical object, commonly called widgets (Kim, 2015). A widget is an essential part of a graphical user interface (GUI) that displays information or provides a specific way for users to interact with the operating system or application. Widgets include icons, menus, buttons, selection and text boxes, progress indicators, on-off checkmarks, scroll bars, windows, toggle buttons, forms, and even images (TechTarget, n.d.). The UI toolkit is structured to support large applications. Its design assumes that individual events or routines will support the major functions of an application. The main routine is consists of small decision kits that make the appropriate calls of the other routines. Routines and programs interact with the window library that the UI toolkit creates when processing the codes (Synergy DE, n.d.). Note: Some toolkits are standalone, while some are already integrated in a framework. Examples of UI Framework and Toolkit Android UI Execution Framework and Toolkit The user programming environment and execution mode for Android (even though at the low level, the operating system is derived from Linux) is based on Java. The Android event-processing model and programming toolkit structure are mostly the same as Java AWT, except for some processes in the Android UI toolkit (Kim, 2015). Thus, the framework and features of the Android operating system is available through application program interfaces or APIs written in Java. According to the developers’ website of Android, the framework provides the following: A rich and extensible View System that is used in building an application’s user interface A Resource Manager which provides access to non-code resources such as localized strings, graphics, and layout files A Notification Manager that enables all applications to display custom alerts in the status bar An Activity Manager that manages the lifecycle of applications A Content Provider that enables applications to access data from other applications. Events in Android can take various forms which are usually generated in response to bare and raw external actions, such as touch and button input. Multiple or composite higher-level events may also be internally recognized and generated, such as touch gestures (e.g., flick and swipe) and virtual keyboard inputs. The Android framework maintains an event queue into which events are placed as they occur. Then, the events are removed from the queue on a first-in, first-out (FIFO) basis (Kim, 2015). iOS UIKit Framework and Toolkit According to Kim (2015), there are three (3) major types of discrete events for iOS: multi-touch, motion, and remote control (such as remote-controlled headphones for iOS devices). Thus, based on the developers’ website of Apple Inc., the iOS UIKit framework provides the required infrastructure for iOS or tvOS applications and provides the window and view architecture for the following: Implementing interfaces Event handling infrastructure for delivering multi-touch and other types of input to the application The main run loop needed to manage interactions among the user, the system, and the application. 06 Handout 1 *Property of STI  [email protected] Page 1 of 3  IT1906 Other features that are offered by the iOS UIKit framework include animation support, document support, drawing and printing support, information about the current device, text management and display, search support, accessibility support, app extension support, and resource management. In general, iOS generates low-level events when users touch “views” of an application. Then, the application sends these discrete events as UIEvent objects, as defined by the UIKit framework to the view on which the touch occurred. The view analyzes the touch event and responds to it, where touch events can be combined to represent higher-level gestures such as flicks and swipes (Kim, 2015). For continuous streams of sensor data such as those from accelerometers and gyroscopes (devices used to stabilize, guide, and/or measure rotational movement), a separate Core Motion framework is used. However, this mechanism is the same in the sense that sensor data, abstract event, or recognized event is conveyed from iOS to the application and then to the particular view depending on the structure of the application’s user interface (Kim, 2015). Other UI Frameworks and Toolkits There are numerous frameworks and toolkits available on the Internet. Some require subscription, but most frameworks and toolkits are downloadable for free. Refer to Tables 1 and 2 for some of the frameworks and toolkits that can be used in designing and developing a Web or a mobile application. Web UI Frameworks Description JavaServer Faces (JSF) Supported by Oracle, this framework comes with in-depth and complex documentation features and plays an important part in the Java Enterprise Edition. Struts This is an open-source framework that is used to create elegant, aesthetically pleasing Java applications. The functions of this framework are based on the Model-View-Controller (MVC) approach. This is made for fast development and testing but is not flexible due to a set of coding and designing rules integrated into the framework. Wicket Supported by Apache Software Foundation, this is a lightweight Web framework built for designing simple but elegant applications in a component-based language that is useful and responsive. HTML can be easily integrated into this framework. Table 1. Other examples of Web frameworks in Java Source: https://javapipe.com/blog/best-java-web-frameworks/ Mobile UI Kits iOS and Android Description Spool UI Kit This is a free mobile toolkit designed by Sergey Melnik that contains six (6) screen designs in Photoshop Document (PSD) format. Travel UI Kit This is a free mobile toolkit designed by Ena Bacanovic that contains 50 different screen designs in Sketch format. Splash UI Kit Powered by Envato Elements Pty Ltd., this is one of the best toolkits in creating iOS mobile application. This contains more than 55 high-quality, ready to use screens. Table 2. Other examples of toolkits. Source: https://speckyboy.com/free-mobile-ui-kits-ios-android/ Java Abstract Window Toolkit (AWT) As an object-oriented language, Java offers a library of object classes called the abstract window toolkit (AWT), which includes useful classes for creating two-dimensional (2D) user interface and graphical objects. Java AWT is also a part of the UI execution framework for Java that handles a large subset of interaction events called AWTEvents. These AWTEvents are descendants of EventObjects which cover most of the useful UI events, such as mouse click and keyboard input. (Kim, 2015). According to Oracle, AWT supports GUI programming with the following features: A set of native user interface components Data transfer classes for cut-and-paste through A robust event-handling model native platform clipboard Graphics and imaging tools, including shape, color Layout managers for flexible window layouts that and font classes do not depend on a particular window size or screen resolution. 06 Handout 1 *Property of STI  [email protected] Page 2 of 3  IT1906 References: Andrew, P. (2019, May 23). 50 Free Mobile UI Kits for iOS & Android. Retrieved from https://speckyboy.com/free- mobile-ui-kits-ios-android/ August 22, 2019 Defining Platforms, Frameworks, and Toolkits. (n.d.). In Harris Geospatial Solutions, Inc. Retrieved from https://www.harrisgeospatial.com/Support/Maintenance-Detail/ArtMID/13350/ArticleID/16245/Defining- Platforms-Frameworks-and-Toolkits on August 22, 2019 Framework UIKit Overview. (n.d.). In Apple Inc. Retrieved from https://developer.apple.com/documentation/uikit on August 27, 2019 Gyroscope. (n.d.). In TechTarget. Retrieved from https://whatis.techtarget.com/definition/gyroscope on August 19, 2019 Javapipe.com. (2019). 10 best java web frameworks to use in 2019 (100% future-proof) [Web log post]. Retrieved from https://javapipe.com/blog/best-java-web-frameworks/ August 22, 2019 Kim, G. (2015). Human-computer interaction fundamentals and practice. USA: CRC Press. Oracle Java SE Documentation. (2018). Abstract Window Toolkit (AWT). Retrieved from https://docs.oracle.com/javase/7/docs/technotes/guides/awt/index.html on August 14, 2019 Platform Architecture: Java API Framework. (n.d.). In Android. Retrieved from https://developer.android.com/guide/platform on August 27, 2019 What is UI Toolkit?. (n.d.). In Synergy DE. Retrieved from https://www.synergex.com/docs/index.htm#tk/tkChap1Whatisuitoolkit.htm on August 14, 2019 Widget. (n.d.). In TechTarget. Retrieved from https://whatis.techtarget.com/definition/widget on August 14, 2019 06 Handout 1 *Property of STI  [email protected] Page 3 of 3