Class: cWebCard
Properties | Events | Methods | Index of Classes
The Web Framework card control. Used inside a card container to provide a stack of overlaid panels
Hierarchy
cObject > cWebBaseObject > cWebObject > cWebBaseUIObject > cWebBaseDEOServer > cWebBaseContainer > cWebCard
Show full hierarchy and direct subclasses
Library: Web Application Class Library
Package: cWebCard.pkg
Mixins: cWebDDOHost_Mixin
Description
Multiple cWebCard objects are nested inside a parent cWebCardContainer. This provides a vertical stack of card objects where each card can contain additional web controls. Only one card is displayed at a time and an interface exists for navigating through the stack of cards.
Card containers are ideal for building wizard dialogs, for overlaying groups of controls in your View (cWebView), or any use you can imagine where control paging is required.
See cWebGroup if you simply need a dedicated group control without the additional special abilities of web cards.
Sample
Object oCardContainer is a cWebCardContainer
Set pbShowCaption to True
Set pbShowBorder to True
Object oCard1 is a cWebCard
Set piColumnCount to 4
Set psCaption to "Card One"
Object oWebButton is a cWebButton
Set piColumnSpan to 1
Set psCaption to "Next >>"
Procedure OnClick
Send NextCard
End_Procedure
End_Object
End_Object
Object oCard2 is a cWebCard
Set piColumnCount to 4
Set psCaption to "Card Two"
Object oWebButton is a cWebButton
Set piColumnSpan to 1
Set psCaption to "Next >>"
Procedure OnClick
Send NextCard
End_Procedure
End_Object
End_Object
Object oCard3 is a cWebCard
Set piColumnCount to 4
Set psCaption to "Card Three"
Object oWebButton is a cWebButton
Set piColumnSpan to 1
Set psCaption to "First >>"
Procedure OnClick
Send Show to oCard1
End_Procedure
End_Object
End_Object
End_Object
Object Name
The Web Framework uniquely identifies each object via a combination of the object hierarchy (object nesting), and object name. This means that card object names must be unique within their parent (i.e. each card object must have a unique name).
Object Placement
Card objects must be placed within a card container (cWebCardContainer). You may not mix card objects and other web controls as sibling objects. Instead, place web controls inside your card objects.
Height and Width
All cards within a card container will share the same height and width.
The width of a card object is determined by the width of its parent card container.
By default, a card's height will increase in order to accommodate the web controls placed inside it. The height of the tallest card within a card container determines the height of all its sibling cards.
Set piHeight of the card object to override the card's height as determined by its child controls. Note: this will only have an effect if it means this will be the tallest card in the stack.
Set piHeight of the parent card container to fix the overall height for all card objects in the stack. If a particular card requires a height larger than this value, it will display a vertical scrollbar.
Column Layout
Each card object is divided into a fixed number of equal-width columns. Child controls are aligned to these columns to determine their horizontal position and width.
Set piColumnCount to determine the number of layout columns inside the card.
For more information, see Positioning and Layout of Controls.
Show and Hide Events
Events are triggered for each card object when it is shown (comes to the front) or hidden (when a different card comes to the front).
Each event can be handled on the server by writing DataFlex code or on the client (browser) by writing JavaScript code. Writing a server-side DataFlex handler is the simplest way to handle events.
Set pbServerOnShow to True to ensure that an OnShow event is sent to the server when a card is shown. Write an OnShow event handler in your cWebCard object to perform some action when the card is shown.
Set pbServerOnHide to True to ensure that an OnHide event is sent to the server when a card goes behind some new card. Write an OnHide event handler in your cWebCard object to perform some action when the card is hidden.
Note: By default, pbServerOnShow and pbServerOnHide are False to ensure unnecessary messages aren't sent to the server.
Example:
Object oCard is a cWebCard
Set pbServerOnShow to True
Procedure OnShow
Send Info_Box "Hello!"
End_Procedure
Set pbServerOnHide to True
Procedure OnHide
Send Info_Box "Goodbye!"
End_Procedure
End_Object
To write client-side Show event handler using JavaScript, set the psClientOnShow property to the name of the JavaScript function that will execute when the card is shown. To write client-side Hide event handler using JavaScript set the psClientOnHide property to the name of the JavaScript function that will execute when the card is hidden.
Swiping
If the cWebCard contains a cWebHtmlBox with pbScroll set to True, it will prevent swiping on mobile devices.
Border and Caption
Card objects can have an optional border and each card object can display a caption. The caption is usually displayed in the card's top left corner.
Set pbShowCaption to true in the parent card container to enable captions for each child card.
Set psCaption to specify the caption displayed on each card.
Set pbShowBorder to true in the parent card container to draw a border around the entire card stack.
Drag and Drop Support
This control can be used as a valid drop target by registering it as such in a cWebDragDropHelper object.
The supported actions for this control are: - C_WebDropOnControl
This allows the control to accept data dragged from elsewhere in the control (if configured that way) and can also be used to accept files when registered within a cWebDragDropFileHelper.
Color
The background color of a card object is determined by the web application's CSS theme (psTheme). You can define additional or replacement CSS styles in your web application's application.css file. Set psCSSClass to the CSS class name you would like to be applied to a card object.
Set psBackgroundColor directly override the card's CSS themed color.
See Also