2. Breadcrumbs

Composition of a Breadcrumb

Basically, the Breadcrumb generated by AJUI_BreadCrumb is an image type form object variable that you can create yourself in the context of a form.

Nevertheless, we provide you with a predefined template of this form object variable containing all the appropriate properties for creating a BreadCrumb. This is provided in an object library file "BreadCrumb.4dlibrary".

Breadcrumb structure and model

A Breadcrumb generated by the component is composed of a "container" that can be sized manually or dynamically. The container will contain sections. You can define the number of sections you want.

A section is associated with a "template" and can contain text elements, an image and a callback. It also has an identifier (id) that makes it unique and allows it to be identified when interacting with the Breadcrumb.

AJUI_Breadcrumb offers two main models of Breadcrumb.

• The simple model
• The arrow model
• The groupedButtons model

The ** simple** model is a sequence of sections, in a single container, separated by a text-based divider (separator), i. e. a string of any character (e. g. ">", "/", "|", etc.)

The arrow model is different. Each section has its own container whose front and rear ends can be represented by an arrow shape or a vertical line. A divider (separator) is used to define the size of the line of each arrow.

 

The groupedButtons template is a bit particular because it is not exactly a new model. It is based on the arrow template using predefined properties to keep a design specific to that model. When you use this model, the sections can be either "standard" or "current". The "current" type designates the selected section and there can only be one at a time. In other words, the model works like radio buttons.

⚠️ Small precision on the identifiers (id) of sections. In the simple model, the id allows the mouse to interact with the text and image of the section. For the arrow model and groupedButtons model, the id applies to the entire graphic area of the container in the section.  

Section - types and states

There are five types of sections:

• Standard
• First
• Current
• Previous
• Next

For each section type are associated four states:

• default
  • This is the status of a section when a user does not interact with it and when it is not disabled.
• hover
  • This state occurs when the "On Mouse Enter" or "On Mouse Move" event (found section id) is triggered. In concrete terms, this corresponds to hovering over the section with the mouse. It ends with the event "On Mouse Leave" or "On Mouse Move" (id of different section or none).
• active
  • This state intervenes on the "On Clicked" event and ends with the "On Mouse Up. Note that it has priority over the "hover" state. In concrete terms, the user clicks on a section and the status stays until it is released.
• disable
  • This is the state of a section if the "disable" property is true. When the section is "disable", only this state is taken into account to the exclusion of all others (hover and active).

A section can take on a different appearance and display different content depending on its type and status.

All states except "default" state inherit all the properties of the latter (default). Each property can be assigned exceptions.

Events and callbacks

The Breadcrumb requires that several events be activated on the image form object in order to be able to manage the different states. Here is the list of these:

• On Load
• On Clicked
• On Double Clicked (optional)
• On Mouse Enter
• On Mouse Leave
• On Mouse Up
• On Mouse Move

For both events (On Clicked, On Double Clicked) it is possible to associate callbacks to them using the member functions.

⚠️ All methods used as callbacks must be shared (method properties) with the component so it can call it. To prevent an error from occurring in such case, the component will check if the method is well shared and if it is not, it will share it itself when executing a callback. In addition, the component will propose to create the callback method if it does not exist when using Setters for callbacks and also before executing a callback.

Exception and constant management

The component uses an exception system to distinguish which value of the state-related properties it should use when generating the Breadcrumb.

It should be noted that when creating an instance, the component assigns default values to the "standard" type properties and for the "default" state. So, when you are going to use member functions related to states (see subchapter 3.9: Typical section), you will have to pass as the first parameter, a constant that will designate the type and state for which you want to receive or pass a value (Getter/Setter).

Example :

  //setter
$bc.SectionBGColor(AJUI_bc_standard_default;$color)

  //Getter
$colorSection:=$bc.SectionBGColor(AJUI_bc_standard_default)

How the component handles exceptions:

To explain this, we will take a concrete example. I have a "first" section and we want to define its "hover" state.

The component will therefore first check if there are any exceptions in the "myInstance.breadCrumb.sectionTypes.first.hover" object. If he finds any, he uses these values. If it does not find exceptions for all or some of the properties, it will control the exceptions for "myInstance.breadCrumb.sectionTypes. first.default". After that, it will check "myInstance.breadCrumb.sectionTypes. standard.hover" and finally "myInstance.breadCrumb.sectionTypes.standard.default" if there are any properties left to define.

It will not go any further, because the "standard-default" values are not exceptions, but the basic values.

List of constants :

• AJUI_bc_standard_default
• AJUI_bc_standard_hover
• AJUI_bc_standard_active
• AJUI_bc_standard_disable

• AJUI_bc_first_default
• AJUI_bc_first_hover
• AJUI_bc_first_active
• AJUI_bc_first_disable

• AJUI_bc_current_default
• AJUI_bc_current_hover
• AJUI_bc_current_active
• AJUI_bc_current_disable

• AJUI_bc_previous_default
• AJUI_bc_previous_hover
• AJUI_bc_previous_active
• AJUI_bc_previous_disable