Please enable JavaScript to view this site.

CWT User Interface Design Handbook

Navigation: TFT Controls

PreviewPanel (TFT)

Scroll Prev Top Next More

<TFT:PreviewPanel Name="SoftKeyboardPanel"

 

Description

The PreviewPanel is a container for PreviewButton, but all other controls work as well. It has the same properties as Panel.

This specific type of panel enables a drag while pressed feature which makes it possible to release the press on another PreviewButton. If ordinary Buttons are used, they will not be able to be dragged to or from.

 

Properties

ArticleGroup

Type:A string of any length
Description:The ArticleGroup property is used to create different layouts of panels for different groups of articles. It is possible to create articles in the cwtconfig.xml file and group them by setting the group property to the same string for all articles that shall belong to a specific group.

It is also possible to create several different groups. The panels can then be designed for each group of articles by setting the ArticleGroup property equal to the group property in the cwtconfig.xml file. If no ArticleGroup is set for a panel, that panel will be used for all articles that do not have the group property set, or have a group property that does not correspond to any panel in the user interface. See CWT Software Configuration Handbook for details on articles and groups of articles.

BackColor

Type:A string with a valid colour name
Description:Defines the background colour of the panel. See Colour names for a complete list of available colour names.

BackgroundImageFile

Type:A string of any length
Description:The BackgroundImageFile property sets a path to an image file that will be rendered as panel background. The image file must be in the format PNG and must match the size of the panel in pixels.

DayType

Type:Unsigned Integer
Description:The DayType property is used to create different panel layouts for different day types. It is possible to create calendar rules to specify daytypes in the cwtconfig.xml file (see CALENDAR in configuration handbook). The DayType property can then be used to design different panel layouts (of the same panel name).

If no DayType property is set for a panel, that panel will be used for all day types that do not have a separate panel. A typical example is to display a different panel (for instance Prepay_Easy_StartPanel) on Sundays. If Sundays are defined to be daytype 2 can two definitions of Prepay_Easy_StartPanel be created in the ui.xaml where one does not have the DayType property set at all and one have it set to “2” (since 2 was defined as every Sunday). This would imply that the Prepay_Easy_StartPanel without a DayType property will be displayed Monday to Saturday while the Prepay_Easy_StartPanel with the DayType=”2” will be displayed on Sundays only.

This property can be combined with PaymentServiceGroup, ArticleGroup, TariffGroup, Language and TimerInterval to create a very specific set of panel layouts for the same panel name.

See CWT Software Configuration Handbook for details on how calendar rules are defined and how daytypes are used.

DisplaySound

Type:A string of any length
Description:If the DisplaySound property is defined as a valid path to a sound file in wave format the sound file will be played when the panel is displayed. The path is normally in the form DisplaySound=“\Storage Card\Media\ Sound\soundfile.wav”.

If DisplaySound is set to an invalid path, or is not defined at all, no sound will be played when the panel is displayed.

Height

Type:Unsigned integer with value in the range of the height resolution of the display
Description:Defines the height of the panel (number of pixels).

Language

Type:A valid language code string.
Description:It is possible to create multiple panels with the same name for different languages by defining the Language property for at least one of the panels.

If a terminal shall be configured to have English and Chinese as alternative languages in the user interface, it is convenient to be able to create two separate layouts for the same panel name. The key to doing this is to define the Language property on the Chinese panel by setting Language=”zh-CN” (zh-CN is the language code for Chinese).

The English panel can be created without a Language property since the software handles an undefined Language property as the default panel.

The software then displays the Chinese version of the “ArticlePanel” if Chinese (zh-CN) is selected as the active language while the panel without Language property is displayed when English is selected.

It is possible to define any number of panels with the same name as long as the Language property is different for each panel. See examples below.

See CWT Software Configuration Handbook for a complete list of valid language codes.

Location

Type:String in format “X,Y” where X and Y are both unsigned integers. Values are in a range for the resolution of the display
Description:Defines the position of the panel on the display expressed in pixels. This is by default set to position 0,0 which is the upper left corner. Usually, there is no need to change this setting.

If a different position must be defined is it set as the number of pixels from the upper left corner of the display. If, for instance, Location is set to “30,20” the upper left corner of the panel will be rendered 30 pixels to the right of the left border of the display and 20 pixels down from the top of the display.

Name

Type:A string of any length
Description:Must be set and must correspond to one of the defined panel names if the application shall be able to find the panel when it shall be displayed.

See Panel names for a list of predefined names that the software uses to find panels in the user interface.

PaymentServiceGroup

Type:A string of any length
Description:The PaymentServiceGroup property is used to create different panel layouts for different groups of payment services.

You can create payment services in the cwtconfig.xml file and group them by setting the group property to the same string for all payment services that shall be grouped together. You can also create several different groups. The panels can then be designed for each group of payment services by setting the PaymentServiceGroup property equal to the group property in the cwtconfig.xml file.

If no PaymentServiceGroup is set for a panel that panel will be used for all payment services that do not have the group property set or have a group property that is not defined for a panel in the user interface.

See CWT Software Configuration Handbook for details on payment services and groups of payment services.

Size

Type:String in format “A,B” where A and B are both unsigned integers.
Description:Panel size defined in one property only. Width (A) and height (B) is expressed as the number of pixels. For example, “640,480” sets the width to 640 pixels and the height to 480 pixels.

TariffGroup

Type:A string of any length
Description:The TariffGroup property is used to create different layouts of panels for different groups of tariff packages.

You can create tariff packages in the cwtconfig.xml file and group them by setting the group property to the same string for all tariff packages that shall be grouped together. You can also create several different groups. The panels can then be designed for each group of tariff packages by setting the TariffGroup property equal to the group property in the cwtconfig.xml file. If no TariffGroup is set for a panel that panel will be used for all tariff packages that do not have the group property set, or have a group property that is defined for a panel in the user interface.

See CWT Software Configuration Handbook for details on tariff packages and groups of tariff packages.

TimeInterval

Type:String
Description:The TimeInterval property is used to create different panel layouts for different intervals of time. This makes it possible to create a specific panel layout that shall be used only in the specified time interval.

If no TimeInterval property is set for a panel, that panel will be used as default. The CWT software searches for a panel with a defined and valid time interval first but if no valid interval is found will the default panel be selected (the panel without the TimeInterval property). Always define the default panel without TimeInterval first and then create the variants with defined time intervals. A typical example is to display a different panel (for instance Prepay_Easy_StartPanel) between 10:00 to 14:00. This can be accomplished by defining two Prepay_Easy_StartPanel instances in the ui.xaml where one don’t have any time interval defined (the default) and one with TimeInterval=”10:00 - 14:00”. This would imply that the Prepay_Easy_StartPanel with the TimeInterval property set to “10:00 - 14:00” will be displayed between 10:00 to 14:00 every day while the Prepay_Easy_StartPanel without TimeInterval will be displayed all other times.

The time interval can contain year, month, day and hour and minute. The syntax to use the different parts in the interval is

YYYY = four digit year,
MM = 2 digit month,
DD = 2 digit day,
HH=2 digit hour (24h clock),
mm = 2 digit minute.

The “-“ characters is used as separator between start and end date in the time interval (start time is specified to the left of the separator character):

Format to display

Start date - end date

Year, Month, Day, Hour, Minute

YYYY MM DD HH:mm - YYYY MM DD HH:mm

Month, Day, Hour, Minute

MM DD HH:mm - MM DD HH:mm

Day, Hour, Minute

DD HH:mm - DD HH:mm

Hour, Minute

HH:mm – HH:mm

Please note that the same syntax must be used for start and end time. It is not possible to use year in start time while only using month in end time for instance.

This property can be combined with PaymentServiceGroup, ArticleGroup, TariffGroup, Language and DayType to create a very specific set of panel layouts for the same panel name.

Width

Type:Unsigned integer with value in the range of the width resolution of the display
Description:Defines the width of the panel (number of pixels).