Working with General Visual Components > Classes > FontBox > FontBox Constructor

FontBox Constructor

Syntax

PP.Ui.FontBox (settings)

Parameters

settings. JSON object that contains values of component properties.

Description

The FontBox constructor creates an instance of the FontBox class.

Example

To execute the example it is necessary that the <head> tag of HTML pagecontains links to PP.js script file, to PP.css styles file and resources file (for example, resources.ru.js), in the <body> tag of HTML page of the <div> item with the fontBox identifier and the example must be placed in the <script> tag. In the onload event of the <body> tag it is necessary to specify the call of the createFontBox() function. Add component to setup text parameters on the page and implement a handler of the PropertyChanged and ValueChanged events:

function createFontBox() {    
    // Set root folder with resources
    PP.resourceManager.setRootResourcesFolder("../build/resources");
    // Determine current culture
    PP.setCurrentCulture(PP.Cultures.ru);
    // Create a handler of the text parameters change event
    function onPropertyChanged(sender, args) {
            console.log({
                PropertyName: args.PropertyName,
                Font: args.Font,
                Alignment: args.Alignment
            });
        }
        // Create a handler of component value change event
    function onValueChanged(sender, args) {
            console.log({
                PropertyName: args.PropertyName,
                Value: args.Value,
                Font: args.Font
            });
        }
        // Create component to setup text parameters
    textSettings = new PP.Ui.FontBox({
        // Set image source
        ImagePath: "../build/img/",
        // Set parent item
        ParentNode: document.getElementById("fontBox"),
        // Set font parameters
        Font: {
            FontFamily: "Tahoma",
            Size: 36,
            Color: "#FF0000",
            IsBold: true,
            IsItalic: true,
            IsUnderline: true
        },
        // Set display of the text size bigger than 36
        IsSizeExtend: true,
        // Handle the component value change event
        ValueChanged: PP.Delegate(onValueChanged),
        // Right alignment
        Alignment: PP.HorizontalAlignment.Right,
        // Set a handler of the text parameters change event
        PropertyChanged: PP.Delegate(onPropertyChanged)
    });
}

As a result of executing the example, the FontBox component with following settings is placed on the page:

Click with mouse button the drop-down menu with font sizes. In the list there are sizes bigger than 36:

Select the 24 text size. As a result the console displays information about changes:

Object {PropertyName: "Size", Font: PP.Font, Alignment: "Right"}

Object {PropertyName: "Size", Value: 24, Font: PP.Font}