Mobile Dashboard Server Application Patterns and Interactive ...

terrificrecordInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 5 χρόνια και 2 μήνες)

266 εμφανίσεις


Mobile Dashboard Server
Application Patterns and Interactive Features


Prepared by
The ComponentArt R&D Team
Last Update: April 5, 2012
Version 1.1



ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
2


Table of Contents
OVERVIEW ...................................................................................................................................................... 3
APPLICATION PATTERNS .................................................................................................................................. 4
SCREEN DRIVERS ............................................................................................................................................................ 4
TimeNavigator ...................................................................................................................................................... 4
Dropdown ............................................................................................................................................................. 4
TreeView, DropdownTree ..................................................................................................................................... 5
Cascading Dropdowns ........................................................................................................................................... 5
Button, Checkbox, Radio ....................................................................................................................................... 5
MULTI-SCREEN NAVIGATION ............................................................................................................................................ 6
Independent Screen View Models ......................................................................................................................... 6
Shared Screen View Models .................................................................................................................................. 6
INTERACTIVE FEATURES ................................................................................................................................... 7
POPUPS ........................................................................................................................................................................ 7
XyChart x-coordinate Popup ................................................................................................................................. 7
XyChart Data Point Popup .................................................................................................................................... 7
DRILL-DOWNS ............................................................................................................................................................... 8
GridView Item Drill-down ...................................................................................................................................... 8
PieChart Label Drill-down ..................................................................................................................................... 8
Legend Item Drill-down ......................................................................................................................................... 8
Map Item Template Drill-down ............................................................................................................................. 9
XyChart Annotation Drill-down ............................................................................................................................. 9
SCROLLING .................................................................................................................................................................... 9
GridView Horizontal and Vertical Scrolling ........................................................................................................... 9
General Scrollability With ScrollViewer ............................................................................................................... 10




ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
3


Overview
ComponentArt Mobile Dashboard Server (MDS) enables the development of XAML-based MVVM
applications which can convert their presentation to HTML5 at runtime. While this technology supports
a wide variety of application scenarios, its primary purpose is to deliver rich Business Intelligence
dashboards to any mobile device.
The goal of this document is to outline the exact list of application patterns and interactive features that
should be easy to implement based on ComponentArt’s source code examples and product
documentation. All of these scenarios will be supported by ComponentArt’s technical support team. If
your application requirements fall outside of the scope of standard supported features, please note that
the MDS technology might still be capable of covering your desired feature set – with some involvement
by ComponentArt’s Professional Services group. Please
contact us
for further information.
Summary of all supported application patterns and interactive features is included in the table below:
Application Patterns

Interactive Features

Screen Drivers

￿ TimeNavigator
￿ Dropdown
￿ TreeView, DropdownTree
￿ Cascading Dropdowns
￿ Simple Controls (Button, Checkbox, Radio)

Multi-screen Navigation ￿ Independent screen view models
￿ Shared screen view models
Popups

￿ XYChart x-coordinate popup
￿ XYChart data point popup

Drill-downs ￿ GridView Item Drill-down
￿ PieChart Label Drill-down
￿ Legend Item Drill-down
￿ Map Item Template Drill-down
￿ XyChart Annotation Drill-down

Scrolling ￿ GridView horizontal and vertical scrolling
￿ General scrollability with ScrollViewer





ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
4


Application Patterns
Our goal in providing the list of supported application patterns is to be able to guarantee reliable
conversion of screen logic from XAML-based MVVM applications to their HTML5 equivalents. As
mentioned previously, this is not the definite list of all patterns that can possibly be implemented
through ComponentArt MDS, rather it is the list of patterns that should be easy to implement and that
will be fully supported by ComponentArt’s Technical Support team.
Screen Drivers
The following list enumerates standard supported scenarios for screen drivers: UI controls that can
change the state of a single screen. Any combination of these drivers on a single screen is supported.
TimeNavigator

TimeNavigator enables the user to make a date
range selection through an easy-to-use touch
interface.
When a selection is made, state of the dashboard
screen is changed and dynamic portions of the
screen are reloaded with new data.

Dropdown

Dropdown control is a standard UI element that
allows the user to select one option from the list
of available options. The Mobile Dashboard
Server runtime generates HTML5 output that
invokes the native option selection UI from the
mobile device. Once the user makes the
selection, the state of the screen changes and
the dynamic portions of the dashboard are
reloaded with new data.




ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
5


TreeView, DropdownTree

TreeView control is appropriate for navigating
hierarchical data structures and making single
or multiple node selections. When a selection is
made, the state of the screen changes and the
dynamic portions of the dashboard are reloaded
with new data. DropdownTree can be used to
save screen real estate rather than always
keeping a visible TreeView. TreeView and
DropdownTree controls are recommended for
hierarchical data with relatively small number of
nodes (up to 200). For hierarchical structures
that have a very large number of nodes, we
recommend the cascading dropdown pattern.

Cascading Dropdowns

The cascading dropdown pattern is appropriate
for handling hierarchical data structures with a
large number of nodes. Making a selection in
the first dropdown filters the list of options in
the next dropdown and so forth.
The pattern allows making selections in any
order. For example, the user can make a
selection directly in the 3
rd
dropdown and the
values of the first two dropdowns will be
populated automatically.

Button, Checkbox, Radio

Simple user interface controls like Button,
Checkbox or Radio button group are fully
supported by the ComponentArt MDS runtime.
Checkboxes and radio buttons are able to
change the state of the screen and force a
refresh of the affected portions of the
dashboard.
Buttons are able to issue commands that
perform a certain task (for example, generate a
PDF export of the dashboard screen). In
addition, buttons are able to initiate commands
to navigate to another screen.



ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
6


Multi-screen Navigation

ComponentA
rt’s Mobile Dashboard Server
technology enables creation of dashboard
systems with any number of dashboard screens.
Multi-screen navigation is handled through the
use of button & dropdown controls, or simply
by specifying navigate URLs.
The MDS runtime is capable of automatically
displaying the appropriate format (HTML5,
Silverlight, PDF, down-level HTML or flat image)
as well as picking the most appropriate layout
(tablet vs. phone and portrait vs. landscape). Automatic format and layout selection can be overridden
by specifying the desired format and layout in the navigate URL or the navigation command.
Independent Screen View Models
The simplest form of a multi-screen dashboard system contains a collection of independent dashboard
screens, where no state is shared among the screens. In this scenario, each screen has its own view
model and navigation between screens is easily accomplished through simple navigation commands.
Shared Screen View Models
In a more complex multi-screen dashboard system, state properties (filters, selections, etc.) are shared
among different screens. In this scenario it is necessary to architect the view model classes for the entire
application in a way that reflects the properties that are being shared among multiple screens. The
ComponentArt MDS runtime is able to persist state information (view model properties) from one
screen to another. Please refer to product documentation and source code examples for detailed
instructions on how to enable this feature.



ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
7


Interactive Features
ComponentArt MDS runtime contains a number of built-in HTML5 renderers that support interactive
features like popups, drill-downs or scrolling. All of these features have been implemented with mobile
devices in mind and have been optimized for touch-based interactions. No special development effort is
required to incorporate these interactive features into dashboard screens; they simply need to be
enabled.
Popups
Interactive popups that contain more information about a particular data point are available for XyChart
and TreeMap controls. Note that customizing the content of these popups through templates is not
currently supported in HTML5. The only supported content consists of an index label (shown at the top)
and the name/value pair(s) of the data point itself.
XyChart x-coordinate Popup


XyChart x-coordinate popups are designed to show the data point values from multiple series of the
chart at the particular x-coordinate. They are activated when the user touches the chart.
XyChart Data Point Popup

The XyChart data point popup is designed to show
the value of a single data point in an XyChart
instance, for the bar series type. The popup is
activated when the user presses on a bar
element.



ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
8


Drill-downs
The purpose of interactive drill-downs is to show the details associated to a particular item by reloading
the existing screen or navigating to another screen. The following drill-down scenarios are supported:
GridView Item Drill-down

By clicking on the “Details” button of a GridView
item, the user effectively selects the desired
item. This operation can trigger one of the
following:
1. Change the state of the current screen and
reload all affected elements with new data
or;
2. Navigate to another screen based on the
GridView item selection.
PieChart Label Drill-down

The PieChart control supports templated dat
a
point annotations, which can contain command
buttons. These buttons can be used to trigger
drill-down operations, enabling the user to get
details associated to a particular slice of the pie.

Legend Item Drill-down

Legend control items can also be templated and
support the inclusion of buttons for drill-down
purposes. In some occasions when PieChart
instances contain too many elements, it is more
appropriate to use the Legend control for drill-
down operations.
Please note that Legends can be associated to
any type of chart control or be used standalone.



ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
9


Map Item Template Drill-down

ComponentArt Map control supports templated
map item content, which can be used as a target
for drill-down purposes. Clicking on this target can
provide additional details associated with the
particular map item.

XyChart Annotation Drill-down

Given that tapping on
the bar elements of the bar
chart control is reserved for initiating popups (see
page 7), we need a separate UI element to
initiate a drill-down operation of the bar chart.
XyChart control supports templated content of X
annotation elements, which can be used as a
container of drill-down buttons.
The example to the left places “Details” buttons
as a part of the custom annotation template.

Scrolling
ComponentArt MDS runtime supports scrolling content out of the box through built-in scrolling features
for particular controls (like TimeNavigator or GridView) as well as through a generic ScrollViewer
container. All scrolling features have been optimized for mobile scenarios and touch input.
GridView Horizontal and Vertical Scrolling

When the content of
the GridView control
exceeds the available space, horizontal and/or
vertical scrolling is automatically enabled. The
user can use the scrollbar UI element, or drag the
entire content area of the GridView control.



ComponentArt White Paper





ComponentArt MDS Application Patterns and Interactive Features
Prepared by the Co
mponentArt R&D Team, Version 1.
1


Page
10


General Scrollability With ScrollViewer

Even though significant scrollable dashboard
content is not recommended for general
usability reasons, there are some scenarios
where it makes sense to make the dashboard
screen (or portions of the dashboard screen)
scrollable.
This feature is fully supported: simply place any
custom dashboard content within the
ScrollViewer control. The example screenshot to
the left places a collection of rich BulletGraph
controls in a ScrollViewer instance.