Skip to content

Lab User Manual

Gary Criblez edited this page Feb 13, 2020 · 4 revisions

Overview

The "AJUI_BreadCrumb" component is delivered with the "AJUI_BreadCrumbLab" application. This productivity application, provided with its source code on Github, is intended to become your creative and test laboratory for the implementation of the "AJUI_BreadCrumb" component.

AJUI_BreadCrumbLab is aimed at facilitating the integration of the "AJUI_BreadCrumb" component into your application. The three main advantages are:

  1. It shortens the development time required to define your Breadcrumb.
  2. It allows a dynamic visual rendering of your Breadcrumb, for each state.
  3. It offers a simple and fast management of your different models that can be imported into your own applications that use the "AJUI BreadCrumb" component.

The Lab provides you with a graphical interface that exposes all states and properties with a dynamic display of the result.

Once you have obtained the expected graphical representation of your Breadcrumb in the different states, all you have to do is to save it as a template.

The Lab will allow you to create as many templates as you wish. It is supplied with a fairly large number of basic templates and covers a wide range of Breadcrumb types. You can duplicate these to make them available and thus serve as a basis for your own templates.

The application also provides you a HDI form (How Do I) presenting a usage context of the AJUI Button component.

The templates

A template represents an instance of AJUI BreadCrumb. The Lab allows you to access the different properties of this instance and modify their values. The component uses an exception system to define the graphical representation of a Breadcrumb for each of its states as indicated in its user manual.

To be able to handle these exceptions, the Lab offers a dynamic listbox containing the values of the properties specific to the selected state. The user can interact with the listbox to modify these values as he would with the 4D form editor's property list window.

All exceptions generated can be removed using a menu accessible by right-clicking on a property line of this listbox.

Some properties are associated with alternative buttons allowing you to open the color palette or to select a file path for images for example.

As part of the properties related to sections, you can left click and hold the option button (alt for windows) on a property to apply its value to all sections for that same property. You will be asked for confirmation. You must have selected a section for this purpose.

Preview

The lab is divided into four distinct parts.

The first part concerns model management, including storage, creation, backup, deletion, etc.

The second part allows you to edit the different properties of your models. AJUI BreadCrumb has three types of properties, global, section related, and status related.

A dropdown list allows you to select one of these three types and the listbox will display the properties related to your choice.

  The third part shows the selected section and how it is rendered for each state. This section is displayed three times to show its representation in three different positions (beginning, center, end).

Color buttons will allow you to apply a different form background color. The button on the right will display a Tip indicating the shortcut to use (depending on the OS) so that you can choose a color of your choice other than those already suggested.

The last part displays the button as it should appear in an interactive form for each state in your application.

Storage

The basic templates are stored in the /Resources/AJUI_BreadCrumb_Templates folder in the Lab application's resource folder. The templates in this folder are labeled with the suffix"(G)" in the template selection menu.

Two other folder locations are available for storing your templates: the Personal folder path (P) and the Shared folder path (S), which you can define at your convenience.

The Lab generates a preference file allowing you to change the paths to these two folders (the file is saved in your computer's preference folder).

Each time the Lab is launched, the application will check the preference file in order to recover the different templates present in the folders indicated in your preference file.

A filter is available, if you want to reduce the list of templates to a specific folder.

Template management

The Lab features eight buttons that allow you to manage your templates. The function of each of these buttons is indicated by a Tip that is displayed when the mouse hovers over them.

We will describe below what each of these features is used for.


New Template

This feature allows you to create a new model. The created template is automatically saved in the selected preference folder.


Duplicate Template

Creates a copy of the template in the same folder where it is located. The copy is suffixed as "_copy". If you duplicate the same template again without renaming its copy, it will be overwritten by the new duplicated file.


Rename Template

Allows you to rename the template and its specific folder if it has one.


Save Template

Allows you to save the template in the selected preference folder. If you had chosen a template from the Global folder (G) and save it in your personal folder (P), the template in the Global folder is not moved to the personal folder (P) but is duplicated in the latter.

If a template contains one or more paths to image files, then the Lab will create a folder with the name of the template that will contain the template (json file) and the copy(s) of the image files. The paths of these image files, in the instance of the model, are automatically updated to point to these copies using the placeholder "#" indicating to the components that the images are in the same folder as the imported model.

This is to simplify the recovery of images and the template to use them in your application using the component import function.


Delete a Template

This will delete the selected template.


Reload a Template

Allows you to clear current changes by reloading the template instance in the state it was in when it was last saved or when it was loaded if no saving has been made in the meantime.


Delete exceptions

This feature allows you to delete all exceptions from a template. The template will not be saved.


Protect a Template

This will make the properties of a model inaccessible and thus prevent them from being accidentally modified.

A banner is displayed when a template is protected.

Marking modified properties

The lab listbox marks properties in bold when the current value is different from the default value. By holding down the control key and left clicking on the property, you can set it back to its default value.

Within the states properties, this action removes the exception related to the current state. This does not apply to the "default" state, which does not define exceptions (see the AJUI_BreadCrumb manual).