1. Getting started

Installation

AJUI_Button must be placed in the component folder of your application.

Principles of use

In this section, we describe the sequence of operations to be performed in order to generate a button in the context of the main form.

Prerequisites

AJUI_Button needs a picture object that will serve as a model. This object is provided with the AJUI_Library library that you can open from your application (/File/Open/Object Library...) and you just have to drag and drop the "Button_object" object on your form. In the case of the v18 of 4D, you must use the project version of the library (only project mode)

You can duplicate this object to create as many buttons as necessary. Each button should have a specific name that you can define according to your imagination.

If you create the button by yourself, do not forget to activate the events required to operate the button (see the chapter on events).

Basis for creating a button

The first thing to do when creating a button is to open the method of your picture form object and create an instance with the "New AJUI_Button" method. Then, associate the name of your button to the instance with the "Name" member function. Now the button is created and will use the default values, but you should try to change it.

To do this, simply call the property member functions described in the corresponding chapter. Test the different compositions and types. Also change property values for different states using constants. Finally, encapsulate everything in an "on load" event and launch the "Draw" function.

In the following chapter, some examples are presented and we strongly recommend that you study the source code of the "AJUI_ButtonLab" application used as a demo for the component. 

Simple button with text

Case of
  : (Form event code=On Load)
  Form.btn1:=New AJUI_Button
  Form.btn1.Name("btn1")
  Form.btn1.Composition("text")

    //default definition
  Form.btn1.Label(AJUI_btn_default;"Simple Text Button")
  Form.btn1.BGColor(AJUI_btn_default;"white")
  Form.btn1.BorderColor(AJUI_btn_default;"#47A1F1")
  Form.btn1.BorderSize(AJUI_btn_default;2)
  Form.btn1.FontStyle(AJUI_btn_default;"none")
  Form.btn1.FontColor(AJUI_btn_default;"#47A1F1")

    //hover definition
  Form.btn1.Label(AJUI_btn_hover;"Btn Hover")
  Form.btn1.BGColor(AJUI_btn_hover;"#47A1F1")
  Form.btn1.BorderSize(AJUI_btn_hover;3)
  Form.btn1.FontStyle(AJUI_btn_hover;"Bold")
  Form.btn1.FontColor(AJUI_btn_hover;"white")

    //active definition
  Form.btn1.Label(AJUI_btn_active;"Btn active")

End case

Form.btn1.Draw()

Simple button with picture

Case of
  : (Form event code=On Load)
  Form.btn2:=New AJUI_Button
  Form.btn2.Name("btn2")
  Form.btn2.Composition("picture")
  Form.btn2.Type("circle")

    //default definition
  Form.btn2.PicturePath(AJUI_btn_default;"svg/si-glyph-dice-1.svg")
  Form.btn2.PictureHeight(AJUI_btn_default;20)
  Form.btn2.PictureWidth(AJUI_btn_default;20)

    //hover definition
  Form.btn2.PicturePath(AJUI_btn_hover;"svg/si-glyph-dice-2.svg")
  Form.btn2.PictureHeight(AJUI_btn_hover;30)
  Form.btn2.PictureWidth(AJUI_btn_hover;30)
  Form.btn2.BGColor(AJUI_btn_hover;"red")

    //active definition
  Form.btn2.PicturePath(AJUI_btn_active;"svg/si-glyph-dice-3.svg")
  Form.btn2.PictureHeight(AJUI_btn_active;40)
  Form.btn2.PictureWidth(AJUI_btn_active;40)
  Form.btn2.BGColor(AJUI_btn_active;"orange")

End case

Form.btn2.Draw()

Composite button

Case of
  : (Form event code=On Load)
  Form.btn3:=New AJUI_Button
  Form.btn3.Name("btn3")
  Form.btn3.Composition("composite")
  Form.btn3.CompActivateSecondColor(True)

    //default definition
  Form.btn3.Label(AJUI_btn_default;"Default")
  Form.btn3.BGColor(AJUI_btn_default;"white")
  Form.btn3.FontColor(AJUI_btn_default;"#47A1F1")
  Form.btn3.BorderSize(AJUI_btn_default;3)
  Form.btn3.PicturePath(AJUI_btn_default;"4D_v16_60px.png")
  Form.btn3.CompPicturePosition(AJUI_btn_default;"left")
  Form.btn3.CompPictSizeAllocation(AJUI_btn_default;60)

    //hover definition
  Form.btn3.Label(AJUI_btn_hover;"Hover")
  Form.btn3.BGColor(AJUI_btn_hover;"grey")
  Form.btn3.FontColor(AJUI_btn_hover;"white")
  Form.btn3.FontStyle(AJUI_btn_hover;"Bold")

    //active definition
  Form.btn3.Label(AJUI_btn_active;"Active")
  Form.btn3.BGColor(AJUI_btn_active;"lightblue")
  Form.btn3.BGSecondaryColor(AJUI_btn_active;"lightgrey")


End case

Form.btn3.Draw()

Result

AJUI_Button class

Since V18R3, you can replace the returned instance by New AJUI_Button with the call of the Button class. The functions of the Button class use the same names and parameters as for the formulas obtainable by New AJUI_Button. The default values are also the same.

The only difference in terms of code is when the instance is created:

  //with formulas
    $myBtn:=new AJUI_Button ()

  //with class
    $myBtn:= AJUI_Button.new ()