+ + A control is a user interface element that the user can interact with. Controls + are used in PC applications, in web pages and in mobile device applications. In + web pages controls are often known as "form controls". Common controls include + textfields, textareas, buttons, checkboxes, radio buttons, scrollbars, labels + and progress bars, among others. Not all controls are interactive, e.g. labels + simply display a value. Controls are contained within some kind of user + interface container such as a view or window. +
+ ++ + In the WRTKit, controls are JavaScript objects that contain the state and + implement the behavior of the control. Controls take care of drawing themselves, + including changing their appearence as a result of various state changes. +
+ ++ + A container for user interface elements such as controls. On a mobile device + user interface views typically fill the entire screen and thus only one view can + be shown at a time. Views in a mobile device tend to lay out the elements it + contains in a vertical list that can be scrolled up and down if there is more + content in the view than what fits on the screen at a time. +
+ ++ + In the WRTKit, views are responsible for laying out controls. Custom views can + be created to support advanced layouts but in the vast majority of cases the + default ListView is sufficient. WRTKit views are JavaScript objects. +
+ ++ + An event is a notification of some occurrence in a user interface element, such + as a view or control. Events are typically propagated to application code as + messages or function calls or a combination of the two. +
+ ++ + The WRTKit uses a model known as the "observer pattern" to deliver event + messages, which are JavaScript objects, to event listeners, which are JavaScript + callback functions. WRTKit events have a type name that can be used to + distinguish between different types of events. E.g. a button press produces an + "ActionPerformed" event. +
+ ++ + The control that is currently selected to receive input is said to be focused. + Controls can be focused in both the tab and pointer navigation modes. In the tab + mode the focus is moved between controls using the 4-way controller. In + the pointer mode the focus is moved between controls by moving the pointer to + "hover" above a control and then pressing a selection button to select that + control. Focused controls are displayed in a distinct way from other controls to + indicate that they are ready to be interacted with. +
+ ++ + In pointer navigation mode, the pointer is said to be "hovering" above a control + if the pointer is located inside the control's area on the screen. Hovering is + similar to focus, but differs because hovering in itself does not select a + control for interaction. Rather a selection key must be pressed in order to + focus the control that the pointer is currently hovering over. Hover is + indicated by displaying a control in a distinct way from other controls. +
+ ++ + A navigation mode refers to a method of selecting what user interface element to + interact with. The S60 Web Runtime supports two navigation modes: "tab" and + "pointer". In the tab mode, focus is moved between controls using the 4-way + controller. In pointer mode there is a pointer arrow on the screen that can be + moved freely using the 4-way controller. A control is focused by moving the + pointer arrow so that it hovers above a control, and then pressing a selection + key to select that control. In tab mode a control can be either in normal or + focused state, whereas in the pointer mode a control can be in normal, hover or + focused state. +
+ +