Class: cWebBreadcrumb

Properties  Events  Methods    Index of Classes

The Web Framework breadcrumb control



Library: Web Application Class Library

Package: cWebBreadcrumb.pkg


In a mobile/touch style web application Breadcrumb controls are used to indicate the location of the current view in the drill-down application (peWebViewStyle = wvsDrillDown) flow.

Each step of a drill-down will be performed by a single view. The application user will navigate from one view to another until the operation is complete. Each forward-navigation would push a new view onto the view stack.

The navigation-path taken from one view to another while performing an operation is known as a "breadcrumb trail". By clicking on the breadcrumb trail users can navigate back up towards the root view.

The View Stack

Breadcrumb objects are designed to be used in a mobile/touch style web application, which must also contain a view stack object (cWebViewStack). Drill-down navigation from one view to the next is recorded in the view stack and each change to the view stack is broadcast to its 'listener' objects.

By default, a breadcrumb object will register itself as a view stack listener and will update itself accordingly as the view stack changes.

Breadcrumb objects must be declared in the global scope, i.e. child objects of the global cWebApp object. They cannot be declared inside a view (cWebView).
The sample below demonstrates a web application containing two breadcrumb objects where each breadcrumb uses a different breadcrumb style.

Object oWebApp is a cWebApp
    Set peApplicationStyle to wvsDrillDown    
    // additional property settings not shown

    Object oViewStack is a cWebViewStack
    Object oHeaderPanel is a cWebPanel
        Set peRegion to prTop
        // additional property settings not shown
        Object oCaptionPanel is a cWebPanel
            // property settings not shown

            Object oCaptionBreadcrumb is a cWebBreadcrumb
                Set peBreadcrumbStyle to crumbCaption

        Object oBreadcrumbPanel is a cWebPanel
            Set peRegion to prBottom
            Object oHorizontalBreadcrumb is a cWebBreadcrumb
    // Use statements for Web Views are not shown

Breadcrumb Styles

Breadcrumb objects can be configured into three distinct styles: Horizontal, Dropdown or Caption.

Set peBreadcrumbStyle to one of crumbHorizontal, crumbDropDown or crumbCaption to modify the style of a breadcrumb.

Controlling the Breadcrumb Captions

By default, when you navigate to a view, the view's psCaption property will be displayed in the breadcrumb trail.

You can dynamically modify the caption of any view in the view stack.

Send SetBreadcrumbCaption to a view change the caption displayed for that view in a 'horizontal' or 'dropdown' style breadcrumbs.

Send SetHeaderCaption to a view change the caption displayed for that view in a 'caption' style breadcrumb.

Call GetBreadcrumbCaption or GetHeaderCaption to a view to read the current caption settings for that view.

Note that the view must be on the view stack before you can call SetBreadcrumbCaption, SetHeaderCaption, GetBreadcrumbCaption or GetHeaderCaption. When a view is popped off the view stack its dynamic caption settings are discarded.


The sample code below demonstrates a select customer view that would display "Select Customer" in a horizontal-style breadcrumb and "Customers" in a caption-style breadcrumb. The SetBreadcrumbCaption and SetHeaderCaption messages are sent in the view's OnNavigateForward event which is called just after the view is pushed onto the view stack, but before the view is displayed.

Procedure OnNavigateForward tWebNavigateData NavigateData ;
                            Handle hoInvokingView ;
                            Handle hoInvokingObject
    Send SetBreadcrumbCaption "Select Customer"
    Send SetHeaderCaption "Customers"