Welcome to InfinniUI documentation!¶

Syntax¶

new AcceptAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Нет

Examples¶

var acceptAction = new AcceptAction(parentView);
acceptAction.execute(); //parentView.getDialogResult() === DialogResult.accepted

AcceptAction.metadata¶

Метаданные типа AcceptAction.

Properties¶

Нет

Examples¶

{
    "AcceptAction": {
    }
}

AddAction¶

Добавляет новый элемент в источнике данных.

Extends¶

Syntax¶

new AddAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Description
linkView*	LinkView	Объект, который будет создавать и настраивать представление для создания нового элемента
sourceSource*	`String`	Название редактируемого источника данных на представлении создания
destinationSource	`String`	Название редактируемого источника данных, на представлении, откуда создание было вызвано
destinationProperty	`String`	Путь до поля в источнике данных, которое будет редактироваться. Данное поле должно быть представлено массивом

* Обязательное свойство.

Обратите внимание, что если не указать destinationProperty, то новый элемент будет добавляться непосредственно в источник данных, соответствующий destinationSource, иначе - добавиться в список элементов, соответствующий destinationProperty.

Examples¶

Рассмотрим вариант, когда на представлении parentView, нужно задать действие добавления пациента (пациенты хранятся в источнике данных Patients):

var linkView = (new InlineViewBuilder()).build(null, {
                                                        builder: args.builder,
                                                        metadata: {View: editPatientView},
                                                        parentView: parentView
                                                    });

var addAction = new AddAction(parentView);

addAction.setProperty('linkView', linkView);
addAction.setProperty('sourceSource', 'MainDataSource');
addAction.setProperty('destinationSource', 'Patients');

addAction.execute();

Теперь рассмотрим случай, когда текущему пациенту необходимо добавлять госпитализации (поле Hospitalizations):

var linkView = (new InlineViewBuilder()).build(null, {
                                                        builder: args.builder,
                                                        metadata: {View: editHospitalizationView},
                                                        parentView: parentView
                                                    });

var addAction = new AddAction(parentView);

addAction.setProperty('linkView', linkView);
addAction.setProperty('sourceSource', 'MainDataSource');
addAction.setProperty('destinationSource', 'Patients');
addAction.setProperty('destinationProperty', '$.Hospitalizations');

addAction.execute();

AddAction.metadata¶

Метаданные типа AddAction.

Properties¶

Name	Type	Description
LinkView*	LinkView.metadata	Объект, который будет создавать и настраивать представление
SourceValue.Source*	`String`	Название редактируемого источника данных на представлении редактирования
DestinationValue.Source	`String`	Название редактируемого источника данных, на представлении, откуда редактирование было вызвано
DestinationValue.Property	`String`	Путь до поля в источнике данных, которое будет редактироваться. Данное поле должно быть представлено массивом

* Обязательное свойство.

Examples¶

{
    "AddAction": {
        "DestinationValue": {
          "Source": "ParentsDataSource",
          "Property": "$.Children"
        },
        "SourceValue": {
          "Source": "MainDataSource"
        },
        "LinkView": {
          "InlineView": {
            ...
          }
        }
    }
}

CreateItemAction¶

Создает новый элемент в источнике данных не открывая новых view.

Extends¶

Syntax¶

new CreateItemAction()

Parameters¶

Нет.

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

destinationSource*	`String`	Название редактируемого источника данных, куда необходимо добавить новый пустой элемент
destinationProperty	`String`	Путь до поля в источнике данных, куда необходимо добавить новый пустой элемент. Данное поле должно быть представлено массивом

* Обязательное свойство.

Обратите внимание, что если не указать destinationProperty, то новый элемент будет добавляться непосредственно в источник данных, соответствующий destinationSource, иначе - добавиться в список элементов, соответствующий destinationProperty.

Examples¶

var view = new InfinniUI.View();
var builder = new InfinniUI.ApplicationBuilder();

var metadata = {
    CreateItemAction: {
        DestinationValue: {
            Source: 'SomeDS'
        }
    }
};

var createItemAction = builder.build( metadata, {parentView: view} );

createItemAction.execute();

CreateItemAction.metadata¶

Метаданные типа CreateItemAction.

Properties¶

DestinationValue.Source*	`String`	Название источника данных, куда будет добавлен новый пустой элемент
DestinationValue.Property	`String`	Путь до поля в источнике данных, куда будет добавлен новый пустой элемент. Данное поле должно быть представлено массивом

* Обязательное свойство.

Examples¶

{
    "CreateItemAction": {
        "DestinationValue": {
          "Source": "ParentsDataSource"
        }
    }
}

{
    "CreateItemAction": {
        "DestinationValue": {
          "Source": "ParentsDataSource",
          "Property": "0.items"
        }
    }
}

BaseAction¶

Description¶

Действия, представленные в InfinniUI, являются потомками BaseAction. В BaseAction реализованы базовые API, которые предоставлят все действия InfinniUI.

Syntax¶

new BaseAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Нет

Methods¶

Name	Description
execute	Выполняет заданное действие
initDefaultValues	Инициирует значения по умолчанию
getProperty	Возвращает значение свойства по имени
setProperty	Устанавливает значение свойства по имени

Events¶

Нет

BaseAction.execute()¶

Выполняет заданное действие.

Syntax¶

action.execute(callback);

Parameters¶

Name	Type	Description
callback	Script	Обработчик события о том, что Action был выполнен

Returns¶

Метод ничего не возвращает

Examples¶

var updateAction = new UpdateAction(parentView);
updateAction.setProperty('dataSource', parentView.context.dataSources['DataSource1']);
updateAction.execute(function(){ alert('DataSource1 was updated'); }); // обновит DataSource1

BaseAction.getProperty()¶

Возвращает значение свойства по имени.

Syntax¶

action.getProperty(propertyName);

Parameters¶

Name	Description
propertyName	Название свойства

Returns¶

Значение указанного свойства

Examples¶

var linkView = addAction.getProperty('linkView');

See Also¶

setProperty

BaseAction.initDefaultValues()¶

Инициирует свойства action’а значениями по умолчанию.

Syntax¶

action.initDefaultValues();

Parameters¶

Нет

Returns¶

Метод ничего не возвращает

BaseAction.metadata¶

Метаданные, которые реализованы во всех действиях InfinniUI.

Properties¶

Name	Type	Description
OnExecuted	Script	Устанавливает обработчик завершения действия.
CanExecute	Script	Проверка условия для выполнения экшена. Возможно использование Promise. Для выполнения экшена необходимо вернуть true и для предотвращения выполнения экшена необходимо вернуть false.

Examples¶

function canExecute( context, args ) {
    return new Promise( function( resolve, reject ) {
      // some async action
      setTimeout( function() {
          resolve();
      }, 1000 );
    } )
      .then( function() {
          return true;
      } );
}

{
    "CancelAction": {
        "OnExecuted": "{ alert('OnCancel'); }",
        "CanExecute": "{ return canExecute( context, args ); }"
    }
}

BaseAction.setProperty()¶

Устанавливает значение свойства по имени.

Syntax¶

action.setProperty(propertyName, value)

Parameters¶

Name	Description
propertyName	Название свойства
value	Значение, которое необходимо установить

Returns¶

Метод ничего не возвращает

Examples¶

addAction.setProperty('linkView', linkView);

See Also¶

getProperty

BaseAction.metadata¶

Метаданные, которые реализованы во всех действиях InfinniUI.

Properties¶

Name	Type	Description
OnExecuted	Script	Устанавливает обработчик завершения действия.
CanExecute	Script	Проверка условия для выполнения экшена. Возможно использование Promise. Для выполнения экшена необходимо вернуть true и для предотвращения выполнения экшена необходимо вернуть false.

Examples¶

function canExecute( context, args ) {
    return new Promise( function( resolve, reject ) {
      // some async action
      setTimeout( function() {
          resolve();
      }, 1000 );
    } )
      .then( function() {
          return true;
      } );
}

{
    "CancelAction": {
        "OnExecuted": "{ alert('OnCancel'); }",
        "CanExecute": "{ return canExecute( context, args ); }"
    }
}

CancelAction¶

Устанавливает в качестве результата работы родительского представления значение DialogResult.canceled.

Extends¶

Syntax¶

new CancelAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Нет

Examples¶

var cancelAction = new CancelAction(parentView);
cancelAction.execute(); //parentView.getDialogResult() === DialogResult.canceled

CancelAction.metadata¶

Метаданные типа CancelAction.

Properties¶

Нет

Examples¶

{
    "CancelAction": {
    }
}

DeleteAction¶

Удаляет элемент из источника данных.

Extends¶

Syntax¶

new DeleteAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Default	Description
destinationSource*	`String`	–	Название источника данных, из которого производится удаление
destinationProperty*	`String`	–	Путь до документа в источнике данных, который будет удалятся
canClose	`Boolean`	true	Значение, определяющее, нужно ли перед удалением спросить согласие пользователя на удаление

* Обязательное свойство.

Examples¶

var deleteAction = new DeleteAction(parentView);
deleteAction.setProperty('destinationSource', 'Patients');
deleteAction.setProperty('destinationProperty', '$.Hospitalizations.0');
deleteAction.execute(); // удалит первую госпитализацию у текущего пациента

DeleteAction.metadata¶

Метаданные типа DeleteAction.

Properties¶

Name	Type	Default	Description
DestinationValue.Source*	`String`	–	Название источника данных, из которого производится удаление
DestinationValue.Property*	`String`	–	Путь до документа в источнике данных, который будет удалятся
Accept	`Boolean`	true	Значение, определяющее, нужно ли перед удалением спросить согласие пользователя на удаление
AcceptMessage	`String`		Текст для сообщения во всплывающем окне
AcceptMessageType	`String`	default	Тип всплывающего окна. Доступные варианты: default, error, warning
OnSuccess	Script	–	Устанавливает обработчик успешного завершения действия
OnError	Script	–	Устанавливает обработчик завершения действия с ошибкой

* Обязательное свойство.

Examples¶

{
    "DeleteAction": {
        "AcceptMessage": "Do you really want to delete it?",
        "AcceptMessageType": "error",
        "DestinationValue": {
          "Source": "DataSource1",
          "Property": "$"
        },
        "Accept": false,
        "OnSuccess": "{ alert('onSuccess'); }",
        "OnError": "{ alert('onError'); }"
    }
}

{
    "DeleteAction": {
        "AcceptMessage": "Do you seriously want to delete it?",
        "AcceptMessageType": "warning",
        "DestinationValue": {
          "Source": "DataSource1",
          "Property": "$.Hospitalizations.0"
        },
        "Accept": false
    }
}

EditAction¶

Редактирует элемент из источника данных.

Extends¶

Syntax¶

new EditAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Description
linkView	LinkView	Объект, который будет создавать и настраивать представление для редактирования элемента
sourceSource	`String`	Название редактируемого источника данных на представлении редактирования
destinationSource	`String`	Название редактируемого источника данных на представлении, откуда редактирование было вызвано
destinationProperty	`String`	Путь до поля в источнике данных, которое будет редактироваться

Examples¶

var linkView = (new InlineViewBuilder()).build(null, {
                                                        builder: args.builder,
                                                        metadata: {View: editPatientView},
                                                        parentView: parentView
                                                    });

var editAction = new EditAction(parentView);

editAction.setProperty('linkView', linkView);
editAction.setProperty('sourceSource', 'MainDataSource');
editAction.setProperty('destinationSource', 'Patients');
editAction.setProperty('destinationProperty', '$');

editAction.execute(); // откроется форма редактирования текущего пациента

EditAction.metadata¶

Метаданные типа EditAction.

Properties¶

Name	Type	Description
LinkView*	LinkView.metadata	Объект, который будет создавать и настраивать представление
SourceValue.Source*	`String`	Название редактируемого источника данных на представлении редактирования
DestinationValue.Source*	`String`	Название редактируемого источника данных, на представлении, откуда редактирование было вызвано
DestinationValue.Property*	`String`	Путь до поля в источнике данных, которое будет редактироваться

* Обязательное свойство.

Examples¶

{
    "EditAction": {
        "DestinationValue": {
          "Source": "ParentsDataSource",
          "Property": "$"
        },
        "SourceValue": {
          "Source": "MainDataSource"
        },
        "LinkView": {
          "InlineView": {
            ...
          }
        }
    }
}

OpenAction¶

Открывает представление.

Extends¶

Syntax¶

new OpenAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Description
linkView	LinkView	Объект, который будет создавать и настраивать представление

Метод execute¶

Если при вызове метода execute указан параметр callback, то вызов данного обработчика осуществляется с параметром view.

Name	Type	Description
view	Представление	Открытое представление

Examples¶

var linkView = (new InlineViewBuilder()).build(null, {
                                                        builder: args.builder,
                                                        metadata: {View: viewMetadata},
                                                        parentView: args.parentView
                                                    });
var openActionCallback = function(view){
    console.log('%s was opened', view.name);
};

var openAction = new OpenAction(args.parentView);
openAction.setProperty('linkView', linkView);
openAction.execute(openActionCallback);

OpenAction.metadata¶

Метаданные типа OpenAction.

Properties¶

Name	Type	Description
LinkView*	LinkView.metadata	Объект, который будет создавать и настраивать представление

* Обязательное свойство.

Examples¶

{
    "OpenAction": {
        "LinkView": {
            "InlineView": {
                ...
            }
        }
    }
}

RouteToAction¶

Производит переход по указанному имени маршрута. Путь соотвествующий имени определен в InfinniUI.config.routes.

Extends¶

Syntax¶

new RouteToAction()

Parameters¶

Нет.

Properties¶

Нет

Examples¶

var routeToAction = new RouteToAction();
routeToAction.execute();

RouteToAction.metadata¶

Метаданные типа RouteToAction.

Properties¶

Name	Type	Default	Description
Name*	`String`		Имя маршрута. Имя должно быть однозначно определенно в InfinniUI.config.routes
Replace	`Boolean`	false	Возможность обновить URL без создания записи в истории браузера.
Params	`Object`		Массив с параметрами маршрута, которые будут переданы в callback. Где Name - имя параметра, а Value - значение параметра. Значение параметра можно задать как через `String`, так и через DataBinding
Query	`Object`		Массив с параметрами запроса, которые будут переданы в callback. Где Name - имя параметра запроса, а Value - значение параметра запроса. Значение параметра можно задать как через `String`, так и через DataBinding

* Обязательное свойство.

Examples¶

"RouteToAction": {
  "Name": "routeName",
  "Replace": true,
  "Params": [
    {
      "Name": "user",
      "Value": {
        "Source": "ds2",
        "Property": "$.user"
      }
    },
    {
      "Name": "pageNumber",
      "Value": "lastPage"
    }
  ],
  "Query": [
    {
      "Name": "queryId",
      "Value": {
        "Source": "ds2",
        "Property": "$.queryId"
      }
    },
    {
      "Name": "userAge",
      "Value": "teenager"
    }
  ]
}

SaveAction¶

Сохраняет изменения для текущего элемента в источнике данных.

Extends¶

Syntax¶

new SaveAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Default	Description
dataSource	DataSource	–	Источник данных, который будет сохранятся
canClose	`Boolean`	true	Значение, определяющее, нужно ли закрыть родительское представление после сохранения

Метод execute¶

Если при вызове метода execute указан параметр callback, то вызов данного обработчика осуществляется с параметрами context и argument.

Name	Type	Description
context	Контекст представления	Контекст родительского представления
argument	`Object`	В случае, если сохранение произошло успешно, то argument содержит поле source - источник данных, в который осуществляется сохранение. Если же при сохранении произошла ошибка, то argument содержить поле value, которое содержит результаты проверки валидации

Examples¶

var saveAction = new SaveAction(parentView);
saveAction.setProperty('dataSource', parentView.context.dataSources['DataSource1']);
saveAction.setProperty('canClose', true);
saveAction.execute(); // сохранит выбранный элемент DataSource1 и закроет parentView

SaveAction.metadata¶

Метаданные типа SaveAction.

Properties¶

Name	Type	Default	Description
DestinationValue.Source*	`String`	–	Название источника данных
CanClose	`Boolean`	true	Значение, определяющее, нужно ли закрыть родительское представление после сохранения
OnSuccess	Script	–	Устанавливает обработчик успешного завершения действия
OnError	Script	–	Устанавливает обработчик завершения действия с ошибкой

* Обязательное свойство.

Examples¶

{
    "SaveAction": {
        "DestinationValue": {
            "Source": "DataSource1"
        },
        "CanClose": false,
        "OnSuccess": "{ alert('onSuccess'); }",
        "OnError": "{ alert('onError'); }"
    }
}

SelectAction¶

Заполняет поле элемента в источнике данных данными из другого элемента источника данных.

Extends¶

Syntax¶

new SelectAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Description
linkView	LinkView	Объект, который будет создавать и настраивать представление для выбора нового значения поля
sourceSource	`String`	Название источника данных, из которого будет заполняться редактируемый источник данных
sourceProperty	`String`	Путь до поля в источнике данных, которое будет копироваться
destinationSource	`String`	Название редактируемого источника данных
destinationProperty	`String`	Путь до поля в источнике данных, которое будет редактироваться

Метод execute¶

Если при вызове метода execute указан параметр callback, то вызов данного обработчика осуществляется с параметром value.

Name	Description
value	Выбранное значение

Examples¶

var linkView = (new InlineViewBuilder()).build(null, {
                                                        builder: args.builder,
                                                        metadata: {View: selectPatientView},
                                                        parentView: parentView
                                                    });
var selectActionCallback = function(value) {
    console.log(value);
};

var selectAction = new SelectAction(parentView);

selectAction.setProperty('linkView', linkView);
selectAction.setProperty('destinationSource', 'Hospitalizations');
selectAction.setProperty('destinationProperty', '$.Patient');
selectAction.setProperty('sourceSource', 'Patients');
selectAction.setProperty('sourceProperty', '$');

selectAction.execute(selectActionCallback);//откроет окно выбора пациента. Выбранный пацент будет записан в текущей госпитализации

SelectAction.metadata¶

Метаданные типа SelectAction.

Properties¶

Name	Type	Description
LinkView*	LinkView.metadata	Объект, который будет создавать и настраивать представление
SourceValue.Source*	`String`	Название источника данных, из которого будет заполняться редактируемый источник данных
SourceValue.Property*	`String`	Путь до поля в источнике данных, которое будет копироваться
DestinationValue.Source*	`String`	Название редактируемого источника данных
DestinationValue.Property*	`String`	Путь до поля в источнике данных, которое будет редактироваться

* Обязательное свойство.

Examples¶

{
    "SelectAction": {
        "DestinationValue": {
          "Source": "Hospitalizations",
          "Property": "$.Patient"
        },
        "SourceValue": {
          "Source": "Patients",
          "Property": "$"
        },
        "LinkView": {
          "InlineView": {
            ...
          }
        }
    }
}

ServerAction¶

Отправляет http запрос.

Extends¶

¹ Шаблонизируемая величина.

Syntax¶

new ServerAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Default	Description
origin*	`String`¹	–	Хост и порт
path*	`String`¹	–	Строка пути (относительно хоста)
data	`Object`¹	–	Данные запроса
contentType	`String`	‘application/x-www-form-urlencoded; charset=utf-8’	Тип данных
method	`String`	‘GET’	Метод запроса

Url запроса определяется конкатинацией свойств origin и path.

* Обязательное свойство. ¹ Шаблонизируемая величина

Parameters Templating¶

Зачастую при описании запроса возникает необходимость использовать изменяемые значения.

Для этого в ServerAction введены параметры. Вы можете задать значение параметра с помощью метода setParam. А затем использовать его в шаблонизируемых величинах, обозначив <%[paramName]%>.

Например, задан параметр userId, тогда в свойстве path можно обратится к нему следующим образом:

"/users?filter=eq(userId,<%userId%>)".

При отправке запроса вместо <%userId%> будет установлено соответсвующее значение параметра.

Метод execute¶

Если при вызове метода execute указан параметр callback, то вызов данного обработчика осуществляется с параметром value.

Name	Description
value.requestUrl	Url запроса
value.method	Метод запроса
value.contentType	Тип данных
value.args	Данные запроса

Methods¶

Name	Description
getParam	Возвращает значение параметра
setParam	Устанавливает значение параметра

ServerAction.getParam()¶

Возвращает значение параметра.

Syntax¶

serverAction.getParam(name)

Parameters¶

Name	Description
name	Название параметра

Returns¶

Значение указанного параметра.

Examples¶

var documentName = serverAction.getParam('documentName');

See Also¶

setParam

ServerAction.metadata¶

Метаданные типа ServerAction.

Properties¶

Name	Type	Default	Description
Origin	`String`¹	–	Базовая часть url запроса
Path*	`String`¹	–	Уточняющая часть url запроса
Method	`String`	‘GET’	Метод запроса
ContentType	`String`	‘application/x-www-form-urlencoded; charset=utf-8’	Тип данных
Data	`Object`¹	–	Данные запроса
Params	`Object`	–	Параметры запроса
OnSuccess	Script	–	Устанавливает обработчик успешного завершения действия
OnError	Script	–	Устанавливает обработчик завершения действия с ошибкой

* Обязательное свойство.

Examples¶

{
  "ServerAction": {
    "Method": "Get",
    "Origin": "http://localhost:<%port%>",
    "Path": "/documents/<%document%>",
    "Data": {
      "filter": "eq(_id,'<%_id%>')"
    },
    "Params": {
      "port": "9900",
      "document": "GetCompanyProfile988Response",
      "_id": {
        "Source": "MainDataSource",
        "Property": "$._id"
      }
    },
    "OnSuccess": "{ alert('onSuccess'); }",
    "OnError": "{ alert('onError'); }"
  }
}

ServerAction.setParam()¶

Устанавливает значение параметра.

Syntax¶

serverAction.setParam(name, value)

Parameters¶

Name	Description
name	Название параметра
value	Значение, которое необходимо установить

Returns¶

Метод ничего не возвращает

Examples¶

serverAction.setParam('documentName', 'Patient');

See Also¶

getParam

ServerAction.metadata¶

Метаданные типа ServerAction.

Properties¶

Name	Type	Default	Description
Origin	`String`¹	–	Базовая часть url запроса
Path*	`String`¹	–	Уточняющая часть url запроса
Method	`String`	‘GET’	Метод запроса
ContentType	`String`	‘application/x-www-form-urlencoded; charset=utf-8’	Тип данных
Data	`Object`¹	–	Данные запроса
Params	`Object`	–	Параметры запроса
OnSuccess	Script	–	Устанавливает обработчик успешного завершения действия
OnError	Script	–	Устанавливает обработчик завершения действия с ошибкой

* Обязательное свойство.

¹ Шаблонизируемая величина.

Examples¶

{
  "ServerAction": {
    "Method": "Get",
    "Origin": "http://localhost:<%port%>",
    "Path": "/documents/<%document%>",
    "Data": {
      "filter": "eq(_id,'<%_id%>')"
    },
    "Params": {
      "port": "9900",
      "document": "GetCompanyProfile988Response",
      "_id": {
        "Source": "MainDataSource",
        "Property": "$._id"
      }
    },
    "OnSuccess": "{ alert('onSuccess'); }",
    "OnError": "{ alert('onError'); }"
  }
}

UpdateAction¶

Обновляет список элементов источника данных.

Extends¶

Преобразователь данных между элементом и источником.

Syntax¶

new UpdateAction(parentView)

Parameters¶

Name	Type	Description
parentView	View	Родительское представление

Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Name	Type	Description
dataSource	DataSource	Источник данных, который будет обновляться

Метод execute¶

Если при вызове метода execute указан параметр callback, то вызов данного обработчика осуществляется с параметрами context и argument.

Name	Type	Description
context	Контекст представления	Контекст родительского представления
argument.value	`Array`	Новый список элементов источника данных

Examples¶

var updateAction = new UpdateAction(parentView);
updateAction.setProperty('dataSource', parentView.context.dataSources['DataSource1']);
updateAction.execute(); // обновит DataSource1

UpdateAction.metadata¶

Метаданные типа UpdateAction.

Properties¶

Name	Type	Description
DestinationValue.Source*	`String`	Название источника данных
OnSuccess	Script	Устанавливает обработчик успешного завершения действия
OnError	Script	Устанавливает обработчик завершения действия с ошибкой

* Обязательное свойство.

Examples¶

{
    "UpdateAction": {
        "DestinationValue": {
            "Source": "DataSource1"
        },
        "OnSuccess": "{ alert('onSuccess'); }",
        "OnError": "{ alert('onError'); }"
    }
}

See Also¶

DataSource

UpdateAction.metadata¶

Метаданные типа UpdateAction.

Properties¶

Name	Type	Description
DestinationValue.Source*	`String`	Название источника данных
OnSuccess	Script	Устанавливает обработчик успешного завершения действия
OnError	Script	Устанавливает обработчик завершения действия с ошибкой

* Обязательное свойство.

Examples¶

{
    "UpdateAction": {
        "DestinationValue": {
            "Source": "DataSource1"
        },
        "OnSuccess": "{ alert('onSuccess'); }",
        "OnError": "{ alert('onError'); }"
    }
}

Builders¶

InfinniUI builders interprete metadata transmitted to them creating and setting up elements and data sources, as well as, binding them.

There are single type element builders (ie only for buttons or for aprticular data sources). All of them must be registered in main builder which may recieve data from each element and interprete them.

Single type element builders requirements¶

Only one requirement exists for single type element builders that is implementation of method build(context, args).

Context must recieve View context in which the builder is invoked by. Args recieves parameters for elements creation, always accompanied by args.metadata and parent element``args.parent``.

Collection¶

Collections of elements can recieve notifications upon change updates.

Description¶

In many cases data is processed by user is a collection of elements. It is required while modifying collection that changes are properly indicated in UI. To resolve this Collection type can be implemented. It has all methods required to work with the collection and list of events to get notified about all changes that occured to the collection.

Syntax¶

new Collection(items, idProperty, comparator)

Parameters¶

Name	Type	Description
items	`Array`	Array to initialize collection.
idProperty	`String`	Property identificator of collection elements.
comparator	comparator	Function that compares collection of elements.

Properties¶

Name	Type	Description
length	`Integer`	Returns number of elements in collection.
idProperty	`String`	Returns identificator property of element in collection.
comparator	comparator	Returns function of comparison of elements in collection.

Methods¶

Name	Description
size	Возвращает количество элементов в коллекции.
push	Добавляет элемент в конец коллекции.
add	Добавляет элемент в конец коллекции.
addAll	Добавляет элементы в конец коллекции.
insert	Вставляет элемент в указанную позицию коллекции.
insertAll	Вставляет элементы, начиная с указанной позиции коллекции.
reset	Устанавливает список элементов коллекции.
set	Обновляет список элементов коллекции.
replace	Заменяет элемент коллекции на указанный.
pop	Удаляет последний элемент из коллекции.
remove	Удаляет указанный элемент из коллекции.
removeById	Удаляет элемент с указанным идентификатором из коллекции.
removeAt	Удаляет элемент с указанным индексом из коллекции.
removeAll	Удаляет указанные элементы из коллекции.
removeRange	Удаляет диапазон элементов из коллекции.
removeEvery	Удаляет все элементы из коллекции, удовлетворяющие указанному условию.
clear	Удаляет все элементы из коллекции.
getById	Возвращает элемент коллекции с заданным идентификатором.
getByIndex	Возвращает элемент коллекции с заданным индексом.
find	Возвращает первый найденный элемент коллекции, удовлетворяющий условию.
indexOf	Возвращает индекс первого найденного элемента коллекции при поиске с начала.
lastIndexOf	Возвращает индекс первого найденного элемента коллекции при поиске с конца.
findIndex	Возвращает индекс первого найденного элемента коллекции, удовлетворяющего условию.
contains	Проверяет наличие указанного элемента в коллекции.
contains	Проверяет наличие указанного элемента в коллекции.
every	Проверяет, что каждый элемент коллекции удовлетворяет указанному условию.
some	Проверяет, что некоторый элемент коллекции удовлетворяет указанному условию.
forEach	Перечисляет все элементы коллекции.
filter	Возвращает элементы коллекции, удовлетворяющие указанному условию.
take	Возвращает указанный диапазон элементов коллекции.
toArray	Возвращает массив всех элементов коллекции.
move	Перемещает элемент коллекции в позицию с указанным индексом.
sort	Сортирует список элементов коллекции.
clone	Создает копию коллекции элементов.
setProperty	Устанавливает значение атрибута для элемента.
getProperty	Возвращает значение атрибута элемента.

Events¶

Name	Description
onAdd	Устанавливает обработчик события о том, что произошло добавление элементов.
onReplace	Устанавливает обработчик события о том, что произошла замена элементов.
onRemove	Устанавливает обработчик события о том, что произошло удаление элементов.
onMove	Устанавливает обработчик события о том, что произошло перемещение элементов.
onReset	Устанавливает обработчик события о том, что произошли существенные изменения.
onChange	Устанавливает обработчик события о том, что произошли какие-то изменения.

Collection.add¶

Добавляет элемент в конец коллекции.

Description¶

Метод add() добавляет указанный элемент в конец коллекции. Успешное выполнение данного метода приводит к возникновению события onAdd. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.add(newItem)

Parameters¶

Name	Type	Description
`newItem`	*	Элемент, который необходимо добавить в коллекцию.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection();
collection.add('A'); // [ 'A' ]
collection.add('B'); // [ 'A', 'B' ]
collection.add('C'); // [ 'A', 'B', 'C' ]

Collection.addAll¶

Добавляет элементы в конец коллекции.

Description¶

Метод addAll() добавляет указанные элементы в конец коллекции. Успешное выполнение данного метода приводит к возникновению события onAdd. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.addAll(newItems)

Parameters¶

Name	Type	Description
`newItems`	`Array`	Массив элементов, которые необходимо добавить в коллекцию.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection();
collection.addAll([ 'A', 'B' ]); // [ 'A', 'B' ]
collection.addAll([ 'C', 'D' ]); // [ 'A', 'B', 'C', 'D' ]

Collection.clear¶

Удаляет все элементы из коллекции.

Description¶

Метод clear() удаляет все элементы из коллекции. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.clear()

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
collection.clear(); // [ ]

Collection.clone¶

Создает копию коллекции элементов.

Description¶

Метод создает создает новый экземпляр коллекции элементов, который является копией исходной коллекции. При этом копируется только состав и порядок элементов, сами элементы не клонируются. Также не копируются обработчики событий исходной коллекции. Полученный экземпляр является абсолютно независимым от исходной коллекции, также, как и исходная коллекция не зависит от созданного экземпляра. Таким образом, модификация одной коллекции никак не сказывается на состоянии другой и наоборот.

Syntax¶

Collection.clone()

Returns¶

Новый экземпляр коллекции элементов, который является копией исходной коллекции.

Examples¶

var collection1 = new Collection([ 'A', 'B', 'C' ]);
var collection2 = collection1.clone();

collection1.add('X');
collection2.add('Y');

collection1.forEach(function(item) {
  console.log(item);
});

// Output:
// A
// B
// C
// X

collection2.forEach(function(item) {
  console.log(item);
});

// Output:
// A
// B
// C
// Y

Collection.comparator¶

Возвращает функцию сравнения элементов коллекции.

Syntax¶

Collection.comparator

Returns¶

Функция сравнения элементов коллекции, указанная при ее создании.

Examples¶

var items = [
  { key: 3, value: 'C' },
  { key: 2, value: 'B' },
  { key: 1, value: 'A' }
];

var comparator = function(a, b) {
  if (a.key < b.key) return -1;
  if (a.key > b.key) return 1;
  return 0;
};

var collection = new Collection(items, 'key', comparator);

collection.forEach(function(item) {
  console.log(item.value);
});

// Output:
// C
// B
// A

collection.sort();

collection.forEach(function(item) {
  console.log(item.value);
});

// Output:
// A
// B
// C

Collection.contains¶

Проверяет наличие указанного элемента в коллекции.

Syntax¶

Collection.contains(item, fromIndex)

Parameters¶

Name	Type	Default	Description
`item`*	*	–	Искомый элемент коллекции.
`fromIndex`	`Integer`	0	Индекс элемента, с которого необходимо начать поиск.

* Обязательный аргумент.

Returns¶

Возвращает true, если указанный элемент содержится в коллекции, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
collection.contains('A'); // true
collection.contains('B'); // true
collection.contains('C'); // true
collection.contains('A', 1); // false
collection.contains('B', 2); // false
collection.contains('C', 3); // false

Collection.every¶

Проверяет, что каждый элемент коллекции удовлетворяет указанному условию.

Syntax¶

Collection.every(predicate, thisArg)

Parameters¶

Name	Type	Description
`predicate`*	`Function`	Предикат, определяющий условие поиска элемента. Предикат принимает три параметра: ● `item` - проверяемый элемент коллекции, ● `index` - индекс проверяемого элемента коллекции, ● `collection` - обрабатываемая коллекция. Предикат возвращает `true`, если проверяемый элемент удовлетворяет условию, иначе - `false`.
`thisArg`	*	Объект, используемый как контекст исполнения `this` предиката `predicate`.

* Обязательный аргумент.

Returns¶

Возвращает true, если каждый элемент удовлетворяют указанному условию, иначе - false.

Examples¶

var isBigEnough = function(item, index, collection) {
  return element >= 10;
};

new Collection([ 12, 5, 8, 130, 44 ]).every(isBigEnough);   // false
new Collection([ 12, 54, 18, 130, 44 ]).every(isBigEnough); // true

Collection.filter¶

Возвращает элементы коллекции, удовлетворяющие указанному условию.

Syntax¶

Collection.filter(predicate, thisArg)

Parameters¶

Name	Type	Description
`predicate`*	`Function`	Предикат, определяющий условие поиска элемента. Предикат принимает три параметра: ● `item` - проверяемый элемент коллекции, ● `index` - индекс проверяемого элемента коллекции, ● `collection` - обрабатываемая коллекция. Предикат возвращает `true`, если проверяемый элемент удовлетворяет условию, иначе - `false`.
`thisArg`	*	Объект, используемый как контекст исполнения `this` предиката `predicate`.

* Обязательный аргумент.

Returns¶

Массив элементов коллекции, удовлетворяющих указанному условию.

Examples¶

var isBigEnough = function(item, index, collection) {
  return element >= 10;
};

var collection = new Collection([ 12, 5, 8, 130, 44 ]);
var filtered = collection.filter(isBigEnough); // [ 12, 130, 44 ]

Collection.find¶

Возвращает первый найденный элемент коллекции, удовлетворяющий условию.

Syntax¶

Collection.find(predicate, thisArg)

Parameters¶

Name	Type	Description
`predicate`*	`Function`	Предикат, определяющий условие поиска элемента. Предикат принимает три параметра: ● `item` - проверяемый элемент коллекции, ● `index` - индекс проверяемого элемента коллекции, ● `collection` - обрабатываемая коллекция. Предикат возвращает `true`, если проверяемый элемент удовлетворяет условию, иначе - `false`.
`thisArg`	*	Объект, используемый как контекст исполнения `this` предиката `predicate`.

* Обязательный аргумент.

Returns¶

Первый найденный элемент коллекции, удовлетворяющий указанному условию.

Examples¶

var collection = new Collection([ 1, 3, 5, 6, 7, 9, 11, 12 ]);

var result = collection.find(function(item, index, collection) {
  return item % 2 === 0;
}); // result === 6

Collection.findIndex¶

Возвращает индекс первого найденного элемента коллекции, удовлетворяющего условию.

Syntax¶

Collection.findIndex(predicate, thisArg)

Parameters¶

Name	Type	Description
`predicate`*	`Function`	Предикат, определяющий условие поиска элемента. Предикат принимает три параметра: ● `item` - проверяемый элемент коллекции, ● `index` - индекс проверяемого элемента коллекции, ● `collection` - обрабатываемая коллекция. Предикат возвращает `true`, если проверяемый элемент удовлетворяет условию, иначе - `false`.
`thisArg`	*	Объект, используемый как контекст исполнения `this` предиката `predicate`.

* Обязательный аргумент.

Returns¶

Индекс первого найденного элемента коллекции, удовлетворяющего указанному условию.

Examples¶

var collection = new Collection([ 1, 3, 5, 6, 7, 9, 11, 12 ]);

var result = collection.findIndex(function(item, index, collection) {
  return item % 2 === 0;
}); // result === 3

Collection.forEach¶

Перечисляет все элементы коллекции.

Syntax¶

Collection.forEach(callback, thisArg)

Parameters¶

Name	Type	Description
`predicate`*	`Function`	Функция для обработки очередного элемента коллекции. Функция принимает три параметра: ● `item` - очередной элемент коллекции, ● `index` - индекс очередного элемента коллекции, ● `collection` - обрабатываемая коллекция.
`thisArg`	*	Объект, используемый как контекст исполнения `this` предиката `predicate`.

* Обязательный аргумент.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);

collection.forEach(function(item, index, collection) {
  console.log(item);
});

// Output:
// A
// B
// C

Collection.getById¶

Возвращает элемент коллекции с заданным идентификатором.

Syntax¶

Collection.getById(id)

Parameters¶

Name	Type	Description
`id`	*	Идентификатор элемента.

Returns¶

Элемент коллекции с заданным идентификатором.

Examples¶

var collection = new Collection([
  { key: 1, value: 'A' },
  { key: 2, value: 'B' },
  { key: 3, value: 'C' }
], 'key');

var item1 = collection.getById(1); // { key: 1, value: 'A' }
var item2 = collection.getById(2); // { key: 2, value: 'B' }
var item3 = collection.getById(3); // { key: 3, value: 'C' }

Collection.getByIndex¶

Возвращает элемент коллекции с заданным индексом.

Syntax¶

Collection.getByIndex(index)

Parameters¶

Name	Type	Description
`index`	`Integer`	Индекс элемента.

Returns¶

Элемент коллекции с заданным индексом.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
var item0 = collection.getByIndex(0); // 'A'
var item1 = collection.getByIndex(1); // 'B'
var item2 = collection.getByIndex(2); // 'C'

Collection.getProperty¶

Возвращает значение атрибута для заданного элемента коллекции.

Syntax¶

collection.getProperty(index, propertyName);

Parameters¶

Name	Type	Description
`index`	`Integer`	Порядковый индекс элемента коллекции
`propertyName`	`String`	Имя атрибута

Returns¶

Значение атрибута или undefined.

Examples¶

var collection = new Collection([3,2,1]);
collection
    .setProperty(0, 'name', 'three')
    .setProperty(1, 'name', 'two')
    .setProperty(2, 'name', 'one');

collection.sort();

console.log(collection.toArray()); // Output:   [1, 2, 3]
console.log(collection.getProperty(0, 'name')); // Output: 'one';
console.log(collection.getProperty(1, 'name')); // Output: 'two';
console.log(collection.getProperty(2, 'name')); // Output: 'three';

Collection.idProperty¶

Возвращает свойство с идентификатором элемента коллекции.

Description¶

Идентификатор элемента используется при реализации целого ряда методов коллекции и служит для уникальной идентификации искомого элемента или элемента, над которым следует произвести какое-то действие. Если элемент коллекции не имеет свойства с уникальным идентификатором, он сам выступает в роли этого идентификатора.

Пример функции сравнения элементов, когда свойство idProperty указано:

function equals(a, b) {
  return a[idProperty] === b[idProperty];
}

Пример функции сравнения элементов, когда свойство idProperty не указано:

function equals(a, b) {
  return a === b;
}

Syntax¶

Collection.idProperty

Returns¶

Свойство с идентификатором элемента коллекции, указанное при ее создании.

Examples¶

var collection = new Collection([
  { key: 1, value: 'A' },
  { key: 2, value: 'B' },
  { key: 3, value: 'C' }
], 'key');

var value1 = collection.getById(1); // 'A'
var value2 = collection.getById(2); // 'B'
var value3 = collection.getById(3); // 'C'

Collection.indexOf¶

Возвращает индекс первого найденного элемента коллекции при поиске с начала.

Syntax¶

Collection.indexOf(item, fromIndex)

Parameters¶

Name	Type	Default	Description
`item`*	*	–	Искомый элемент коллекции.
`fromIndex`	`Integer`	0	Индекс элемента, с которого необходимо начать поиск.

* Обязательный аргумент.

Returns¶

Индекс первого найденного элемента коллекции или -1, если элемент не найден.

Examples¶

var collection = new Collection([ 'A', 'B', 'C', 'A', 'B', 'C' ]);
var index1 = collection.indexOf('C');    // index1 === 2
var index2 = collection.indexOf('C', 3); // index2 === 5
var index3 = collection.indexOf('D');    // index3 === -1

Collection.insert¶

Вставляет элемент в указанную позицию коллекции.

Description¶

Метод insert() добавляет указанный элемент в заданную позицию коллекции. Успешное выполнение данного метода приводит к возникновению события onAdd. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.insert(index, newItem)

Parameters¶

Name	Type	Description
`index`	`Integer`	Индекс вставляемого элемента.
`newItem`	*	Элемент, который необходимо добавить в коллекцию.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection();
collection.insert(0, 'A'); // [ 'A' ]
collection.insert(0, 'B'); // [ 'B', 'A' ]
collection.insert(0, 'C'); // [ 'C', 'B', 'A' ]

Collection.insertAll¶

Вставляет элементы, начиная с указанной позиции коллекции.

Description¶

Метод insertAll() добавляет указанные элементы, начиная с заданной позиции. Успешное выполнение данного метода приводит к возникновению события onAdd. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.insertAll(index, newItems)

Parameters¶

Name	Type	Description
`index`	`Integer`	Индекс первого вставляемого элемента.
`newItems`	`Array`	Массив элементов, которые необходимо добавить в коллекцию.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection();
collection.insertAll(0, [ 'A', 'B' ]); // [ 'A', 'B' ]
collection.insertAll(0, [ 'C', 'D' ]); // [ 'C', 'D', 'A', 'B' ]

Collection.lastIndexOf¶

Возвращает индекс первого найденного элемента коллекции при поиске с конца.

Syntax¶

Collection.lastIndexOf(item, fromIndex)

Parameters¶

Name	Type	Default	Description
`item`*	*	–	Искомый элемент коллекции.
`fromIndex`	`Index`	Collection.length - 1	Индекс элемента, с которого необходимо начать поиск.

* Обязательный аргумент.

Returns¶

Индекс первого найденного элемента коллекции или -1, если элемент не найден.

Examples¶

var collection = new Collection([ 'A', 'B', 'C', 'A', 'B', 'C' ]);
var index1 = collection.lastIndexOf('C');    // index1 === 5
var index2 = collection.lastIndexOf('C', 4); // index2 === 2
var index3 = collection.lastIndexOf('D');    // index3 === -1

Collection.length¶

Возвращает количество элементов в коллекции.

Syntax¶

Collection.length

Returns¶

Количество элементов в коллекции.

Examples¶

var collection = new Collection(); // Collection.length === 0
collection.add('A'); // Collection.length === 1
collection.add('B'); // Collection.length === 2
collection.add('C'); // Collection.length === 3

Collection.move¶

Перемещает элемент коллекции в позицию с указанным индексом.

Description¶

Метод move() перемещает элемент коллекции в позицию с указанным индексом. Успешное выполнение данного метода приводит к возникновению события onMove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.move(oldIndex, newIndex)

Parameters¶

Name	Type	Description
`oldIndex`	`Integer`	Индекс элемента, который необходимо переместить.
`newIndex`	`Integer`	Индекс нового местоположения элемента.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
collection.move(2, 0); // [ 'C', 'A', 'B' ]
collection.move(2, 1); // [ 'C', 'B', 'A' ]

Collection.onAdd¶

Устанавливает обработчик события о том, что произошло добавление элементов.

Description¶

Успешное выполнение методов push(), add(), addAll(), insert() и insertAll() приводит к возникновению события onAdd. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.onAdd(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что произошло добавление одного или нескольких элементов в коллекцию. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.action` содержит тип действия и в данном случае равно `'add'` (добавление); `argument.newItems` - массив добавленных элементов; `argument.newStartingIndex` - индекс, по которому были добавлены элементы (или `-1`, если элементы были добавлены в конец коллекции).

Examples¶

var collection = new Collection();

collection.onAdd(function(context, argument) {
  alert('New items are added!');
});

collection.add('A');

Collection.onChange¶

Устанавливает обработчик события о том, что произошли какие-то изменения.

Description¶

Любые операции над коллекцией, которые приводят к ее изменению (добавление новых элементов, замена существующих элементов, удаление существующих элементов, изменение порядка элементов), приводят к возникновению события onChange.

Syntax¶

Collection.onChange(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что в коллекции произошли какие-то изменения. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.action` содержит тип действия (`'add'`, `'replace'`, `'remove'`, `'move'` или `'reset'`). Значение остальных возможных свойств (`argument.oldItems`, `argument.newItems`, `argument.oldStartingIndex` и `argument.newStartingIndex`) интерпретируются в зависимости от типа действия (см. описание обработчиков соответствующих событий).

Examples¶

var collection = new Collection();

collection.onChange(function(context, argument) {
  alert('Collection is changed!');
});

collection.add('A');
collection.remove('A');

Collection.onMove¶

Устанавливает обработчик события о том, что произошло перемещение элементов.

Description¶

Успешное выполнение метода move() приводит к возникновению события onMove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.onMove(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что произошло перемещение одного или нескольких элементов в коллекции. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.action` содержит тип действия и в данном случае равно `'move'` (сброс); свойства `argument.oldItems` и `argument.newItems` равны и содержат массив элементов, которые были перемещены; `argument.oldStartingIndex` - индекс, откуда были перемещены элементы; `argument.newStartingIndex` - индекс, куда были перемещены элементы.

Examples¶

var collection = new Collection([ 'A', 'B' ]);

collection.onReset(function(context, argument) {
  alert('Some items are moved!');
});

collection.move(1, 0); // [ 'B', 'A' ]

Collection.onRemove¶

Устанавливает обработчик события о том, что произошло удаление элементов.

Description¶

Успешное выполнение методов pop(), remove(), removeById(), removeAt(), removeAll(), removeRange(), removeEvery() и clear() приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.onRemove(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что произошло удаление одного или нескольких элементов из коллекции. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.action` содержит тип действия и в данном случае равно `'remove'` (удаление); `argument.oldItems` - массив элементов, которые были удалены; `argument.oldStartingIndex` - индекс, начиная с которого были удалены элементы (или `-1`, если элементы удалялись не подряд).

Examples¶

var collection = new Collection([ 'A' ]);

collection.onRemove(function(context, argument) {
  alert('Some items are removed!');
});

collection.remove('A');

Collection.onReplace¶

Устанавливает обработчик события о том, что произошла замена элементов.

Description¶

Успешное выполнение метода replace() приводит к возникновению события onReplace. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.onReplace(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что произошла замена одного или нескольких элементов в коллекции. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.action` содержит тип действия и в данном случае равно `'replace'` (замена); `argument.oldItems` - массив старых элементов, которые были заменены; `argument.newItems` - массив новых элементов, которыми были заменены старые элементы.

Examples¶

var collection = new Collection([ 'A' ]);

collection.onReplace(function(context, argument) {
  alert('Some items are replaced!');
});

collection.replace('A', 'B');

Collection.onReset¶

Устанавливает обработчик события о том, что произошли существенные изменения.

Description¶

Выполнение некоторых операций может существенно изменять коллекцию. К таким методам относятся reset(), set() и sort(). Успешное выполнение одного из этих методов приводит к возникновению события onReset. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.onReset(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что в коллекции произошли существенные изменения. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.action` содержит тип действия и в данном случае равно `'reset'` (сброс).

Examples¶

var collection = new Collection();

collection.onReset(function(context, argument) {
  alert('Collection is changed!');
});

collection.reset([ 'A', 'B', 'C' ]);

Collection.pop¶

Удаляет последний элемент из коллекции.

Description¶

Метод pop() удаляет последний элемент из коллекции и возвращает его в качестве результата работы. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.pop()

Returns¶

Возвращает последний элемент коллекции, который был удален.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
var item2 = collection.pop(); // 'C'
var item1 = collection.pop(); // 'B'
var item0 = collection.pop(); // 'A'

Collection.push¶

Добавляет элемент в конец коллекции.

Description¶

Метод push() добавляет указанный элемент в конец коллекции. Успешное выполнение данного метода приводит к возникновению события onAdd. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.push(newItem)

Parameters¶

Name	Type	Description
`newItem`	*	Элемент, который необходимо добавить в коллекцию.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection();
collection.push('A'); // [ 'A' ]
collection.push('B'); // [ 'A', 'B' ]
collection.push('C'); // [ 'A', 'B', 'C' ]

Collection.remove¶

Удаляет указанный элемент из коллекции.

Description¶

Метод remove() удаляет указанный элемент из коллекции. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.remove(item)

Parameters¶

Name	Type	Description
`item`	*	Элемент, который необходимо удалить из коллекции.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
collection.remove('B'); // [ 'A', 'C' ]
collection.remove('A'); // [ 'C' ]
collection.remove('C'); // [ ]

Collection.removeAll¶

Удаляет указанные элементы из коллекции.

Description¶

Метод removeAll() удаляет указанные элементы из коллекции. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.removeAll(items)

Parameters¶

Name	Type	Description
`items`	`Array`	Массив элементов, которые необходимо удалить из коллекции.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C', 'D' ]);
collection.removeAll([ 'A', 'C' ]); // [ 'B', 'D' ]
collection.removeAll([ 'B', 'D' ]); // [ ]

Collection.removeAt¶

Удаляет элемент с указанным индексом из коллекции.

Description¶

Метод removeAt() удаляет элемент с указанным индексом из коллекции. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.removeAt(index)

Parameters¶

Name	Type	Description
`index`	`Integer`	Индекс элемента, который необходимо удалить из коллекции.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
collection.removeAt(1); // [ 'A', 'C' ]
collection.removeAt(0); // [ 'C' ]
collection.removeAt(0); // [ ]

Collection.removeById¶

Удаляет элемент с указанным идентификатором из коллекции.

Description¶

Метод removeById() удаляет элемент с указанным идентификатором из коллекции. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.removeById(id)

Parameters¶

Name	Description
id	Идентификатор элемента, который необходимо удалить из коллекции.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([
  { key: 1, value: 'A' },
  { key: 2, value: 'B' },
  { key: 3, value: 'C' }
], 'key');

collection.removeById(2);
collection.removeById(1);
collection.removeById(3);

Collection.removeEvery¶

Удаляет все элементы из коллекции, удовлетворяющие указанному условию.

Description¶

Метод removeEvery() удаляет все элементы из коллекции, удовлетворяющие указанному условию. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.removeEvery(predicate, thisArg)

Parameters¶

Name	Type	Description
`predicate`*	`Function`	Предикат, определяющий условие удаление элемента. Предикат принимает три параметра: ● `item` - проверяемый элемент коллекции, ● `index` - индекс проверяемого элемента коллекции, ● `collection` - обрабатываемая коллекция. Предикат возвращает `true`, если проверяемый элемент удовлетворяет условию, иначе - `false`.
`thisArg`		Объект, используемый как контекст исполнения `this` предиката `predicate`.

* Обязательный аргумент.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 1, 10, 2, 20, 3, 30 ]);

collection.removeEvery(function(item, index, collection) {
  return item >= 10;
}); // [ 1, 2, 3 ]

Collection.removeRange¶

Удаляет диапазон элементов из коллекции.

Description¶

Метод removeRange() удаляет диапазон элементов из коллекции. Успешное выполнение данного метода приводит к возникновению события onRemove. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.removeRange(fromIndex, count)

Parameters¶

Name	Type	Description
`fromIndex`*	`Integer`	Индекс начала диапазона элементов, которые необходимо удалить из коллекции.
`count`	`Integer`	Количество удаляемых элементов. Если количество элементов не определено, из коллекции будут удалены все элементы, начиная с позиции, указанной в параметре `fromIndex`.

* Обязательный аргумент.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C', 'D' ]);
collection.removeRange(1, 2); // [ 'A', 'D' ]
collection.removeRange(0);    // [ ]

Collection.replace¶

Заменяет элемент коллекции на указанный.

Description¶

Метод replace() заменяет элемент коллекции на указанный. При этом новый элемент помещается в ту же позицию, в которой находился существующий элемент. Успешное выполнение данного метода приводит к возникновению события onReplace. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.replace(oldItem, newItem)

Parameters¶

Name	Type	Description
`oldItem`	*	Существующий элемент коллекции, который нужно заменить.
`newItem`	*	Новый элемент коллекции, которым нужно заменить существующий.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
collection.replace('C', 'D'); // [ 'A', 'B', 'D' ]

Collection.reset¶

Устанавливает список элементов коллекции.

Description¶

Метод reset() заменяет элементы коллекции новым набором элементов. Успешное выполнение данного метода приводит к возникновению события onReset. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.reset(newItems)

Parameters¶

Name	Type	Description
`newItems`	`Array`	Массив новых элементов коллекции.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection();
collection.reset([ 'A', 'B' ]); // [ 'A', 'B' ]
collection.reset([ 'C', 'D' ]); // [ 'C', 'D' ]

Collection.set¶

Обновляет список элементов коллекции.

Description¶

Метод set() осуществляет интеллектуальное обновление списка элементов коллекции на основе заданного массива. Элементы, которые не содержатся в коллекции, но не содержатся в заданном массиве, будут добавлены. Элементы, которые содержатся и в коллекции и в заданном массиве, будут заменены на соответствующие элементы из массива. Элементы, которые содержатся в коллекции, но не содержатся в заданном массиве, будут удалены.

Успешное выполнение данного метода приводит к возникновению события onReset. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.set(newItems)

Parameters¶

Name	Type	Description
`newItems`	`Array`	Массив новых элементов коллекции.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([
  { key: 1, value: 'Apple' },
  { key: 2, value: 'Banana' },
  { key: 3, value: 'Pineapple' },
], 'key');

collection.forEach(function(item) {
  console.log(item.value);
});

// Output:
// Apple
// Banana
// Pineapple

collection.set([
  { key: 1, value: 'Apple' },
  { key: 2, value: 'Melon' }
]);

collection.forEach(function(item) {
  console.log(item.value);
});

// Output:
// Apple
// Melon

Collection.setProperty¶

Устанавливает значение атрибута для заданного элемента коллекции. Установка значений атрибута не изменяет сам элемент коллекции.

Syntax¶

collection.setProperty(index, propertyName, propertyValue);

Parameters¶

Name	Type	Description
`index`	`Integer`	Порядковый индекс элемента коллекции
`propertyName`	`String`	Имя атрибута
`value`	*	Значение атрибута

Returns¶

Нет

Examples¶

collection.setProperty(0, 'originalIndex', 0);
var index = collection.getProperty(0, 'originalIndex');

Collection.size¶

Возвращает количество элементов в коллекции.

Syntax¶

Collection.size()

Returns¶

Количество элементов в коллекции.

Examples¶

var collection = new Collection(); // Collection.size() === 0
collection.add('A'); // Collection.size() === 1
collection.add('B'); // Collection.size() === 2
collection.add('C'); // Collection.size() === 3

Collection.some¶

Проверяет, что некоторый элемент коллекции удовлетворяет указанному условию.

Syntax¶

Collection.some(predicate, thisArg)

Parameters¶

Name	Type	Description
`predicate`*	`Function`	Предикат, определяющий условие поиска элемента. Предикат принимает три параметра: ● `item` - проверяемый элемент коллекции, ● `index` - индекс проверяемого элемента коллекции, ● `collection` - обрабатываемая коллекция. Предикат возвращает `true`, если проверяемый элемент удовлетворяет условию, иначе - `false`.
`thisArg`	*	Объект, используемый как контекст исполнения `this` предиката `predicate`.

* Обязательный аргумент.

Returns¶

Возвращает true, если есть элемент, удовлетворяющий указанному условию, иначе - false.

Examples¶

var isBigEnough = isBiggerThan10(item, index, collection) {
  return element > 10;
};

new Collection([ 2, 5, 8, 1, 4 ]).some(isBiggerThan10);  // false
new Collection([ 12, 5, 8, 1, 4 ]).some(isBiggerThan10); // true

Collection.sort¶

Сортирует список элементов коллекции.

Description¶

Метод sort() сортирует список элементов коллекции. Успешное выполнение данного метода приводит к возникновению события onReset. Вместе с этим событием также генерируется событие onChange, которое информирует о наличии любых изменений. Аргументы обеих событий в данном случае будут идентичны.

Syntax¶

Collection.sort(comparator)

Parameters¶

Name	Type	Description
`comparator`	`Function`	Функция сравнения элементов коллекции. Если не указана, то используется функция Collection.comparator, которая была указана при создании коллекции.

Returns¶

Возвращает true, если коллекция была изменена, иначе - false.

Examples¶

var collection = new Collection([ 3, 30, 2, 20, 1, 10 ]);
collection.sort(function(a, b) { return a - b }); // [ 1, 2, 3, 10, 20, 30 ]

Collection.take¶

Возвращает указанный диапазон элементов коллекции.

Syntax¶

Collection.take(fromIndex, count)

Parameters¶

Name	Type	Description
`fromIndex`*	`Integer`	Индекс начала диапазона элементов, которые необходимо выбрать из коллекции.
`count`	`Integer`	Количество выбираемых элементов. Если количество элементов не определено, из коллекции будут выбраны все элементы, начиная с позиции, указанной в параметре `fromIndex`.

* Обязательный аргумент.

Returns¶

Массив элементов коллекции из указанного диапазона.

Examples¶

var collection = new Collection([ 'A', 'B', 'C', 'D' ]);
collection.take(1, 2); // [ 'B', 'C' ]
collection.take(2);    // [ 'C', 'D' ]

Collection.toArray¶

Возвращает массив всех элементов коллекции.

Syntax¶

Collection.toArray()

Returns¶

Массив, содержащий все элементы коллекции в том же порядке, в котором они были представлены на момент вызова данной функции. Массив хранит ссылки на элементы соответствующей коллекции, но его модификация не меняет внутреннее состояние коллекции также, как и модификация коллекции не меняет состав массива.

Examples¶

var collection = new Collection([ 'A', 'B', 'C' ]);
var array = collection.toArray();

collection.push('X');
array.push('Y');

collection.forEach(function(item) {
  console.log(item);
});

// Output:
// A
// B
// C
// X

array.forEach(function(item) {
  console.log(item);
});

// Output:
// A
// B
// C
// Y

Comparator¶

Функция сравнения элементов коллекции.

Syntax¶

function(a, b)

Parameters¶

Name	Type	Description
`a`	*	Элемент коллекции.
`b`	*	Элемент коллекции.

Returns¶

Возвращает целое число:

-1 (или число меньше 0), если a меньше b;
1 (или число больше 0), если a больше b;
0, если a равно b.

Examples¶

Общая форма функции сравнения:

function comparator(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }

  if (a is greater than b by the ordering criterion) {
    return 1;
  }

  // a must be equal to b
  return 0;
}

Пример функции сравнения целых чисел:

function comparator(a, b) {
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
}

Пример использования при сортировке:

var items = [
  { key: 3, value: 'C' },
  { key: 2, value: 'B' },
  { key: 1, value: 'A' }
];

var comparator = function(a, b) {
  if (a.key < b.key) return -1;
  if (a.key > b.key) return 1;
  return 0;
};

var collection = new Collection(items, 'key', comparator);

collection.forEach(function(item) {
  console.log(item.value);
});

// Output:
// C
// B
// A

collection.sort();

collection.forEach(function(item) {
  console.log(item.value);
});

// Output:
// A
// B
// C

Config¶

Параметры конфигурации приложения.

Объект доступен через InfinniUI.config.

Properties¶

Name	Type	Default	Description
`serverUrl`	`String`		Адрес сервера.
`configName`	`String`		Название конфигурации.
`lang`	`String`	`en-US`	Текущая локаль.
`homePage`	`String`		Путь для получения домашней страницы.
`cacheMetadata`	`Boolean`	false	Кэширование метаданных.
`enableAutoHeightService`	`Boolean`	false	Флаг, определяющий запуск сервиса, регулирующего высоту элементов. Если сервис не запущен, ScrollPanel не прокручивается.
`historyAPI`	`Object`		Параметры History API для запуска роутинга. Принимает такие же параметры как и Backbone.history.start()
`routes`	`Array`		Массив объектов конфигурации роутинга приложения.

Example¶

window.InfinniUI.config.serverUrl = 'http://localhost:9900';
window.InfinniUI.config.configName = 'Хабинет';
window.InfinniUI.config.lang = 'en-US';
window.InfinniUI.config.homePage = 'content/metadata/Views/common/homePage.json';
window.InfinniUI.config.cacheMetadata = true;
window.InfinniUI.config.enableAutoHeightService = true;
window.InfinniUI.config.historyAPI = {
  pushState: true
};
window.InfinniUI.config.routes = [
  {
    Name: "HomePageRoute",
    Path: "/",
    Action: "{ routeCallback(context, args) }"
  },
  {
    Name: "UserPageRoute",
    Path: "/user/<% userId %>",
    Action: "{ routeCallback2(context, args) }"
  }
];

ViewContext¶

View context is a program object which stores its view state and provides API to access to view elements. Any applied script or event processor invocation accompanied by view context transmittance. Context is created for each view instance and its lifetime is defined by corresponding life time view instance.

Properties¶

Name	Description
view	Returns View context
global	Returns global application context
messageBus	Returns Message Bus View
scripts	Returns associative list of Script View
parameters	Returns associative list of Parameters View
dataSources	Returns associative list of Data Sources View
controls	Returns associative list of Visual View Elements

ViewContext.controls¶

Возвращает ассоциативный список визуальных элементов представления.

Syntax¶

ViewContext.controls

Examples¶

var control1 = ViewContext.controls.button1;
var control2 = ViewContext.controls['button1']; // control2 === control1

ViewContext.dataSources¶

Возвращает ассоциативный список источников данных представления.

Syntax¶

ViewContext.dataSources

Examples¶

var dataSource1 = ViewContext.dataSources.myDataSource;
var dataSource2 = ViewContext.dataSources['myDataSource']; // dataSource2 === dataSource1

ViewContext.global¶

Возвращает глобальный контекст приложения.

Syntax¶

ViewContext.global

Examples¶

var globalContext = ViewContext.global;

ViewContext.messageBus¶

Возвращает шину сообщений представления.

Syntax¶

ViewContext.messageBus

Examples¶

var messageBus = ViewContext.messageBus;

ViewContext.parameters¶

Возвращает ассоциативный список параметров представления.

Syntax¶

ViewContext.parameters

Examples¶

var parameter1 = ViewContext.parameters.myParameter;
var parameter2 = ViewContext.parameters['myParameter']; // parameter2 === parameter1

ViewContext.scripts¶

Возвращает ассоциативный список скриптов представления.

Syntax¶

ViewContext.scripts

Examples¶

var function1 = ViewContext.scripts.myFunction;
var function2 = ViewContext.scripts['myFunction']; // function2 === function1

ViewContext.view¶

Возвращает представление контекста.

Syntax¶

ViewContext.view

Examples¶

var view = ViewContext.view;

DataBinding¶

Data binding is a linking between elements and sources.

Description¶

Data binding allows synchronize property values of two different objects. One is conditionally called element while another is source. Elements are often representations of visual view while sources are - data sources. Typically that doesn’t matter which element will be the element and wich be the source because both represent the same interface. Objects that can bind data are all types of visual elements, all types of Data Sources and View Parameters.

Any data binding can be representd as non-visual programm object which can define the data conversion rules for both element and source, as well as desirable direction of data streams in binding mode:

Bi-directional exchange between element and source - if source has got updates then element gets updated otherwise if element has got updates then element gets updated accordingly.
To source updates - if source has got updates then no change to element is done, otherwise if element has got updates then source gets updated.
To element update - if source has got updates element gets updated otherwise source gets no update.

Data binding thus conceals complexity of synchronizing between elements and sources and simplifies the code to great extent and makes behaviour of all elements controllable.

Syntax¶

new DataBinding()

Parameters¶

No

Returns¶

DataBinding

Usage¶

//js-demo
var element = new InfinniUI.TextBox();
var $element = element.render();
element.setLabelText("Element");

var source = new InfinniUI.TextBox();
var $source = source.render();
source.setLabelText("Source");

var binding = new InfinniUI.DataBinding();
binding.setMode('ToSource');
binding.bindSource(source, 'value');
binding.bindElement(element, 'value');

$elementForExample.append($element);
$elementForExample.append($source);

Methods¶

Name	Description
getMode	Returns direction of data stream in binding mode
setMode	Sets direction of data stream in binding mode
getConverter	Returns data converter between element and source
setConverter	Sets data converter between element and source
bindSource	Sets binding to source
getSource	Returns data source binding
getSourceProperty	Returns path to data source property binding
bindElement	Sets binding to element
getElement	Returns element binding
getElementProperty	returns path to element binding property
getDefaultValue	Returns element defaul value
setDefaultValue	Sets default value for element

Events¶

No

BindingConverter¶

Преобразователь данных между элементом и источником.

Description¶

Встречаются ситуации, когда формат представления данных в элементе и источнике данных отличается. Наряду с этим остается необходимость в привязке данных (синхронизации данных между элементом и источником). Для решения этой проблемы используется преобразователь данных - объект с двумя методами конвертации данных.

Properties¶

Name	Type	Description
`toSource`	Функция	Функция конвертации, осуществляющая преобразование данных элемента в формат данных источника. Функция вызывается при изменении данных в элементе, если направление обмена данными в привязке установлено в twoWay или toSource. В параметре `args` передается информация, необходимая для осуществления конвертации. Свойство `args.value` содержит данные элемента для конвертации. Возвращаемое значение функции интерпретируется, как результат конвертации.
`toElement`	Функция	Функция конвертации, осуществляющая преобразование данных источника в формат данных элемента. Функция вызывается при изменении данных в источнике, если направление обмена данными в привязке установлено в twoWay или toElement. В параметре `args` передается информация, необходимая для осуществления конвертации. Свойство `args.value` содержит данные источника для конвертации. Возвращаемое значение функции интерпретируется, как результат конвертации.

Examples¶

{
    toSource: function(context, args) {
        return parseInt(args.value); // string to integer
    },
    toElement: function(context, args) {
        return args.value.toString(); // integer to string
    }
}

BindingConverter.metadata¶

Метаданные типа BindingConverter.

Properties¶

Name	Type	Description
ToSource	`String`	Функция конвертации, осуществляющая преобразование данных элемента в формат данных источника
ToElement	`String`	Функция конвертации, осуществляющая преобразование данных источника в формат данных элемента

Examples¶

В качестве функции конвертации может быть указано как название прикладного скрипта,

{
    "Scripts": [
        {
          "Name": "ElementToSourceConverter",
          "Body": "..."
        },
        {
          "Name": "SourceToElementConverter",
          "Body": "..."
        }
    ],
    ...
    "Converter": {
      "ToSource": "ElementToSourceConverter",
      "ToElement": "SourceToElementConverter"
    }
}

так и тело функции.

{
    "Converter": {
      "ToSource": "{ return (args.value == '-' ? false : true); }",
      "ToElement": "{ return args.value ? '+' : '-'; }"
    }
}

BindingMode¶

Направление потока данных в привязке.

Syntax¶

InfinniUI.BindingModes = {
  twoWay: 'TwoWay',
  toSource: 'ToSource',
  toElement: 'ToElement'
}

Members¶

Name	Description
`twoWay`	Двунаправленный обмен между элементом и источником (two way) - если в источнике произошли изменения, элемент обновляется, и, наоборот, если изменения произошли в элементе, источник обновляется
`toSource`	Только обновление источника (to source) - если в источнике произошли изменения, элемент не обновляется, но, если изменения произошли в элементе, источник обновляется.
`toElement`	Только обновление элемента (to element) - если в источнике произошли изменения, элемент обновляется, но, если изменения произошли в элементе, источник не обновляется.

DataBinding.bindElement()¶

Устанавливает привязку к элементу.

Description¶

Осуществляет подписку на событие изменения указанного свойства элемента привязки - onPropertyChanged. В обработчике этого события производится оповещение источника данных привязки, ранее установленного в методе bindSource(), о произошедших в источнике изменениях. При этом проверяется, что направление обмена данными в привязке установлено в twoWay или toSource. Если данное условие выполняется, у источника вызывается метод setProperty(), которому передается наименование целевого свойства источника и новое значение этого свойства. Если в привязке был указан преобразователь данных для источника, в качестве нового значения будет передан результат конвертации значения элемента в формат данных источника.

Syntax¶

dataBinding.bindElement(element, property)

Parameters¶

Name	Type	Description
element	визуальный элемент / источник данных / параметр представления	Элемент привязки
property	`String`	Путь к свойству элемента привязки

Returns¶

Метод ничего не возвращает.

Examples¶

dataBinding.bindElement(context.controls['TextBox1'], 'Value');

DataBinding.bindSource()¶

Устанавливает привязку к источнику.

Description¶

Осуществляет подписку на событие изменения указанного свойства источника данных привязки - onPropertyChanged. В обработчике этого события производится оповещение элемента, ранее установленного в методе bindElement(), о произошедших в источнике изменениях. При этом проверяется, что направление обмена данными в привязке установлено в twoWay или toElement. Если данное условие выполняется, у элемента вызывается метод setProperty(), которому передается наименование целевого свойства элемента и новое значение этого свойства. Если в привязке был указан преобразователь данных для элемента, в качестве нового значения будет передан результат конвертации значения источника в формат данных элемента.

Syntax¶

dataBinding.bindSource(source, property)

Parameters¶

Name	Type	Description
source	визуальный элемент / источник данных / параметр представления	Источник данных привязки
property	`String`	Путь к свойству источника данных привязки

Returns¶

Метод ничего не возвращает.

Examples¶

dataBinding.bindSource(context.dataSources['DataSource1'], '$.FirstName');

DataBinding.getConverter()¶

Возвращает преобразователь данных между элементом и источником.

Syntax¶

dataBinding.getConverter()

Parameters¶

Нет

Returns¶

Examples¶

var converter = dataBinding.getConverter();

DataBinding.getDefaultValue()¶

Возвращает значение по умолчанию для элемента.

Syntax¶

dataBinding.getDefaultValue()

Parameters¶

Нет

Returns¶

Значение по умолчанию для элемента.

Examples¶

var defaultValue = dataBinding.getDefaultValue();

DataBinding.getElement()¶

Возвращает элемент привязки.

Syntax¶

dataBinding.getElement()

Parameters¶

Нет

Returns¶

Элемент привязки, установленный вызовом метода bindElement().

Examples¶

dataBinding.bindElement(context.controls['TextBox1'], 'Value');
var element = dataBinding.getElement(); // element === context.controls['TextBox1']

DataBinding.getElementProperty()¶

Возвращает путь к свойству элемента привязки.

Syntax¶

dataBinding.getElementProperty()

Parameters¶

Нет

Returns¶

Путь к свойству элемента привязки, установленный вызовом метода bindElement().

Examples¶

dataBinding.bindElement(context.controls['TextBox1'], 'Value');
var elementProperty = dataBinding.getElementProperty(); // elementProperty === 'Value'

DataBinding.getMode()¶

Возвращает направление обмена данными в привязке.

Syntax¶

dataBinding.getMode()

Parameters¶

Нет

Returns¶

Направление обмена данными в привязке.

Examples¶

var bindingMode = dataBinding.getMode();

DataBinding.getSource()¶

Возвращает источник данных привязки.

Syntax¶

dataBinding.getSource()

Parameters¶

Нет

Returns¶

Источник данных привязки, установленный вызовом метода bindSource().

Examples¶

dataBinding.bindSource(context.dataSources['DataSource1'], '$.FirstName');
var source = dataBinding.getSource(); // source === context.dataSources['DataSource1']

DataBinding.getSourceProperty()¶

Возвращает путь к свойству источника данных привязки.

Syntax¶

dataBinding.getSourceProperty()

Parameters¶

Нет

Returns¶

Путь к свойству источника данных привязки, установленный вызовом метода bindSource().

Examples¶

dataBinding.bindSource(context.dataSources['DataSource1'], '$.FirstName');
var sourceProperty = dataBinding.getSourceProperty(); // sourceProperty === '$.FirstName'

DataBinding.metadata¶

Метаданные типа DataBinding.

Properties¶

Name	Type	Default	Description
Source*	`String`	–	Наименование источника данных привязки
Property	`String`	–	Путь к свойству источника данных привязки
Mode	BindingMode	`TwoWay`	Направление потока данных в привязке
Converter	BindingConverter	–	Преобразователь данных между элементом и источником

* Обязательное свойство.

Examples¶

Метаданные поля ввода, привязанного к параметру Parameter_1:

{
    "TextBox": {
      "Value": {
        "Source": "Parameter_1"
      }
    }
}

Пусть теперь поле ввода привязано к полю Name источника данных DataSource_1. И пусть при изменении источника, необходимо обновлять поле ввода, но изменение значения поля ввода не должно влиять на значение в источнике. Тогда метаданные выглядят так

{
    "TextBox": {
      "Value": {
        "Source": "DataSource_1",
        "Property": "Name",
        "Mode": "ToElement"
      }
    }
}

Пример, когда данные необходимо конвертировать:

{
    "TextBox": {
      "Value": {
        "Source": "DataSource_1",
        "Property": "Name",
        "Converter": {
            "ToElement": "{ return args.value == '-' ? 'minus': 'plus'; }",
            "ToSource": "ConvertTextBoxToDataSource_1" //выполнится скрипт из контекста родительской view
        }
      }
    }
}

DataBinding.setConverter()¶

Устанавливает преобразователь данных между элементом и источником.

Syntax¶

dataBinding.setConverter(value)

Parameters¶

Name	Type	Description
value	BindingConverter	Преобразователь данных между элементом и источником

Returns¶

Метод ничего не возвращает.

Examples¶

dataBinding.setConverter({
  toSource: function(context, args) {
    return parseInt(args.value); // string to integer
  },
  toElement: function(context, args) {
    return args.value.toString(); // integer to string
  }
});

DataBinding.setDefaultValue()¶

Устанавливает значение по умолчанию для элемента. Элемент принимает это значение, если направление обмена данными в привязке установлено в twoWay или toElement, до тех пор, пока источник данных не загрузится и не установит значение для элемента.

Syntax¶

dataBinding.setDefaultValue(value)

Parameters¶

Name	Description
value	Значение по умолчанию для элемента

Returns¶

Метод ничего не возвращает.

Examples¶

dataBinding.setDefaultValue("Ivanov");

DataBinding.setMode()¶

Устанавливает направление обмена данными в привязке.

Syntax¶

dataBinding.setMode(value)

Parameters¶

Name	Type	Description
value	BindingMode	Направление обмена данными в привязке

Returns¶

Метод ничего не возвращает.

Examples¶

dataBinding.setMode(InfinniUI.BindingModes.twoWay);

DataBinding.metadata¶

Метаданные типа DataBinding.

Properties¶

Name	Type	Default	Description
Source*	`String`	–	Наименование источника данных привязки
Property	`String`	–	Путь к свойству источника данных привязки
Mode	BindingMode	`TwoWay`	Направление потока данных в привязке
Converter	BindingConverter	–	Преобразователь данных между элементом и источником

* Обязательное свойство.

Examples¶

Метаданные поля ввода, привязанного к параметру Parameter_1:

{
    "TextBox": {
      "Value": {
        "Source": "Parameter_1"
      }
    }
}

Пусть теперь поле ввода привязано к полю Name источника данных DataSource_1. И пусть при изменении источника, необходимо обновлять поле ввода, но изменение значения поля ввода не должно влиять на значение в источнике. Тогда метаданные выглядят так

{
    "TextBox": {
      "Value": {
        "Source": "DataSource_1",
        "Property": "Name",
        "Mode": "ToElement"
      }
    }
}

Пример, когда данные необходимо конвертировать:

{
    "TextBox": {
      "Value": {
        "Source": "DataSource_1",
        "Property": "Name",
        "Converter": {
            "ToElement": "{ return args.value == '-' ? 'minus': 'plus'; }",
            "ToSource": "ConvertTextBoxToDataSource_1" //выполнится скрипт из контекста родительской view
        }
      }
    }
}

DataProvider¶

Method that provides data

Methods¶

Name	Description
getItems	Requests list of elements
createItem	Creates asynchronously new element
createLocalItem	Creates synchronously new element
saveItem	Saves element
deleteItem	Deletes element
createIdFilter	Returns identificator of element filter

Events¶

No

DataProvider.createIdFilter()¶

Возвращает фильтр по идентификатору элемента.

Syntax¶

DataProvider.createIdFilter(itemId)

Parameters¶

Name	Description
itemId	Идентификатор элемента

Returns¶

Фильтр, соответсвующий идентификатору itemId.

Examples¶

var idFilter = dataProvider.createIdFilter(itemId);

DataProvider.createItem()¶

Создает новый элемент.

Description¶

Для создания нового элемента в DataProvider используются 2 метода:: createLocalItem и createItem.
Существенное отличие методов в том, что: createLocalItem создает новый элемент локально, в то время как при вызове createItem создание происходит на сервере. Для сохранения нового элемента используйте метод saveItem.

Syntax¶

DataProvider.createItem(callback, idProperty)

Parameters¶

Name	Description
callback	Обработчик события о том, что элемент создан. Первым параметром получает новый элемент
idProperty	Наименование свойства, хранящего идентификатор элемента

Returns¶

Метод ничего не возвращает.

Examples¶

BaseDataSource.createItem(
  function(newItem) { alert('Id:' + newItem['_id']); },
  "_id"
);

DataProvider.createLocalItem()¶

Создает новый элемент.

Description¶

Для создания нового элемента в DataProvider используются 2 метода:: createLocalItem и createItem.
Существенное отличие методов в том, что createLocalItem создает: новый элемент локально, в то время как при вызове createItem создание происходит на сервере. Для сохранения нового элемента используйте метод saveItem.

Syntax¶

DataProvider.createLocalItem(idProperty)

Parameters¶

Name	Description
idProperty	Наименование свойства, хранящего идентификатор элемента

Returns¶

Новый элемент.

Examples¶

var newItem = DataProvider.createLocalItem("_id");

DataProvider.deleteItem()¶

Удаляет элемент.

Syntax¶

DataProvider.deleteItem(item, success, error)

Parameters¶

Name	Description
item*	Элемент источника данных
success	Обработчик события о том, что элемент удален
error	Обработчик события о том, что при удалении элемента произошла ошибка

* Обязательный аргумент.

Returns¶

Метод ничего не возвращает.

Examples¶

DataProvider.getItems(
    function (items) {
        DataProvider.deleteItem(items[0]);
    });

DataProvider.getItems()¶

Запрашивает список элементов.

Syntax¶

DataProvider.getItems(success, error)

Parameters¶

Name	Description
success	Обработчик события о том, что список элементов получен. Первым параметром получает список элементов
error	Обработчик события о том, что получить список элементов не удалось

Returns¶

Метод ничего не возвращает.

Examples¶

DataProvider.getItems(
    function (data) {
        console.log(data);
    },
    function () {
        console.log('error');
    });

DataProvider.saveItem()¶

Сохраняет элемент.

Syntax¶

DataProvider.saveItem(item, success, error)

Parameters¶

Name	Description
item*	Элемент источника данных
success	Обработчик события о том, что элемент сохранен
error	Обработчик события о том, что при сохранении элемента произошла ошибка

* Обязательный аргумент.

Returns¶

Метод ничего не возвращает.

Examples¶

var item = DataProvider.createLocalItem();
DataProvider.saveItem(item);

DataSources¶

Web interface is always linked with certain type of data. To work with data InfinniUI uses Data Sources. Each Data Source implements base API, but each type of Data Source also has particular functions.

Data source provides the following closely related functionality:

Incapsulates Data Provider
Incapsulates Tracking Changes
Creates, reads, updates and deletes data (CRUD)
Page navigation Страничная навигация по данным (Paging)
Provides Data Filtering
Provides Data Validation

At this moment a few data sources can be outlined that can work out the most of visual data representaion tasks.

BaseDataSource - base Data Source type.
ObjectDataSource - Data Source type for any type of data array.
LocalStorageDataSource - Тип источника данных, который хранит массив данных в локальном хранилище браузера.
RestDataSource - Data Source for any http-like data services.
DocumentDataSource - InfinniPlatform document Data Source.

BaseDataSource¶

Функция-конструктор, определяющий базовый тип источников данных.

Description¶

Источники данных, представленные в InfinniUI, являются потомками BaseDataSource. В BaseDataSource реализованы базовые API, которые предоставлят все источники данных InfinniUI.

Syntax¶

new BaseDataSource(parameters)

Parameters¶

Name	Type	Description
parameters	`Object`	Объект с параметрами представления. Один из параметров обязательный: parameters.view - родительское представление источника данных

Properties¶

Name	Type	Description
name	`String`	Содержит наименование источника данных
onProviderErrorHandler	Script	Содержит обработчик события о том, что поставщик данных вернул ошибку

Specific Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty. Обратите внимание, что для работы с данными свойствами необходимо указывать точку в названии.

Name	Description
items	Список элементов источника данных
selectedItem	Выделенный элемент
filter	Правило фильтрации документов
filterParams	Параметры фильтра
search	Строка полнотекстового поиска

Methods¶

Name	Description
getView	Возвращает родительское представление
getContext	Возвращает контекст родительского представления
getName	Возвращает наименование источника данных
setName	Устанавливает наименование источника данных
suspendUpdate	Запрещает обновление списка элементов
resumeUpdate	Разрешает обновление списка элементов
isUpdateSuspended	Возвращает значение, указывающее, запрещено ли обновление списка элементов
updateItems	Обновляет список элементов источника данных
tryInitData	Пытается обновить список элементов источника. Делает это только в случае, если до этого источник не был прогружен данными
isDataReady	Возвращает значение, указывающее, загрузились ли данные в источник или нет
getItems	Возвращает список элементов источника данных
createItem	Создает новый элемент в источнике данных
saveItem	Сохраняет элемент в источнике данных
deleteItem	Удаляет элемент из источника данных
getSelectedItem	Возвращает выделенный элемент
setSelectedItem	Устанавливает выделенный элемент
getProperty	Возвращает значение указанного свойства источника
setProperty	Устанавливает значение указанного свойства источника
isLazy	Возвращает значение, является ли прогрузка данных в источнике “ленивой” или нет
setIsLazy	Устанавливает значение, является ли прогрузка данных в источнике “ленивой” или нет
isModified	Проверяет, является ли элемент несохраненным
isModifiedItems	Проверяет, есть ли несохраненные элементы
getFilter	Возвращает правило фильтрации документов
setFilter	Устанавливает правило фильтрации документов
getFilterParams	Возвращает параметры фильтра
setFilterParams	Устанавливает параметры фильтра
getSearch	Возвращает строку полнотекстового поиска
setSearch	Устанавливает строку полнотекстового поиска
getIdProperty	Возвращает наименование свойства с идентификатором элемента (по умолчанию Id)
setIdProperty	Устанавливает наименование свойства с идентификатором элемента
idOfItem	Возвращает значение идентификатора по переданному элементу item
getFillCreatedItem	Возвращает, нужно ли предзаполнение новых элементов на сервере
setFillCreatedItem	Устанавливает, нужно ли предзаполнение новых элементов на сервере
getErrorValidator	Возвращает функцию проверки элемента на ошибки
setErrorValidator	Устанавливает функцию проверки элемента на ошибки
getValidationResult	Возвращает результат проверки на ошибки
initDataProvider	Определяет обязательное свойство dataProvider. Наследники BaseDataSource должны переопределять этот метод!
beforeDeleteItem	Вы можете переопределить этот метод в наследнике BaseDataSource, если есть необходимость выполнять некие действия перед удалением элемента

Events¶

Name	Description
onSelectedItemChanged	станавливает обработчик события о том, что выделенный элемент изменился
onPropertyChanged	Устанавливает обработчик события о том, что одно из свойств источника изменилось
onItemCreated	Устанавливает обработчик события о том, что элемент создан
onItemSaved	Устанавливает обработчик события о том, что элемент сохранен
onItemDeleted	Устанавливает обработчик события о том, что элемент удален
onItemsUpdated	Устанавливает обработчик события о том, что список элементов обновлен
onErrorValidator	Устанавливает обработчик события о том, что произошла ошибка валидации
onProviderError	Устанавливает обработчик события о том, что поставщик данных вернул ошибку

BaseDataSource.metadata¶

Метаданные базового типа источников данных представления.

Properties¶

Name	Type	Default	Description
Name	`String`	–	Наименование источника данных
SuspendUpdate	`String`	–	Причина запрета на обновление списка элементов. Для снятия запрета необходимо воспользоваться методом resumeUpdate().
Filter	`String`¹	–	Правило фильтрации документов
FilterParams	`Object`	–	Объект со значениями параметров. Параметр может быть задан как DataBinding.
Search	`String`	–	Строка полнотекстового поиска
IdProperty	`String`	‘_id’	Свойство с идентификатором элемента
FillCreatedItem	`Boolean`	true	Логическое значение, указывающее, нужно ли предзаполнение новых элементов на сервере
IsLazy	`Boolean`	true	Логическое значение, определяющее, будет ли прогрузка данных в источнике “ленивой” или нет
ResolvePriority	`Integer`	0	Приоритет прогрузки источника данных. Чем выше приоритет, тем раньше источник будет прогружен
ValidationErrors	Script	–	Функция проверки элемента на ошибки
CustomProperties	`Object`	–	Вспомогательные параметры. Могут пригодиться, например, для настройки взаимодействия DataNavigation и RestDataSource. Объект является ассоциативным массивом, в котором key - это название свойства, а value - значение.
OnErrorValidator	Script	–	Обработчик события о том, что проверка на ошибки завершена
OnSelectedItemChanged	Script	–	Обработчик события о том, что выделенный элемент изменился
OnPropertyChanged	Script	–	Обработчик события о том, что одно из свойств источника изменилось
OnItemDeleted	Script	–	Обработчик события о том, что элемент удален
OnItemsUpdated	Script	–	Обработчик события о том, что список элементов обновлен
OnProviderError	Script	–	Обработчик события о том, что поставщик данных вернул ошибку

¹ Шаблонизируемая величина. Заполняется значениями из FilterParams.

Exampes¶

Создать экземпляр BaseDataSource нельзя (это абстрактный класс), однако можно создать ObjectDataSource, который наследуется от BaseDataSource.

{
    "ObjectDataSource": {
        "Name": "DocumentTypes",
        "IdProperty": "guid",
        "IsLazy": false,
        "ValidationErrors": "{ return { IsValid: (args.Name != null), Items: [{Message: 'Name is required'}] }; }",
        "OnPropertyChanged": "{ alert('Property ' + args.property + ' is changed!'); }"
    }
}

Допустим возникла зависимость между источниками данных, и для корректной работы MainDataSource необходим загруженный TerminologyDataSource. Для решения этой проблемы достаточно указать ResolvePriority для TerminologyDataSource выше, чем для MainDataSource.

{
    "DataSources": [
        {
            "DocumentDataSource": {
                "Name": "MainDataSource",
                "ConfigId": "configuration",
                "DocumentId": "patients",
                "SuspendUpdate": "SomeReason",
                "Filter": "gt(Birthday,<%startDate%>)",
                "FilterParams": {
                    "startDate": "date('1985-01-01')"
                }
            }
        },
        {
            "DocumentDataSource": {
                "Name": "TerminologyDataSource",
                "ConfigId": "configuration",
                "DocumentId": "diseases",
                "Search": "Иванов Иван Иванович",
                "ResolvePriority": 1
            }
        }
    ]
}

Реализация фильтра.

{
  "DataSources": [
    {
      "ObjectDataSource": {
        "Name": "ObjectDataSource",
        "Items": [
          {"_id": 1, "Name": "Mobile small", "currency": 1100, "Display": "480x320"},
          {"_id": 2, "Name": "Mobile middle", "currency": 1200, "Display": "640x320"},
          {"_id": 3, "Name": "Mobile large", "currency": 1300, "Display": "771x375"},
          {"_id": 4, "Name": "Tablet", "currency": 1400, "Display": "960x480"},
          {"_id": 5, "Name": "Desktop small", "currency": 1500, "Display": "1024x768"},
          {"_id": 6, "Name": "Desktop middle", "currency": 1600, "Display": "1600x900"},
          {"_id": 7, "Name": "Desktop", "currency": 2000, "Display": "1920x1080"}
        ],
        "Filter": "and(contains(Name, <%filterName%>),contains(currency, <%filterPrice%>),contains(Display, <%filterDisplay%>))",
        "FilterParams": {
          "filterName": {
            "Source": "ObjectDataSource2",
            "Property": "$.FilterName"
          },
          "filterPrice": {
            "Source": "ObjectDataSource2",
            "Property": "$.FilterPrice"
          },
          "filterDisplay": {
            "Source": "ObjectDataSource2",
            "Property": "$.FilterDisplay"
          }
        }
      }
    },
    {
      "ObjectDataSource": {
        "Name": "ObjectDataSource2",
        "Items": [
          {"_id": 1, "FilterName": "", "FilterPrice": "", "FilterDisplay": ""}
        ]
      }
    }
  ]
}

Пример заморозки DataSource из метаданных

{
  "DataSources": [
    {
      "ObjectDataSource": {
        "Name": "ObjectDataSource",
        "SuspendUpdate": "SomeReason",
        "Items": []
      }
    }
  ]
}

Пример настройки RestDataSource для работы с DataNavigation

{
  "RestDataSource": {
    "Name": "MainDataSource",
    "CustomProperties": {
      "pageNumber": 0,
      "pageSize": 20
    },
    "GettingParams": {
      "Origin": "http://localhost:9900",
      "Method": "post",
      "Params": {
        "skip": {
          "Source": "MainDataSource",
          "Property": ".pageNumber",
          "Converter": {
            "ToElement": "{return args.source.getProperty('.pageSize') * args.value;}"
          },
          "DefaultValue": 0
        },
        "take": {
          "Source": "MainDataSource",
          "Property": ".pageSize",
          "DefaultValue": 20
        }
      },
      "Path": "/documents/PublicationInfo?skip=<%skip%>&take=<%take%>&count=true",
      "Data": {}
    },
    "UpdatingItemsConverter": "{args.source.setProperty('.totalCount', args.value.Result.Count); return args.value.Result.Items;}"
  }
}

DocumentDataSource¶

Источник данных представления для документов InfinniPlatform.

Description¶

Для работы с документами, хранящимися в InfinniPlatform, следует использовать источник данных DocumentDataSource. Для определения источника данных достаточно указать идентификатор документа, с которым будет осуществляться работа.

Extends¶

RestDataSource

Syntax¶

new DocumentDataSource(parameters)

Parameters¶

Name	Type	Description
parameters	`Object`	Объект с параметрами представления. Один из параметров обязательный: parameters.view - родительское представление источника данных

Properties¶

Нет

Specific Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty. Обратите внимание, что для работы с данными свойствами необходимо указывать точку в названии.

Name	Default	Description
documentId	–	Идентификатор документа
pageNumber	0	Номер страницы
pageSize	15	Размер страницы
select	–	Правило отображения документов
order	–	Правило сортировки документов
needTotalCount	false	Необходимость подсчета общего количества документов
totalCount ¹	–	Общее число документов ( заполняется, когда needTotalCount == true )
additionalResult ¹	–	Дополнительные результаты запроса на получение данных

¹ поле только для чтения

Изменение параметров filter, filterParams, pageSize, search, order приводит к обнулению pageNumber.

Methods¶

Name	Description
getDocumentId	Возвращает идентификатор документа
setDocumentId	Устанавливает идентификатор документа
setIdFilter	Устанавливает фильтр элементов по идентификатору
getPageNumber	Возвращает номер страницы
setPageNumber	Устанавливает номер страницы
getPageSize	Возвращает размер страницы
setPageSize	Устанавливает размер страницы
getSelect	Возвращает правило отображения документов
setSelect	Устанавливает правило отображения документов
getOrder	Возвращает правило сортировки документов
setOrder	Устанавливает правило сортировки документов
getNeedTotalCount	Возвращает значение, определяющее необходимость подсчета общего количества документов
setNeedTotalCount	Устанавливает значение, определяющее необходимость подсчета общего количества документов
getTotalCount	Возвращает общее количество документов, хранящихся в InfinniPlatform и соответсвующих запросу

Events¶

Нет

DocumentDataSource.getDocumentId()¶

Возвращает идентификатор документа.

Syntax¶

DocumentDataSource.getDocumentId()

Parameters¶

Нет

Returns¶

Идентификатор документа.

Examples¶

var documentId = DocumentDataSource.getDocumentId();

See Also¶

setDocumentId()

DocumentDataSource.getNeedTotalCount()¶

Возвращает значение, определяющее необходимость подсчета общего количества документов.

Description¶

Функции setPageNumber и setPageSize определяют, какие документы, из хранящихся в InfinniPlatform, будут загружены в источник данных и сколько их будет. Однако, иногда возникает необходимость узнать общее количество документов. В таком случае необходимо установить needTotalCount равным true (например, с помощью метода setNeedTotalCount), обновить список элементов источника данных и получит искомое количество с помощью метода getTotalCount.

Syntax¶

DocumentDataSource.getNeedTotalCount()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее необходимость подсчета общего количества документов.

Examples¶

var needTotalCount = DocumentDataSource.getNeedTotalCount();

See Also¶

DocumentDataSource.getOrder()¶

Возвращает правило сортировки документов.

Syntax¶

DocumentDataSource.getOrder()

Parameters¶

Нет

Returns¶

Правило сортировки документов (см. формат)

Examples¶

var order = DocumentDataSource.getOrder();

See Also¶

setOrder()

DocumentDataSource.getPageNumber()¶

Возвращает номер страницы.

Syntax¶

BaseDataSource.getPageNumber()

Parameters¶

Нет

Returns¶

Номер страницы. Целое число, начиная с 0.

Examples¶

var pageNumber = BaseDataSource.getPageNumber();

See Also¶

DocumentDataSource.getPageSize()¶

Возвращает размер страницы.

Syntax¶

DocumentDataSource.getPageSize()

Parameters¶

Нет

Returns¶

Размер страницы. Положительное число.

Examples¶

var pageSize = DocumentDataSource.getPageSize();

See Also¶

DocumentDataSource.getSelect()¶

Возвращает правило отображения документов.

Syntax¶

DocumentDataSource.getSelect()

Parameters¶

Нет

Returns¶

Правило отображения документов (см. формат)

Examples¶

var selectFormat = DocumentDataSource.getSelect();

See Also¶

setSelect()

DocumentDataSource.getTotalCount()¶

Возвращает общее количество документов, хранящихся в InfinniPlatform и соответсвующих запросу.

Description¶

Функции setPageNumber и setPageSize определяют, какие документы, из хранящихся в InfinniPlatform, будут загружены в источник данных и сколько их будет. Однако, иногда возникает необходимость узнать общее количество документов. В таком случае необходимо установить needTotalCount равным true (например, с помощью метода setNeedTotalCount), обновить список элементов источника данных и получит искомое количество с помощью метода getTotalCount.

Syntax¶

DocumentDataSource.getTotalCount()

Parameters¶

Нет

Returns¶

Общее количество документов, хранящихися в InfinniPlatform и соответсвующих запросу.

Examples¶

var totalCount = DocumentDataSource.getTotalCount();

See Also¶

DocumentDataSource.metadata¶

Метаданные источника данных представления для документов InfinniPlatform.

Properties¶

Name	Type	Default	Description
DocumentId	`String`	–	Идентификатор документа
PageNumber	`Integer`	0	Номер страницы
PageSize	`Integer`	15	Размер страницы
Select	`String`	–	Правило отображения документов
Order	`String`	–	Правило сортировки документов
NeedTotalCount	`Boolean`	–	Необходимость подсчета количества

Examples¶

{
    "DocumentDataSource": {
        "Name": "documentDataSource1",
        "DocumentId": "MyDocument",
        "PageNumber": 3,
        "PageSize": 50,
        "Select": "include(LastName, FirstName, Address, Birthday)",
        "Order": "asc(LastName, FirstName)"
    }
}

{
    "DocumentDataSource": {
        "Name": "documentDataSource2",
        "DocumentId": "MyDocument",
        "NeedTotalCount": true
    }
}

DocumentDataSource.setDocumentId()¶

Устанавливает идентификатор документа.

Syntax¶

DocumentDataSource.setDocumentId(value)

Parameters¶

Name	Description
value	Идентификатор документа

Returns¶

Метод ничего не возвращает

Examples¶

DocumentDataSource.setDocumentId('MyDocument');

See Also¶

getDocumentId()

DocumentDataSource.setIdFilter()¶

Устанавливает фильтр элементов по идентификатору.

Syntax¶

DocumentDataSource.setIdFilter(itemId)

Parameters¶

Name	Description
itemId	Идентификатор элемента

Returns¶

Метод ничего не возвращает.

Examples¶

DocumentDataSource.setIdFilter('dd4d1bb3-5571-453c-9686-d04d4d0f0316');

See Also¶

DocumentDataSource.setNeedTotalCount()¶

Устанавливает значение, определяющее необходимость подсчета общего количества документов.

Description¶

Функции setPageNumber и setPageSize определяют, какие документы, из хранящихся в InfinniPlatform, будут загружены в источник данных и сколько их будет. Однако, иногда возникает необходимость узнать общее количество документов. В таком случае необходимо установить needTotalCount равным true (например, с помощью метода setNeedTotalCount, обновить список элементов источника данных и получит искомое количество с помощью метода getTotalCount.

Syntax¶

DocumentDataSource.setNeedTotalCount(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Значение, определяющее необходимость подсчета общего количества документов

Returns¶

Метод ничего не возвращает.

Examples¶

BaseDataSource.setNeedTotalCount(true);

See Also¶

DocumentDataSource.setOrder()¶

Устанавливает правило сортировки документов.

Syntax¶

DocumentDataSource.setOrder(value)

Parameters¶

Name	Type	Description
value	`String`	Правило сортировки документов

Returns¶

Метод ничего не возвращает.

Order Format¶

Правила сортировки можно указывать через запятую. При этом приоритет сортировки будет зависеть от порядка следования.

Syntax	Description
asc(f1, f2, …)	Элементы источника данных будут сортироваться по возврастанию полей f1, f2, …
desc(f1, f2, …)	Элементы источника данных будут сортироваться по убыванию полей f1, f2, …

Examples¶

BaseDataSource.setOrder("asc(LastName),desc(FirstName,MiddleName),asc(Birthday)");

See Also¶

getOrder()

DocumentDataSource.setPageNumber()¶

Устанавливает номер страницы.

Description¶

Если в источнике данных разрешено обновление списка элементов, изменение номера страницы приводит к автоматическому обновлению списка элементов источника данных.

Syntax¶

DocumentDataSource.setPageNumber(value)

Parameters¶

Name	Description
value	Номер страницы. Целое число, начиная с 0

Returns¶

Метод ничего не возвращает

Examples¶

DocumentDataSource.setPageNumber(5);

See Also¶

DocumentDataSource.setPageSize()¶

Устанавливает размер страницы.

Description¶

Если в источнике данных разрешено обновление списка элементов, изменение размера страницы приводит к автоматическому обновлению списка элементов источника данных.

Syntax¶

DocumentDataSource.setPageSize(value)

Parameters¶

Name	Description
value	Размер страницы. Положительное число

Returns¶

Метод ничего не возвращает

Examples¶

DocumentDataSource.setPageSize(50);

See Also¶

DocumentDataSource.setSelect()¶

Устанавливает правило отображения документов.

Syntax¶

DocumentDataSource.setSelect(value)

Parameters¶

Name	Type	Description
value	`String`	Правило отображения документов

Returns¶

Метод ничего не возвращает.

Select Format¶

Syntax	Description
include(f1, f2, …)	Элементы источника данных будут содержать только поля f1, f2, …
exclude(f1, f2, …)	Элементы источника данных будут содержать все свои исходные поля, кроме f1, f2, …

Examples¶

BaseDataSource.setSelect("include(name, full_address, stage)");

See Also¶

getSelect()

DocumentDataSource.metadata¶

Метаданные источника данных представления для документов InfinniPlatform.

Properties¶

Name	Type	Default	Description
DocumentId	`String`	–	Идентификатор документа
PageNumber	`Integer`	0	Номер страницы
PageSize	`Integer`	15	Размер страницы
Select	`String`	–	Правило отображения документов
Order	`String`	–	Правило сортировки документов
NeedTotalCount	`Boolean`	–	Необходимость подсчета количества

Examples¶

{
    "DocumentDataSource": {
        "Name": "documentDataSource1",
        "DocumentId": "MyDocument",
        "PageNumber": 3,
        "PageSize": 50,
        "Select": "include(LastName, FirstName, Address, Birthday)",
        "Order": "asc(LastName, FirstName)"
    }
}

{
    "DocumentDataSource": {
        "Name": "documentDataSource2",
        "DocumentId": "MyDocument",
        "NeedTotalCount": true
    }
}

ObjectDataSource¶

Источник данных представления для произвольного массива.

Description¶

Очень часто встречаются ситуации, когда визуальное представление оперирует предопределенным набором данных, которые не имеет смысла хранить во внешнем источнике данных, и можно жестко прописать в коде. Например, выпадающий список, разрешающий выбрать значение из строго определенного множества элементов. При решении подобных задач следует использовать ObjectDataSource - он позволяет определить произвольный массив данных в качестве поставщика данных.

Extends¶

BaseDataSource

Syntax¶

new ObjectDataSource(parameters)

Parameters¶

Name	Type	Description
parameters	`Object`	Объект с параметрами представления. Один из параметров обязательный: parameters.view - родительское представление источника данных

Properties¶

Нет

Specific Properties¶

Нет

Methods¶

Name	Description
setItems	Устанавливает список элементов источника данных

Events¶

Нет

ObjectDataSource.metadata¶

Метаданные ObjectDataSource.

Properties¶

Name	Type	Description
Items	`Array` (⇔)	Массив элементов источника данных

(⇔) Свойство может быть задано, как DataBinding.

Examples¶

{
    "ObjectDataSource": {
      "Name": "objectDataSource1",
      "Items": [
        { "Id": 1, "Display": "LTE" },
        { "Id": 2, "Display": "3G" },
        { "Id": 3, "Display": "2G" }
      ]
    }
}

{
    "ObjectDataSource": {
      "Name": "convertedDataSource",
      "Items": {
          "Source": "MainDataSource",
          "Property": "",
          "Mode": "ToElement",
          "Converter": {
              "ToElement": "{ return args.value.map(function(item){return {FullName: item.LastName + ' ' + item.FirstName, Birthday: item.Birthday}; }); }"
            }
        }
    }
}

ObjectDataSource.setItems()¶

Устанавливает список элементов источника данных.

Description¶

Вызов метода setItems() устанавливает указанный массив в качестве поставщика данных. Данный метод не обновляет список элементов источника данных. Для обновления списка элементов необходимо вызвать метод updateItems().

Syntax¶

ObjectDataSource.setItems(items)

Parameters¶

Name	Description
items	Массив элементов источника данных

Returns¶

Метод ничего не возвращает

Examples¶

ObjectDataSource.setItems([
  { Id: 1, Display: 'LTE' },
  { Id: 2, Display: '3G' },
  { Id: 3, Display: '2G' }
]);

ObjectDataSource.updateItems();

See Also¶

updateItems()

ObjectDataSource.metadata¶

Метаданные ObjectDataSource.

Properties¶

Name	Type	Description
Items	`Array` (⇔)	Массив элементов источника данных

(⇔) Свойство может быть задано, как DataBinding.

Examples¶

{
    "ObjectDataSource": {
      "Name": "objectDataSource1",
      "Items": [
        { "Id": 1, "Display": "LTE" },
        { "Id": 2, "Display": "3G" },
        { "Id": 3, "Display": "2G" }
      ]
    }
}

{
    "ObjectDataSource": {
      "Name": "convertedDataSource",
      "Items": {
          "Source": "MainDataSource",
          "Property": "",
          "Mode": "ToElement",
          "Converter": {
              "ToElement": "{ return args.value.map(function(item){return {FullName: item.LastName + ' ' + item.FirstName, Birthday: item.Birthday}; }); }"
            }
        }
    }
}

LocalStorageDataSource¶

Источник данных представления для произвольного массива.

Description¶

Очень часто встречаются ситуации, когда визуальное представление оперирует предопределенным набором данных, которые необходимо хранить в local storage браузера. Например, индивидуальные конфигурации страницы, для каждого пользователя. При решении подобных задач следует использовать LocalStorageDataSource - он позволяет определить произвольный массив данных, которые будут сохранены в браузере ползователя. Источник данных создается в единственном экземпляре на страницу.

Extends¶

ObjectDataSource

Syntax¶

window.InfinniUI.localStorageDataSource

Parameters¶

Нет

LocalStorageDataSource.metadata¶

В метаданных LocalStorageDataSource может задаваться в качестве источника для DataBinding. При этом имя источника необходимо указывать как LocalStorageDS.

Examples¶

{
    "Label": {
      "Name": "SomeLabel",
      "Value": {
        "Source": "LocalStorageDS",
        "Property": "0.FirstName"
      }
    }
}

{
    "Button": {
      "Name": "SomeButton",
      "Text": {
        "Source": "LocalStorageDS",
        "Property": "0.BtnName"
      }
    }
}

LocalStorageDataSource.metadata¶

В метаданных LocalStorageDataSource может задаваться в качестве источника для DataBinding. При этом имя источника необходимо указывать как LocalStorageDS.

Examples¶

{
    "Label": {
      "Name": "SomeLabel",
      "Value": {
        "Source": "LocalStorageDS",
        "Property": "0.FirstName"
      }
    }
}

{
    "Button": {
      "Name": "SomeButton",
      "Text": {
        "Source": "LocalStorageDS",
        "Property": "0.BtnName"
      }
    }
}

RestDataSource¶

Источник данных представления для произвольных http-сервисов данных.

Extends¶

BaseDataSource

Syntax¶

new RestDataSource(parameters)

Parameters¶

Name	Type	Description
parameters	`Object`	Объект с параметрами представления. Один из параметров обязательный: parameters.view - родительское представление источника данных

Properties¶

Нет

Specific Properties¶

Для работы с данными свойствами используйте методы getProperty и setProperty.

Обратите внимание, что для работы с данными свойствами необходимо указывать точку в названии.

Name	Description
urlParams.get	Параметры запроса на получение данных
urlParams.set	Параметры запроса на сохранение данных
urlParams.delete	Параметры запроса на удаление

urlParams Format¶

Параметры запроса хранятся в виде объекта со следующими полями:

Name	Type	Description
origin	`String`¹	Хост и порт
path	`String`¹	Строка пути (относительно хоста)
method	`String`	Метод запроса
data	`Object`¹	Данные запроса
params	`Object`	Параметры запроса

¹ Шаблонизируемая величина.

Parameters Templating¶

Зачастую при описании запроса возникает необходимость использовать изменяемые значения.

Для этого в RestDataSource введены параметры. Вы можете задать значение параметра в свойстве params. А затем использовать его в шаблонизируемых величинах, обозначив <%[paramName]%>.

Например, задан параметр userId, тогда в свойстве path можно обратится к нему следующим образом: "/users?filter=eq(userId,<%userId%>)". При отправке запроса вместо <%userId%> будет установлено соответсвующее значение параметра.

RestDataSource.setGettingUrlParams('params.userId', '12345');
RestDataSource.setGettingUrlParams('path', '/users?filter=eq(userId,<%userId%>)');

Methods¶

Name	Description
getGettingUrlParams	Возвращает параметры запроса на получение данных
setGettingUrlParams	Устанавливает параметры запроса на получение данных
getSettingUrlParams	Возвращает параметры запроса на сохранение данных
setSettingUrlParams	Устанавливает параметры запроса на сохранение данных
getDeletingUrlParams	Возвращает параметры запроса на удаление
setDeletingUrlParams	Устанавливает параметры запроса на удаление
setUpdatingItemsConverter	Устанавливает конвертер ответа http-сервиса в контейнер элементов источника данных

Events¶

Нет

RestDataSource.getDeletingUrlParams()¶

Возвращает параметры запроса на удаление.

Syntax¶

RestDataSource.getDeletingUrlParams(propertyName)

Parameters¶

Name	Description
propertyName	Название параметра

Returns¶

Значение указанного парметра. Если propertyName не было указано, то вернёт объект со значениями всех параметров.

Examples¶

RestDataSource.getDeletingUrlParams('origin');

See Also¶

setDeletingUrlParams

RestDataSource.getGettingUrlParams()¶

Возвращает параметры запроса на получение данных.

Syntax¶

RestDataSource.getGettingUrlParams(propertyName)

Parameters¶

Name	Description
propertyName	Название параметра

Returns¶

Значение указанного парметра. Если propertyName не было указано, то вернёт объект со значениями всех параметров.

Examples¶

RestDataSource.getGettingUrlParams('path');

See Also¶

setGettingUrlParams

RestDataSource.getSettingUrlParams()¶

Возвращает параметры запроса на сохранение данных.

Syntax¶

RestDataSource.getSettingUrlParams(propertyName)

Parameters¶

Name	Description
propertyName	Название параметра

Returns¶

Значение указанного парметра. Если propertyName не было указано, то вернёт объект со значениями всех параметров.

Examples¶

RestDataSource.getSettingUrlParams('data');

See Also¶

setSettingUrlParams

RestDataSource.metadata¶

Метаданные RestDataSource.

Properties¶

Name	Type	Description
GettingParams	`Object`	Параметры запроса на получение данных
SettingParams	`Object`	Параметры запроса на сохранение данных
DeletingParams	`Object`	Параметры запроса на удаление

Examples¶

{
    "RestDataSource": {
        "GettingParams": {
            "Method": "Get",
            "Origin": "http://<%ip%>:<%port%>",
            "Path": "/documents/<%document%>",
            "Data": {
              "filter": "eq(_id,'<%_id%>')"
            },
            "Params": {
              "ip": "localhost",
              "port": "9900",
              "document": "Patients",
              "_id": "73eba46a-0c6f-42d3-8a7b-2962f0fbf06d"
            }
        },
        "SettingParams": {
            "Method": "Post",
            "Origin": "http://<%ip%>:<%port%>",
            "Path": "/documents/edit/<%document%>",
            "Data": {
              "newValue": "<%patinet%>"
            },
            "Params": {
              "ip": "localhost",
              "port": "9900",
              "document": "Patient",
              "patinet": {
                    "Source": "MainDataSource",
                    "Property": "$"
                }
            }
        },
        "DeletingParams": {
            "Method": "Delete",
            "Origin": "http://<%ip%>:<%port%>",
            "Path": "/documents/delete/<%document%>",
            "Data": {
              "filter": "eq(_id,'<%_id%>')"
            },
            "Params": {
              "ip": "localhost",
              "port": "9900",
              "document": "Patients",
              "_id": "73eba46a-0c6f-42d3-8a7b-2962f0fbf06d"
            }
        }
    }
}

RestDataSource.setDeletingUrlParams()¶

Устанавливает параметры запроса на удаление.

Syntax¶

RestDataSource.setDeletingUrlParams(propertyName, value)
RestDataSource.setDeletingUrlParams(value)

Parameters¶

Name	Description
propertyName	Название параметра
value	Значение параметров/параметра

Returns¶

Метод ничего не возвращает

Examples¶

RestDataSource.setDeletingUrlParams("data.filter", "eq(_id, '<%_id%>')");

RestDataSource.setDeletingUrlParams({
    type: 'delete',
    origin:'http://some.ru',
    path:'/delete/user/',
    params: {
        _id: 'c852edce7d'
    }
});

See Also¶

getDeletingUrlParams

RestDataSource.setGettingUrlParams()¶

Устанавливает параметры запроса на получение данных.

Syntax¶

RestDataSource.setGettingUrlParams(propertyName, value)
RestDataSource.setGettingUrlParams(value)

Parameters¶

Name	Description
propertyName	Название параметра
value	Значение параметров/параметра

Returns¶

Метод ничего не возвращает

Examples¶

RestDataSource.setGettingUrlParams('origin', 'http://some.ru');

RestDataSource.setGettingUrlParams({
    type: 'get',
    origin:'http://some.ru',
    path:'/some/id<%param1%><%param2%>?a=2&b=<%param1%><%param3%>',
    data: {},

    params: {
        param1: 4,
        param2: missParam ? undefined : '/',
        param3: '&c=4'
    }
});

See Also¶

getGettingUrlParams

RestDataSource.setSettingUrlParams()¶

Устанавливает параметры запроса на сохранение данных.

Syntax¶

RestDataSource.setSettingUrlParams(propertyName, value)
RestDataSource.setSettingUrlParams(value)

Parameters¶

Name	Description
propertyName	Название парметра
value	Значение параметров/парметра

Returns¶

Метод ничего не возвращает

Examples¶

RestDataSource.setSettingUrlParams('type', 'post');

RestDataSource.setSettingUrlParams({
    type: 'post',
    origin:'http://some.ru',
    path:'/some/<%param1%>/<%param2%>',
    data: {
        a: 2,
        b: '<%param1%>',
        c: '!1<%param2%>2!'
    },

    params: {
        param1: '',
        param2: ''
    }
});

See Also¶

getSettingUrlParams

RestDataSource.setUpdatingItemsConverter()¶

Устанавливает конвертер ответа http-сервиса в контейнер элементов источника данных.

Description¶

В общем случае, http-сервис может возвращать данные произвольного формата. Однако источники данных работают только с контейнерами элементов. Для конвертации ответа http-сервиса в требуемый формат используется функция setUpdatingItemsConverter.

Syntax¶

RestDataSource.setUpdatingItemsConverter(value)

Parameters¶

Name	Description
value	Функция конвертации ответов http-сервиса в контейнер элементов

Returns¶

Метод ничего не возвращает

Examples¶

RestDataSource.setUpdatingItemsConverter(function(data){
            return data['Items'];
        });

See Also¶

updateItems()

RestDataSource.metadata¶

Метаданные RestDataSource.

Properties¶

Name	Type	Description
GettingParams	`Object`	Параметры запроса на получение данных
SettingParams	`Object`	Параметры запроса на сохранение данных
DeletingParams	`Object`	Параметры запроса на удаление

Examples¶

{
    "RestDataSource": {
        "GettingParams": {
            "Method": "Get",
            "Origin": "http://<%ip%>:<%port%>",
            "Path": "/documents/<%document%>",
            "Data": {
              "filter": "eq(_id,'<%_id%>')"
            },
            "Params": {
              "ip": "localhost",
              "port": "9900",
              "document": "Patients",
              "_id": "73eba46a-0c6f-42d3-8a7b-2962f0fbf06d"
            }
        },
        "SettingParams": {
            "Method": "Post",
            "Origin": "http://<%ip%>:<%port%>",
            "Path": "/documents/edit/<%document%>",
            "Data": {
              "newValue": "<%patinet%>"
            },
            "Params": {
              "ip": "localhost",
              "port": "9900",
              "document": "Patient",
              "patinet": {
                    "Source": "MainDataSource",
                    "Property": "$"
                }
            }
        },
        "DeletingParams": {
            "Method": "Delete",
            "Origin": "http://<%ip%>:<%port%>",
            "Path": "/documents/delete/<%document%>",
            "Data": {
              "filter": "eq(_id,'<%_id%>')"
            },
            "Params": {
              "ip": "localhost",
              "port": "9900",
              "document": "Patients",
              "_id": "73eba46a-0c6f-42d3-8a7b-2962f0fbf06d"
            }
        }
    }
}

DisplayFormat¶

Display format is way to display data. To describe the way of data input EditMask is used.

Extends¶

BaseFormat

Маска должна записываться в формате, который использует символы, определяющие правила ввода.

Mask¶

Метасимволы¶

Каждому метасимволу соответствует определенный диапазона символов. Конечный пользователь может вводить текст только в те позиции маски, в которых определены метасимволы. В результате пользователь, находясь определенной позиции маски ввода может ввести только те символы, которые входят в диапазон, соответствующий метасимволу этой позиции ввода. Ниже перечислены все доступные метасимволы.

Символ	Описание
`c`	Необязательный ввод любого символа.
`C`	Обязательный ввод любого символа.
`l`	Необязательный ввод буквы.
`L`	Обязательный ввод буквы.
`a`	Необязательный ввод буквы или цифры.
`A`	Обязательный ввод буквы или цифры.
`#`	Необязательный ввод цифры, знака “-” или “+”.
`9`	Необязательный ввод цифры.
`0`	Обязательный ввод цифры.

Спецсимволы¶

Спецсимволы представляют различные разделители, символы валют и т.п. Ниже перечислены все доступные спецсимволы.

Символ	Описание
`/`	Должен заменяться на GlobalContext. Localizations.dateTimeFormatInfo.dateSeparator.
`:`	Должен заменяться на GlobalContext. Localizations.dateTimeFormatInfo.timeSeparator.
`%`	Должен заменяться на GlobalContext. Localizations.numberFormatInfo.percentSymbol.
`$`	Должен заменяться на GlobalContext. Localizations.numberFormatInfo.currencySymbol.

Литералы¶

Символы, которые не являются метасимволами и спецсимволами называются литералами. Литералы вставляются автоматически, как есть, без изменения. Конечный пользователь не может заменить литерал на иной символ. Во время ввода данных курсор перепрыгивает литералы и спецсимволы. Если метасимвол или спецсимвол требуется записать, как литерал, перед ним нужно поставить символ “”.

Properties¶

Name	Type	Default	Description
Mask	`String`	–	Маска редактирования
MaskSaveLiteral	`Boolean`	`true`	Сохранять литералы в редактируемом значении.
MaskPlaceHolder	`String`	`_`	Символ заполнителя для метасимволов.

Если свойство MaskSaveLiteral равно true, редактируемое значение будет включать не только введенные пользователем символы, но и все спецсимволы и литералы, определенные в маске. Если свойство MaskSaveLiteral равно false, редактируемое значение будет включать только введенные пользователем символы. Например, указана маска: “(999)000-00-00”, пользователь не стал вводить первые три цифры: “(___)456-78-90”. Тогда в случае, если свойство MaskSaveLiteral равно true, редактор сохранит значение “()456-78-90”; а в случае, если свойство MaskSaveLiteral равно false, редактор сохранит значение “4567890”.

Examples¶

//js-demo

var metadata = {
    TextBox: {
        EditMask: {
            TemplateEditMask: {
                 Mask: "(000)000-00-00"
            }
        }
    }
};

var builder = new InfinniUI.ApplicationBuilder();
var textbox = builder.build(metadata);

//  Render
$elementForExample.append(textbox.render());

Elements¶

Element structure¶

Every element comprises of a few parts each one has its own functions.

Element builder
Element
Control
Control model
View control

Element builder¶

Javascript-object which creates and sets up element accordingly to metadata transmitted to builder.

Element¶

Javascript-object representing certain visual element. This Javascript-object has got all required API for the current element. Thus practically this element is a facade for some control which can be derived from a third party library not compliant with required API however compliant to the requirements of the visual element.

Control¶

Control is a Javascript-object specifically representing a visual element. At the moment, InfinniUI uses elements coded with Backbone library. Each element comprises of a Backbone-model and Backbone-view, control is the link between those.

Control model¶

Backbone-model of a specific control.

Control view¶

Backbone-view of a specific control.

Container¶

Базовый тип для контейнеров визуальных элементов представления.

Description¶

Визуальные элементы, которые могут содержать внутри себя другие визуальные элементы, называются контейнерами, композитными или составными элементами. При этом сам контейнер называют родительским элементом, а его содержимое - дочерними элементами. Дочерние элементы не могут выходить за границы контейнера, но способ их расположения определяется каждым типом контейнера в отдельности и может не зависеть от настроек дочерних элементов.

Extends¶

Syntax¶

new Container(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getItemTemplate	Возвращает функцию шаблонизации дочерних элементов контейнера
setItemTemplate	Устанавливает функцию шаблонизации дочерних элементов контейнера
getItems	Возвращает коллекцию дочерних элементов контейнера
getGroupValueSelector	Возвращает функцию, определяющую условие группировки дочерних элементов контейнера
setGroupValueSelector	Устанавливает функцию, определяющую условие группировки дочерних элементов контейнера
getGroupItemTemplate	Возвращает функцию шаблонизации заголовков групп
setGroupItemTemplate	Устанавливает функцию шаблонизации заголовков групп

Events¶

Нет

Container.getGroupItemTemplate()¶

Возвращает функцию шаблонизации заголовков групп.

Description¶

Если в контейнере задана группировка, то, воспользовавшись setGroupItemTemplate, можно определить заголовки групп.

Syntax¶

container.getGroupItemTemplate()

Parameters¶

Нет

Returns¶

Функция шаблонизации заголовков групп.

Данная функция в параметре args принимает информацию о группах:

args.index - индекс текущей группы,
args.item - элементы текущей группы.

Результатом работы функции должен быть визуальный элемент.

Examples¶

var groupItemTemplate = container.getGroupItemTemplate();

See Also¶

Container.getGroupValueSelector()¶

Возвращает функцию, определяющую условие группировки дочерних элементов контейнера.

Syntax¶

container.getGroupValueSelector()

Parameters¶

Нет

Returns¶

Функция, определяющая условие группировки дочерних элементов контейнера.

Данная функция в параметре args принимает информацию об элементе: контейнера. Свойство args.value содержит исходный элемент.
Результатом работы функции должно быть некоторое значение, по которому: будут группироваться элементы.

Examples¶

var groupValueSelector = container.getGroupValueSelector();

See Also¶

setGroupValueSelector()

Container.getItems()¶

Возвращает коллекцию дочерних элементов контейнера.

Syntax¶

container.getItems()

Returns¶

Коллекция дочерних элементов контейнера.

Examples¶

var items = container.getItems();

See Also¶

Container.getItemTemplate()¶

Возвращает функцию шаблонизации дочерних элементов контейнера.

Description¶

Если функция шаблонизации дочерних элементов определена, то она используется при изменении коллекции дочерних элементов контейнера - getItems(). Если шаблон не определен, коллекция дочерних элементов контейнера должна содержать ссылки на готовые визуальные элементы.

Syntax¶

container.getItemTemplate()

Parameters¶

Нет

Returns¶

Функция шаблонизации дочерних элементов контейнера.

В параметре args передается информация, необходимая для формирования визуального элемента. Свойство args.value содержит исходный элемент. Результатом работы функции должен быть визуальный элемент.

Examples¶

var itemTemplate = container.getItemTemplate();

See Also¶

Container.metadata¶

Метаданные типа Container.

Properties¶

Name	Type	Description
Items*	`Array`/`Object`	Элементы контейнера
ItemTemplate	Element	Шаблон дочерних элементов контейнера,
ItemFormat	DisplayFormat	Формат отображения дочерних элементов контейнера
ItemSelector	Script	Функция, которая по переданным данным конструирует отображаемое значение
ItemProperty	`String`	Свойство дочерних элементов контейнера для отображения в контейнере
GroupValueSelector	Script	Функция, определяющую условие группировки дочерних элементов контейнера
GroupValueProperty	`String`	Свойство, определяющее условие группировки дочерних элементов контейнера
GroupItemTemplate	Element	Функция шаблонизации заголовков групп
GroupItemFormat	DisplayFormat	Формат заголовков групп
GroupItemSelector	Script	Функция, которая по переданным данным конструирует значение заголовков групп
GroupItemProperty	`String`	Свойство, отображаемое в качестве заголовков групп

* Обязательное свойство.

Если поле Items заданно массивом, то Container не является шаблонизируемым и строится по метаданным Items. Если же Items является объектом, то он содержит привязку на источник элементов, для отображения которых необходимо задать шаблон.

ItemSelector и GroupItemSelector должны возвращать элементарные значения: строку или число.

Свойства ItemTemplate, ItemFormat, ItemSelector и ItemProperty являются взаимоисключающими. Если указать несколько из них, то для отображения будет выбрано наиболее приоритетное. В схеме свойства указаны в порядке приоритета. Кроме того, взаимноисключающими являются GroupValueSelector и GroupValueProperty, а также GroupItemTemplate, GroupItemFormat, GroupItemSelector и GroupItemProperty.

Examples¶

Рассмотрим случай, когда Items является массивом.

{
    "StackPanel": {
        "Items": [
            {
                "Icon": {
                    "Value": "remove"
                }
            },
            {
                "Label": {
                    "Text": "delete"
                }
            }
        ]
    }
}

Пример шаблонизируемого контейнера:

{
    "StackPanel": {
        "Items": {
            "Source": "People",
            "Property": ""
        },
        "ItemTemplate": {
            "StackPanel": {
                "Items": [
                    {
                        "Label": {
                            "Value": {
                                "Source": "People",
                                "Property": "$.FullName"
                            }
                        }
                    },
                    {
                        "Label": {
                            "Value": {
                                "Source": "People",
                                "Property": "$.Age"
                            }
                        }
                    }
                ]
            }
        }
    }
}

Контейнер с группировкой:

{
    "ListBox": {
        "ItemTemplate": {
            "TextBox": {
                "Name": "TextBox1",
                "Value": {
                    "Source": "MainDataSource",
                    "Property": "#.Display"
                }
            }
        },
        "GroupItemFormat": "Connect: ${Display}",
        "GroupValueProperty": "Display",
        "Items" : {
            "Source": "MainDataSource",
            "Property": ""
        }
    }
}

Container.setGroupItemTemplate()¶

Устанавливает функцию шаблонизации заголовков групп.

Description¶

Если в контейнере задана группировка, то, воспользовавшись setGroupItemTemplate, можно определить заголовки групп.

Syntax¶

container.setGroupItemTemplate(value)

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации заголовков групп

Данная функция в параметре args принимает информацию о группах:

args.index - индекс текущей группы,
args.item - элементы текущей группы.

Результатом работы функции должен быть визуальный элемент.

Returns¶

Метод ничего не возвращает.

Examples¶

var headerCreator = function(context, args) {
    var element = new Label();
    var header = args.index + ') ' + args.item[0].Class
    element.setValue(header);
    return element;
};

container.setGroupItemTemplate(headerCreator);

See Also¶

Container.setGroupValueSelector()¶

Устанавливает функцию, определяющую условие группировки дочерних элементов контейнера.

Syntax¶

container.setGroupValueSelector(value)

Parameters¶

Name	Type	Description
value	Script	Функция, определяющая условие группировки дочерних элементов контейнера

Данная функция в параметре args принимает информацию об элементе контейнера. Свойство args.value содержит исходный элемент. Результатом работы функции должно быть некоторое значение, по которому будут группироваться элементы.

Returns¶

Метод ничего не возвращает.

Examples¶

var selector = function(context, args) {
    var item = args.value;
    return item.Class;
};

container.setGroupValueSelector(selector);

See Also¶

getGroupValueSelector()

Container.setItemTemplate()¶

Устанавливает функцию шаблонизации дочерних элементов контейнера.

Description¶

Если функция шаблонизации дочерних элементов определена, то она используется при изменении коллекции дочерних элементов контейнера - getItems(). Если шаблон не определен, коллекция дочерних элементов контейнера должна содержать ссылки на готовые визуальные элементы.

Syntax¶

container.setItemTemplate(value)

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации дочерних элементов контейнера

В параметре args передается информация, необходимая для формирования визуального элемента. Свойство args.value содержит исходный элемент. Результатом работы функции должен быть визуальный элемент.

Returns¶

Метод ничего не возвращает.

Examples¶

container.setItemTemplate(function(context, args) {
  var element = new Label();
  element.setValue(args.value);
  return element;
});

container.getItems().reset([
  'One',
  'Two',
  'Three'
]);

See Also¶

Container.metadata¶

Метаданные типа Container.

Properties¶

Name	Type	Description
Items*	`Array`/`Object`	Элементы контейнера
ItemTemplate	Element	Шаблон дочерних элементов контейнера,
ItemFormat	DisplayFormat	Формат отображения дочерних элементов контейнера
ItemSelector	Script	Функция, которая по переданным данным конструирует отображаемое значение
ItemProperty	`String`	Свойство дочерних элементов контейнера для отображения в контейнере
GroupValueSelector	Script	Функция, определяющую условие группировки дочерних элементов контейнера
GroupValueProperty	`String`	Свойство, определяющее условие группировки дочерних элементов контейнера
GroupItemTemplate	Element	Функция шаблонизации заголовков групп
GroupItemFormat	DisplayFormat	Формат заголовков групп
GroupItemSelector	Script	Функция, которая по переданным данным конструирует значение заголовков групп
GroupItemProperty	`String`	Свойство, отображаемое в качестве заголовков групп

* Обязательное свойство.

Если поле Items заданно массивом, то Container не является шаблонизируемым и строится по метаданным Items. Если же Items является объектом, то он содержит привязку на источник элементов, для отображения которых необходимо задать шаблон.

ItemSelector и GroupItemSelector должны возвращать элементарные значения: строку или число.

Свойства ItemTemplate, ItemFormat, ItemSelector и ItemProperty являются взаимоисключающими. Если указать несколько из них, то для отображения будет выбрано наиболее приоритетное. В схеме свойства указаны в порядке приоритета. Кроме того, взаимноисключающими являются GroupValueSelector и GroupValueProperty, а также GroupItemTemplate, GroupItemFormat, GroupItemSelector и GroupItemProperty.

Examples¶

Рассмотрим случай, когда Items является массивом.

{
    "StackPanel": {
        "Items": [
            {
                "Icon": {
                    "Value": "remove"
                }
            },
            {
                "Label": {
                    "Text": "delete"
                }
            }
        ]
    }
}

Пример шаблонизируемого контейнера:

{
    "StackPanel": {
        "Items": {
            "Source": "People",
            "Property": ""
        },
        "ItemTemplate": {
            "StackPanel": {
                "Items": [
                    {
                        "Label": {
                            "Value": {
                                "Source": "People",
                                "Property": "$.FullName"
                            }
                        }
                    },
                    {
                        "Label": {
                            "Value": {
                                "Source": "People",
                                "Property": "$.Age"
                            }
                        }
                    }
                ]
            }
        }
    }
}

Контейнер с группировкой:

{
    "ListBox": {
        "ItemTemplate": {
            "TextBox": {
                "Name": "TextBox1",
                "Value": {
                    "Source": "MainDataSource",
                    "Property": "#.Display"
                }
            }
        },
        "GroupItemFormat": "Connect: ${Display}",
        "GroupValueProperty": "Display",
        "Items" : {
            "Source": "MainDataSource",
            "Property": ""
        }
    }
}

Element¶

Базовый класс для всех визуальных элементов InfinniUI.

Description¶

Все визуальные элементы (далее просто “элементы”), представленные в InfinniUI, являются потомками Element. В Element реализованы базовые API, которые в итоге будут предоставлять все элементы InfinniUI.

Syntax¶

new Element(parent, viewMode);

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент
viewMode	`String`	Строка со значением режима отображения

Usage¶

Создать экземпляр Element нельзя, однако можно создать, к примеру, экземпляр кнопки, которая наследуется от Element. Сделаем это, а так же зададим кнопке текст.

//js-demo
var button = new InfinniUI.Button();
var $button = button.render();

button.setText("ButtonText")

$elementForExample.append($button);

Properties¶

Name	Type	Description
name	`String`	Содержит имя элемента

Methods¶

Name	Description
getView	Возвращает родительское представление
getParent	Возвращает родительский элемент
setParent	Устанавливает родительский элемент
getChildElements	Возвращает список дочерних элементов. Речь идет о непосредственных потомках, дочерние дочерних элементов в этот список не входят. В отличии от следующих методов
findAllChildrenByType	Возвращает список потомков (дочерних, их дочерних и т. д.) элементов с заданным типом (Button, Label и др.)
findAllChildrenByName	Возвращает список потомков (дочерних, их дочерних и т. д.) элементов с заданным именем
addChild	Добавляет заданный элемент в качестве дочернего
removeChild	Удаляет заданный элемент из списка дочерних
getProperty	Возвращает значение указанного свойства элемента. Например ‘text’, ‘visible’ ‘value’, и др.
setProperty	Устанавливает значение указанного свойства элемента
getName	Возвращает имя элемента
setName	Устанавливает имя элемента
getText	Возвращает текст элемента (в разных потомках Element, поле text используется по разному. Например, во View это заголовок представления, а в ImageBox это текст кнопки, инициирующей выбор загружаемого изображения)
setText	Устанавливает текст элемента
getFocusable	Возвращает значение, определяющее, может ли элемент получить фокус
setFocusable	Устанавливает значение, определяющее, может ли элемент получить фокус
getFocused	Возвращает значение, определяющее, установлен ли на элементе фокус
setFocused	Устанавливает/снимает фокус с элемента (в зависимости от передаваемого значения)
getTag	Возвращает специальное значение, хранящяеся в элементе. Тег можно использовать для привязки произвольных значений к элементу
setTag	Устанавливает специальное значение. Оно может быть любого типа. Тег можно использовать для привязки произвольных значений к элементу
getEnabled	Возвращает значение, определяющее, возможен ли доступ к элементу
setEnabled	Устанавливает значение, определяющее, возможен ли доступ к элементу
getVisible	Возвращает значение, определяющее, отображается ли элемент в интерфейсе
setVisible	Устанавливает значение, определяющее, отображается ли элемент в интерфейсе
getHorizontalAlignment	Возвращает горизонтальное выравнивание в родительском элементе
setHorizontalAlignment	Устанавливает горизонтальное выравнивание в родительском элементе
getTextHorizontalAlignment	Возвращает горизонтальное выравнивание текста в элементе
setTextHorizontalAlignment	Устанавливает горизонтальное выравнивание текста в элементе
getToolTip	Возвращает устанавленное всплывающее сообщение элемента
setToolTip	Устанавливает всплывающее сообщение для элемента
getValidationState	Возвращает валидационный статус элемента
setValidationState	Устанавливает заданный валидационный статус и валидационное сообщение
getTextStyle	Возвращает стиль текста элемента
setTextStyle	Устанавливает стиль текста элемента
getForeground	Возвращает цвет текста элемента
setForeground	Устанавливает цвет текста элемента
getBackground	Возвращает цвет фона элемента
setBackground	Устанавливает цвет фона элемента
getStyle	Возвращает кастомный стиль элемента (на деле это класс, стили которых могут быть заданы в подключаемых на страницу стилях)
setStyle	Устанавливает элементу кастомный стиль (на деле устанавливает ему одноименный класс, стили которого можно задать самому в подключаемых на страницу стилях). Этот способ кастомизации внешнего вида череват разными последствиями, поскольку примененные к классу css-правила могут противоречить правилам задуманным InfinniUI, в следствии чего верстка может “поехать” неожиданным образом. Следует применять эту возможность как можно реже и как можно аккуратнее
render	Создает DOM-представление элемента
remove	Удаляет элемент и его DOM-представление
isLoaded	Проверяет, готов ли элемент. Возвращает соответствующее значение

Events¶

Name	Description
onLoaded	Устанавливает обработчик события о том, что элемент был загружен.
onGotFocus	Устанавливает обработчик события о том, что элемент получил фокус ввода
onLostFocus	Устанавливает обработчик события о том, что элемент потерял фокус ввода
onBeforeClick	Устанавливает обработчик события клика мыши, который будет срабатывать при захвате события на элементе
onClick	Устанавливает обработчик события о том, что по элементу сделали одинарный клик мыши
onDoubleClick	Устанавливает обработчик события о том, что по элементу сделали двойной клик мыши
onMouseDown	Устанавливает обработчик события о том, что на элементе произвели двойное нажатие кнопкой мыши
onMouseUp	Устанавливает обработчик события о том, что на элементе отпустили кнопку мыши
onMouseWheel	Устанавливает обработчик события о том, что на элементе прокрутили колесо мыши
onMouseEnter	Устанавливает обработчик события о том, что указатель мыши вошел в границы элемента
onMouseLeave	Устанавливает обработчик события о том, что указатель мыши покинул границы элемента
onMouseMove	Устанавливает обработчик события о том, что указатель мыши двигался внутри элемента
onKeyDown	Устанавливает обработчик события о том, что на элементе нажали клавишу клавиатуры
onKeyUp	Устанавливает обработчик события о том, что на элементе отпустили клавишу клавиатуры
onPropertyChanged	Устанавливает обработчик события о том, что одно из свойств элемента изменилось

ElementBuilder¶

Базовый класс для билдеров элементов.

Parameters¶

При создании экземпляров ElementBuilder параметры не требуются.

Methods¶

Name	Description
build	Создает и настраивает элемент, по переданным метаданным

ElementBuilder.build¶

Создает и настраивает элемент, по переданным метаданным.

Parameters¶

Name	Type	Description
context	Context	Контекст представление, в котором будет находится элемент
args	`Object`	Объект со свойствами
args.metadata	`Object`	Метаданные элемента
args.parent	Element	Родительский элемент

ElementHorizontalAlignment¶

Горизонтальное выравнивание в родительском элементе.

Syntax¶

ElementHorizontalAlignment = {
  left: 'Left',
  center: 'Center',
  right: 'Right',
  stretch: 'Stretch'
}

Members¶

left

Элемент выравнивается по левому краю родительского элемента.

center

Элемент выравнивается по центру горизонтали родительского элемента.

right

Элемент выравнивается по правому краю родительского элемента.

stretch

Элемент занимает всю область родительского элемента по горизонтали.

KeyboardEvent¶

Событие от клавиатуры.

Syntax¶

new KeyboardEvent()

Properties¶

source¶

Источник события - визуальный элемент.

key¶

Возвращает код нажатой клавиши.

altKey¶

Возвращает true, если событие произошло, когда была нажата кнопка Alt, иначе - false.

ctrlKey¶

Возвращает true, если событие произошло, когда была нажата кнопка Ctrl, иначе - false.

shiftKey¶

Возвращает true, если событие произошло, когда была нажата кнопка Shift, иначе - false.

nativeEventData¶

Возвращает KeyboardEvent Object.

MouseEvent¶

Событие от мыши.

Syntax¶

new MouseEvent()

Properties¶

source¶

Источник события - визуальный элемент.

button¶

Возвращает код нажатой кнопки мыши.

altKey¶

Возвращает true, если событие произошло, когда была нажата кнопка Alt, иначе - false.

ctrlKey¶

Возвращает true, если событие произошло, когда была нажата кнопка Ctrl, иначе - false.

shiftKey¶

Возвращает true, если событие произошло, когда была нажата кнопка Shift, иначе - false.

nativeEventData¶

Возвращает MouseEvent Object.

TextHorizontalAlignment¶

Горизонтальное выравнивание текста в элементе.

Syntax¶

TextHorizontalAlignment = {
  left: 'Left',
  right: 'Right',
  center: 'Center',
  justify: 'Justify'
}

Members¶

left

Текст выравнивается по левому краю родительского элемента.

right

Текст выравнивается по правому краю родительского элемента.

center

Текст выравнивается по центру родительского элемента.

justify

Текст выравнивается по ширине родительского элемента.

Element.addChild()¶

Добавляет заданный элемент в качестве дочернего.

Description¶

Добавление элемента в список дочерних не добавляет его визуально. Связи родитель - дочерний элемент используются для построения логической иерархии элементов, котоая в итоге используется для поиска внутри иерархи, каскадного удаления элементов и др.

Syntax¶

Element.addChild(someElement)

Parameters¶

Name	Type	Description
`child`	`Element`	Элемент, добавляемый в качестве нового дочернего.

Returns¶

Метод не возвращает значений.

See Also¶

removeChild()

Element.findAllChildrenByName()¶

Возвращает список потомков (дочерних, их дочерних и т. д.) элементов с заданным именем.

Description¶

Метод возвращает список элементов с заданным именем, которые являются потомками данного элемента или его потомков. Иначе говоря, в результирующий список будут включены элементы с заданным именем со всех уровней вложенности (прямые потомки, их дочерние элементы и т.д.).

Syntax¶

Element.findAllChildrenByName(name)

Parameters¶

Name	Type	Description
value	`String`	Наименование элемента

Returns¶

Массив элементов с заданным именем, которые являются потомками данного элемента.

Examples¶

var allMyButtons = Element.findAllChildrenByName('MyButton');

Element.findAllChildrenByType()¶

Возвращает список потомков (дочерних, их дочерних и т. д.) элементов с заданным типом.

Description¶

Метод возвращает список элементов с заданным типом, которые являются потомками данного элемента или его потомков. Иначе говоря, в результирующий список будут включены элементы заданного типа со всех уровней вложенности (прямые потомки, их дочерние элементы и т.д.).

Syntax¶

Element.findAllChildrenByType(type)

Parameters¶

Name	Type	Description
`type`	`String`	Тип элемента.

Returns¶

Массив элементов с заданным типом, которые являются потомками данного элемента.

Examples¶

var allButtons = Element.findAllChildrenByType('Button');

Element.getBackground()¶

Возвращает цвет фона элемента.

Syntax¶

Element.getBackground()

Parameters¶

Нет

Returns¶

Цвет фона элемента.

Examples¶

var background = Element.getBackground();

See Also¶

Element.getChildElements()¶

Возвращает список дочерних элементов.

Description¶

Метод возвращает список элементов, которые являются непосредственными потомками данного элемента. Иначе говоря, если элемент содержит внутри себя композитный элемент, то в результирующий список будет включен только сам композитный элемент, но не будут включены его потомки.

Syntax¶

Element.getChildElements()

Parameters¶

Нет

Returns¶

Массив элементов, которые являются непосредственными потомками данного элемента.

Examples¶

var childElements = Element.getChildElements();

Element.getEnabled()¶

Возвращает значение, определяющее, возможен ли доступ к элементу или он заблокирован.

Свойство выключается каскадно, то есть, если родительский элемент заблокирован (enabled = false), то у дочерних элементов, это свойство будет автоматически выставлено в false. Когда родительский элемент будет разблокирован, дочерний вернет первоначальное значение этого свойства.

Syntax¶

Element.getEnabled()

Parameters¶

Нет

Returns¶

Логическое значение.

Examples¶

//js-demo
var textbox = new InfinniUI.TextBox();
var $textbox = textbox.render();
var enabledOfButton = textbox.getEnabled();

var buttonForToggling = new InfinniUI.Button();
var $buttonForToggling = buttonForToggling.render();

buttonForToggling.setText('Disable textbox');

$elementForExample.prepend($textbox);
$elementForExample.prepend($buttonForToggling);


buttonForToggling.onClick(function(){
    if(textbox.getEnabled() == true){
        buttonForToggling.setText('Enable textbox');
        textbox.setEnabled(false);
    }else{
        buttonForToggling.setText('Disable textbox');
        textbox.setEnabled(true);
    }
});

See Also¶

setEnabled()

Element.getFocusable()¶

Возвращает значение, определяющее, возможно ли установить фокус ввода на элемент.

Description¶

Возможность установки фокуса ввода на элемент зависит от нескольких параметров. Во-первых, от значения соответствующего свойства, которое можно установить с помощью метода setFocusable(). Во-вторых, от текущего состояния элемента. Например, элемент может быть заблокирован или скрыт, либо находится внутри контейнера, который в свою очередь заблокирован или скрыт. Наконец, некоторые элементы на уровне реализации могут запрещать установку фокуса ввода.

Вызов метода setFocused() с параметром true учитывает все вышеперечисленные аспекты и пытается установить фокус ввода на элемент. Если все проверки прошли успешно и элемент получил фокус ввода, у соответствующего элемента возникает событие onGotFocus. Следует отметить, что событие onGotFocus также может возникать и вследствие действий пользователя.

Установка фокуса ввода на элемент означает также то, что другой, ранее сфокусированный элемент, теряет фокус ввода, что в свою очередь приводит к тому, что у соответствующего элемента возникает событие onLostFocus. Событие onLostFocus также может спровоцировать вызов метода setFocused() с параметром false, если на элемент был установлен фокус ввода.

Syntax¶

Element.getFocusable()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, возможно ли установить фокус ввода на элемент. Значение true означает, что установить фокус возможно, значение false - нельзя.

Examples¶

var focusable = Element.getFocusable();

See Also¶

Element.getFocused()¶

Возвращает значение, определяющее, установлен ли фокус ввода на элемент.

Description¶

Возможность установки фокуса ввода на элемент зависит от нескольких параметров. Во-первых, от значения соответствующего свойства, которое можно установить с помощью метода setFocusable(). Во-вторых, от текущего состояния элемента. Например, элемент может быть заблокирован или скрыт, либо находится внутри контейнера, который в свою очередь заблокирован или скрыт. Наконец, некоторые элементы на уровне реализации могут запрещать установку фокуса ввода.

Вызов метода setFocused() с параметром true учитывает все вышеперечисленные аспекты и пытается установить фокус ввода на элемент. Если все проверки прошли успешно и элемент получил фокус ввода, у соответствующего элемента возникает событие onGotFocus. Следует отметить, что событие onGotFocus также может возникать и вследствие действий пользователя.

Установка фокуса ввода на элемент означает также то, что другой, ранее сфокусированный элемент, теряет фокус ввода, что в свою очередь приводит к тому, что у соответствующего элемента возникает событие onLostFocus. Событие onLostFocus также может спровоцировать вызов метода setFocused() с параметром false, если на элемент был установлен фокус ввода.

Syntax¶

Element.getFocused()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, установлен ли фокус ввода на элемент. Значение true означает, что фокус установлен, значение false - не установлен.

Examples¶

var isFocused = Element.getFocused();

See Also¶

Element.getForeground()¶

Возвращает цвет текста элемента.

Syntax¶

Element.getForeground()

Parameters¶

Нет

Returns¶

Цвет текста элемента.

Examples¶

var foreground = Element.getForeground();

See Also¶

Element.getHorizontalAlignment()¶

Возвращает горизонтальное выравнивание в родительском элементе.

Syntax¶

Element.getHorizontalAlignment()

Parameters¶

Нет

Returns¶

Горизонтальное выравнивание в родительском элементе.

Examples¶

//js-demo
var label = new InfinniUI.Label();
var $label = label.render();

var div = document.createElement("div");
div.innerHTML = label.getHorizontalAlignment();

$elementForExample.prepend(div);

See Also¶

Element.getName()¶

Возвращает наименование элемента.

Syntax¶

Element.getName()

Parameters¶

Нет

Returns¶

Наименование элемента.

Examples¶

var elementName = Element.getName();

See Also¶

Element.getParent()¶

Возвращает родительский элемент.

Description¶

Некоторые элементы могут выступать в роли контейнеров для других элементов. В этом случае контейнер называют родительским элементом, а элементы, содержащиеся внутри него, дочерними элементами. Связь дочернего элемента с родительским можно установить в момент создания дочернего элемента, передав в конструктор ссылку на родительский элемент. Если на момент создания дочернего элемента родительский элемент неизвестен, связь с родительским элементом можно установить позже, вызвав метод setParent().

Так например, в момент добавления дочернего элемента родительский элемент вызывает у дочернего метод setParent() и передает ссылку на себя. В свою очередь дочерний элемент запоминает ссылку на родителя, после чего ее можно получить, вызвав метод getParent(). Если в момент вызова метода setParent() дочерний элемент относился к другому родительскому элементу, он автоматически удаляется из старого родительского элемента.

Syntax¶

Element.getParent()

Parameters¶

Нет

Returns¶

Родительский элемент.

Examples¶

var parent = Element.getParent();

See Also¶

setParent()

Element.getProperty()¶

Возвращает значение указанного свойства элемента.

Description¶

Методы getProperty(), setProperty() и событие onPropertyChanged используются механизмом привязки данных. Вместе с этим они предоставляют универсальный унифицированный интерфейс для работы со свойствами элемента.

Syntax¶

Element.getProperty(property)

Parameters¶

Нет

Returns¶

Значение свойства.

Examples¶

var value = Element.getProperty('Visible'); // Идентично вызову Element.getVisible();

See Also¶

Element.getStyle()¶

Возвращает кастомный стиль элемента (на деле это класс, стили которого могут быть заданы в подключаемых на страницу стилях).

Syntax¶

Element.getStyle()

Parameters¶

Нет

Returns¶

Стилевой класс элемента.

Examples¶

var styleName = Element.getStyle();

See Also¶

Element.getTag()¶

Возвращает специальное значение, хранящяеся в элементе. Тег можно использовать для привязки произвольных значений к элементу.

Syntax¶

Element.getTag()

Parameters¶

Нет

Returns¶

Значение хранящяеся в элементе.

Examples¶

var value = Element.getTag();

See Also¶

setTag()

Element.getText()¶

Возвращает текст элемента (в разных потомках Element, поле text используется по разному. Например, во View это заголовок представления, а в ImageBox это текст кнопки, инициирующей выбор загружаемого изображения)

Syntax¶

Element.getText()

Parameters¶

Нет

Returns¶

Текст заголовка элемента.

Examples¶

var elementText = Element.getText();

See Also¶

setText()

Element.getTextHorizontalAlignment()¶

Возвращает горизонтальное выравнивание текста в элементе.

Syntax¶

Element.getTextHorizontalAlignment()

Parameters¶

Нет

Returns¶

Горизонтальное выравнивание текста в элементе.

Examples¶

var horizontalAlignment = Element.getTextHorizontalAlignment();

See Also¶

Element.getTextStyle()¶

Возвращает стиль текста элемента.

Syntax¶

Element.getBackground()

Parameters¶

Нет

Returns¶

Стиль текста элемента.

Examples¶

var textStyle = Element.getTextStyle();

See Also¶

Element.getToolTip()¶

Возвращает всплывающую подсказку элемента.

Syntax¶

Element.getToolTip()

Parameters¶

Нет

Returns¶

Текст или визуальный элемент, появляющийся при наведении на элемент.

Examples¶

var toolTip = Element.getToolTip();

See Also¶

setToolTip()

Element.getValidationState()¶

Возвращает валидационный статус элемента.

Syntax¶

Element.getValidationState()

Parameters¶

Нет

Returns¶

Валидационный статус элемента.

Examples¶

var validationState = Element.getValidationState();

See Also¶

setValidationState()

Element.getView()¶

Возвращает родительское представление элемента.

Syntax¶

Element.getView()

Parameters¶

Нет

Returns¶

Родительское представление элемента.

Examples¶

var parentView = someElement.getView();

See Also¶

Element.getVisible()¶

Возвращает значение, определяющее, отображается ли элемент в интерфейсе.

Syntax¶

Element.getVisible()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, отображается ли элемент в интерфейсе. Значение true означает, что элемент отображается в интерфейсе, false - элемент не отображается.

Examples¶

//js-demo
var textbox = new InfinniUI.TextBox();
var $textbox = textbox.render();
var visibleOfButton = textbox.getVisible();

var buttonForToggling = new InfinniUI.Button();
var $buttonForToggling = buttonForToggling.render();

buttonForToggling.setText('Hide textbox');

$elementForExample.prepend($textbox);
$elementForExample.prepend($buttonForToggling);


buttonForToggling.onClick(function(){
    if(textbox.getVisible() == true){
        buttonForToggling.setText('Show textbox');
        textbox.setVisible(false);
    }else{
        buttonForToggling.setText('Hide textbox');
        textbox.setVisible(true);
    }
});

See Also¶

setVisible()

Element.isLoaded()¶

Проверяет, готов ли элемент. Возвращает соответствующее значение.

Syntax¶

Element.isLoaded()

Parameters¶

Нет

Returns¶

Возвращает true, если элемент готов, иначе возвращает false.

Examples¶

var isLoaded = Element.isLoaded();

Element.metadata¶

Метаданные описывающие настройки Element.

Properties¶

Name	Type	Default	Description
Name	`String`	null	Имя элемента (строка). Желательно делать его уникальным внутри представления.
Text	`String` (⇔)(ƒ)	“”	Текст элемента. В разных потомках Element, поле text используется по разному. Например, во View это заголовок представления, а в ImageBox это текст кнопки, инициирующей выбор загружаемого изображения.
Focusable	`Boolean` (⇔)	true	Значение, определяющее, может ли элемент получить фокус.
Enabled	`Boolean` (⇔)	true	Значение, определяющее, значение, возможен ли доступ к элементу.
Visible	`Boolean` (⇔)	true	Значение, определяющее видимость элемента.
HorizontalAlignment	HorizontalAlignment (⇔)	“Stretch”	Горизонтальное выравнивание элемента.
TextHorizontalAlignment	TextHorizontalAlignment (⇔)	“Left”	Горизонтальное выравнивание внутри элемента.
Style	`String` (⇔)	“”	Имя кастомного стиля (на деле это одноименный класс, стили которого можно задать самому в подключаемых на страницу стилях)
TextStyle	TextStyle (⇔)	“”	Стиль текста элемента
Foreground	Color (⇔)	“”	Цвет текста.
Background	Color (⇔)	“”	Цвет фона.
ToolTip	`String` (ƒ), Element	null	Всплывающая над элементом подсказка.
Tag	*	null	Произвольное значение, которое можно привязать к элементу.
OnLoaded	Script	null	Устанавливает обработчик готовности элемента.
OnGotFocus	Script	null	Устанавливает обработчик получения фокуса элементом.
OnLostFocus	Script	null	Устанавливает обработчик потери фокуса у элемента.
OnClick	Script	null	Устанавливает обработчик клика мышью по элементу.
OnDoubleClick	Script	null	Устанавливает обработчик двойного клика мышью по элементу.
OnMouseDown	Script	null	Устанавливает обработчик нажатия кнопки мыши над элементом (обычный клик срабатывает после отпускания кнопки мыши).
OnMouseUp	Script	null	Устанавливает обработчик поднятия кнопки мыши над элементом (обычный клик срабатывает позже).
OnMouseWheel	Script	null	Устанавливает обработчик прокрутки скролла над элементом.
OnMouseEnter	Script	null	Устанавливает обработчик появления курсора над элементом.
OnMouseLeave	Script	null	Устанавливает обработчик выхода курсора из области элемента.
OnMouseMove	Script	null	Устанавливает обработчик движения курсора в области элемента.
OnKeyDown	Script	null	Устанавливает обработчик нажатия клавиши клавиатуры, в момент когда фокус находится на текущем элементе.
OnKeyUp	Script	null	Устанавливает обработчик поднятия клавиши клавиатуры, в момент когда фокус находится на текущем элементе.
OnPropertyChanged	Script	null	Устанавливает обработчик изменения одного из свойств элемента (value, visible и др.).

(⇔) Свойство может быть задано, как DataBinding.

(ƒ) Свойство может быть задано, как JSExpression.

Exampes¶

Создать экземпляр Element нельзя (это абстрактный класс), однако можно например создать экземпляр кнопки, которая наследуется от Element.

//infinni-ui-demo
{
    "DataSources": [
    ],
    "Items": [{
            "GridPanel": {
                "Items": [
                    {
                        "Cell": {
                            "ColumnSpan": 4,
                            "Items": [
                                {
                                    //infinni-ui-display-begin
"Button": {
    "Name": "my_button",
    "Text": "Button",
    "OnClick": "{ alert(args.source.getName()); }"
}
                                    //infinni-ui-display-end
                                }
                            ]
                        }
                    }
                ]
            }
        }
    ]
}

Element.name¶

Поле name содержит имя элемента. Свойство предназначено только для чтения.

Syntax¶

Element.name

Examples¶

var elementName = someElement.name;

See Also¶

Element.onBeforeClick¶

Устанавливает обработчик события клика мыши, который будет срабатывать при захвате события на элементе.

Syntax¶

Element.onBeforeClick(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что по элементу сделали одинарный клик мыши. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

Element.onBeforeClick(
  function(context, args) { alert('onBeforeClick'); }
);

See Also¶

Element.onClick¶

Устанавливает обработчик события о том, что по элементу сделали одинарный клик мыши.

Syntax¶

element.onClick(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что по элементу сделали одинарный клик мыши. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

element.onClick(
  function(context, args) { alert('onClick'); }
);

See Also¶

Element.onDoubleClick¶

Устанавливает обработчик события о том, что по элементу сделали двойной клик мыши.

Syntax¶

element.onDoubleClick(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что по элементу сделали двойной клик мыши. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

element.onDoubleClick(
  function(context, args) { alert('onDoubleClick'); }
);

See Also¶

Element.onGotFocus¶

Устанавливает обработчик события о том, что элемент получил фокус ввода.

Syntax¶

Element.onGotFocus(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что элемент получил фокус ввода.

Examples¶

Element.onGotFocus(
  function(context, args) { alert('Element got focus!'); }
);

See Also¶

onLostFocus

Element.onKeyDown¶

Устанавливает обработчик события о том, что на элементе нажали клавишу клавиатуры.

Syntax¶

Element.onKeyDown(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что на элементе нажали клавишу клавиатуры. В параметре `args` передается информация о произошедшем событии - объект типа KeyboardEvent.

Examples¶

Element.onKeyDown(
  function(context, args) { alert('onKeyDown'); }
);

See Also¶

Element.onKeyUp¶

Устанавливает обработчик события о том, что на элементе отпустили клавишу клавиатуры.

Syntax¶

Element.onKeyUp(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что на элементе отпустили клавишу клавиатуры. В параметре `args` передается информация о произошедшем событии - объект типа KeyboardEvent.

Examples¶

Element.onKeyUp(
  function(context, args) { alert('onKeyUp'); }
);

See Also¶

Element.onLoaded¶

Устанавливает обработчик события о том, что элемент был загружен.

Syntax¶

Element.onLoaded(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что элемент был загружен.

Examples¶

Element.onLoaded(
  function(context, args) { alert('Element is loaded!'); }
);

Element.onLostFocus¶

Устанавливает обработчик события о том, что элемент потерял фокус ввода.

Syntax¶

Element.onLostFocus(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что элемент потерял фокус ввода.

Examples¶

Element.onLostFocus(
  function(context, args) { alert('Element lost focus!'); }
);

See Also¶

onGotFocus

Element.onMouseDown¶

Устанавливает обработчик события о том, что на элементе нажали кнопку мыши.

Syntax¶

Element.onMouseDown(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что на элементе нажали кнопку мыши. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

Element.onMouseDown(
  function(context, args) { alert('onMouseDown'); }
);

See Also¶

Element.onMouseEnter¶

Устанавливает обработчик события о том, что указатель мыши вошел в границы элемента.

Syntax¶

Element.onMouseEnter(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что указатель мыши вошел в границы элемента. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

Element.onMouseEnter(
  function(context, args) { alert('onMouseEnter'); }
);

See Also¶

Element.onMouseLeave¶

Устанавливает обработчик события о том, что указатель мыши покинул границы элемента.

Syntax¶

Element.onMouseLeave(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что указатель мыши покинул границы элемента. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

Element.onMouseLeave(
  function(context, args) { alert('onMouseLeave'); }
);

See Also¶

Element.onMouseMove¶

Устанавливает обработчик события о том, что указатель мыши двигался внутри элемента.

Syntax¶

Element.onMouseMove(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что указатель мыши двигался внутри элемента. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

Element.onMouseMove(
  function(context, args) { alert('onMouseMove'); }
);

See Also¶

Element.onMouseUp¶

Устанавливает обработчик события о том, что на элементе отпустили кнопку мыши.

Syntax¶

Element.onMouseUp(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что на элементе отпустили кнопку мыши. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

Element.onMouseUp(
  function(context, args) { alert('onMouseUp'); }
);

See Also¶

Element.onMouseWheel¶

Устанавливает обработчик события о том, что на элементе прокрутили колесо мыши.

Syntax¶

Element.onMouseWheel(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что на элементе прокрутили колесо мыши. В параметре `args` передается информация о произошедшем событии - объект типа MouseEvent.

Examples¶

Element.onMouseWheel(
  function(context, args) { alert('onMouseWheel'); }
);

See Also¶

Element.onPropertyChanged¶

Устанавливает обработчик события о том, что одно из свойств элемента изменилось.

Description¶

Методы getProperty(), setProperty() и событие onPropertyChanged используются механизмом привязки данных. Вместе с этим они предоставляют универсальный унифицированный интерфейс для работы со свойствами элемента.

Syntax¶

Element.onPropertyChanged(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что одно из свойств элемента изменилось. В параметре `args` передается информация о произошедшем событии. Свойство `property` содержит путь к свойству, `argument.oldValue` - предыдущее значение, `argument.newValue` - новое значение.

Examples¶

Element.onPropertyChanged(
  function(context, args) { alert('Property ' + args.property + ' is changed!'); }
);

See Also¶

Element.remove()¶

Удаляет элемент и его DOM-представление.

Syntax¶

Element.remove()

Parameters¶

Нет

Returns¶

Метод не возвращает значений.

Examples¶

someElement.remove();

Element.removeChild()¶

Удаляет заданный элемент из списка дочерних.

Description¶

Удаление элемента из списка дочерних не удалит его визуально. Связи родитель - дочерний элемент используются для построения логической иерархии элементов, котоая в итоге используется для поиска внутри иерархи, каскадного удаления элементов и др.

Syntax¶

Element.removeChild(someElement)

Parameters¶

Name	Type	Description
`child`	`Element`	Удаляемый элемент из списка дочерних элементов.

Returns¶

Метод не возвращает значений.

See Also¶

addChild()

Element.render()¶

Создает DOM-представление элемента.

Syntax¶

Element.render()

Parameters¶

Нет

Returns¶

DOM-представление элемента.

Examples¶

var $element = someElement.render();

Element.setBackground()¶

Устанавливает цвет фона элемента.

Syntax¶

Element.setBackground(value)

Parameters¶

Name	Type	Description
value	`String`	Цвет фона элемента.

Examples¶

Element.setBackground(ColorStyle.primary1);

See Also¶

Element.setEnabled()¶

Устанавливает значение, определяющее, возможен ли доступ к элементу или он заблокирован.

Syntax¶

Element.setEnabled(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Логическое значение, определяющее, возможен ли доступ к элементу или он заблокирован.

Returns¶

undefined

Examples¶

Element.setEnabled(true);

See Also¶

getEnabled()

Element.setFocusable()¶

Устанавливает значение, определяющее, возможно ли установить фокус ввода на элемент.

Description¶

Возможность установки фокуса ввода на элемент зависит от нескольких параметров. Во-первых, от значения соответствующего свойства, которое можно установить с помощью метода setFocusable(). Во-вторых, от текущего состояния элемента. Например, элемент может быть заблокирован или скрыт, либо находится внутри контейнера, который в свою очередь заблокирован или скрыт. Наконец, некоторые элементы на уровне реализации могут запрещать установку фокуса ввода.

Вызов метода setFocused() с параметром true учитывает все вышеперечисленные аспекты и пытается установить фокус ввода на элемент. Если все проверки прошли успешно и элемент получил фокус ввода, у соответствующего элемента возникает событие onGotFocus. Следует отметить, что событие onGotFocus также может возникать и вследствие действий пользователя.

Установка фокуса ввода на элемент означает также то, что другой, ранее сфокусированный элемент, теряет фокус ввода, что в свою очередь приводит к тому, что у соответствующего элемента возникает событие onLostFocus. Событие onLostFocus также может спровоцировать вызов метода setFocused() с параметром false, если на элемент был установлен фокус ввода.

Syntax¶

Element.setFocusable(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Логическое значение, определяющее, возможно ли установить фокус ввода на элемент. Значение `true` означает, что установить фокус возможно, значение `false` - нельзя.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setFocusable(true);

See Also¶

Element.setFocused()¶

Устанавливает значение, определяющее, установлен ли фокус ввода на элемент.

Description¶

Возможность установки фокуса ввода на элемент зависит от нескольких параметров. Во-первых, от значения соответствующего свойства, которое можно установить с помощью метода setFocusable(). Во-вторых, от текущего состояния элемента. Например, элемент может быть заблокирован или скрыт, либо находится внутри контейнера, который в свою очередь заблокирован или скрыт. Наконец, некоторые элементы на уровне реализации могут запрещать установку фокуса ввода.

Вызов метода setFocused() с параметром true учитывает все вышеперечисленные аспекты и пытается установить фокус ввода на элемент. Если все проверки прошли успешно и элемент получил фокус ввода, у соответствующего элемента возникает событие onGotFocus. Следует отметить, что событие onGotFocus также может возникать и вследствие действий пользователя.

Установка фокуса ввода на элемент означает также то, что другой, ранее сфокусированный элемент, теряет фокус ввода, что в свою очередь приводит к тому, что у соответствующего элемента возникает событие onLostFocus. Событие onLostFocus также может спровоцировать вызов метода setFocused() с параметром false, если на элемент был установлен фокус ввода.

Syntax¶

Element.setFocused(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Логическое значение, определяющее, установлен ли фокус ввода на элемент. Значение `true` означает, что фокус установлен, значение `false` - не установлен.

Returns¶

Логическое значение, определяющее, успешность выполнения операции. Значение true означает, что метод выполнен успешно, значение false - не успешно.

Examples¶

var success = Element.setFocused(true);

See Also¶

Element.setForeground()¶

Устанавливает цвет текста элемента.

Syntax¶

Element.setForeground(value)

Parameters¶

Name	Type	Description
value	`String`	Цвет текста элемента.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setForeground(ColorStyle.primary1);

See Also¶

Element.setHorizontalAlignment()¶

Устанавливает горизонтальное выравнивание в родительском элементе.

Syntax¶

Element.setHorizontalAlignment(value)

Parameters¶

Name	Type	Description
value	`String`	Горизонтальное выравнивание в родительском элементе.

Returns¶

Метод не возвращает значений.

Examples¶

label.setHorizontalAlignment('Center');

See Also¶

Element.setName()¶

Устанавливает наименование элемента.

Syntax¶

Element.setName(value)

Parameters¶

Name	Type	Description
value	`String`	Наименование элемента

Returns¶

Метод не возвращает значений.

Examples¶

Element.setName('button1');

See Also¶

Element.setParent()¶

Устанавливает родительский элемент.

Description¶

Некоторые элементы могут выступать в роли контейнеров для других элементов. В этом случае контейнер называют родительским элементом, а элементы, содержащиеся внутри него, дочерними элементами. Связь дочернего элемента с родительским можно установить в момент создания дочернего элемента, передав в конструктор ссылку на родительский элемент. Если на момент создания дочернего элемента родительский элемент неизвестен, связь с родительским элементом можно установить позже, вызвав метод setParent().

Так например, в момент добавления дочернего элемента родительский элемент вызывает у дочернего метод setParent() и передает ссылку на себя. В свою очередь дочерний элемент запоминает ссылку на родителя, после чего ее можно получить, вызвав метод getParent(). Если в момент вызова метода setParent() дочерний элемент относился к другому родительскому элементу, он автоматически удаляется из старого родительского элемента.

Syntax¶

Element.setParent(value)

Parameters¶

Name	Type	Description
value	элемент	Родительский элемент.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setParent(parent);

See Also¶

getParent()

Element.setProperty()¶

Устанавливает значение указанного свойства элемента.

Description¶

Методы getProperty(), setProperty() и событие onPropertyChanged используются механизмом привязки данных. Вместе с этим они предоставляют универсальный унифицированный интерфейс для работы со свойствами элемента.

Syntax¶

Element.setProperty(property, value)

Parameters¶

Name	Type	Description
property	`String`	Путь к свойству.
value	*	Значение свойства.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setProperty('Visible', true); // Идентично Element.setVisible(true);

See Also¶

Element.setStyle()¶

Устанавливает элементу кастомный стиль (на деле устанавливает ему одноименный класс, стили которого можно задать самому в подключаемых на страницу стилях). Этот способ кастомизации внешнего вида череват разными последствиями, поскольку примененные к классу css-правила могут противоречить правилам задуманным InfinniUI, в следствии чего верстка может “поехать” неожиданным образом. Следует применять эту возможность как можно реже и как можно аккуратнее

Syntax¶

Element.setStyle(value)

Parameters¶

Name	Type	Description
value	`String`	Стилевой класс элемента.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setStyle('toolbar_button');

See Also¶

Element.setTag()¶

Устанавливает специальное значение. Оно может быть любого типа. Тег можно использовать для привязки произвольных значений к элементу.

Syntax¶

Element.setTag(value);

Parameters¶

Name	Type	Description
value	*	Произвольное значение, которое будет привязано к элементу.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setTag({a:1});

See Also¶

getTag()

Element.setText()¶

Устанавливает текст элемента.

Syntax¶

Element.setText(value)

Parameters¶

Name	Type	Description
value	`String`	Текст элемента.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setText('Text');

See Also¶

getText()

Element.setTextHorizontalAlignment()¶

Устанавливает горизонтальное выравнивание текста в элементе.

Syntax¶

Element.setTextHorizontalAlignment(value)

Parameters¶

Name	Type	Description
value	TextHorizontalAlignment	Горизонтальное выравнивание текста в элементе

Returns¶

Метод не возвращает значений

Examples¶

Element.setTextHorizontalAlignment(InfinniUI.TextHorizontalAlignment.left);

See Also¶

Element.setTextStyle()¶

Устанавливает стиль текста элемента.

Syntax¶

Element.setTextStyle(value)

Parameters¶

Name	Type	Description
value	`String`	Стиль текста элемента.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setTextStyle(TextStyle.body1);

See Also¶

Element.setToolTip()¶

Устанавливает всплывающую подсказку элемента.

Syntax¶

Element.setToolTip(value)

Parameters¶

Name	Type	Description
value	`String`/Element	Текст или визуальный элемент, появляющийся при наведении на элемент

Returns¶

Метод не возвращает значений

Examples¶

var toolTip = new Label();
toolTip.setValue('Help text');
Element.setToolTip(toolTip);

See Also¶

getToolTip()

Element.setValidationState()¶

Устанавливает заданный валидационный статус и валидационное сообщение.

Syntax¶

Element.setValidationState(state, message)

Parameters¶

Name	Type	Description
state	`String`	Валидационный статус. Может принимать значения: ‘success’, ‘warning’, ‘error’
message	`String`	Валидационное сообщение

Returns¶

Метод не возвращает значений.

Examples¶

Element.setValidationState('error', 'Last name is a required field');

See Also¶

getValidationState()

Element.setVisible()¶

Устанавливает значение, определяющее, отображается ли элемент в интерфейсе.

Syntax¶

Element.setVisible(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Логическое значение, определяющее, отображается ли элемент в интерфейсе. Значение `true` означает, что элемент отображается в интерфейсе, `false` - элемент не отображается.

Returns¶

Метод не возвращает значений.

Examples¶

Element.setVisible(true);

See Also¶

getVisible()

Element.metadata¶

Метаданные описывающие настройки Element.

Properties¶

Name	Type	Default	Description
Name	`String`	null	Имя элемента (строка). Желательно делать его уникальным внутри представления.
Text	`String` (⇔)(ƒ)	“”	Текст элемента. В разных потомках Element, поле text используется по разному. Например, во View это заголовок представления, а в ImageBox это текст кнопки, инициирующей выбор загружаемого изображения.
Focusable	`Boolean` (⇔)	true	Значение, определяющее, может ли элемент получить фокус.
Enabled	`Boolean` (⇔)	true	Значение, определяющее, значение, возможен ли доступ к элементу.
Visible	`Boolean` (⇔)	true	Значение, определяющее видимость элемента.
HorizontalAlignment	HorizontalAlignment (⇔)	“Stretch”	Горизонтальное выравнивание элемента.
TextHorizontalAlignment	TextHorizontalAlignment (⇔)	“Left”	Горизонтальное выравнивание внутри элемента.
Style	`String` (⇔)	“”	Имя кастомного стиля (на деле это одноименный класс, стили которого можно задать самому в подключаемых на страницу стилях)
TextStyle	TextStyle (⇔)	“”	Стиль текста элемента
Foreground	Color (⇔)	“”	Цвет текста.
Background	Color (⇔)	“”	Цвет фона.
ToolTip	`String` (ƒ), Element	null	Всплывающая над элементом подсказка.
Tag	*	null	Произвольное значение, которое можно привязать к элементу.
OnLoaded	Script	null	Устанавливает обработчик готовности элемента.
OnGotFocus	Script	null	Устанавливает обработчик получения фокуса элементом.
OnLostFocus	Script	null	Устанавливает обработчик потери фокуса у элемента.
OnClick	Script	null	Устанавливает обработчик клика мышью по элементу.
OnDoubleClick	Script	null	Устанавливает обработчик двойного клика мышью по элементу.
OnMouseDown	Script	null	Устанавливает обработчик нажатия кнопки мыши над элементом (обычный клик срабатывает после отпускания кнопки мыши).
OnMouseUp	Script	null	Устанавливает обработчик поднятия кнопки мыши над элементом (обычный клик срабатывает позже).
OnMouseWheel	Script	null	Устанавливает обработчик прокрутки скролла над элементом.
OnMouseEnter	Script	null	Устанавливает обработчик появления курсора над элементом.
OnMouseLeave	Script	null	Устанавливает обработчик выхода курсора из области элемента.
OnMouseMove	Script	null	Устанавливает обработчик движения курсора в области элемента.
OnKeyDown	Script	null	Устанавливает обработчик нажатия клавиши клавиатуры, в момент когда фокус находится на текущем элементе.
OnKeyUp	Script	null	Устанавливает обработчик поднятия клавиши клавиатуры, в момент когда фокус находится на текущем элементе.
OnPropertyChanged	Script	null	Устанавливает обработчик изменения одного из свойств элемента (value, visible и др.).

(⇔) Свойство может быть задано, как DataBinding.

(ƒ) Свойство может быть задано, как JSExpression.

Exampes¶

Создать экземпляр Element нельзя (это абстрактный класс), однако можно например создать экземпляр кнопки, которая наследуется от Element.

//infinni-ui-demo
{
    "DataSources": [
    ],
    "Items": [{
            "GridPanel": {
                "Items": [
                    {
                        "Cell": {
                            "ColumnSpan": 4,
                            "Items": [
                                {
                                    //infinni-ui-display-begin
"Button": {
    "Name": "my_button",
    "Text": "Button",
    "OnClick": "{ alert(args.source.getName()); }"
}
                                    //infinni-ui-display-end
                                }
                            ]
                        }
                    }
                ]
            }
        }
    ]
}

View¶

Визуальное представление.

Description¶

Визуальное представление - программный объект, который может быть отображен на экране и представляет собой контейнер взаимосвязанных друг с другом визуальных и невизуальных элементов. Визуальное представление расширяет базовый тип контейнера элементов, таким образом, одно представление может являться частью другого.

Extends¶

Коллекция источников данных представления.

Syntax¶

new View(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getContext	Возвращает контекст представления
getScripts	Возвращает коллекцию скриптов представления
getParameters	Возвращает коллекцию параметров представления
getDataSources	Возвращает коллекцию источников данных представления
getDialogResult	Возвращает результат работы представления
setDialogResult	Устанавливает результат работы представления
open	Открывает представление
close	Закрывает представление
setOpenStrategy	Устанавливает стратегию отображения представления
getHeaderTemplate	Возвращает функцию шаблонизации заголовка представления
setHeaderTemplate	Устанавливает функцию шаблонизации заголовка представления
getCloseButtonVisibility	Возвращает флаг видимости кнопки закрытия
setCloseButtonVisibility	Устанавливает флаг видимости кнопки закрытия
getApplicationView	Возвращает корневое представление
getFocusOnControl	Возвращает имя элемента представления, который получит фокус при открытии представления
setFocusOnControl	Устанавливает имя элемента представления, который получит фокус при открытии представления

Events¶

Name	Description
onOpening	Устанавливает обработчик события о том, что представление открывается
onOpened	Устанавливает обработчик события о том, что представление было открыто
onClosing	Устанавливает обработчик события о том, что представление закрывается
onClosed	Устанавливает обработчик события о том, что представление было закрыто
onBeforeLoaded	Устанавливает обработчик события о том, что представление было загружено. Данный обработчик сработает до onLoaded

DialogResult¶

Результат работы диалогового окна.

Syntax¶

DialogResult = {
  none: 0,
  accepted: 1,
  canceled: 2
}

Members¶

Name	Description
none	Не определен
accepted	Пользователь подтвердил диалог
canceled	Пользователь отменил диалог

See Also¶

DialogResult¶

View.close()¶

Закрывает представление.

Description¶

Вызов метода close приводит к возникновению события onClosing. Представление будет закрыто, если нет ни одного обработчика, подписанного на событие onClosing, либо если все обработчики этого события вернули значение, отличное от false. Закрытие представления приводит к возникновению события onClosed. В обработчике события onClosed можно зарегистрировать факт закрытия представления.

Syntax¶

view.close(success, error)

Parameters¶

Name	Type	Description
success	Script	Обработчик события о том, что представление закрыто
error	Script	Обработчик события о том, что при закрытии произошла ошибка

Returns¶

Метод ничего не возвращает.

Examples¶

view.close();

See Also¶

View.getApplicationView()¶

Возвращает корневое представление, т.е. представление, у которого нет родительского элемента.

Syntax¶

view.getApplicationView()

Parameters¶

Нет

Returns¶

Корневое представление.

Examples¶

var rootView = view.getApplicationView();

View.getCloseButtonVisibility()¶

Возвращает флаг видимости кнопки закрытия. Кнопка закрытия отображается, когда представление открывается в режиме диалога. По умолчанию она является видимой.

Syntax¶

view.getCloseButtonVisibility()

Parameters¶

Нет

Returns¶

Флаг видимости кнопки закрытия.

Examples¶

var closeButtonVisibility = view.getCloseButtonVisibility();

See Also¶

setCloseButtonVisibility()

View.getContext()¶

Возвращает контекст представления.

Syntax¶

view.getContext()

Parameters¶

Нет

Returns¶

Контекст представления.

Examples¶

var viewContext = view.getContext();

See Also¶

ViewContext

View.getDataSources()¶

Возвращает коллекцию источников данных представления.

Syntax¶

view.getDataSources()

Parameters¶

Нет

Returns¶

Examples¶

var myDataSource = new ObjectDataSource(View);
myDataSource.setName('myDataSource');

var dataSources = view.getDataSources();
dataSources.add(myDataSource);

var myDataSource2 = dataSources.getById('myDataSource'); // myDataSource2 === myDataSource

See Also¶

View.getDialogResult()¶

Возвращает результат работы представления.

Syntax¶

view.getDialogResult()

Parameters¶

Нет

Returns¶

Результат работы представления.

Examples¶

var dialogResult = view.getDialogResult();

See Also¶

View.getFocusOnControl¶

Возвращает имя элемента представления, который получит фокус при открытии представления.

Syntax¶

view.getFocusOnControl()

Parameters¶

Нет

Returns¶

Имя элемента представления, который получит фокус при открытии представления.

See Also¶

setFocusOnControl()

View.getHeaderTemplate()¶

Возвращает функцию шаблонизации заголовка представления. Данный шаблон используется для создания заголовка в случае, когда представление открывается в режиме диалога.

Syntax¶

view.getHeaderTemplate()

Parameters¶

Нет

Returns¶

Функция шаблонизации заголовка представления.

Examples¶

var headerTemplate = view.getHeaderTemplate();

See Also¶

setHeaderTemplate()

View.getParameters()¶

Возвращает коллекцию параметров представления.

Syntax¶

view.getParameters()

Parameters¶

Нет

Returns¶

Коллекция параметров представления.

Examples¶

var myParameter = new Parameter({view: parentView});
myParameter.setName('myParameter');
myParameter.setValue(123);

var parameters = parentView.getParameters();
parameters.add(myParameter);
var myParameter2 = parameters.getById('myParameter'); // myParameter2 === myParameter

myParameter2.getValue(); // 123

See Also¶

View.getScripts()¶

Возвращает коллекцию скриптов представления.

Syntax¶

view.getScripts()

Parameters¶

Нет

Returns¶

Коллекция скриптов представления. Каждый элемент коллекции представлен объектом с двумя свойствами: name и func. Свойство name содержит наименование скрипта, func - указатель на функцию скрипта. Использование данных свойств подразумевает только чтение.

Examples¶

var myScript = function() { alert('Hello!'); };

var scripts = view.getScripts();
scripts.add({ name: 'myScript', func: myScript });
var myScript2 = scripts.getById('myScript'); // myScript2 === myScript

myScript2(); // alert('Hello!');

See Also¶

View.metadata¶

Метаданные типа View.

Properties¶

Name	Type	Default	Description
Scripts	`Array`	–	Коллекция скриптов представления
Parameters	`Array`	–	Коллекция параметров представления
DataSources	`Array`	–	Коллекция источников данных представления
HeaderTemplate	ElementMetadata	–	Шаблон заголовка представления
CloseButtonVisibility	`Boolean`	true	Флаг видимости кнопки закрытия
NotificationSubsriptions	`Object`	–	Объект подписок для signalR
OnOpening	Script	–	Обработчик события о том, что представление открывается
OnOpened	Script	–	Обработчик события о том, что представление было открыто
OnClosing	Script	–	Обработчик события о том, что представление закрывается
OnClosed	Script	–	Обработчик события о том, что представление было закрыто

Examples¶

{
  "View": {
    "CloseButtonVisibility": false,
    "NotificationSubsriptions": {
      "routingKey1": "{ console.log( args.message ) }",
      "routingKey2": "{ console.log( args.message ) }",
      "routingKey3": "{ console.log( args.message ) }"
    },
    "HeaderTemplate": {
      "StackPanel": {
        "Items": [
          {
            "ToolBar": {
              "Items": [
                {
                  "ToolBarButton": {
                    "ContentTemplate": {
                      "Icon": {
                        "Value": "times"
                      }
                    },
                    "Name": "CloseButton",
                    "OnClick": "{context.view.close();}"
                  }
                }
              ]
            }
          },
          {
            "StackPanel": {
              "Items": [
                {
                  "Icon": {
                    "Value": "pencil"
                  }
                },
                {
                  "Label": {
                    "Text": "EditView"
                  }
                }
              ]
            }
          }
        ]
      }
    },

    "DataSources": [
      {
        "ObjectDataSource": {
          "Name": "MainDataSource",
          "Items": [
            {}
          ]
        }
        }
    ],

    "Scripts": [
      {
        "Name": "OnOpened",
        "Body": "alert('Hi!');"
        }
    ],

    "OnOpened": {
        "Name": "OnOpened"
    },

    "Items": [
      {
        "Label": {
          "Text": "ViewBody"
        }
      }
    ]
  }
}

View.onBeforeLoaded¶

Устанавливает обработчик события о том, что представление представление было загружено. Данный обработчик сработает до onLoaded.

Syntax¶

view.onBeforeLoaded(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что представление было загружено

Examples¶

view.onBeforeLoaded(
  function(context, argument) { alert('View is loaded! (1)'); }
);

view.onLoaded(
  function(context, argument) { alert('View is loaded! (2)'); }
);

See Also¶

onLoaded

View.onClosed¶

Устанавливает обработчик события о том, что представление было закрыто.

Description¶

Вызов метода close() приводит к возникновению события onClosing. Представление будет закрыто, если нет ни одного обработчика, подписанного на событие onClosing, либо если все обработчики этого события вернули значение, отличное от false. Закрытие представления приводит к возникновению события onClosed. В обработчике события onClosed можно зарегистрировать факт закрытия представления.

Syntax¶

view.onClosed(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что представление было закрыто

Examples¶

view.onClosed(
  function(context, argument) { alert('View is closed!'); }
);

See Also¶

View.onClosing¶

Устанавливает обработчик события о том, что представление закрывается.

Description¶

Вызов метода close() приводит к возникновению события onClosing. Представление будет закрыто, если нет ни одного обработчика, подписанного на событие onClosing, либо если все обработчики этого события вернули значение, отличное от false. Закрытие представления приводит к возникновению события onClosed. В обработчике события onClosed можно зарегистрировать факт закрытия представления.

Syntax¶

view.onClosing(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что представление закрывается

Examples¶

view.onClosing(
  function(context, argument) { alert('View is closing!'); }
);

See Also¶

View.onOpened¶

Устанавливает обработчик события о том, что представление было открыто.

Description¶

Вызов метода open() приводит к возникновению события onOpening. Представление будет открыто, если нет ни одного обработчика, подписанного на событие onOpening, либо если все обработчики этого события вернули значение, отличное от false. Открытие представления приводит к возникновению события onOpened. В обработчике события onOpened можно зарегистрировать факт открытия представления.

Syntax¶

view.onOpened(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что представление было открыто

Examples¶

view.onOpened(
  function(context, argument) { alert('View is opened!'); }
);

See Also¶

View.onOpening¶

Устанавливает обработчик события о том, что представление открывается.

Description¶

Вызов метода open() приводит к возникновению события onOpening. Представление будет открыто, если нет ни одного обработчика, подписанного на событие onOpening, либо если все обработчики этого события вернули значение, отличное от false. Открытие представления приводит к возникновению события onOpened. В обработчике события onOpened можно зарегистрировать факт открытия представления.

Syntax¶

view.onOpening(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что представление открывается

Examples¶

view.onOpening(
  function(context, argument) { alert('View is opening!'); }
);

See Also¶

View.open()¶

Открывает представление.

Description¶

Вызов метода open приводит к возникновению события onOpening. Представление будет открыто, если нет ни одного обработчика, подписанного на событие onOpening, либо если все обработчики этого события вернули значение, отличное от false. Открытие представления приводит к возникновению события onOpened. В обработчике события onOpened можно зарегистрировать факт открытия представления.

Syntax¶

view.open(success, error)

Parameters¶

Name	Type	Description
success	Script	Обработчик события о том, что представление открыто
error	Script	Обработчик события о том, что при открытии произошла ошибка

Returns¶

Метод ничего не возвращает.

Examples¶

view.open();

See Also¶

View.setCloseButtonVisibility()¶

Устанавливает флаг видимости кнопки закрытия. Кнопка закрытия отображается, когда представление открывается в режиме диалога. По умолчанию она является видимой.

Syntax¶

view.setCloseButtonVisibility(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Флаг видимости кнопки закрытия

Returns¶

Метод ничего не возвращает.

Examples¶

view.setOpenStrategy(new OpenModeDialogStrategy());
view.setCloseButtonVisibility(false);

See Also¶

getCloseButtonVisibility()

View.setDialogResult()¶

Устанавливает результат работы представления.

Syntax¶

view.setDialogResult(value)

Parameters¶

Name	Type	Description
value	DialogResult	Результат работы представления

Returns¶

Метод ничего не возвращает.

Examples¶

view.setDialogResult(DialogResult.accepted);

See Also¶

View.setFocusOnControl¶

Устанавливает имя элемента представления, который получит фокус при открытии представления

Syntax¶

view.setFocusOnControl(value)

Parameters¶

Name	Type	Description
`value`	`string`	Имя элемента представления, который получит фокус при открытии представления.

Returns¶

Нет.

See Also¶

getFocusOnControl()

View.setHeaderTemplate()¶

Устанавливает функцию шаблонизации заголовка представления. Данный шаблон используется для создания заголовка в случае, когда представление открывается в режиме диалога.

Syntax¶

view.setHeaderTemplate(value)

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации заголовка представления

Returns¶

Метод ничего не возвращает.

Examples¶

var headerTemplate = function (context, args) {
    var label = new Label();
    label.setValue('New title');
    return label;
}

view.setOpenStrategy(new OpenModeDialogStrategy());
view.setHeaderTemplate(headerTemplate);

See Also¶

getHeaderTemplate()

View.setOpenStrategy()¶

Устанавливает стратегию отображения представления.

Syntax¶

view.setOpenStrategy(strategy)

Parameters¶

Name	Type	Description
strategy	OpenMode	Стратегия отображения представления

Returns¶

Метод ничего не возвращает.

Examples¶

view.setOpenStrategy(new OpenModeDialogStrategy());

See Also¶

OpenMode

View.metadata¶

Метаданные типа View.

Properties¶

Name	Type	Default	Description
Scripts	`Array`	–	Коллекция скриптов представления
Parameters	`Array`	–	Коллекция параметров представления
DataSources	`Array`	–	Коллекция источников данных представления
HeaderTemplate	ElementMetadata	–	Шаблон заголовка представления
CloseButtonVisibility	`Boolean`	true	Флаг видимости кнопки закрытия
NotificationSubsriptions	`Object`	–	Объект подписок для signalR
OnOpening	Script	–	Обработчик события о том, что представление открывается
OnOpened	Script	–	Обработчик события о том, что представление было открыто
OnClosing	Script	–	Обработчик события о том, что представление закрывается
OnClosed	Script	–	Обработчик события о том, что представление было закрыто

Examples¶

{
  "View": {
    "CloseButtonVisibility": false,
    "NotificationSubsriptions": {
      "routingKey1": "{ console.log( args.message ) }",
      "routingKey2": "{ console.log( args.message ) }",
      "routingKey3": "{ console.log( args.message ) }"
    },
    "HeaderTemplate": {
      "StackPanel": {
        "Items": [
          {
            "ToolBar": {
              "Items": [
                {
                  "ToolBarButton": {
                    "ContentTemplate": {
                      "Icon": {
                        "Value": "times"
                      }
                    },
                    "Name": "CloseButton",
                    "OnClick": "{context.view.close();}"
                  }
                }
              ]
            }
          },
          {
            "StackPanel": {
              "Items": [
                {
                  "Icon": {
                    "Value": "pencil"
                  }
                },
                {
                  "Label": {
                    "Text": "EditView"
                  }
                }
              ]
            }
          }
        ]
      }
    },

    "DataSources": [
      {
        "ObjectDataSource": {
          "Name": "MainDataSource",
          "Items": [
            {}
          ]
        }
        }
    ],

    "Scripts": [
      {
        "Name": "OnOpened",
        "Body": "alert('Hi!');"
        }
    ],

    "OnOpened": {
        "Name": "OnOpened"
    },

    "Items": [
      {
        "Label": {
          "Text": "ViewBody"
        }
      }
    ]
  }
}

LinkView¶

Объект, который создает и настраивает представление.

Syntax¶

new LinkView(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getOpenMode	Возвращает название стратегии отображения представления
setOpenMode	Устанавливает название стратегии отображения представления
setViewTemplate	Устанавливает функцию шаблонизации представления
createView	Создает представление
setDialogWidth	Устанавливает ширину диалогового окна (для случая OpenMode = ‘Dialog’)
setContainer	Устанавливает название контейнера (для случая OpenMode = ‘Container’)

Events¶

Нет

LinkView.metadata¶

Метаданные LinkView можно задать с помощью

AutoView¶

Метаданные типа LinkView. Позволяет задать содержимое представления, указав путь (названия конфигурации и документа, где хранится представление, и название представления) до соответсвующий метаданных.

Properties¶

Name	Type	Default	Description
OpenMode	`String`	‘Default’	Название стратегии отображения представления
DialogWidth	`String`	–	Ширина диалогового окна (актуально в случае OpenMode = ‘Dialog’)
Container	`String`	–	Название контейнера (актуально в случае OpenMode = ‘Container’)
Path	`String`	–	Путь до метаданных. Полный путь до метаданных будет выглядеть так: InfinniUI.config.serverUrl + ‘/’ + Path.
Parameters	`Array`	–	Коллекция параметров представления

Examples¶

{
    "LinkView": {
        "AutoView": {
            "OpenMode": "Dialog",
            "DialogWidth": "Small",
            "Path": "content/metadata/Views/PersonalAccount/EditView.json",
            "Parameters": [
                {
                    "Name": "RefreshInfo",
                    "Value": true
                }
            ]
        }
    }
}

InlineView¶

Метаданные типа LinkView. Позволяет задать содержимое представления с помощью метаданных.

Properties¶

Name	Type	Default	Description
OpenMode	`String`	‘Default’	Название стратегии отображения представления
DialogWidth	`String`	–	Ширина диалогового окна (актуально в случае OpenMode = ‘Dialog’)
Container	`String`	–	Название контейнера (актуально в случае OpenMode = ‘Container’)
View*	`Object`	–	Шаблон содержимого представления

* Обязательное свойство.

Examples¶

{
    "LinkView": {
        "InlineView": {
            "OpenMode": "Container",
            "Container": "CenterPanel",
            "View": {
                "Items": [
                    {
                        "Label": {
                            "Text": "InlineView"
                        }
                    }
                ]
            }
        }
    }
}

LinkView.metadata¶

Метаданные LinkView можно задать с помощью

LinkView.createView()¶

Создает представление.

Syntax¶

linkView.createView(callback)

Parameters¶

Name	Type	Description
callback	Script	Обработчик события о том, что представление было создано

Созданное представление передается в качестве аргумента в callback.

Returns¶

Метод ничего не возвращает.

Examples¶

var onViewReady = function(createdView){
    createdView.open();
}

linkView.createView(onViewReady);

LinkView.getOpenMode()¶

Возвращает режим отображения представления.

Syntax¶

linkView.getOpenMode()

Parameters¶

Нет

Returns¶

Режим отображения представления.

Examples¶

var openMode = linkView.getOpenMode();

See Also¶

LinkView.setContainer()¶

Устанавливает название контейнера (для случая OpenMode = ‘Container’).

Syntax¶

linkView.setContainer(value)

Parameters¶

Name	Type	Description
value	`String`	Название контейнера

Returns¶

Метод ничего не возвращает.

Examples¶

linkView.setOpenMode('Container');
linkView.setContainer('Footer');

See Also¶

LinkView.setDialogWidth()¶

Устанавливает ширину диалогового окна (для случая OpenMode = ‘Dialog’).

Syntax¶

linkView.setDialogWidth(value)

Parameters¶

Name	Type	Description
value	`String`	Ширина диалогового окна

Возможные значения:

Small
Middle
Large
ExtraLarge

По умолчанию диалоговое окно имеет ширину Middle.

Returns¶

Метод ничего не возвращает.

Examples¶

linkView.setOpenMode('Dialog');
linkView.setDialogWidth('Large');

See Also¶

LinkView.setOpenMode()¶

Устанавливает режим отображения представления.

Syntax¶

linkView.setOpenMode(value)

Parameters¶

Name	Type	Description
value	`String`	Режим отображения представления

Returns¶

Метод ничего не возвращает.

Examples¶

linkView.setOpenMode('Dialog');

See Also¶

LinkView.setViewTemplate()¶

Устанавливает функцию шаблонизации представления.

Syntax¶

linkView.setViewTemplate(value)

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации заголовка представления

Returns¶

Метод ничего не возвращает.

Examples¶

var viewTemplate = function (context, args) {
    var label = new Label();
    label.setValue('View Body');
    return label;
}

linkView.setViewTemplate(viewTemplate);

OpenMode¶

Важным фактором отображения представления является режим отображения. В InfinniUI возможны следующие режимы отображения:

Name	Description
`Default`	Представление откроется вместо корневого представления
`Dialog`	Представление откроется в диалоговом окне
`Container`	Представление откроется в указанном контейнере

Каждому режиму отображения соответсвует некоторая стратегия (OpenModeDefaultStrategy, OpenModeDialogStrategy, OpenModeContainerStrategy).

GlobalContext¶

Application global context. Context provides API to appication methods and properties that are used jointly.

Variable InfinniUI.global contains global context.

Properties¶

Name	Type	Description
`containers`	`Object`	List of containers to view in mode `OpenMode="Container"`.
`localizations`	`Object`	Map, where key is localization name and value is localization.
`localized`	Localization	Current language and regional settings. It stores value from InfinniUI.global.localizations associated with InfinniUI.config.lang.
`factory`	ApplicationBuilder	Common application builder.
`logger`	Logger	Message logging service.
`messageBus`	MessageBus	Application message bus .
`session`	Session	User session provider.
`notificationSubsription`	NotificationSubscriptions	Server notification service.

Methods¶

Name	Description
executeAction	Fires up execution of an action.

GlobalContext.executeAction¶

Запускает выполнение указанного действия.

Syntax¶

ViewContext.executeAction(context, executeActionMetadata[, resultCallback]);

Parameters¶

Name	Type	Description
`context`	ViewContext	Контекст представления.
`executeActionMetadata`	ActionMetadata	Метеданные действия
`resultCallback`	Script	Обработчик события о том, что Action был выполнен

Examples¶

var metadata = {
    "OpenAction": {
        "OpenMode": "Dialog",
        /** Athoter metadata **/
    }
};
InfinniUI.global.executeAction(context, metadata, functino (context, args) {
    console.log('Done');
});

JSExpression¶

Синтаксис для возможности задания простых js-выражений в любых текстовых полях. Одним из применений является локализация приложения.

Syntax¶

"{= (JS-expression) }"

Example¶

InfinniUI.localizations['ru-RU'].strings.custom = {
  button: {
    name: "Текст для кнопки"
  }
};

InfinniUI.localizations['en-US'].strings.custom = {
  button: {
    name: "Text for button"
  }
};

var metadata = [
  {
    "Button": {
      "Text": "{= InfinniUI.localized.strings.custom.button.name }" // Text for button
    }
  },
  {
    "TextBox": {
      "HintText": "{= 1 + 2 }" // 3
    }
  }
];

Localizations¶

Localization is language and regional settings.

Localization represents info on localization name and its view formats for various data types.

InfinniUI.localizations is map of localizations settings. InfinniUI.config.lang specifies current language and regional settings. Current localization is stored in InfinniUI.localized.

Properties¶

Name	Type	Description
name	`String`	Localization name.
caption	`String`	Original localization name.
dateTimeFormatInfo	DateTimeFormatInfo	Info on date and time format
numberFormatInfo	NumberFormatInfo	Info on numeric view formats.

Example¶

InfinniUI.localizations = {
    'en-US': {
        caption: 'English',
        name: 'en-US',
        dateTimeFormatInfo: {
            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
            dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
            firstDayOfWeek: 0
        },
        numberFormatInfo: {
            numberDecimalSeparator: '.',
            numberGroupSeparator: ','
        },
        strings: {
          ImageBox: {
            chooseImage: 'Choose photo',
            imageSizeTooBig: 'Size of the chosen file {chosen-size}MB is more than allowed {permitted-size}MB',
            incorrectFormat: 'Uploading of this file type is forbidden'
          },
          FileBox: {
              noFile: 'Choose file...',
              fileSizeTooBig: 'Size of the chosen file {chosen-size}MB is more than allowed {permitted-size}MB',
              incorrectFormat: 'Uploading of this file type is forbidden'
          },
          custom: {
            button: {
              name: "Text for button",
              tooltip: "Tooltip"
            },
            anotherButton: {
              name: "Another text for button"
            }
          }
        }
    },

    'ru-RU': {
        caption: 'Русский',
        name: 'ru-RU',
        dateTimeFormatInfo: {
            monthNames: [ "Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь" ],
            dayNames: [ "воскресенье","понедельник","вторник","среда","четверг","пятница","суббота" ],
            firstDayOfWeek: 1
        },
        numberFormatInfo: {
            numberDecimalSeparator: ',',
            numberGroupSeparator: ' '
        },
        strings: {
          ImageBox: {
              chooseImage: 'Выбрать изображение',
              imageSizeTooBig: 'Размер выбранного файла {chosen-size}Мб больше допустимого размера {permitted-size}Мб',
              incorrectFormat: 'Загрузка данного типа файла не разрешена'
          },
          FileBox: {
              noFile: 'Файл не выбран...',
              fileSizeTooBig: 'Размер выбранного файла {chosen-size}Мб больше допустимого размера {permitted-size}Мб',
              incorrectFormat: 'Загрузка данного типа файла не разрешена'
          },
          custom: {
            button: {
              name: "Текст для кнопки",
              tooltip: "Тултип"
            },
            anotherButton: {
              name: "Другой текст для кнопки"
            }
          }
        }
    }
}

Description¶

Message logging service is a program object which provides methods to register log messages of different levels: Debug, info, warning, errors and tracing messages. The serivce also can set the level of registered messages defining how elaborate logging indo will be.

Syntax¶

new Logger(level)

Parameters¶

Name	Type	Description
`level`	LogLevel	Min level of logging.

Methods¶

Name	Description
getLevel	Returns min logging level.
setLevel	Sets min logging level.
debug	Registers debugging message.
info	Registers info message.
warn	Registers warning message.
error	Registers error message.
trace	Register tracing message.

Logger.debug¶

Регистрирует отладочное сообщение.

Syntax¶

Logger.debug(message)

Parameters¶

Name	Type	Description
`message`	`String` \| `Object`	Сообщение. В качестве сообщения может выступать строка или объект.

Examples¶

Logger.debug('Message');
Logger.debug({ message: 'Message' });

Logger.error¶

Регистрирует сообщение с ошибкой.

Syntax¶

Logger.error(message)

Parameters¶

Name	Type	Description
`message`	`String` \| `Object`	Сообщение. В качестве сообщения может выступать строка или объект.

Examples¶

Logger.error('Message');
Logger.error({ message: 'Message' });

Logger.getLevel¶

Возвращает минимальный уровень регистрируемых сообщений.

Syntax¶

Logger.getLevel()

Returns¶

Минимальный уровень регистрируемых сообщений.

Examples¶

var level = Logger.getLevel();

Logger.info¶

Регистрирует информационное сообщение.

Syntax¶

Logger.info(message)

Parameters¶

Name	Type	Description
`message`	`String` \| `Object`	Сообщение. В качестве сообщения может выступать строка или объект.

Examples¶

Logger.info('Message');
Logger.info({ message: 'Message' });

Logger.setLevel¶

Возвращает минимальный уровень регистрируемых сообщений.

Syntax¶

Logger.setLevel(value)

Parameters¶

Name	Type	Description
`value`	LogLevel	Устанавливает уровень регистрируемых сообщений.

Examples¶

var level = Logger.setLevel(LOG_LEVEL.error);
Logger.debug('Message'); // ignore
Logger.info('Message');  // ignore
Logger.warn('Message');  // ignore
Logger.error('Message'); // log
Logger.trace('Message'); // log

Logger.trace¶

Регистрирует сообщение трассировки.

Syntax¶

Logger.trace(message)

Parameters¶

Name	Type	Description
`message`	`String` \| `Object`	Сообщение. В качестве сообщения может выступать строка или объект.

Examples¶

Logger.trace('Message');
Logger.trace({ message: 'Message' });

Logger.warn¶

Регистрирует сообщение с предупреждением.

Syntax¶

Logger.warn(message)

Parameters¶

Name	Type	Description
`message`	`String` \| `Object`	Сообщение. В качестве сообщения может выступать строка или объект.

Examples¶

Logger.warn('Message');
Logger.warn({ message: 'Message' });

LogLevel¶

Уровень регистрируемых сообщений.

Description¶

Уровень регистрируемых сообщений - простая линейная классификация сообщений, которые могут регистрироваться в рамках приложения. Уровни упорядочены по степени их важности. Сообщения уровня debug имеют самую низкую важность, сообщения уровня trace - самую высокую важность. Благодаря такому ранжированию можно установить минимальный уровень регистрируемых сообщений, вследствие чего сообщения с более низким уровнем будет игнорироваться. Таким образом, можно управлять тем, насколько подробной будет регистрируемая информация.

Syntax¶

LOG_LEVEL = {
  debug: 1,
  info: 2,
  warn: 3,
  error: 4,
  trace: 5
}

Members¶

Name	Description
`debug`	Отладочные сообщения.
`info`	Информационные сообщения.
`warn`	Сообщения с предупреждениями.
`error`	Сообщения с ошибками.
`trace`	Сообщения трассировки.

MessageBus¶

Message bus is a program object which shares infrastructure to exchange events (messages) between various view elements both visual and non-visual.

Description¶

Message bus is created for each view instance. Messages are sent asynchronously that is sender doesn’t get acknowledgement when the message is finally processed. Message exchange within a single instance view doesn’t affect the other view instances.

Each element both visual and non-visual may be a message source and/or be a message subscriber. The time when element will initiate a message sending depends on element working logic. The time when element will process a newly recieved message depends on element. Thus the moment when the message is sent and the moment when its processing is stopped is not determined perhaps the message has never been sent and perhaps will have never been processed). In other words, the only thing that message bus guarantees is delivery to all existing subscribers.

Syntax¶

new MessageBus(view)

Parameters¶

Name	Type	Description
`view`	View	Parent view of message bus.

Methods¶

Name	Description
getView	Returns parent view.
send	Sends a message of a certain type.
subscribe	Subscribes to certain type messages.
unsubscribeByType	Unsubscribes from certain type messages.

MessageBus.InfinniUIMessages¶

Для работы с платформенными сообщениями используется InfinniUI.global.messageBus.

MessageTypes¶

Name	Description	messageBody
onViewBuildError	Ошибка при создании view	{error: `string`, metadata: {путь до метаданных}}
onViewCreated	Создана view	{openMode: openMode, view: view}
onNotifyUser	Оповещение пользователя	{messageText: `string`, messageType: `string`}
onDataLoading	Отправлен запрос	–
onDataLoaded	Полечен результат запроса	{success: `boolean`}

Examples¶

InfinniUI.global.messageBus.subscribe('onViewCreated', function (context, args) {
    var view = args.value.view;
    alert('Open ' + view.getName());
});

MessageBus.getView¶

Возвращает родительское представление.

Syntax¶

MessageBus.getView()

Returns¶

Родительское представление шины сообщений.

Examples¶

var parentView = MessageBus.getView();

MessageBus.send¶

Отправляет сообщение заданного типа.

Description¶

Для отправки сообщения необходимо передать два параметра: тип сообщения и сообщение. Получив такой запрос, шина сообщений осуществляет поиск всех подписчиков, заинтересованных в получении сообщения с заданным типом, после чего вызывает соответствующие обработчики сообщений, передавая каждому из них указанное сообщение.

Syntax¶

MessageBus.send(type, message)

Parameters¶

Name	Type	Description
`type`	`String`	Тип сообщения.
`message`	*	Сообщение.

Examples¶

MessageBus.send('myEvent', { value: 123 });

MessageBus.subscribe¶

Подписывает на сообщения заданного типа.

Description¶

Для подписки на сообщение необходимо передать два параметра: тип сообщения и указатель на функцию обработчика сообщения. При появлении сообщения с заданным типом шина сообщений вызовет данный обработчик сообщения, передав ему два параметра: context и argument. В параметре context передается контекст представления, в рамках которого была осуществлена подписка; в параметре argument - полученное сообщение.

В общем случае порядок регистрации обработчиков сообщений никак не связан с порядком их вызова. Последнее значит, что между обработчиками сообщений не должно быть функциональной зависимости.

Syntax¶

MessageBus.subscribe(type, callback)

Parameters¶

Name	Type	Description
`type`	`String`	Тип сообщения.
`callback`	Script	Обработчик сообщения.

Examples¶

MessageBus.subscribe('myEvent', function(context, argument) { alert(argument.value); });

MessageBus.unsubscribeByType¶

Отмена всех подписок на сообщения заданного типа.

Description¶

Удаляет все сделанные ранее подписки на событие заданного типа.

Syntax¶

MessageBus.unsubscribeByType(type)

Parameters¶

Name	Type	Description
`type`	`String`	Тип сообщения.

Examples¶

MessageBus.unsubscribeByType('myEvent');

NotificationSubscriptions¶

Service allows to subscribe to server notifications. NotificationSubscriptions based on signalR components - a set of server and clients libraries providing two way real time interaction between server and client.

Description¶

Regulary working with a web-page, both request and transmission is initiated by a client. However in some cases updating data on the web-page should be done timely. To inform clients about changes so called push-notifications are used. SignaR can organize those. NotificationSubscriptions service allows subscribe to notifications from external services made with SignalR.

Parameters¶

No

Methods¶

Name	Description
subscribe	Adds subsciption to event
unsubscribe	Removes subscribtion to event
startConnection	Sets server connection and adds listeners in accordance to certain keys
stopConnection	Removes server connection
reconnection	Re-establishes conection to a server with certain parameters
isDisconnected	Checks if the connection is removed
on	Checks subscription signalR status

NotificationSubscriptions.isDisconnected¶

Возвращает значение, разорванно соединение с сервером signalR или нет.

Syntax¶

NotificationSubscriptions.isDisconnected()

Parameters¶

Нет.

Returns¶

true или false.

Examples¶

NotificationSubscriptions.isDisconnected();

NotificationSubscriptions.on¶

Подписка на события signalR.

Syntax¶

NotificationSubscriptions.on(eventName, callback)

Parameters¶

Name	Type	Description
eventName	`String`	Имя события на которое необходимо подписаться, полный перечень можно найти в документации к signalR
callback	Script	Обработчик события eventName

Examples¶

NotificationSubscriptions.on('disconnected', function() {
  NotificationSubscriptions.reconnection();
});

NotificationSubscriptions.on('error', function(error) {
  console.log(error);
});

NotificationSubscriptions.reconnection¶

Повторно устанавливает соединение с сервером с ранее указанными данными

Syntax¶

NotificationSubscriptions.reconnection()

Parameters¶

Нет.

Examples¶

NotificationSubscriptions.reconnection();

NotificationSubscriptions.startConnection¶

Устанавливает соединение с сервером по заданому hubName. Так же осуществляется подписка по всем routingKey которые были добавлены через метод subscribe или были указаны в метаданных.

Description¶

Для успешного установления соединения с сервером, необходимо сначала добавить хотя бы одну подписку.

Syntax¶

NotificationSubscriptions.startConnection(hubName[, onSuccessCallback[, onErrorCallback]])

Parameters¶

Name	Type	Description
hubName	`String`	Имя hub proxy. При работе с InfinniPlatform оно равно SignalRPushNotificationServiceHub
onSuccessCallback	Script	Обработчик события успешного соединения
onErrorCallback	Script	Обработчик события о том, что при соединений возникла ошибка

Examples¶

NotificationSubscriptions.startConnection("SignalRPushNotificationServiceHub");

NotificationSubscriptions.stopConnection¶

Разрывает соединение с сервером. Подписки при этом сохраняются.

Description¶

Прекращение получений сообщений от сервера.

Syntax¶

NotificationSubscriptions.stopConnection()

Parameters¶

Нет.

Examples¶

NotificationSubscriptions.stopConnection();

NotificationSubscriptions.subscribe¶

Подписывает на сообщения по заданому ключу.

Description¶

Для подписки на сообщение необходимо передать два параметра: ключ и указатель на функцию обработчика сообщения, а так же есть 3й необязательный параметр: контекст. При появлении сообщения с заданным ключем NotificationSubscriptions вызовет данный обработчик сообщения, передав ему два параметра: context и args. В параметре context передается контекст представления, в рамках которого была осуществлена подписка; в параметре args.message - полученное сообщение.

В общем случае порядок регистрации обработчиков сообщений никак не связан с порядком их вызова. Последнее значит, что между обработчиками сообщений не должно быть функциональной зависимости.

Syntax¶

NotificationSubscriptions.subscribe(routingKey, callback[, context])

Parameters¶

Name	Type	Description
routingKey	`String`	Ключ подписки.
callback	Обработчик сообщения	Обработчик сообщения.
context	контекст представления	Контекст представления.

Examples¶

NotificationSubscriptions.subscribe('myRoutingKey', function(context, args) { alert(args.message); }, this);

NotificationSubscriptions.unsubscribe¶

Отписывает от сообщений по заданому ключу и контексту.

Description¶

Отписывает от сообщений по заданому ключу и контексту, в случае если контекст не передается, происходит отмена всех подписок по заданому ключу.

Syntax¶

NotificationSubscriptions.unsubscribe(routingKey[, context])

Parameters¶

Name	Type	Description
routingKey	`String`	Ключ подписки.
context	контекст представления	Контекст представления.

Examples¶

NotificationSubscriptions.unsubscribe('myRoutingKey', this);

Parameters¶

View parameter

Description¶

Parameters declared as views and used to exchange data between views.

Syntax¶

new Parameter(options);

Parameters¶

Name	Type	Description
`options.view`	View	Parent view.

Methods¶

Name	Description
getName	Returns parameter name.
setName	Sets parameter name.
getView	Returns parent view.
getValue	Returns parameter value.
setValue	Sets parameter value.
getProperty	Returns value of parameter attribute.
setProperty	Sets value of parameter attribute.

Events¶

Name	Description
`onPropertyChanged`	Sets event processor that event remained unchanged.

Parameter.getName¶

Возвращает наименование параметра.

Syntax¶

Parameter.getName();

Returns¶

Наименование элемента.

Examples¶

var name = Parameter.getName();

Parameter.getProperty¶

Возвращает значение атрибута параметра.

Syntax¶

Parameter.getProperty(name);

Parameters¶

Name	Type	Description
`name`	`String`	наименование параметра.

Returns¶

Значение атрибута параметра.

Examples¶

var firstName = Parameter.getProperty('first_name');

Parameter.getValue¶

Возвращает значение параметра.

Syntax¶

Parameter.getValue();

Parameters¶

Нет

Returns¶

Значение параметра.

Examples¶

var value = Parameter.getValue();

Parameter.getView¶

Возвращает родительское представление.

Syntax¶

Parameter.getView();

Parameters¶

Нет

Returns¶

Родительское представление.

Examples¶

var view = Parameter.getView();

Parameter.metadata¶

Метаданные типа Parameter.

Properties¶

Name	Type	Description
`Name` *	`String`	Наименование параметра
`Value` *	`String` \| DataBinding	Значение параметра
`DefaultValue`	`String`	Значение по умолчанию
`OnPropertyChanged`	Script	Обработчик события о том, что значение было изменено

* Обязательное свойство.

Examples¶

{
  "Name": "Description",
  "Value": {
      "Source": "dataSource1",
      "Property": "$.Description"
  },
  "DefaultValue": "No description",
  "OnPropertyChanged": "OnPropertyChangedScript"
}

Parameter.setName¶

Устанавливает наименование параметра.

Syntax¶

Parameter.setName(value);

Parameters¶

Name	Type	Description
`value`	`String`	Наименование параметра.

Returns¶

Нет

Examples¶

Parameter.setName('parameter1');

Parameter.setProperty¶

Устанавливает значение атрибута параметра.

Syntax¶

Parameter.setProperty(name, value);

Parameters¶

Name	Type	Description
`name`	`String`	Имя атрибута.
`value`	*	Значение атрибута.

Returns¶

Нет

Examples¶

Parameter.setProperty('qty', 33);

Parameter.setValue¶

Устанавливает значение параметра.

Syntax¶

Parameter.setValue(value);

Parameters¶

Name	Type	Description
`value`	*	Значение параметра.

Returns¶

Нет

Examples¶

Parameter.setValue(33);

Parameter.metadata¶

Метаданные типа Parameter.

Properties¶

Name	Type	Description
`Name` *	`String`	Наименование параметра
`Value` *	`String` \| DataBinding	Значение параметра
`DefaultValue`	`String`	Значение по умолчанию
`OnPropertyChanged`	Script	Обработчик события о том, что значение было изменено

* Обязательное свойство.

Examples¶

{
  "Name": "Description",
  "Value": {
      "Source": "dataSource1",
      "Property": "$.Description"
  },
  "DefaultValue": "No description",
  "OnPropertyChanged": "OnPropertyChangedScript"
}

Routing¶

Возможность настройки роутинга для Single Page Applications. Для работы необходимо конфигурировать массив маршрутов(Routes) и запустить RouterService.

Scripts in InfinniUI are js-functions. Developers can code any logic to implement in front end applications. Scripts have fix input parameters: context and arguments.

Generally scripts are defined and used at the metadata level. They can be defined in two ways. In first case, define any function in js-scripts and call in by name from metadata views. For example: Let us create function alertAction which upon invocation will display a message on the screen. Let us declare this script as an event processor upon button click.

function alertAction(context, args) {
    alert(args.source.getName());
}

//infinni-ui-demo
{
    "DataSources": [
    ],

    "Items": [{
        "GridPanel": {
            "Items": [{
                "Cell": {
                    "ColumnSpan": 4,
                    "Items": [{
                        "Button": {
                            "Name": "button_1",
                            "Text": "Button",
                            "OnClick": "{ alertAction(context, args); }"
                        }
                    }]
                }
            }]
        }
    }]
}

Second way is the more short way. If script is supposed to be used only in one place then its body can be defined in a body of processor without creating a separate function:

//infinni-ui-demo
{
    "DataSources": [
    ],

    "Items": [{
        "GridPanel": {
            "Items": [{
                "Cell": {
                    "ColumnSpan": 4,
                    "Items": [{
                        "Button": {
                            "Name": "button_2",
                            "Text": "Button",
                            "OnClick": "{ alert(args.source.getName()); }"
                        }
                    }]
                }
            }]
        }
    }]
}

As you may notice for this type of script its contents are placed in braces.

Also Script can be an object, that describe any action:

//infinni-ui-demo
{
    "DataSources": [
    ],

    "Items": [{
        "GridPanel": {
            "Items": [{
                "Cell": {
                    "ColumnSpan": 4,
                    "Items": [{
                        "Button": {
                            "Name": "button_2",
                            "Text": "Button",
                            "OnClick": {
                                "OpenAction": {
                                    "LinkView": {
                                        "InlineView": { ... }
                                    }
                                }
                            }
                        }
                    }]
                }
            }]
        }
    }]
}

ActionExecutor¶

Исполнитель Экшенов

Parameters¶

Name	Type	Description
actionFactory	ActionFactory	Объект созданный фабрикой создания экшенов

Examples¶

var onClickExecutor = InfinniUI.ActionExecutor( actionFactory );

ActionFactory¶

Создает и настраивает экшен из метаданных, для дальнейшего исполнения

Parameters¶

Name	Type	Description
actionMetadata	`Object`	Метаданные экшена
builder	Билдер	Билдер
builderParams	`Object`	Параметры билдера

Examples¶

var actionFactory = InfinniUI.ActionFactory( actionMetadata, builder, builderParams );

Executor¶

Создает и настраивает скрипт, по переданным метаданным и билдеру.

Parameters¶

Name	Type	Description
metadata	`String`, `Action Metadata`	Метаданные из которых необходимо создать Script
builder	Билдер	Билдер
builderParams	`Object`	Параметры билдера

Examples¶

var onClickExecutor = InfinniUI.Executor( metadata, builder, builderParams );

InlineScriptFactory¶

Создает и настраивает inline script из метаданных, для дальнейшего исполнения

Parameters¶

Name	Type	Description
scriptBody	`String`	Тело скрипта
builder	Билдер	Билдер
builderParams	`Object`	Параметры билдера

Examples¶

var inlineScript = InfinniUI.InlineScriptFactory( scriptBody, builder, builderParams );

Script.metadata¶

Метаданные описывающие тип Script.

Exampes¶

Зададим скрипт, который при вызове будет выводить сообщение на экране. Объявим этот скрипт обработчиком события нажатия на кнопку.

//infinni-ui-demo
{
    "DataSources": [
    ],

    "Items": [{
        "GridPanel": {
            "Items": [{
                "Cell": {
                    "ColumnSpan": 4,
                    "Items": [{
                        "Button": {
                            "Name": "button",
                            "Text": "Button",
                            "OnClick": "{ alert( args.source.getName() ); }"
                        }
                    }]
                }
            }]
        }
    }]
}

Script.metadata¶

Метаданные описывающие тип Script.

Exampes¶

Зададим скрипт, который при вызове будет выводить сообщение на экране. Объявим этот скрипт обработчиком события нажатия на кнопку.

//infinni-ui-demo
{
    "DataSources": [
    ],

    "Items": [{
        "GridPanel": {
            "Items": [{
                "Cell": {
                    "ColumnSpan": 4,
                    "Items": [{
                        "Button": {
                            "Name": "button",
                            "Text": "Button",
                            "OnClick": "{ alert( args.source.getName() ); }"
                        }
                    }]
                }
            }]
        }
    }]
}

Session¶

Description¶

User session provider.

Methods¶

Name	Description
getCurrentUser	Returns info on the current user.
changePassword	Changes password of the current user.
changeProfile	Changes personal information of the current user.
changeActiveRole	Changes active role of the current user.
signInInternal	Sings user in to system via internal provider.
getSignInExternalForm	Returns user sign-in form via external provider.
getLinkExternalLoginForm	Returns login form link from external provider.
unlinkExternalLogin	Unlinks from the current user login from external provider.
addClaim	Adds user claim.
setSessionData	Sets the current user claim.
getSessionData	Gets the current user claim.
signOut	Signs the current user out.

Events¶

Name	Description
onActiveRoleChanged	Sets event processor on active role change.
onSignInInternal	Sets event processor on sign user in via internal provider.
onSignOut	Sets event processor on sign user out.

Session.addClaim¶

Добавляет “утверждения” пользователя.

Syntax¶

Session.addClaim(userName, claimName, claimValue[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`userName`	`String`	Имя пользователя.
`claimName`	`String`	Имя “утверждения”.
`claimValue`	`Function`	Значение “утверждения”.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

session.addClaim(userName, TenantId, Code, function (result) {
    update();
});

Session.changeActiveRole¶

Изменяет активную роль текущего пользователя.

Syntax¶

Session.changeActiveRole(activeRole[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`activeRole`	`String`	Наименование роли.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

session.changeActiveRole('admin', onSuccess, onError);

Session.changePassword¶

Изменяет пароль текущего пользователя.

Syntax¶

Session.changePassword(oldPassword, newPassword[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`oldPassword`	`String`	Старый пароль.
`newPassword`	`String`	Новый пароль.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

var onSuccess = function () {
    console.log('success');
};

var onError = function (err) {
    console.error(err);
}

session.changePassword('123', 'abc123', onSuccess, onError);

Session.changeProfile¶

Изменяет персональную информацию текущего пользователя.

Syntax¶

Session.changeProfile(displayName[, description[, resultCallback[, errorCallback]]]);

Parameters¶

Name	Type	Description
`displayName`	`String`	Отображаемое имя пользователя.
`description`	`String`	Описание пользователя.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

session.changeProfile('user name');

Session.getCurrentUser¶

Возвращает информацию о текущем пользователе.

Syntax¶

Session.getCurrentUser(successCallback, errorCallback);

Parameters¶

Name	Type	Description
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

var onSuccess = function (user) {
    console.log('Current user: %s', JSON.stringify(user));
};

var name = Session.getCurrentUser(onSuccess);

Session.getLinkExternalLoginForm¶

Возвращает форму добавления текущему пользователю имени входа у внешнего провайдера.

Syntax¶

Session.getLinkExternalLoginForm(successUrl, failureUrl[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`successUrl`	`String`	URL для перехода в случае успешного выполнения операции.
`failureUrl`	`String`	URL для перехода в случае ошибки выполнения операции.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

var successUrl = window.location.href + "?viewName=Profile";
var failureUrl = window.location.href + "?viewName=Profile";
var $form = $("#LoginForm");

session.getSignInExternalForm(successUrl, failureUrl, function (result) {
    $form.empty();
    $form.append(result);
});

Session.getSessionData¶

Возвращает “утверждения” текущего пользователя.

Syntax¶

Session.getSessionData(claimType[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`claimType`	`String`	Имя “утверждения”.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

Session.getSignInExternalForm¶

Возвращает форму входа пользователя в систему через внешний провайдер.

Syntax¶

Session.getSignInExternalForm(successUrl, failureUrl[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`successUrl`	`String`	URL для перехода в случае успешного выполнения операции.
`failureUrl`	`String`	URL для перехода в случае ошибки выполнения операции.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

var successUrl = window.location.href + "&socialAuth=true";
var failureUrl = window.location.href;
var $form = $("#LoginForm");

session.getSignInExternalForm(successUrl, failureUrl, function (result) {
    $form.empty();
    $form.append(result);
});

Session.onActiveRoleChanged¶

Устанавливает обработчик события изменения активной роли текущего пользователя.

Syntax¶

Session.onActiveRoleChanged(callback);

Parameters¶

Name	Type	Description
`callback`	`Function`	Обработчик события изменения активной роли текущего пользователя.

Returns¶

Нет

Examples¶

Session.onSignInInternal¶

Устанавливает обработчик события входа пользователя в систему через внутренний провайдер.

Syntax¶

Session.onSignInInternal(callback);

Parameters¶

Name	Type	Description
`callback`	`Function`	Обработчик события входа пользователя в систему через внутренний провайдер.

Returns¶

Нет

Examples¶

Session.onSignOut¶

Устанавливает обработчик события выхода пользователя из системы.

Syntax¶

Session.onSignOut(callback);

Parameters¶

Name	Type	Description
`callback`	`Function`	Обработчик события выхода пользователя из системы.

Returns¶

Нет

Examples¶

Session.setSessionData¶

Устанавливает “утверждения” текущего пользователя.

Syntax¶

Session.setSessionData(claimType, claimValue[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`claimType`	`String`	Имя “утверждения”.
`claimValue`	`Function`	Значение “утверждения”.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

session.setSessionData(TenantId, Code, function (result) {
    update();
});

Session.signInInternal¶

Изменяет активную роль текущего пользователя.

Syntax¶

Session.signInInternal(userName, password, remember[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`userName`	`String`	Имя пользователя.
`password`	`String`	Пароль пользователя.
`remember`	`Boolean`	Запомнить пользователя.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

session.signInInternal('user', '123', true);

Session.signOut¶

Выход пользователя из системы.

Syntax¶

Session.signOut([resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

Session.unlinkExternalLogin¶

Удаляет у текущего пользователя имя входа у внешнего провайдера.

Syntax¶

Session.unlinkExternalLogin(provider, providerKey[, resultCallback[, errorCallback]]);

Parameters¶

Name	Type	Description
`provider`	`String`	Название провайдера.
`providerKey`	`String`	Ключ провайдера.
`successCallback`	`Function`	Обработчик результата выполнения операции.
`errorCallback`	`Function`	Обработчик ошибки выполнения операции.

Returns¶

Нет

Examples¶

session.unlinkExternalLogin(provider, providerKey, function (result) {
    updateUser()
});

Style¶

InfinniUI is based on bootstrap 3 framework. Styling of an app made with InfinniUI can be produced in 4 levels.

Level of choosing from pre-defined values.
Level of settings of pre-defined platform values.
Level of bootstrap variable settings.
Manual styling of css for certain app elements.

As the number of level increases the more customization can be done to the app. However every next level implies the more low-level work needs to be done to stay aligned with the principles built-in InfinniUI. Going to lower levels will require more programmers skills and knowledge.

Pre-defined values level¶

Can be set up in metadata. This setting colors of elements as well as typography inside elements.

//infinni-ui-demo
{
    "DataSources": [
    ],

    "Items": [{
        "Label": {
            "Value": "Label text",
            "Background": "primary1",
            "Foreground": "accent1",
            "TextStyle": "Display1"
        }
    }]
}

Pre-defined platform values¶

Pre-defined values for element colors as well as typography inside elements are located in bootstrap-framework/less/pl-variables.less (inside of InfinniUI framework). Overlapping is the best to be implemented in the file <yourProject>/styles/platform-variables.less (if you are proceeding with example template project).

Bootstrap variable settings level¶

Bootstrap framework settings (basic sizes, tabs, rounds etc) are in bootstrap-framework/less/variables.less file (inside InfinniUI framework). Overlapping is best to be done in <yourProject>/styles/bootstrap-variables.less file (if you are proceeding with example template project). If you require to overlap bootstrap styles, it can be done in <yourProject>/styles/bootstrap-theme.less file.

Manual styling of css for certain app elements¶

Css-styles can be applied for a certain element (change margin for a button). One can set to a certain element metadata Style. This value will appear as element’s additional class which can be assigned a required css-style (or more).

To define custom styles refer to <yourProject>/styles/extensions.less.

Кнопка.

Extends¶

Syntax¶

new Button(parent, viewMode)

Parameters¶

Name	Type	Default	Description
parent	Element		Родительский элемент
viewMode	viewMode	`common`	Режим отображения

Returns¶

Элемент Button.

Methods¶

Name	Description
getContentTemplate	Возвращает функцию шаблонизации содержимого кнопки
setContentTemplate	Устанавливает функцию шаблонизации содержимого кнопки
getContent	Возвращает содержимое кнопки
setContent	Устанавливает содержимое кнопки
getAction	Возвращает основное действие кнопки
setAction	Устанавливает основное действие кнопки
click	Осуществляет программный клик по кнопке

Events¶

Нет

Button.metadata¶

Метаданные типа Button.

Properties¶

Name	Type	Default	Description
Action	ActionMetadata	–	Основное действие кнопки
Content	`String`	–	Содержимое кнопки
ContentTemplate	ElementMetadata	–	Шаблон содержимого кнопки
ViewMode	viewMode	`common`	Может принимать значения: ‘link’ или ‘common’. Если указать значение ‘link’, то кнопка примет вид ссылки

Examples¶

{
    "ContentTemplate": {
        "Icon": {
          "Value": "pencil"
        }
    },
    "Action": {
        "EditAction": {
            ...
        }
    }
}

Button.click¶

Осуществляет программный клик по кнопке.

Syntax¶

button.click()

Parameters¶

Нет

Returns¶

Метод ничего не возвращает.

Examples¶

button.click();

See Also¶

Button.getAction¶

Возвращает действие при нажатии на кнопку.

Syntax¶

button.getAction()

Parameters¶

Нет

Returns¶

Действие при нажатии на кнопку.

Examples¶

var action = button.getAction();

See Also¶

setAction

Button.getContent¶

Возвращает содержимое кнопки, установленное методом setContent.

Syntax¶

button.getContent()

Parameters¶

Нет

Returns¶

Содержимое кнопки.

Examples¶

var content = button.getContent();

See Also¶

setContent

Button.getContentTemplate¶

Возвращает функцию шаблонизации содержимого кнопки.

Syntax¶

button.getContentTemplate()

Parameters¶

Нет

Returns¶

Функция шаблонизации содержимого кнопки.

Examples¶

var contentTemplate = button.getContentTemplate();

See Also¶

setContentTemplate

Button.metadata¶

Метаданные типа Button.

Properties¶

Name	Type	Default	Description
Action	ActionMetadata	–	Основное действие кнопки
Content	`String`	–	Содержимое кнопки
ContentTemplate	ElementMetadata	–	Шаблон содержимого кнопки
ViewMode	viewMode	`common`	Может принимать значения: ‘link’ или ‘common’. Если указать значение ‘link’, то кнопка примет вид ссылки

Examples¶

{
    "ContentTemplate": {
        "Icon": {
          "Value": "pencil"
        }
    },
    "Action": {
        "EditAction": {
            ...
        }
    }
}

Button.setAction¶

Устанавливает действие при нажатии на кнопку.

Syntax¶

button.setAction(action)

Parameters¶

Name	Type	Description
action	Action	Действие

Returns¶

Нет

Examples¶

var action = new ServerAction(/** Params for ServerAction **/);
var content = button.getContent(action);

See Also¶

getContent

Button.setContent¶

Устанавливает содержимое кнопки.

Syntax¶

button.setContent(value)

Parameters¶

Name	Type	Description
value	`String`	Содержимое кнопки

Returns¶

Метод ничего не возвращает.

Examples¶

//js-demo
var button = new InfinniUI.Button();
button.setContent('Click<br/>me');
$elementForExample.append(button.render());

See Also¶

getContent

Button.setContentTemplate¶

Устанавливает функцию шаблонизации содержимого кнопки.

Syntax¶

button.setContentTemplate(value)

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации содержимого кнопки

Returns¶

Метод ничего не возвращает.

Examples¶

//js-demo
var button = new InfinniUI.Button();
var contentTemplate = function (context, args) {
    var label = new InfinniUI.Label();
    label.setValue('Button 1');
    return label;
}

button.setContentTemplate(contentTemplate);
$elementForExample.append(button.render());

See Also¶

getContentTemplate

ButtonEdit¶

Текстовое поле с кнопкой.

Extends¶

TextBox

Syntax¶

new ButtonEdit(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Returns¶

Элемент ButtonEdit.

Methods¶

Name	Description
getIcon	Возвращает название иконки, отображаемой на кнопке
setIcon	Устанавливает название иконки, отображаемой на кнопке
getReadOnly	Возвращает значение, определяющее, возможно ли редактирование текстового поля
setReadOnly	Устанавливает значение, определяющее, возможно ли редактирование текстового поля
getShowClear	Возвращает значение, определяющее наличие кнопки, очищающей указанное значение
setShowClear	Устанавливает значение, определяющее наличие наличие кнопки, очищающей указанное значение

Events¶

Name	Description
onButtonClick	Устанавливает обработчик события нажатия на кнопку

ButtonEdit.metadata¶

Метаданные типа ButtonEdit.

Properties¶

Name	Type	Default	Description
Icon	`String`¹	–	Иконка, отображаемая на кнопке
ReadOnly	`Boolean`	true	Значение, определяющее, возможно ли редактирование текстового поля
ShowClear	`Boolean`	true	Значение, определяющее наличие кнопки, очищающей указанное значение
OnButtonClick	Script	–	Обработчик события нажатия на кнопку
Action	ActionMetadata	–	Основное действие кнопки

OnButtonClick сработает раньше, чем Action.

¹ Полный список доступных названий и соответсвующих отображений: Icons.

Examples¶

ButtonEdit удобно использовать для редактирования полей-объектов (вроде адреса).

{
    "ButtonEdit": {
        "ShowClear": false,
        "Icon": "pencil",
        "Value": {
            "Source": "MainDataSource",
            "Property": "$.Address"
        },
        "DisplayFormat": "${City}, ${Street} st., ${House}",
        "Action": {
            "EditAction": {
                ...
            }
        }
    }
}

ButtonEdit.getIcon¶

Возвращает название иконки, отображаемой на кнопке.

Syntax¶

buttonEdit.getIcon()

Parameters¶

Нет

Returns¶

Название иконки. Полный список доступных названий и соответсвующих отображений: Icons.

Examples¶

var icon = buttonEdit.getIcon();

See Also¶

setIcon()

ButtonEdit.getReadOnly¶

Возвращает значение, определяющее, возможно ли редактирование текстового поля. По умолчанию редактирование запрещено. Чтобы разрешить редактирование, воспользуйтесь методом setReadOnly().

Syntax¶

buttonEdit.getReadOnly()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, возможно ли редактирование текстового поля.

Examples¶

var readOnly = buttonEdit.getReadOnly();

See Also¶

setReadOnly()

ButtonEdit.getShowClear¶

Возвращает значение, которое определяет наличие кнопки, очищающей: указанное значение.
По умолчанию кнопка отображается. Чтобы убрать её, воспользуйтесь: методом setShowClear().

Syntax¶

buttonEdit.getShowClear()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, нужна ли кнопка, очищающая указанное значение.

Examples¶

var showClearButton = buttonEdit.getShowClear();

See Also¶

setShowClear()

ButtonEdit.metadata¶

Метаданные типа ButtonEdit.

Properties¶

Name	Type	Default	Description
Icon	`String`¹	–	Иконка, отображаемая на кнопке
ReadOnly	`Boolean`	true	Значение, определяющее, возможно ли редактирование текстового поля
ShowClear	`Boolean`	true	Значение, определяющее наличие кнопки, очищающей указанное значение
OnButtonClick	Script	–	Обработчик события нажатия на кнопку
Action	ActionMetadata	–	Основное действие кнопки

OnButtonClick сработает раньше, чем Action.

¹ Полный список доступных названий и соответсвующих отображений: Icons.

Examples¶

ButtonEdit удобно использовать для редактирования полей-объектов (вроде адреса).

{
    "ButtonEdit": {
        "ShowClear": false,
        "Icon": "pencil",
        "Value": {
            "Source": "MainDataSource",
            "Property": "$.Address"
        },
        "DisplayFormat": "${City}, ${Street} st., ${House}",
        "Action": {
            "EditAction": {
                ...
            }
        }
    }
}

ButtonEdit.onButtonClick¶

Устанавливает обработчик события нажатия на кнопку.

Syntax¶

buttonEdit.onButtonClick(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события нажатия на кнопку

Examples¶

buttonEdit.onButtonClick(
  function(context, args) { alert('onButtonClick'); }
);

ButtonEdit.setIcon¶

Устанавливает название иконки, отображаемой на кнопке.

Syntax¶

buttonEdit.setIcon(value)

Parameters¶

Name	Type	Description
`value`	`String`¹	Название иконки

¹ Полный список доступных названий и соответсвующих отображений: Icons.

Returns¶

Метод ничего не возвращает

Examples¶

buttonEdit.setIcon('pencil');

See Also¶

getIcon()

ButtonEdit.setReadOnly¶

Устанавливает значение, определяющее, возможно ли редактирование текстового поля.

Syntax¶

buttonEdit.setReadOnly(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, возможно ли редактирование текстового поля

Returns¶

Метод ничего не возвращает

Examples¶

buttonEdit.setReadOnly(false);

See Also¶

getReadOnly()

ButtonEdit.setShowClear¶

Устанавливает значение, которое определяет наличие кнопки, очищающей указанное значение.

Syntax¶

buttonEdit.setShowClear(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, нужна ли кнопка, очищающая указанное значение

Returns¶

Метод ничего не возвращает

Examples¶

buttonEdit.setShowClear(false);

See Also¶

getShowClear()

CheckBox¶

Переключатель в виде флажка.

Description¶

Для отображения переключателя в виде флажка можно использовать CheckBox и IndeterminateCheckBox. Отличие в том, что IndeterminateCheckBox поддерживает ещё и неопределенное состояние. CheckBox может принимать значение false/true, IndeterminateCheckBox - "unchecked"/"checked"/"indeterminate".

Extends¶

Syntax¶

new CheckBox([parent])

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент

CheckBox.metadata¶

Метаданные типа CheckBox.

Examples¶

{
  "Text": "Subscribe",
  "Value": {
    "Source": "dataSource1",
    "Property": "$.IsSubscribe"
  }
}

ComboBox¶

Выпадающий список.

Extends¶

Syntax¶

new ComboBox(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getLabelText	Возвращает текст метки
setLabelText	Устанавливает текст метки
getLabelFloating	Возвращает значение, определяющее, является ли метка плавающей
setLabelFloating	Устанавливает значение, определяющее, является ли метка плавающей
getAutocomplete	Возвращает значение, определяющее, разрешено ли автозавершение ввода
setAutocomplete	Устанавливает значение, определяющее, разрешено ли автозавершение ввода
getValueTemplate	Возвращает функцию шаблонизации выбранного значения
setValueTemplate	Устанавливает функцию шаблонизации выбранного значения
getShowClear	Возвращает значение, которое определяет наличие кнопки, очищающей выбранное значение
setShowClear	Устанавливает значение, которое определяет наличие кнопки, очищающей выбранное значение
getAutocompleteValue	Возвращает значение, для поиска в выпадающем списке значений
setAutocompleteValue	Устанавливает значение, для поиска в выпадающем списке значений
setNoItemsMessage	Устанавивает значение, которое будет использоваться для отображения, когда не найден не один элемент.
getExpandOnEnter	Возвращает значение, определяющее, будет ли открываться выпадающий список по клавише Enter.
setExpandOnEnter	Устанавивает значение, определяющее, будет ли открываться выпадающий список по клавише Enter.

Events¶

Нет

ComboBox.metadata¶

Метаданные типа ComboBox.

Properties¶

Name	Type	Default	Description
LabelText	`String`	–	Текст метки
NoItemsMessage	`String`	‘"<span class="search-message"></span>” not found’	Текст сообщения, которое будет отображаться, когда не найдено ни одного элемента
LabelFloating	`Boolean`	false	Значение, определяющее, является ли метка плавающей
Autocomplete	`Boolean`	false	Значение, определяющее, разрешено ли автозавершение ввода
ExpandOnEnter	`Boolean`	true	Значение, определяющее, раскрывать ли выпадающий список по нажатию на клавишу Enter
AutocompleteProperty	`String`	–	Свойство, по которому будет выполняться автозавершение ввода. Если не указывать AutocompleteProperty, то автозавершение будет выполняться на основе полнотекстового поиска
ValueTemplate	Element	–	Функция шаблонизации выбранного элемента
ValueFormat	DisplayFormat	–	Формат отображения выбранного элемента
ShowClear	`Boolean`	true	Значение, которое определяет наличие кнопки, очищающей выбранное значение

Examples¶

{
  "ComboBox": {
    "LabelText": "Type",
    "LabelFloating": true,
    "Autocomplete": true,
    "AutocompleteProperty": "Description",
    "ItemFormat": "${Description}",
    "ValueFormat": "${Description}",
    "ShowClear": false,
    "Value": {
      "Source": "MainDataSource",
      "Property": "$.my_type"
    },
    "Items": {
      "Source": "Types",
      "Property": ""
    }
  }
}

ComboBox.getAutocomplete¶

Возвращает значение, определяющее, разрешено ли автозавершение ввода.

Description¶

Если для ComboBox будет установлено автозавершение ввода, то при наборе первых нескольких букв значения ComboBox сможет завершить набор за вас.

Syntax¶

comboBox.getAutocomplete()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, разрешено ли автозавершение ввода. Значение true означает, что автозавершение ввода разрешено, значение false - запрещено.

Examples¶

var isAutocomplete = comboBox.getAutocomplete();

See Also¶

setAutocomplete()

ComboBox.getAutocompleteValue¶

Возвращает значение, для поиска в выпадающем списке значений.

Description¶

Возвращает текст, который введен пользователем в строке быстрого поиска значений в выпадающем списке. Для отображения подходящих значений, необходимо привязать значение ComboBox.autocompleteValue к фильтру источника данных выпадающего списка.

Syntax¶

comboBox.getAutocompleteValue()

Parameters¶

Нет

Returns¶

Возвращает текст, который введен пользователем в строке быстрого поиска значений в выпадающем списке.

Examples¶

text = comboBox.getAutocompleteValue();

Item’s DataSource metadata:

{
    "DataSource": {
        "DocumentDataSource": {
            "Filter": "text(Title, <%lookup%>)",
            "FilterParams": {
                "lookup": {
                    "Source": "MyComboBox1",
                    "Property": "autocompeleteValue"
                }
            }
        }
    }
}

ComboBox Metadata:

{
    "ComboBox": {
        "Name": "MyComboBox1",
        "Autocomplete": true,
        "Items": {
            "Source": "ds1",
            "Property": ""
        },
        "ItemProperty": "Title"
    }
}

See Also¶

ComboBox.getLabelFloating¶

Устанавливает значение, определяющее, является ли метка плавающей.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

comboBox.getLabelFloating()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, является ли метка плавающей. Значение true означает, что метка является плавающей, значение false означает, что метка является фиксированной.

Examples¶

var isFloating = comboBox.getLabelFloating();

See Also¶

setLabelFloating()

ComboBox.getLabelText¶

Возвращает текст метки.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

comboBox.getLabelText()

Parameters¶

Нет

Returns¶

Текст метки.

Examples¶

var labelText = comboBox.getLabelText();

See Also¶

setLabelText()

ComboBox.getShowClear¶

Возвращает значение, которое определяет наличие кнопки, очищающей выбранное значение. По умолчанию кнопка отображается. Чтобы убрать её, воспользуйтесь методом setShowClear().

Syntax¶

comboBox.getShowClear()

Parameters¶

Нет

Returns¶

Логическое значение, определяющее, нужна ли кнопка, очищающая выбранное значение.

Examples¶

var showClearButton = comboBox.getShowClear();

See Also¶

setShowClear()

ComboBox.getValueTemplate¶

Возвращает функцию шаблонизации выбранного значения.

Description¶

Зачастую значения перед отображением необходимо преобразовывать. Чтобы изменить формат отображения значений ComboBox воспользуйтесь методом setItemTemplate. Для изменения формата отображения выбранного значения используйте метод setValueTemplate.

Syntax¶

comboBox.getValueTemplate()

Parameters¶

Нет

Returns¶

Функция шаблонизации выбранного значения.

Examples¶

var valueTemplate = comboBox.getValueTemplate();

See Also¶

ComboBox.metadata¶

Метаданные типа ComboBox.

Properties¶

Name	Type	Default	Description
LabelText	`String`	–	Текст метки
NoItemsMessage	`String`	‘"<span class="search-message"></span>” not found’	Текст сообщения, которое будет отображаться, когда не найдено ни одного элемента
LabelFloating	`Boolean`	false	Значение, определяющее, является ли метка плавающей
Autocomplete	`Boolean`	false	Значение, определяющее, разрешено ли автозавершение ввода
ExpandOnEnter	`Boolean`	true	Значение, определяющее, раскрывать ли выпадающий список по нажатию на клавишу Enter
AutocompleteProperty	`String`	–	Свойство, по которому будет выполняться автозавершение ввода. Если не указывать AutocompleteProperty, то автозавершение будет выполняться на основе полнотекстового поиска
ValueTemplate	Element	–	Функция шаблонизации выбранного элемента
ValueFormat	DisplayFormat	–	Формат отображения выбранного элемента
ShowClear	`Boolean`	true	Значение, которое определяет наличие кнопки, очищающей выбранное значение

Examples¶

{
  "ComboBox": {
    "LabelText": "Type",
    "LabelFloating": true,
    "Autocomplete": true,
    "AutocompleteProperty": "Description",
    "ItemFormat": "${Description}",
    "ValueFormat": "${Description}",
    "ShowClear": false,
    "Value": {
      "Source": "MainDataSource",
      "Property": "$.my_type"
    },
    "Items": {
      "Source": "Types",
      "Property": ""
    }
  }
}

ComboBox.setAutocomplete¶

Устанавливает значение, определяющее, разрешено ли автозавершение ввода.

Description¶

Если для ComboBox будет установлено автозавершение ввода, то при наборе первых нескольких букв значения ComboBox сможет завершить набор за вас.

Syntax¶

comboBox.setAutocomplete(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Флаг, определяющий, разрешено ли автозавершение ввода. Значение `true` означает, что автозавершение ввода разрешено, значение `false` - запрещено

Returns¶

Метод ничего не возвращает.

Examples¶

comboBox.setAutocomplete(true);

See Also¶

getAutocomplete()

ComboBox.setAutocompleteValue¶

Устанавливает значение, для поиска в выпадающем списке значений

Description¶

Устанавивает значение, которое будет использоваться для отображения подходящих значений.

Syntax¶

comboBox.setAutocompleteValue(value)

Parameters¶

Name	Description
value	Значение, для поиска в выпадающем списке значений

Returns¶

Нет.

Examples¶

text = comboBox.setAutocompleteValue("255");

See Also¶

ComboBox.setLabelFloating¶

Устанавливает значение, определяющее, является ли метка плавающей.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

comboBox.setLabelFloating(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, является ли метка плавающей. Значение `true` означает, что метка является плавающей, значение `false` означает, что метка является фиксированной

Returns¶

Метод ничего не возвращает

Examples¶

comboBox.setLabelFloating(true);

See Also¶

getLabelFloating()

ComboBox.setLabelText¶

Устанавливает текст метки.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

comboBox.setLabelText(value)

Parameters¶

Name	Type	Description
`value`	`String`	Текст метки

Returns¶

Метод ничего не возвращает

Examples¶

comboBox.setLabelText('Label text');

See Also¶

getLabelText()

ComboBox.setNoItemsMessage¶

Устанавивает значение, которое будет использоваться для отображения, когда не найден не один элемент.

Description¶

Устанавивает значение, которое будет использоваться для отображения когда не найден не один элемент. Если в строку добавить элемент span с классом “search-message”, как показано в примере, то в этот элемент будет вставляться запрос, который вводит пользователь.

Syntax¶

comboBox.setNoItemsMessage( message )

Parameters¶

Name	Description
message	Сообщение, которое отображается, когда не найдено ни одного элемента

Returns¶

Нет.

Examples¶

text = comboBox.setNoItemsMessage( 'Вы ничего не нашли по запросу \"<span class=\"search-message\""></span>\"' );

ComboBox.setShowClear¶

Устанавливает значение, которое определяет наличие кнопки, очищающей выбранное значение.

Syntax¶

comboBox.setShowClear(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, нужна ли кнопка, очищающая выбранное значение

Returns¶

Метод ничего не возвращает

Examples¶

comboBox.setShowClear(false);

See Also¶

getShowClear()

ComboBox.setValueTemplate¶

Устанавливает функцию шаблонизации выбранного значения.

Description¶

Зачастую значения перед отображением необходимо преобразовывать. Чтобы изменить формат отображения значений ComboBox воспользуйтесь методом setItemTemplate. Для изменения формата отображения выбранного значения используйте метод setValueTemplate.

Syntax¶

comboBox.setValueTemplate(value)

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации выбранного значения

Returns¶

Метод ничего не возвращает.

Examples¶

//js-demo
var comboBox = new InfinniUI.ComboBox();

comboBox.getItems().reset([
    '1',
    '2',
    '3'
]);

var itemTemplate = function (context, args) {
    var label = new InfinniUI.Label();
    label.setValue('№' + args.value);
    return label;
}
comboBox.setItemTemplate(itemTemplate);

var valueTemplate = function (context, args) {
    var label = new InfinniUI.Label();
    var value = args.value ? 'Выбран №' + args.value : '';
    label.setValue(value);
    return label;
}
comboBox.setValueTemplate(valueTemplate);

$elementForExample.append(comboBox.render());

See Also¶

DataGrid¶

Таблица.

Extends¶

Syntax¶

new DataGrid([parent])

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент

Methods¶

Name	Description
getColumns	Возвращает коллекцию колонок таблицы.
getShowSelectors	Возвращает значение, определяющее показывать ли колонку с CheckBox/Radio для выбора элементов.
setShowSelectors	Устанавливает значение, определяющее показывать ли колонку с CheckBox/Radio для выбора элементов.
getCheckAllVisible	Возвращает значение, определяющее виден ли элемент “Выбрать все” в шапке таблицы.
setCheckAllVisible	Устанавливает значение, определяющее виден ли элемент “Выбрать все” в шапке таблицы.
getCheckAll	Возвращает состояние элемента “Выбрать все” из шапки таблицы.
getVerticalAlignment	Возвращает вертикальное выравнивание элемент.
setVerticalAlignment	Устанавливает вертикальное выравнивание элемента.

Events¶

Name	Description
onCheckAllChanged	Устанавливает обработчик события о том, что состоняие элемента “Выбрать все” в шапке таблицы изменилось.
onRowClick	Устанавливает обработчик события на клик по элементам DataGrid.
onRowDoubleClick	Устанавливает обработчик события на двойной клик по элементам DataGrid.

DataGrid.metadata¶

Метаданные типа DataGrid.

Properties¶

Name	Type	Default	Description
Columns	Array.<DataGridColumn>	–	Список колонок таблицы.
ShowSelectors	Boolean	`true`	Определяет показывать ли колонку с CheckBox/Radio для выбора элементов.
Scroll	Boolean	`true`	Расстягивает DataGrid на все свободное пространство по вертикали.
CheckAllVisible	Boolean	`false`	Определяет виден ли элемент “Выбрать все” в шапке таблицы.
OnCheckAllChanged	Script	–	Устанавливает обработчик изменения состоняие элемента “Выбрать все” в шапке таблицы.
VerticalAlignment	`String` (⇔)	–	Вертикальное выравнивание таблицы. Возможны значения: Top, Center, Bottom, Stretch.
RowBackground	Color (⇔)	–	Цвет фона строки
RowForeground	Color (⇔)	–	Цвет текста строки
RowTextStyle	TextStyle (⇔)	–	Стиль текста строки
RowStyle	`String` (⇔)	–	Имя кастомного стиля, применяемого к строке
onRowClick	Script	–	Устанавливает обработчик события на клик по элементам DataGrid.
onRowDoubleClick	Script	–	Устанавливает обработчик события на двойной клик по элементам DataGrid.

(⇔) Свойство может быть задано, как DataBinding.

Examples¶

{
  "DataGrid": {
    "Columns": [
      {
        "Header": "Name",
        "CellProperty": "Name",
        "Sortable": true,
        "SortedDefault": "asc",
        "SortFunction": "{ console.log(args.sortDirection) }"
      },
      {
        "Header": "Family",
        "CellProperty": "Family"
      },
      {
        "Header": "Kingdom",
        "CellProperty": "Kingdom"
      }
    ],
    "VerticalAlignment": "Stretch",
    "Items": {
      "Source": "peopleDataSource"
    },
    "OnRowClick": "{ console.log(args.source) }",
    "OnRowDoubleClick": "{ console.log(args.source) }",
    "RowBackground": {
      "Source": "RowStyleDataSource",
      "Property": "#",
      "Mode": "ToElement",
      "Converter": {
        "ToElement": "{ return args.value.Age > 100 ? 'Accent1' : 'Accent2'; }"
      }
    }
  }
}

DataGrid.getCheckAll¶

Возвращает состояние элемента “Выбрать все” из шапки таблицы.

Syntax¶

DataGrid.getCheckAll()

Parameters¶

Нет

Returns¶

Значение, определяющее состояние элемента “Выбрать все” из шапки таблицы (true - установлен, false - сброшен).

Examples¶

var isCheckAll = dataGrid.getCheckAll();

See Also¶

DataGrid.getCheckAllVisible¶

Возвращает значение, определяющее виден ли элемент “Выбрать все” в шапке таблицы.

Syntax¶

DataGrid.getCheckAllVisible()

Parameters¶

Нет

Returns¶

Значение, определяющее виден ли элемент “Выбрать все” в шапке таблицы.

Examples¶

var isVisible = dataGrid.getCheckAllVisible();

See Also¶

DataGrid.getColumns¶

Возвращает коллекцию колонок таблицы.

Syntax¶

DataGrid.getColumns()

Parameters¶

Нет

Returns¶

Коллекция колонок.

Examples¶

var columns = DataGrid.getColumns();

See Also¶

DataGridColumn

DataGrid.getShowSelectors¶

Возвращает значение, определяющее показывать ли колонку с CheckBox/Radio для выбора элементов.

Syntax¶

DataGrid.getShowSelectors()

Parameters¶

Нет

Returns¶

Значение, определяющее показывать ли колонку с CheckBox/Radio для выбора элементов.

Examples¶

var showSelectors = dataGrid.getShowSelectors();

See Also¶

setShowSelectors()

DataGrid.getVerticalAlignment¶

Возвращает вертикальное выравнивание элемент.

Syntax¶

DataGrid.getVerticalAlignment()

Parameters¶

Нет

Returns¶

Вертикальное выравнивание элемента

Examples¶

var verticalAlignment = dataGrid.getVerticalAlignment();

See Also¶

setVerticalAlignment

DataGrid.metadata¶

Метаданные типа DataGrid.

Properties¶

Name	Type	Default	Description
Columns	Array.<DataGridColumn>	–	Список колонок таблицы.
ShowSelectors	Boolean	`true`	Определяет показывать ли колонку с CheckBox/Radio для выбора элементов.
Scroll	Boolean	`true`	Расстягивает DataGrid на все свободное пространство по вертикали.
CheckAllVisible	Boolean	`false`	Определяет виден ли элемент “Выбрать все” в шапке таблицы.
OnCheckAllChanged	Script	–	Устанавливает обработчик изменения состоняие элемента “Выбрать все” в шапке таблицы.
VerticalAlignment	`String` (⇔)	–	Вертикальное выравнивание таблицы. Возможны значения: Top, Center, Bottom, Stretch.
RowBackground	Color (⇔)	–	Цвет фона строки
RowForeground	Color (⇔)	–	Цвет текста строки
RowTextStyle	TextStyle (⇔)	–	Стиль текста строки
RowStyle	`String` (⇔)	–	Имя кастомного стиля, применяемого к строке
onRowClick	Script	–	Устанавливает обработчик события на клик по элементам DataGrid.
onRowDoubleClick	Script	–	Устанавливает обработчик события на двойной клик по элементам DataGrid.

(⇔) Свойство может быть задано, как DataBinding.

Examples¶

{
  "DataGrid": {
    "Columns": [
      {
        "Header": "Name",
        "CellProperty": "Name",
        "Sortable": true,
        "SortedDefault": "asc",
        "SortFunction": "{ console.log(args.sortDirection) }"
      },
      {
        "Header": "Family",
        "CellProperty": "Family"
      },
      {
        "Header": "Kingdom",
        "CellProperty": "Kingdom"
      }
    ],
    "VerticalAlignment": "Stretch",
    "Items": {
      "Source": "peopleDataSource"
    },
    "OnRowClick": "{ console.log(args.source) }",
    "OnRowDoubleClick": "{ console.log(args.source) }",
    "RowBackground": {
      "Source": "RowStyleDataSource",
      "Property": "#",
      "Mode": "ToElement",
      "Converter": {
        "ToElement": "{ return args.value.Age > 100 ? 'Accent1' : 'Accent2'; }"
      }
    }
  }
}

DataGrid.onCheckAllChanged¶

Устанавливает обработчик события о том, что состояние элемента “Выбрать все” в шапке таблицы изменилось.

Description¶

Новое значение переключателя передаётся в параметре args.value.

Syntax¶

DataGrid.onCheckAllChanged(callback)

Parameters¶

Name	Type	Description
callback	Script	Обработчик события о том, что одно из свойств элемента изменилось. В параметре `args` передается информация о произошедшем событии. Свойство `args.value` - новое значение (`true` - Установлен, `false` - сброшен).

See Also¶

getCheckAll()

DataGrid.onRowClick¶

Устанавливает обработчик события на клик по элементам DataGrid.

Syntax¶

DataGrid.onRowClick(callback)

Parameters¶

Name	Type	Description
callback	Обработчик события	Обработчик события о том, что одно из свойств элемента изменилось. В параметре `args` передается информация о произошедшем событии.

See Also¶

onRowDoubleClick()

DataGrid.onRowDoubleClick¶

Устанавливает обработчик события на двойной клик по элементам DataGrid.

Syntax¶

DataGrid.onRowDoubleClick(callback)

Parameters¶

Name	Type	Description
callback	Обработчик события	Обработчик события о том, что одно из свойств элемента изменилось. В параметре `args` передается информация о произошедшем событии.

See Also¶

onRowClick()

DataGrid.setCheckAllVisible¶

Устанавливает значение, определяющее виден ли элемент “Выбрать все” в шапке таблицы.

Syntax¶

DataGrid.setCheckAllVisible(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Значение, определяющее виден ли элемент “Выбрать все” в шапке таблицы.

Returns¶

нет.

Examples¶

dataGrid.setCheckAllVisible(true);

See Also¶

DataGrid.setShowSelectors¶

Устанавливает значение, определяющее показывать ли колонку с CheckBox/Radio для выбора элементов.

Syntax¶

DataGrid.setShowSelectors(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Значение, определяющее показывать ли колонку с CheckBox/Radio для выбора элементов.

Returns¶

нет.

Examples¶

dataGrid.setShowSelectors(true);

See Also¶

getShowSelectors()

DataGrid.setVerticalAlignment¶

Устанавливает вертикальное выравнивание элемента.

Syntax¶

DataGrid.setVerticalAlignment(value)

Parameters¶

Name	Type	Description
value	`String`	Вертикальное выравнивание элемента. Возможные варианты: Stretch, Top, Middle, Bottom.

Returns¶

нет.

Examples¶

dataGrid.setVerticalAlignment('Top');

See Also¶

getVerticalAlignment()

DataGridColumn¶

Колонка таблицы.

Syntax¶

new DataGridColumn()

Parameters¶

Нет.

Methods¶

Name	Description
getWidth	Возвращает ширину колонки.
setWidth	Устанавливает ширину колонки.
getHeader	Возвращает заголовок колонки.
setHeader	Устанавливает заголовок колонки.
getSortable	Возвращает boolean-значение, которое показывает можно ли сортировать колонку.
setSortable	Устанавливает значение, можно ли сортировать колонку.
getSortDirection	Возвращает направление сортировки у колонки.
setSortDirection	Устанавливает направление сортировки у колонки.
isSortable	Проверяет, можно ли сортировать колонку.

Events¶

Name	Description
onSort	Устанавливает обработчик события сортировки колонки.

DataGridColumn.metadata¶

Метаданные типа DataGridColumn.

Properties¶

Name	Type	Description
HeaderTemplate	Element	Шаблон отображения заголовка колонки.
Header	`String`	Заголовок колонки.
CellSelector	Script	Функция выборки из элемента коллеции значения для ячейки.
CellProperty	`String`	Свойство элемента коллекции со значением для ячейки.
CellFormat	`String` \| Format	Правила форматирования элемента коллекции для ячейки.
CellTemplate	Element	Шаблон отображения элемента коллекции для ячейки.
Width	`String`	Ширина колонки (напр. “100px”, “25%”).
Sortable	`Boolean`	Возможность сортировки колонки.
SortedDefault	`String`	Направление сортировки колонки по умолчанию (напр. “asc” или “desc”).
SortFunction	`Script`	Функция сортировки колонки.

Examples¶

{
  "Header": "Kingdom",
  "CellProperty": "Kingdom",
  "Sortable": true,
  "SortedDefault": "asc",
  "SortFunction": "{ console.log( args.sortDirection ) }"
}

See Also¶

DataGrid

DataGridColumn.getCellSelector¶

Возвращает значение селектора ячейки.

Syntax¶

DataGridColumn.getCellSelector();

Parameters¶

Нет

Returns¶

Значение селектора ячейки.

Examples¶

var cellSelector = DataGridColumn.getCellSelector();

See Also¶

setCellSelector()

DataGridColumn.getCellTemplate¶

Возвращает функцию шаблонизации дочернего элемента DataGrid.

Syntax¶

DataGridColumn.getCellTemplate();

Parameters¶

Нет

Returns¶

Функция шаблонизации ячейки дочернего элемента DataGrid. В параметре args передается информация, необходимая для формирования визуального элемента, который будет отображен в качестве элемента DataGrid. Результатом работы функции должен быть визуальный элемент.

Examples¶

var cellTemplate = DataGridColumn.getCellTemplate();

See Also¶

setCellTemplate()

DataGridColumn.getHeader¶

Возвращает заголовок колонки.

Syntax¶

DataGridColumn.getHeader();

Parameters¶

Нет

Returns¶

Заголовок колонки.

Examples¶

var header = DataGridColumn.getHeader();

See Also¶

setHeader()

DataGridColumn.getHeaderTemplate¶

Возвращает функцию шаблонизации ячейки заголовка DataGrid.

Syntax¶

DataGridColumn.getHeaderTemplate();

Parameters¶

Нет

Returns¶

Функция шаблонизации ячейки заголовка DataGrid. Результатом работы функции должен быть визуальный элемент.

Examples¶

var headerTemplate = DataGridColumn.getHeaderTemplate();

See Also¶

setHeaderTemplate()

DataGridColumn.getIsHeaderTemplateEmpty¶

Возвращает boolean-значение о том, есть ли шаблон ячейки заголовка.

Syntax¶

DataGridColumn.getIsHeaderTemplateEmpty();

Parameters¶

Нет

Returns¶

true или false.

Examples¶

var headerTemplate = DataGridColumn.getIsHeaderTemplateEmpty();

See Also¶

setIsHeaderTemplateEmpty()

DataGridColumn.getSortDirection¶

Возвращает направление сортировки.

Syntax¶

DataGridColumn.getSortDirection();

Parameters¶

Нет

Returns¶

‘asc’ или ‘desc’.

Examples¶

column.getSortDirection();

See Also¶

DataGridColumn.getSortable¶

Возвращает boolean-значение, которое показывает можно ли применять сортировку к данной колонке.

Syntax¶

DataGridColumn.getSortable();

Parameters¶

Нет.

Returns¶

true или false.

Examples¶

column.getSortable();

See Also¶

DataGridColumn.getWidth¶

Возвращает ширину колонки таблицы.

Syntax¶

DataGridColumn.getWidth()

Parameters¶

Нет

Returns¶

Ширина колонки таблицы.

Examples¶

var width = DataGridColumn.getWidth();

See Also¶

setWidth()

DataGridColumn.isSortable¶

Возвращает true если колонку можно сортировать.

Syntax¶

DataGridColumn.isSortable();

Parameters¶

Нет

Returns¶

true или false.

Examples¶

column.isSortable();

See Also¶

DataGridColumn.metadata¶

Метаданные типа DataGridColumn.

Properties¶

Name	Type	Description
HeaderTemplate	Element	Шаблон отображения заголовка колонки.
Header	`String`	Заголовок колонки.
CellSelector	Script	Функция выборки из элемента коллеции значения для ячейки.
CellProperty	`String`	Свойство элемента коллекции со значением для ячейки.
CellFormat	`String` \| Format	Правила форматирования элемента коллекции для ячейки.
CellTemplate	Element	Шаблон отображения элемента коллекции для ячейки.
Width	`String`	Ширина колонки (напр. “100px”, “25%”).
Sortable	`Boolean`	Возможность сортировки колонки.
SortedDefault	`String`	Направление сортировки колонки по умолчанию (напр. “asc” или “desc”).
SortFunction	`Script`	Функция сортировки колонки.

Examples¶

{
  "Header": "Kingdom",
  "CellProperty": "Kingdom",
  "Sortable": true,
  "SortedDefault": "asc",
  "SortFunction": "{ console.log( args.sortDirection ) }"
}

DataGridColumn.onSort¶

Устанавливает обработчик события на событие ‘onSort’

Description¶

Новое значение направления передаётся в параметре args.sortDirection.

Syntax¶

DataGridColumn.onSort(callback);

Parameters¶

Name	Type	Description
callback	Обработчик события	Обработчик события о том, что необходимо изменить сортировку элементов DataGrid.

Returns¶

Нет.

Examples¶

column.onSort(callback);

See Also¶

DataGridColumn.setCellSelector¶

Устанавливает функцию которая возвращает значение селектора ячейки.

Syntax¶

DataGridColumn.setCellSelector(value);

Parameters¶

Name	Type	Description
value	`Script`	Функция возвращающая значение селектора ячейки.

Returns¶

Нет.

Examples¶

DataGridColumn.setCellSelector(function (value) {
  return value;
});

See Also¶

getCellSelector()

DataGridColumn.setCellTemplate¶

Устанавливает функцию шаблонизации ячейки дочернего элемента DataGrid.

Syntax¶

DataGridColumn.setCellTemplate();

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации ячейки дочернего элемента DataGrid. В параметре `args` передается информация, необходимая для формирования визуального элемента, который будет отображен в качестве элемента DataGrid. Результатом работы функции должен быть визуальный элемент

Returns¶

Нет.

Examples¶

DataGridColumn.setCellTemplate(function(context, argument) {
  var cell = new Label();
  cell.setValue(argument.value);
  return cell;
});

See Also¶

getCellTemplate()

DataGridColumn.setHeader¶

Устанавливает заголовок колонки таблицы.

Syntax¶

DataGridColumn.setHeader(value);

Parameters¶

Name	Type	Description
value	`String`	Заголовок колонки таблицы.

Returns¶

Нет

Examples¶

column.setHeader("Id");

See Also¶

getHeader()

DataGridColumn.setHeaderTemplate¶

Устанавливает функцию шаблонизации ячейки заголовка DataGrid.

Syntax¶

DataGridColumn.setHeaderTemplate(value);

Parameters¶

Name	Type	Description
value	Script	Функция шаблонизации ячейки заголовка DataGrid. Результатом работы функции должен быть визуальный элемент

Returns¶

Нет.

Examples¶

DataGridColumn.setHeaderTemplate(function(context, argument) {
  var header = new Label();
  header.setValue(argument.value);
  return header;
});

See Also¶

getHeaderTemplate()

DataGridColumn.setIsHeaderTemplateEmpty¶

Устанавливает boolean-значение о том, что есть шаблон ячейки заголовка.

Syntax¶

DataGridColumn.setIsHeaderTemplateEmpty(value);

Parameters¶

Name	Type	Description
value	`Boolean`	Устанавливает boolean-значение о том, что есть шаблон ячейки заголовка.

Returns¶

Нет.

Examples¶

DataGridColumn.setIsHeaderTemplateEmpty(true);

See Also¶

getIsHeaderTemplateEmpty()

DataGridColumn.setSortDirection¶

Возвращает направление сортировки.

Description¶

Возможны следующие направления сортировки:

asc - сортировка по возрастанию,
desc - сортировка по убыванию.

Syntax¶

DataGridColumn.setSortDirection(value);

Parameters¶

Name	Type	Description
value	`String`	Направление сортировки.

Returns¶

Нет.

Examples¶

column.setSortDirection('asc');

See Also¶

DataGridColumn.setSortable¶

Устанавливает или убирает возможность сортировки данной колонки.

Syntax¶

DataGridColumn.setSortable(value);

Parameters¶

Name	Type	Description
value	`Boolean`	Возможность сортировки колонки.

Returns¶

Нет.

Examples¶

column.setSortable(true);

See Also¶

DataGridColumn.setWidth¶

Устанавливает ширину колонки. Значение ширины может задаваться как в абсолютных величинах (напр. “150px”) так и в относительных (напр. “33%”).

Syntax¶

DataGridColumn.setWidth(value)

Parameters¶

Name	Type	Description
value	`String`	Ширина колонки таблицы

Returns¶

Нет

Examples¶

column.setWidth("50%");

See Also¶

getWidth()

DataNavigation¶

Панель навигации по данным.

Extends¶

Syntax¶

new DataNavigation(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getDataSource	Возвращает источник данных.
setDataSource	Устанавливает источник данных.
getAvailablePageSizes	Возвращает коллекцию доступных размеров страниц.
getPageNumber	Возвращает номер текущей страницы.
setPageNumber	Устанавливает номер текущей страницы.
getPageSize	Возвращает размер страницы.
setPageSize	Устанавливает размер страницы.
getPageCount	Возвращает количество страниц.
setPageCount	Устанавливает количество страниц.
getIsDataReady	Возвращает значение о том, готовы данные или нет.
setIsDataReady	Устанавливает значение о том, готовы данные или нет.

Events¶

onPageSizeChanged	Обработчик события о том, что размер страницы изменился.
onPageNumberChanged	Обработчик события о том, что номер страницы изменился.

DataNavigation.metadata¶

Метаданные типа DataNavigation.

Properties¶

Name	Type	Description
AvailablePageSizes	`Array.<Integer>`	Список доступных размеров страниц
DataSource	`String`	Наименование источника данных

Examples¶

{
  "AvailablePageSizes": [
    20,
    50,
    100
  ],
  "DataSource": "dataSource1"
}

DataNavigation.getAvailablePageSizes¶

Возвращает коллекцию доступных размеров страниц.

Syntax¶

DataNavigation.getAvailablePageSizes()

Returns¶

Коллекцию доступных размеров страниц.

Examples¶

var pageSizes = dataNavigation.getAvailablePageSizes();

DataNavigation.getDataSource¶

Возвращает источник данных.

Syntax¶

DataNavigation.getDataSource()

Returns¶

Источник данных.

Examples¶

var ds = dataNavigation.getDataSource();

See Also¶

setDataSource()

DataNavigation.getIsDataReady¶

Возвращает значение которое показывает готовы ли данные.

Syntax¶

DataNavigation.getIsDataReady()

Returns¶

true или false.

Examples¶

var isDataReady = dataNavigation.getIsDataReady();

See Also¶

setIsDataReady()

DataNavigation.getPageCount¶

Возвращает количество страниц.

Syntax¶

DataNavigation.getPageCount()

Returns¶

Количество страниц.

Examples¶

var pageCount = dataNavigation.getPageCount();

See Also¶

setPageCount()

DataNavigation.getPageNumber¶

Возвращает номер текущей страницы.

Syntax¶

DataNavigation.getPageNumber()

Returns¶

Номер текущей страницы.

Examples¶

var pageNumber = dataNavigation.getPageNumber();

See Also¶

setPageNumber()

DataNavigation.getPageSize¶

Возвращает размер страницы.

Syntax¶

DataNavigation.getPageSize()

Returns¶

Размер страницы.

Examples¶

var pageSize = dataNavigation.getPageSize();

See Also¶

setPageSize()

DataNavigation.metadata¶

Метаданные типа DataNavigation.

Properties¶

Name	Type	Description
AvailablePageSizes	`Array.<Integer>`	Список доступных размеров страниц
DataSource	`String`	Наименование источника данных

Examples¶

{
  "AvailablePageSizes": [
    20,
    50,
    100
  ],
  "DataSource": "dataSource1"
}

DataNavigation.onPageNumberChanged¶

Устанавливает обработчик события на событие ‘onPageNumberChanged’

Description¶

Новое значение передаётся в параметре args.value.

Syntax¶

DataNavigation.onPageNumberChanged(callback);

Parameters¶

Name	Type	Description
callback	Обработчик события	Обработчик события о том, что номер страницы был изменен.

Returns¶

Нет.

Examples¶

DataNavigation.onPageNumberChanged(callback);

See Also¶

DataNavigation()

DataNavigation.onPageSizeChanged¶

Устанавливает обработчик события на событие ‘onPageSizeChanged’

Description¶

Новое значение передаётся в параметре args.value.

Syntax¶

DataNavigation.onPageSizeChanged(callback);

Parameters¶

Name	Type	Description
callback	Обработчик события	Обработчик события о том, что размер страницы был изменен.

Returns¶

Нет.

Examples¶

DataNavigation.onPageSizeChanged(callback);

See Also¶

DataNavigation()

DataNavigation.setDataSource¶

Устанавливает источник данных.

Syntax¶

DataNavigation.setDataSource(value)

Parameters¶

Name	Type	Description
`value`	BaseDataSource	Устанавливает источник данных.

Returns¶

Нет.

Examples¶

dataNavigation.getDataSource(dataSource);

See Also¶

getDataSource()

DataNavigation.setIsDataReady¶

Устанавливает значение которое показывает готовы ли данные.

Syntax¶

DataNavigation.setIsDataReady(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Готовность данных.

Returns¶

Нет.

Examples¶

dataNavigation.setIsDataReady(true);

See Also¶

getIsDataReady()

DataNavigation.setPageCount¶

Устанавливает количество страниц.

Syntax¶

DataNavigation.setPageCount(value)

Parameters¶

Name	Type	Description
value	`Number`	Количество страниц.

Returns¶

Нет.

Examples¶

dataNavigation.setPageCount(true);

See Also¶

getPageCount()

DataNavigation.setPageNumber¶

Устанавливает номер текущей страницы.

Syntax¶

DataNavigation.setPageNumber(value);

Parameters¶

Name	Type	Description
`value`	`Integer`	Номер текущей страницы.

Returns¶

Нет.

Examples¶

dataNavigation.setPageNumber(2);

See Also¶

getPageNumber()

DataNavigation.setPageSize¶

Устанавливает размер страницы.

Syntax¶

DataNavigation.setPageSize(value);

Parameters¶

Name	Type	Description
`value`	`Integer`	Размер страницы.

Returns¶

Нет.

Examples¶

dataNavigation.setPageSize(10);

See Also¶

getPageSize()

DatePicker¶

Редактор даты. Значением данного элемента всегдя является UNIX time - количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года.

Extends¶

DateTimePicker

Syntax¶

new DatePicker(parent)

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент.

//js-demo

//  Format
var format = new InfinniUI.DateTimeFormat("d");
format.setOptions({TimeZone: 0});
var displayFormat = function (context, args) {
    return format.formatValue(args.value);
}

//  EditMask
var editMask = new InfinniUI.DateTimeEditMask();
editMask.mask = "d";
editMask.format = format;

//  DateTimePicker
var datePicker = new InfinniUI.DatePicker();
datePicker.setDisplayFormat(displayFormat);
datePicker.setEditMask(editMask);
datePicker.setMinValue(new Date());   // Set minimum value
datePicker.onValueChanged(function (context, args) {
    datePicker.setHintText("New Value: " + args.newValue);
    datePicker.setErrorText("Min Value: " + datePicker.getMinValue());
    datePicker.setWarningText("Max Value: " + datePicker.getMaxValue());
});

//  Render
$elementForExample.append(datePicker.render());

DateTimePicker¶

Редактор даты и времени. Значением данного элемента всегда является текстовая строка, представляющая собой выбранное значение даты и времени в формате ISO 8601.

Extends¶

TextEditorBase

Syntax¶

new DateTimePicker(parent)

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент.

Methods¶

Name	Description
getMinValue	Возвращает минимальное значение для ввода.
setMinValue	Устанавливает минимальное значение для ввода.
getMaxValue	Возвращает максимальное значение для ввода.
setMaxValue	Устанавливает максимальное значение для ввода.
getMode	Возвращает режим работы элемента.
setMode	Устанавливает режим работы элемента.
setTimeZone	Устанавливает смещение часового пояса.
getTimeZone	Возвращает смещение часового пояса.
getExpandOnEnter	Возвращает значение, определяющее, будет ли открываться выпадающее меню по клавише Enter.
setExpandOnEnter	Устанавивает значение, определяющее, будет ли открываться выпадающее меню по клавише Enter.

DateTimePicker.metadata¶

Метаданные типа DateTimePicker.

Properties¶

Name	Type	Default	Description
MinValue	`String`	–	Минимальное значение в формате ISO8601
MaxValue	`String`	–	Максимальное значение в формате ISO8601
ExpandOnEnter	`Boolean`	true	Значение, определяющее, раскрывать ли выпадающее меню по нажатию на клавишу Enter
Mode	`String`	`Date`	Режим работы элемента (`Date`, `Time`, `DateTime`)
TimeZone	`Integer`	–	Смещение часового пояса, являющееся разностью в минутах между временем UTC и местным временем. Если смещение не задано, используется текущая локаль.

Examples¶

{
  "LabelText": "Birthday",
  "LabelFloating": true,
  "Value": {
    "Source": "mainDataSource",
    "Property": "$.Birthday"
  }
}

DateTimePicker.getExpandOnEnter¶

Возвращает значение, определяющее, будет ли открываться выпадающее меню по клавише Enter.

Syntax¶

dateTimePicker.getExpandOnEnter()

Parameters¶

Нет

Returns¶

true или false

Examples¶

var expandOnEnter = dateTimePicker.getExpandOnEnter();

See Also¶

setExpandOnEnter()

DateTimePicker.getMaxValue¶

Возвращает максимальное значение для ввода.

Syntax¶

DateTimePicker.getMaxValue()

Returns¶

Максимальное значение для ввода.

Examples¶

var maxValue = dateTimePicker.getMaxValue();

See Also¶

setMaxValue()

DateTimePicker.getMinValue¶

Возвращает минимальное значение для ввода.

Syntax¶

DateTimePicker.getMinValue()

Returns¶

Минимальное значение для ввода.

Examples¶

var minValue = dateTimePicker.getMinValue();

See Also¶

setMinValue()

DateTimePicker.getMode¶

Возвращает режим работы элемента.

Syntax¶

DateTimePicker.getMode()

Returns¶

Режим работы элемента.

Examples¶

var mode = dateTimePicker.getMode();

See Also¶

setMode()

DateTimePicker.setTimeZone¶

Возвращает смещение часового пояса. Смещением является разность в минутах между временем UTC и местным временем.

Syntax¶

DateTimePicker.пetTimeZone()

Parameters¶

Нет

See Also¶

setTimeZone()

DateTimePicker.metadata¶

Метаданные типа DateTimePicker.

Properties¶

Name	Type	Default	Description
MinValue	`String`	–	Минимальное значение в формате ISO8601
MaxValue	`String`	–	Максимальное значение в формате ISO8601
ExpandOnEnter	`Boolean`	true	Значение, определяющее, раскрывать ли выпадающее меню по нажатию на клавишу Enter
Mode	`String`	`Date`	Режим работы элемента (`Date`, `Time`, `DateTime`)
TimeZone	`Integer`	–	Смещение часового пояса, являющееся разностью в минутах между временем UTC и местным временем. Если смещение не задано, используется текущая локаль.

Examples¶

{
  "LabelText": "Birthday",
  "LabelFloating": true,
  "Value": {
    "Source": "mainDataSource",
    "Property": "$.Birthday"
  }
}

DateTimePicker.setExpandOnEnter¶

Устанавивает значение, определяющее, будет ли открываться выпадающее меню по клавише Enter.

Syntax¶

dateTimePicker.setExpandOnEnter( value )

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, будет ли открываться выпадающее меню по клавише Enter. По умолчанию оно равно true.

Returns¶

Нет.

Examples¶

dateTimePicker.setExpandOnEnter( false );

See Also¶

getExpandOnEnter()

DateTimePicker.setMaxValue¶

Устанавливает максимальное значение для ввода.

Syntax¶

DateTimePicker.setMaxValue(value)

Parameters¶

Name	Type	Description
`value`	`Date`	Максимальное значение для ввода.

Examples¶

//js-demo

//  Format
var format = new InfinniUI.DateTimeFormat("G");
var displayFormat = function (context, args) {
    return format.formatValue(args.value);
}

//  EditMask
var editMask = new InfinniUI.DateTimeEditMask();
editMask.mask = "G";
editMask.format = format;

//  DateTimePicker
var dtPicker = new InfinniUI.DateTimePicker();
dtPicker.setMode("DateTime");
dtPicker.setMaxValue(new Date());   // Set maximum value
dtPicker.setDisplayFormat(displayFormat);
dtPicker.setEditMask(editMask);
dtPicker.onValueChanged(function (context, args) {
    dtPicker.setHintText("New Value: " + args.newValue);
});

//  Render
$elementForExample.append(dtPicker.render());

See Also¶

getMaxValue()

DateTimePicker.setMinValue¶

Устанавливает минимальное значение для ввода.

Syntax¶

DateTimePicker.setMinValue(value)

Parameters¶

Name	Type	Description
`value`	`Date`	Минимальное значение для ввода.

Examples¶

//js-demo

//  Format
var format = new InfinniUI.DateTimeFormat("G");
format.setOptions({TimeZone: -180});
var displayFormat = function (context, args) {
    return format.formatValue(args.value);
}

//  EditMask
var editMask = new InfinniUI.DateTimeEditMask();
editMask.mask = "G";
editMask.format = format;

//  DateTimePicker
var dtPicker = new InfinniUI.DateTimePicker();
dtPicker.setMode("DateTime");
dtPicker.setTimeZone(-180);
dtPicker.setMinValue(new Date());   // Set minimum value
dtPicker.setDisplayFormat(displayFormat);
dtPicker.setEditMask(editMask);
dtPicker.onValueChanged(function (context, args) {
    dtPicker.setHintText("New Value: " + args.newValue);
});

//  Render
$elementForExample.append(dtPicker.render());

See Also¶

getMinValue()

DateTimePicker.setMode¶

Устанавливает режим работы элемента.

Syntax¶

DateTimePicker.setMode(value)

Parameters¶

Name	Type	Description
`value`	`String`	Режим работы элемента: `Date`, `Time` или `DateTime`.

Examples¶

//js-demo

//  Format
var format = new InfinniUI.DateTimeFormat("G");
var displayFormat = function (context, args) {
    return format.formatValue(args.value);
}

//  EditMask
var editMask = new InfinniUI.DateTimeEditMask();
editMask.mask = "G";
editMask.format = format;

//  DateTimePicker
var dtPicker = new InfinniUI.DateTimePicker();
dtPicker.setMode("DateTime");
dtPicker.setValue("2016-07-04T17:00");
dtPicker.setDisplayFormat(displayFormat);
dtPicker.setEditMask(editMask);
dtPicker.onValueChanged(function (context, args) {
    dtPicker.setHintText("New Value: " + args.newValue);
});

//  Render
$elementForExample.append(dtPicker.render());

See Also¶

getMode()

DateTimePicker.setTimeZone¶

Устанавливает смещение часового пояса. Смещение задается разностью в минутах между временем UTC и местным временем.

Syntax¶

DateTimePicker.setTimeZone(value)

Parameters¶

Name	Type	Description
`value`	`Integer`	Смещение часового пояса.

Examples¶

//js-demo

//  Format
var format = new InfinniUI.DateTimeFormat("G");
var timeZone = -180; // UTC+3
format.setOptions({TimeZone: timeZone});
var displayFormat = function (context, args) {
    return format.formatValue(args.value);
}

//  EditMask
var editMask = new InfinniUI.DateTimeEditMask();
editMask.mask = "G";
editMask.format = format;

//  DateTimePicker
var dtPicker = new InfinniUI.DateTimePicker();
dtPicker.setMode("DateTime");
dtPicker.setTimeZone(timeZone);
dtPicker.setDisplayFormat(displayFormat);
dtPicker.setEditMask(editMask);
dtPicker.onValueChanged(function (context, args) {
    dtPicker.setHintText("New Value: " + args.newValue);
    dtPicker.setWarningText("TimeZone: " + dtPicker.getTimeZone());
});

//  Render
$elementForExample.append(dtPicker.render());

See Also¶

getTimeZone()

Divider¶

Разделитель.

Extends¶

Syntax¶

new Divider(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Нет

Events¶

Нет

Divider.metadata¶

Properties¶

Нет

Examples¶

//infinni-ui-demo
{
"DataSources": [],

"Items": [
//infinni-ui-display-begin
{
  "Panel": {
    "Items": [
      {
        "Label": {
          "Text": "Title"
        }
      },
      {
        "Divider": {}
      },
      {
        "Label": {
          "Text": "Body"
        }
      }
    ]
  }
}
//infinni-ui-display-end
]
}

Divider.metadata¶

Properties¶

Нет

Examples¶

//infinni-ui-demo
{
"DataSources": [],

"Items": [
//infinni-ui-display-begin
{
  "Panel": {
    "Items": [
      {
        "Label": {
          "Text": "Title"
        }
      },
      {
        "Divider": {}
      },
      {
        "Label": {
          "Text": "Body"
        }
      }
    ]
  }
}
//infinni-ui-display-end
]
}

EditorBase¶

Интерфейс редакторов значений.

Extends¶

Syntax¶

new EditorBase(parent)

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент.

Methods¶

Name	Description
getValue	Возвращает значение.
setValue	Устанавливает значение.
getHintText	Возвращает текст с подсказкой для ввода.
setHintText	Устанавливает текст с подсказкой для ввода.
getErrorText	Возвращает текст с информацией об ошибке.
setErrorText	Устанавливает текст с информацией об ошибке.
getWarningText	Возвращает текст с информацией о предупреждении.
setWarningText	Устанавливает текст с информацией о предупреждении.

Events¶

Name	Description
onValueChanging	Устанавливает обработчик события о том, что значение изменяется.
onValueChanged	Устанавливает обработчик события о том, что значение было изменено.

EditorBase.metadata¶

Метаданные типа EditorBase.

Properties¶

Name	Type	Description
Value	BindingMetadata	Значение
HintText	`String` (ƒ)	Текст с подсказкой для ввода
ErrorText	`String` (ƒ)	Текст с информацией об ошибке
WarningText	`String` (ƒ)	Текст с информацией о предупреждении
OnValueChanging	Script	Обработчик события о том, что значение изменяется
OnValueChanged	Script	Обработчик события о том, что значение было изменено

(ƒ) Свойство может быть задано, как JSExpression.

Examples¶

{
    "Value": {
        "Source": "MainDataSource",
        "Property": "Name"
    },
    "HintText": "Enter your name",
    "OnValueChanged": "onNameChengedScript"
}

EditorBase.getErrorText¶

Возвращает текст с информацией об ошибке.

Syntax¶

EditorBase.getErrorText()

Returns¶

Текст с информацией об ошибке.

Examples¶

var errorText = EditorBase.getErrorText();

See Also¶

setErrorText()

EditorBase.getHintText¶

Возвращает текст с подсказкой для ввода.

Syntax¶

EditorBase.getHintText()

Returns¶

Текст с подсказкой для ввода.

Examples¶

var hintText = EditorBase.getHintText();

See Also¶

setHintText()

EditorBase.getValue¶

Возвращает значение.

Syntax¶

EditorBase.getValue()

Returns¶

Значение редактора.

Examples¶

var value = EditorBase.getValue();

See Also¶

setValue()

EditorBase.getWarningText¶

Возвращает текст с информацией о предупреждении.

Syntax¶

EditorBase.getWarningText()

Returns¶

Текст с информацией о предупреждении.

Examples¶

var warningText = EditorBase.getWarningText();

See Also¶

setWarningText()

EditorBase.metadata¶

Метаданные типа EditorBase.

Properties¶

Name	Type	Description
Value	BindingMetadata	Значение
HintText	`String` (ƒ)	Текст с подсказкой для ввода
ErrorText	`String` (ƒ)	Текст с информацией об ошибке
WarningText	`String` (ƒ)	Текст с информацией о предупреждении
OnValueChanging	Script	Обработчик события о том, что значение изменяется
OnValueChanged	Script	Обработчик события о том, что значение было изменено

(ƒ) Свойство может быть задано, как JSExpression.

Examples¶

{
    "Value": {
        "Source": "MainDataSource",
        "Property": "Name"
    },
    "HintText": "Enter your name",
    "OnValueChanged": "onNameChengedScript"
}

EditorBase.onValueChanged¶

Устанавливает обработчик события о том, что значение было изменено.

Description¶

Метод setValue() позволяет изменить значение редактора. Если значение переданного параметра отличается от текущего значения редактора, происходит генерация события onValueChanging. Если нет ни одного обработчика, подписанного на событие onValueChanging, либо если все обработчики этого события вернули значение, отличное от false, значение редактора меняется на новое. Факт изменения значения редактора приводит к возникновению события onValueChanged.

Syntax¶

EditorBase.onValueChanged(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что значение было изменено. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.oldValue` содержит предыдущее значение редактора, `argument.newValue` - новое значение редактора.

Examples¶

EditorBase.onValueChanged(
  function(context, argument) {
    alert('Value is changed!');
  }
);

See Also¶

EditorBase.onValueChanging¶

Устанавливает обработчик события о том, что значение изменяется.

Description¶

Метод setValue() позволяет изменить значение редактора. Если значение переданного параметра отличается от текущего значения редактора, происходит генерация события onValueChanging. Если нет ни одного обработчика, подписанного на событие onValueChanging, либо если все обработчики этого события вернули значение, отличное от false, значение редактора меняется на новое. Факт изменения значения редактора приводит к возникновению события onValueChanged.

Syntax¶

EditorBase.onValueChanging(callback)

Parameters¶

Name	Type	Description
`callback`	Script	Обработчик события о том, что значение изменяется. В параметре `argument` передается информация о произошедшем событии. Свойство `argument.oldValue` содержит предыдущее значение редактора, `argument.newValue` - новое значение редактора.

Examples¶

EditorBase.onValueChanging(
  function(context, argument) {
    return (argument.newValue >= 0 && argument.newValue < 100);
  }
);

See Also¶

EditorBase.setErrorText¶

Устанавливает текст с информацией об ошибке.

Syntax¶

EditorBase.setErrorText(value)

Parameters¶

Name	Type	Description
`value`	`String`	Текст с информацией об ошибке.

Examples¶

EditorBase.setErrorText('Negative values are not allowed');

See Also¶

getErrorText()

EditorBase.setHintText¶

Устанавливает текст с подсказкой для ввода.

Syntax¶

EditorBase.setHintText(value)

Parameters¶

Name	Type	Description
`value`	`String`	Текст с подсказкой для ввода.

Examples¶

EditorBase.setHintText('Enter positive value');

See Also¶

getHintText()

EditorBase.setValue¶

Устанавливает значение.

Description¶

Метод setValue() позволяет изменить значение редактора. Если значение переданного параметра отличается от текущего значения редактора, происходит генерация события onValueChanging. Если нет ни одного обработчика, подписанного на событие onValueChanging, либо если все обработчики этого события вернули значение, отличное от false, значение редактора меняется на новое. Факт изменения значения редактора приводит к возникновению события onValueChanged.

Syntax¶

EditorBase.setValue(value)

Parameters¶

Name	Description
`value`	Значение редактора.

Returns¶

Нет.

Examples¶

EditorBase.setValue(newValue);

See Also¶

EditorBase.setWarningText¶

Устанавливает текст с информацией о предупреждении.

Syntax¶

EditorBase.setWarningText(value)

Parameters¶

value

Текст с информацией об ошибке.

Examples¶

EditorBase.setWarningText('Maybe this value is too big');

See Also¶

getWarningText()

ExtensionPanel¶

Контейнер для встраивания произвольных прикладных элементов.

Description¶

Для реализации функционала, не предусмотренного платформой, нужно зарегистрировать с помощью InfinniUI.extensionPanels.register функцию-конструктор, экземпляры которой будут добавлять нужный элемент, а затем указать имя функции-конструктора ExtensionPanel в поле ExtensionName.

Extends¶

Syntax¶

new ExtensionPanel(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
setExtensionName	Устанавливает название прикладного элемента
setContext	Устанавливает контекст представления
setBuilder	Устанавливает Builder
getParameters	Возвращает параметры, передаваемые в прикладной элемент
setParameters	Устанавливает параметры, передаваемые в прикладной элемент

Events¶

Нет

ExtensionPanel.metadata¶

Метаданные типа ExtensionPanel.

Properties¶

Name	Type	Description
ExtensionName	`String`	Название пользовательского элемента
Parameters	`Array`	Параметры, передаваемые в пользовательский элемент

Examples¶

{
    "ExtensionName": "SuperPanelExtension",
    "ItemTemplate": {
        "Label": {
            "Value": {
                "Source": "MainDataSource",
                "Property": "#.Name"
            }
        }
    },
    "Items": {
        "Source": "MainDataSource",
        "Property": ""
    }
}

{
    "ExtensionName": "CaptchaExtension",
    "Parameters": [
      {
        "Name": "type",
        "Value": "reCAPTCHA"
      }
    ]
}

Syntax¶

new FileBox([parent])

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getMaxSize	Возвращает максимальный размер данных в байтах.
setMaxSize	Устанавливает максимальный размер данных в байтах.
getAcceptTypes	Возвращает коллекцию допустимых форматов данных.
setAcceptTypes	Устанавливает список допустимых форматов данных.

FileBox.metadata¶

Метаданные типа FileBox.

Properties¶

Name	Type	Description
AcceptTypes	`Array`	Список допустимых форматов данных.
MaxSize	`Number`	Максимальный размер данных в байтах.

Examples¶

{
  "AcceptTypes": [
    "application/pdf",
    "application/msword"
  ],
  "MaxSize": 1048576,
  "Value": {
    "Source": "dataSource1",
    "Property": "$.Attachment"
  }
}

FileBox.getAcceptTypes¶

Возвращает коллекцию допустимых форматов данных.

Syntax¶

FileBox.getAcceptTypes()

Parameters¶

Нет

Returns¶

Коллекция допустимых форматов данных.

Examples¶

var collection = fileBox.getAcceptTypes();
console.log(collection.toArray().join(','));

See Also¶

FileBox.getMaxSize¶

Возвращает максимальный размер данных в байтах.

Syntax¶

FileBox.getMaxSize()

Parameters¶

Нет

Returns¶

Максимальный размер данных в байтах.

Examples¶

var maxSize = fileBox.getMaxSize();

See Also¶

setMaxSize

FileBox.metadata¶

Метаданные типа FileBox.

Properties¶

Name	Type	Description
AcceptTypes	`Array`	Список допустимых форматов данных.
MaxSize	`Number`	Максимальный размер данных в байтах.

Examples¶

{
  "AcceptTypes": [
    "application/pdf",
    "application/msword"
  ],
  "MaxSize": 1048576,
  "Value": {
    "Source": "dataSource1",
    "Property": "$.Attachment"
  }
}

FileBox.setAcceptTypes¶

Устанавливает список допустимых форматов данных. Значениями могут быть имена MIME-типа или расширения файлов вместе с разделительной точкой.

Syntax¶

FileBox.setAcceptTypes(value)

Parameters¶

Name	Type	Description
`value`	`Array`	список допустимых форматов данных.

Returns¶

Нет.

Examples¶

fileBox.setAcceptTypes(['application/pdf', 'application/zip', '.7z', '.rar']);

See Also¶

getAcceptTypes

FileBox.setMaxSize¶

Устанавливает максимальный размер данных в байтах.

Syntax¶

FileBox.setMaxSize(value)

Parameters¶

Name	Type	Description
`value`	`Number`	Максимальный размер данных в байтах

Returns¶

Нет.

Examples¶

fileBox.setMaxSize(1000000);

See Also¶

getMaxSize

Frame¶

Элемент для отображения Web-страницы.

Extends¶

Syntax¶

new Frame()

Parameters¶

Нет.

Returns¶

Элемент Frame.

Methods¶

Нет.

Events¶

Нет.

Frame.metadata¶

Метаданные типа Frame.

Properties¶

Нет.

Examples¶

{
    "Frame": {
        "Value": "http://docs.infinnity.ru/"
    }
}

Frame.metadata¶

Метаданные типа Frame.

Properties¶

Нет.

Examples¶

{
    "Frame": {
        "Value": "http://docs.infinnity.ru/"
    }
}

GridPanel¶

Контейнер в виде сетки из столбцов и строк.

Description¶

Сетка - контейнер визуальных элементов, который делит свою рабочую область на строки и столбцы, на пересечении которых располагаются ячейки. Визуально сетка никак не отображается, однако задает правила расположения дочерних элементов. Количество столбцов всегда фиксировано и равно 12, количество строк - неограничено. Ячейки располагаются внутри строки, слева направо, строки следуют сверху вниз. Для каждой ячейки можно задать размер - целое число от 1 до 12 включительно, определяющее то, сколько колонок по горизонтали будет занимать ячейка. Если размеры ячейки не позволяют разместить ее в текущей строке, она и ее содержимое будут перенесены на новую строку. Высота ячейки определяется высотой самого высокого элемента, высота строки определяется высотой самой высокой ячейки данной строки.

Extends¶

Syntax¶

new GridPanel(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Нет

Events¶

Нет

GridPanel.metadata¶

Метаданные типа GridPanel.

Properties¶

Нет

Examples¶

//infinni-ui-demo
{
  "Items": [
  //infinni-ui-display-begin
{
  "GridPanel": {
    "Items": [
      {
        "Cell": {
          "ColumnSpan": 6,
          "Items": [
            {
              "Label": {
                "Value": "Row 1, 6 columns"
              }
            }
          ]
        }
      },
      {
        "Cell": {
          "ColumnSpan": 6,
          "Items": [
            {
              "Label": {
                "Value": "Row 1, 6 columns"
              }
            }
          ]
        }
      },
      {
        "Cell": {
          "ColumnSpan": 12,
          "Items": [
            {
              "Label": {
                "Value": "Row 2, 12 columns"
              }
            }
          ]
        }
      }
    ]
  }
}
    //infinni-ui-display-end
  ]
}

Icon¶

Элемент для отображения изображения.

Для отображения используется библиотека значков Font Awesome.

Для отображения нужной картинки, в Value элемента необходимо установить имя соотвествующей картинки (напр. “fa-battery-empty”).

Полный список доступных картинок: Icons.

Extends¶

Syntax¶

new Icon([parent])

Parameters¶

Name	Type	Default	Description
`parent`	Element		Родительский элемент

Methods¶

Name	Description
getSize	Возвращает размер иконки
setSize	Устанавливает размер иконки

Icon.metadata¶

Метаданные типа Icon.

Properties¶

Name	Type	Description
Size	TextStyle*	Размер иконки

* в данном случае TextStyle определяет только размер шрифта.

Examples¶

{
    "Icon": {
        "Value": "star",
        "Size": "display1"
    }
}

ImageBox¶

Редактор изображений.

Extends¶

Syntax¶

new ImageBox([parent])

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getMaxSize	Возвращает максимальный размер данных в байтах.
setMaxSize	Устанавливает максимальный размер данных в байтах.
getAcceptTypes	Возвращает коллекцию допустимых форматов данных.
setAcceptTypes	Устанавливает список допустимых форматов данных.

ImageBox.metadata¶

Метаданные типа ImageBox.

Properties¶

Name	Type	Description
AcceptTypes	`Array`	Список допустимых форматов данных.
MaxSize	`Number`	Максимальный размер данных в байтах.

Examples¶

{
  "AcceptTypes": [
    "image/jpeg",
    "image/png"
  ],
  "MaxSize": 1048576,
  "Value": {
    "Source": "dataSource1",
    "Property": "$.Photo"
  }
}

{
  "ImageBox": {
    "Enabled": false,
    "Value": "\\img\\notice.png"
  }
}

ImageBox.getAcceptTypes¶

Возвращает коллекцию допустимых форматов данных.

Syntax¶

ImageBox.getAcceptTypes()

Parameters¶

Нет

Returns¶

Коллекция допустимых форматов данных.

Examples¶

var collection = imageBox.getAcceptTypes();
console.log(collection.toArray().join(','));

See Also¶

ImageBox.getMaxSize¶

Возвращает максимальный размер данных в байтах.

Syntax¶

ImageBox.getMaxSize()

Parameters¶

Нет

Returns¶

Максимальный размер данных в байтах.

Examples¶

var maxSize = imageBox.getMaxSize();

See Also¶

setMaxSize

ImageBox.metadata¶

Метаданные типа ImageBox.

Properties¶

Name	Type	Description
AcceptTypes	`Array`	Список допустимых форматов данных.
MaxSize	`Number`	Максимальный размер данных в байтах.

Examples¶

{
  "AcceptTypes": [
    "image/jpeg",
    "image/png"
  ],
  "MaxSize": 1048576,
  "Value": {
    "Source": "dataSource1",
    "Property": "$.Photo"
  }
}

{
  "ImageBox": {
    "Enabled": false,
    "Value": "\\img\\notice.png"
  }
}

ImageBox.setAcceptTypes¶

Устанавливает список допустимых форматов данных. Значениями могут быть имена MIME-типа.

Syntax¶

ImageBox.setAcceptTypes(value)

Parameters¶

Name	Type	Description
`value`	`Array`	список допустимых форматов данных.

Returns¶

Нет.

Examples¶

imageBox.setAcceptTypes(["image/jpeg", "image/png"]);

See Also¶

getAcceptTypes

ImageBox.setMaxSize¶

Устанавливает максимальный размер данных в байтах.

Syntax¶

ImageBox.setMaxSize(value)

Parameters¶

Name	Type	Description
`value`	`Number`	Максимальный размер данных в байтах

Returns¶

Нет.

Examples¶

imageBox.setMaxSize(1000000);

See Also¶

getMaxSize

IndeterminateCheckBox¶

Переключатель в виде флажка. Допускает неопределенное состояние.

Description¶

Для отображения переключателя в виде флажка можно использовать CheckBox и IndeterminateCheckBox. Отличие в том, что IndeterminateCheckBox поддерживает ещё и неопределенное состояние. CheckBox может принимать значение false/true, IndeterminateCheckBox - "unchecked"/"checked"/"indeterminate".

Extends¶

CheckBox

Syntax¶

new IndeterminateCheckBox([parent])

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент

IndeterminateCheckBox.metadata¶

Метаданные типа IndeterminateCheckBox.

Examples¶

{
  "Text": "Subscribe",
  "Value": {
    "Source": "dataSource1",
    "Property": "$.IsSubscribe"
  }
}

Label¶

Текстовая метка.

Extends¶

Syntax¶

new Label(parent, viewMode)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент
viewMode	`String`	Строка со значением режима отображения

Methods¶

Name	Description
getDisplayFormat	Возвращает функцию форматирования значения для отображения.
setDisplayFormat	Устанавливает функцию форматирования значения для отображения.
getTextTrimming	Возвращает значение, определяющее, усекается ли текст при переполнении.
setTextTrimming	Устанавливает значение, определяющее, усекается ли текст при переполнении.
getTextWrapping	Возвращает значение, определяющее, переносится ли текст при переполнении.
setTextWrapping	Устанавливает значение, определяющее, переносится ли текст при переполнении.
getEscapeHtml	Возвращает значение, определяющее, экранируется ли HTML-разметка.
setEscapeHtml	Устанавливает значение, определяющее, экранируется ли HTML-разметка.

Label.metadata¶

Метаданные типа Label.

Properties¶

Name	Type	Default	Description
DisplayFormat	`DisplayFormatMetadata`	–	Форматирование значения для отображения
TextTrimming	`Boolean`	true	Значение, определяющее, усекается ли текст при переполнении
TextWrapping	`Boolean`	true	Значение, определяющее, переносится ли текст при переполнении
EscapeHtml	`Boolean`	true	Значение, определяющее, экранируется ли HTML-разметка

Examples¶

{
    "DisplayFormat": "${FirstName} ${LastName}",
    "Value": {
        "Source": "dataSource1",
        "Property": "$.Person"
    }
}

{
    "Text": "<b>Полужирный</b> <i>курсив</i>",
    "EscapeHtml": false
}

Label.getDisplayFormat¶

Возвращает функцию форматирования значения для отображения.

Syntax¶

Label.getDisplayFormat()

Parameters¶

Нет

Returns¶

функция форматирования значения для отображения.

Examples¶

var format = myLabel.getDisplayFormat();

See Also¶

setDisplayFormat()

Label.getEscapeHtml¶

Возвращает значение, определяющее, экранируется ли HTML-разметка.

Syntax¶

Label.getEscapeHtml()

Returns¶

Значение, определяющее, экранируется ли HTML-разметка.

Examples¶

myLabel.getEscapeHtml();

See Also¶

setEscapeHtml()

Label.getTextTrimming¶

Возвращает значение, определяющее, усекается ли текст при переполнении.

Syntax¶

Label.getTextTrimming()

Parameters¶

Нет

Returns¶

Возвращает логическое значение, определяющее, усекается ли текст при переполнении.

Examples¶

var trimming = myLabel.getTextTrimming();

See Also¶

setTextTrimming()

Label.getTextWrapping¶

Возвращает значение, определяющее, переносится ли текст при переполнении.

Syntax¶

Label.getTextWrapping()

Parameters¶

Нет

Returns¶

Возвращает логическое значение, определяющее, переносится ли текст при переполнении.

Examples¶

var wrapping = myLabel.getTextWrapping();

See Also¶

setTextWrapping()

Label.metadata¶

Метаданные типа Label.

Properties¶

Name	Type	Default	Description
DisplayFormat	`DisplayFormatMetadata`	–	Форматирование значения для отображения
TextTrimming	`Boolean`	true	Значение, определяющее, усекается ли текст при переполнении
TextWrapping	`Boolean`	true	Значение, определяющее, переносится ли текст при переполнении
EscapeHtml	`Boolean`	true	Значение, определяющее, экранируется ли HTML-разметка

Examples¶

{
    "DisplayFormat": "${FirstName} ${LastName}",
    "Value": {
        "Source": "dataSource1",
        "Property": "$.Person"
    }
}

{
    "Text": "<b>Полужирный</b> <i>курсив</i>",
    "EscapeHtml": false
}

Label.setDisplayFormat¶

Устанавливает функцию форматирования значения для отображения.

Syntax¶

Label.setDisplayFormat(format)

Parameters¶

Name	Type	Description
format	функция	Функция форматирования значения для отображения.

Returns¶

нет

Examples¶

//js-demo
var label = new InfinniUI.Label();
var formaToLowerCase = function (context, args) {
    return String(args.value).toLowerCase();
}
label.setDisplayFormat(formaToLowerCase);
label.setValue('sOmEcAsE');

$elementForExample.prepend(label.render());

See Also¶

getDisplayFormat()

Label.setEscapeHtml¶

Устанавливает значение, определяющее, экранируется ли HTML-разметка.

Syntax¶

Label.setEscapeHtml(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Значение, определяющее, экранируется ли HTML-разметка.

Returns¶

Нет.

Examples¶

//js-demo

var metadata = {
    Label: {
        EscapeHtml: false,
        DisplayFormat: "{title}<sup>{id}</sup>"
    }
};

var value = {id: 3, title: "Three"};

var builder = new InfinniUI.ApplicationBuilder();
var label = builder.build(metadata);
label.setValue(value);

//  Render
$elementForExample.append(label.render());

See Also¶

getEscapeHtml()

Label.setTextTrimming¶

Устанавливает значение, определяющее, усекается ли текст при переполнении.

Syntax¶

Label.setTextTrimming(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Значение, определяющее, усекается ли текст при переполнении.

Returns¶

Нет

Examples¶

myLabel.setTextTrimming(false);

See Also¶

getTextTrimming()

Label.setTextWrapping¶

Устанавливает значение, определяющее, переносится ли текст при переполнении.

Syntax¶

Label.setTextWrapping(value)

Parameters¶

Name	Type	Description
value	`Boolean`	Значение, определяющее, переносится ли текст при переполнении.

Returns¶

Нет

Examples¶

myLabel.setTextWrapping(false);

See Also¶

getTextWrapping()

Link¶

Ссылка.

Extends¶

Button

Syntax¶

new Link(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getHref	Возвращает адрес документа, на который переводит ссылка.
setHref	Устанавливает адрес документа, на который должна переводить ссылка.
getTarget	Возвращает режим загрузки документа.
setTarget	Устанавливает режим загрузки документа.

Link.metadata¶

Метаданные типа Link.

Properties¶

Name	Type	Default	Description
Href	`String` \| Object	“javascript:;”	Адрес документа, на который должна переводить ссылка.
Target	`String`	“self”	Режим загрузки документа. Может принимать следующие значения: ● blank - загружает страницу в новое окно браузера, ● self - загружает страницу в текущее окно, ● parent - загружает cтраницу во фрейм-родитель (если фреймов нет, то работает как self), ● top - отменяет все фреймы и загружает страницу в полном окне браузера (если фреймов нет, то работает как self).

Href.metadata¶

Name	Type	Description
Name*	`String`	Название маршрута из InfinniUI.config.routes.
Params	`Array`.<Href.paramObject>	Параметры запроса.
Query	`Array`.<Href.paramObject>	Параметры поиска.

* Обязательное свойство.

Href.paramObject¶

Name	Type	Description
Name*	`String`	Название параметра.
Value*	`String` \| DataBinding	Значение параметра.

* Обязательное свойство.

Examples¶

Простая ссылка:

//infinni-ui-demo
{
  "Items": [
  //infinni-ui-display-begin
{
  "Link": {
    "Text": "link",
    "Href": "http://infinnity.ru/",
    "Target": "blank"
  }
}
  //infinni-ui-display-end
  ]
}

Рассмотрим случай, когда ссылка должна изменяться в зависимости от неких параметров. Тогда в массив InfinniUI.config.routes необходимо добавить соответсвующий путь. Пусть

window.InfinniUI.config.routes = [
  {
    Name: "mainPageRouter",
    Path: "/publicPages/<% pageName %>/?userId=<% userId %>&date=<% date %>",
    Action: "{ routeCallback(context, args) }"
  }
];

Определим соответсвующую ссылку

{
  "Link": {
    "Text": "link",
    "Href": {
      "Name": "mainPageRouter",
      "Params": [
        {
          "Name": "pageName",
          "Value": "patient"
        }
      ],
      "Query": [
        {
          "Name": "date",
          "Value": "2016-12-16"
        },
        {
          "Name": "userId",
          "Value": {
            "Source": "usersDataSource",
            "Property": "$.id"
          }
        }
      ]
    },
    "Target": "blank"
  }
}

Link.getHref¶

Возвращает адрес документа, на который переводит ссылка.

Syntax¶

Link.getHref()

Parameters¶

Нет

Returns¶

Адрес документа, на который переводит ссылка.

Examples¶

var href = link.getHref();

See Also¶

setHref()

Link.getTarget¶

Возвращает режим загрузки документа.

Description¶

Возможны следующие режимы загрузки документа:

blank - загружает страницу в новое окно браузера,
self - загружает страницу в текущее окно,
parent - загружает страницу во фрейм-родитель (если фреймов нет, то работает как self),
top - отменяет все фреймы и загружает страницу в полном окне браузера (если фреймов нет, то работает как self).

Syntax¶

Link.getTarget()

Parameters¶

Нет

Returns¶

Режим загрузки документа.

Examples¶

var target = link.getTarget();

See Also¶

setTarget()

Link.metadata¶

Метаданные типа Link.

Properties¶

Name	Type	Default	Description
Href	`String` \| Object	“javascript:;”	Адрес документа, на который должна переводить ссылка.
Target	`String`	“self”	Режим загрузки документа. Может принимать следующие значения: ● blank - загружает страницу в новое окно браузера, ● self - загружает страницу в текущее окно, ● parent - загружает cтраницу во фрейм-родитель (если фреймов нет, то работает как self), ● top - отменяет все фреймы и загружает страницу в полном окне браузера (если фреймов нет, то работает как self).

Href.metadata¶

Name	Type	Description
Name*	`String`	Название маршрута из InfinniUI.config.routes.
Params	`Array`.<Href.paramObject>	Параметры запроса.
Query	`Array`.<Href.paramObject>	Параметры поиска.

* Обязательное свойство.

Href.paramObject¶

Name	Type	Description
Name*	`String`	Название параметра.
Value*	`String` \| DataBinding	Значение параметра.

* Обязательное свойство.

Examples¶

Простая ссылка:

//infinni-ui-demo
{
  "Items": [
  //infinni-ui-display-begin
{
  "Link": {
    "Text": "link",
    "Href": "http://infinnity.ru/",
    "Target": "blank"
  }
}
  //infinni-ui-display-end
  ]
}

Рассмотрим случай, когда ссылка должна изменяться в зависимости от неких параметров. Тогда в массив InfinniUI.config.routes необходимо добавить соответсвующий путь. Пусть

window.InfinniUI.config.routes = [
  {
    Name: "mainPageRouter",
    Path: "/publicPages/<% pageName %>/?userId=<% userId %>&date=<% date %>",
    Action: "{ routeCallback(context, args) }"
  }
];

Определим соответсвующую ссылку

{
  "Link": {
    "Text": "link",
    "Href": {
      "Name": "mainPageRouter",
      "Params": [
        {
          "Name": "pageName",
          "Value": "patient"
        }
      ],
      "Query": [
        {
          "Name": "date",
          "Value": "2016-12-16"
        },
        {
          "Name": "userId",
          "Value": {
            "Source": "usersDataSource",
            "Property": "$.id"
          }
        }
      ]
    },
    "Target": "blank"
  }
}

Link.setHref¶

Устанавливает адрес документа, на который должна переводить ссылка.

Syntax¶

Link.setHref(value)

Parameters¶

Name	Type	Description
value	`String`	Адрес документа, на который должна переводить ссылка.

Returns¶

Нет.

Examples¶

link.setHref("http://docs.infinnity.ru/");

See Also¶

getHref()

Link.setTarget¶

Устанавливает режим загрузки документа.

Description¶

Возможны следующие режимы загрузки документа:

blank - загружает страницу в новое окно браузера,
self - загружает страницу в текущее окно,
parent - загружает страницу во фрейм-родитель (если фреймов нет, то работает как self),
top - отменяет все фреймы и загружает страницу в полном окне браузера (если фреймов нет, то работает как self).

Syntax¶

Link.setTarget(value)

Parameters¶

Name	Type	Description
value	`String`	Режим загрузки документа.

Returns¶

нет

Examples¶

link.setTarget("blank");

See Also¶

getTarget()

ListBox¶

Список.

Extends¶

Syntax¶

new ListBox(parent, viewMode)

Parameters¶

Name	Type	Description
parent*	Element	Родительский элемент
viewMode*	`String`	Строка со значением режима отображения. Может принимать значения: ‘common’, ‘base’, ‘checking’. Если указать значение ‘checking’, то отобразится список радиокнопок

* Обязательный аргумент.

Usage¶

Посмотрим, как выглядят различные режимы отображения ListBox.

//js-demo
var simpleItemTemplate = function (context, args) {
    var label = new InfinniUI.Label();
    label.setValue(args.item);
    return label;
};

function createListBox (openMode, isMultiSelect){
    listBox = new InfinniUI.ListBox(null, openMode);
    listBox.getItems().reset(['1', '2', '3']);
    listBox.setItemTemplate(simpleItemTemplate);
    listBox.setMultiSelect(isMultiSelect);

    $listBox = listBox.render();
    $elementForExample.append($listBox);
}

// hiddenCodeStart
var viewModeListBox = new InfinniUI.ListBox(null, 'checking'),
    listBox, checkBox;

viewModeListBox.getItems().reset([
    'common',
    'base',
    'checking'
]);

viewModeListBox.onValueChanged(function(context, args) {
    if ($listBox){
        $listBox.remove();
    }

    createListBox(args.newValue, checkBox.getValue());
});

viewModeListBox.setItemTemplate(simpleItemTemplate);

var $viewModeListBox = viewModeListBox.render(), $listBox;
$elementForExample.append($viewModeListBox);

checkBox = new InfinniUI.CheckBox();
checkBox.setText('MultiSelect');
checkBox.setValue(true);
checkBox.onValueChanged(function (context, args){
    if(listBox) {
        listBox.setMultiSelect(args.newValue);
        $listBox.remove();
        $listBox = listBox.render();
        $elementForExample.append($listBox);
    }
});

var $checkBox = checkBox.render();
$elementForExample.append($checkBox);

viewModeListBox.setValue('common');
// hiddenCodeStop

Methods¶

Нет

Events¶

Нет

ListBox.metadata¶

Метаданные типа ListBox.

Properties¶

Name	Type	Default	Description
ViewMode	`String`	`common`	Режим отображения списка. Может принимать значения: ‘common’, ‘base’, ‘checking’.

Examples¶

{
  "ListBox": {
    "Name": "ChildrenList",
    "ItemTemplate": {
        "Label": {
          "Value": {
            "Source": "MainDataSource",
            "Property": "$.Childrens.#.Name"
          }
        }
    },
    "Items": {
      "Source": "MainDataSource",
      "Property": "$.Childrens"
    }
  }
}

ListBox.metadata¶

Метаданные типа ListBox.

Properties¶

Name	Type	Default	Description
ViewMode	`String`	`common`	Режим отображения списка. Может принимать значения: ‘common’, ‘base’, ‘checking’.

Examples¶

{
  "ListBox": {
    "Name": "ChildrenList",
    "ItemTemplate": {
        "Label": {
          "Value": {
            "Source": "MainDataSource",
            "Property": "$.Childrens.#.Name"
          }
        }
    },
    "Items": {
      "Source": "MainDataSource",
      "Property": "$.Childrens"
    }
  }
}

ListEditorBase¶

Базовый тип редакторов коллекций данных.

Extends¶

Container, EditorBase

Syntax¶

new ListEditorBase(parent)

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент.

Methods¶

Name	Description
getMultiSelect	Возвращает значение, определяющее, разрешен ли выбор нескольких элементов.
setMultiSelect	Устанавливает значение, определяющее, разрешен ли выбор нескольких элементов.
getValueSelector	Возвращает функцию выборки из элемента коллекции значимой части.
setValueSelector	Устанавливает функцию выборки из элемента коллекции значимой части.
getSelectedItem	Возвращает выделенный элемент коллекции.
setSelectedItem	Устанавливает выделенный элемент коллекции.
getDisabledItemCondition	Возвращает функцию, определяющую запрет на выбор элемента.
setDisabledItemCondition	Устанавливает функцию, определяющую запрет на выбор элемента.
setValueItem	Устанавливает значение элемента по элементу коллекции.

Events¶

Name	Description
onSelectedItemChanged	Устанавливает обработчик события о том, что выделенный элемент изменился.

ListEditorBase.metadata¶

Метаданные типа ListEditorBase.

Properties¶

Name	Type	Default	Description
MultiSelect	`Boolean`	false	Разрешен ли выбор нескольких элементов коллекции
ValueSelector	Script	–	Функция выборки из элемента коллекции значения для выбора
ValueProperty	`String`	–	Свойство элемента коллекции со значением для выбора
DisabledItemCondition	Script	–	Функция, определяющая запрет на выбор элемента
OnSelectedItemChanged	Script	–	Обработчик события о том, что элемент был выделен

Examples¶

{
    "MultiSelect": true,
    "ValueProperty": "id",
    "ItemFormat": "${FirstName} ${LastName}, ${BirthDate:d}",
    "DisabledItemCondition": "{ return (args.value.Id == 3); }"
}

ListEditorBase.getDisabledItemCondition¶

Возвращает функцию, определяющую запрет на выбор элемента.

Syntax¶

ListEditorBase.getDisabledItemCondition()

Parameters¶

Нет

Returns¶

Функция, определяющая запрет на выбор элемента.

Examples¶

See Also¶

setDisabledItemCondition()

ListEditorBase.getMultiSelect¶

Возвращает значение, определяющее, разрешен ли выбор нескольких элементов.

Description¶

Элементы представления, отображающие коллекции данных, предоставляют возможность выбора одного или нескольких элементов из списка. Выбранные элементы визуально помечаются, чтобы пользователь мог отличить выбранный элемент от невыбранного. Вопросы визуального отличия выбранных и невыбранных элементов (цвет, шрифт и т.п.), а также способы осуществления выбора (мышь, клавиатура и т.п.) в данном контексте не оговариваются, главное то, что у пользователя есть такая возможность.

Метод setMultiSelect() позволяет переключать режим работы списка, разрешая или запрещая выбор нескольких элементов. Данная настройка напрямую влияет на результат работы метода getValue(). Если выбор нескольких элементов разрешен, метод getValue() возвращает массив, элементами которого являются выбранные элементы. Если выбор нескольких элементов запрещен, метод getValue() вернет один выбранный элемент.

Метод setValueSelector() позволяет указать функцию выборки из элемента коллекции значимой части. Эта функция применяется к выделенным элементам при вызове метода getValue(). Если выбор нескольких элементов разрешен, метод getValue() вернет массив, каждый из элемент которого является результатом работы ранее установленной функции выборки, примененной к выбранным элементам. Если выбор нескольких элементов запрещен, метод getValue() вернет результат работы ранее установленной функции выборки, примененной к одному выбранному элементу.

Syntax¶

ListEditorBase.getMultiSelect()

Returns¶

Логическое значение, определяющее, разрешен ли выбор нескольких элементов. Значение true означает, что выбор нескольких элементов разрешен, значение false - запрещен.

Examples¶

See Also¶

ListEditorBase.getSelectedItem¶

Возвращает выделенный элемент коллекции.

Syntax¶

ListEditorBase.getSelectedItem()

Returns¶

Выделенный элемент коллекции.

Examples¶

See Also¶

setSelectedItem()

ListEditorBase.getValueSelector¶

Возвращает функцию выборки из элемента коллекции значимой части.

Description¶

Возвращает функцию выборки значения для элемента коллекции, который передается в параметре args.value.

Syntax¶

ListEditorBase.getValueSelector()

Returns¶

Значение для элемента коллекции.

Examples¶

See Also¶

setValueSelector()

ListEditorBase.metadata¶

Метаданные типа ListEditorBase.

Properties¶

Name	Type	Default	Description
MultiSelect	`Boolean`	false	Разрешен ли выбор нескольких элементов коллекции
ValueSelector	Script	–	Функция выборки из элемента коллекции значения для выбора
ValueProperty	`String`	–	Свойство элемента коллекции со значением для выбора
DisabledItemCondition	Script	–	Функция, определяющая запрет на выбор элемента
OnSelectedItemChanged	Script	–	Обработчик события о том, что элемент был выделен

Examples¶

{
    "MultiSelect": true,
    "ValueProperty": "id",
    "ItemFormat": "${FirstName} ${LastName}, ${BirthDate:d}",
    "DisabledItemCondition": "{ return (args.value.Id == 3); }"
}

ListEditorBase.setDisabledItemCondition¶

Устанавливает функцию, определяющую запрет на выбор элемента.

Syntax¶

ListEditorBase.setDisabledItemCondition(func)

Parameters¶

Name	Type	Description
func	Script	Функция, определяющая запрет на выбор элемента. Элементы, для которых данная функция вернёт true, будут недоступны для выбора.

Returns¶

Метод ничего не возвращает.

Examples¶

listEditorBase.setDisabledItemCondition( function (context, args) { return args.value.Count == 0; });

See Also¶

getDisabledItemCondition()

ListEditorBase.setMultiSelect¶

Устанавливает значение, определяющее, разрешен ли выбор нескольких элементов.

Syntax¶

ListEditorBase.setMultiSelect(true)

Returns¶

undefined

Examples¶

See Also¶

ListEditorBase.setSelectedItem¶

Устанавливает выделенный элемент коллекции. В один момент времени выделенным может быть только один элемент из коллекции.

Syntax¶

ListEditorBase.setSelectedItem(item)

Returns¶

undefined

Examples¶

See Also¶

getSelectedItem()

ListEditorBase.setValueItem¶

Устанавливает значение элемента по элементу коллекции.

Description¶

Устанавливает значение элемента соответсвующим значением для переданного элемента коллекции. Для элемента в режиме MultiSelect = true в качестве аргумента передается массив элементов коллекции.

Syntax¶

ListEditorBase.setValueItem(item);

Returns¶

Нет

Examples¶

See Also¶

ListEditorBase.setValueSelector¶

Устанавливает функцию выборки из элемента коллекции значимой части.

Description¶

Устанавливает функцию выборки значения для элемента коллекции, который передается в параметре args.value.

Syntax¶

ListEditorBase.setValueSelector(selector);

Returns¶

Нет

Examples¶

var idSelector = function (context, args) {
    var item = args.value;
    return item ? item.id : null;
};

ListEditorBase.setValueSelector(idSelector);

See Also¶

setValueSelector()

MenuBar¶

Меню.

Extends¶

Syntax¶

new MenuBar(parent)

Parameters¶

Name	Type	Description
`parent`	элемент	Родительский элемент.

Methods¶

Name	Description
highlightItem	Устанавливает/снимает выделение элемента меню с указанным именем

MenuBar.metadata¶

Метаданные типа MenuBar.

Examples¶

{
    "Items": [{
        "Button": {
            "Text": "Item 1"
        }
    }, {
        "StackPanel": {
            "Items": [
                "Button": {
                    "Text": "Item 2"
                },
                "Button": {
                    "Text": "Item 3"
                },
            ]
        }
    }, {
        "TextBox": {

        }
    }]
}

MenuBar.metadata¶

Метаданные типа MenuBar.

Examples¶

{
    "Items": [{
        "Button": {
            "Text": "Item 1"
        }
    }, {
        "StackPanel": {
            "Items": [
                "Button": {
                    "Text": "Item 2"
                },
                "Button": {
                    "Text": "Item 3"
                },
            ]
        }
    }, {
        "TextBox": {

        }
    }]
}

MenuBar.highlightItem¶

Устанавливает или снимает выделение с элемента меню с заданным именем.

Syntax¶

MenuBar.highlightItem([name])

Parameters¶

Name	Type	Description
name	`String`	Имя выделяемого элемента. Если не указано - для снятия выделения.

Returns¶

Нет

Examples¶

menuBar.highlightItem("AddMenuItem");   //Выделить элемент с именем "AddMenuItem"

menuBar.highlightItem();   //Снять выделение с пунктов меню

NumericBox¶

Редактор чисел.

Extends¶

TextEditorBase

Syntax¶

new NumericBox(parent)

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент.

Methods¶

Name	Description
getMinValue	Возвращает минимальное значение для ввода.
setMinValue	Устанавливает минимальное значение для ввода.
getMaxValue	Возвращает максимальное значение для ввода.
setMaxValue	Устанавливает максимальное значение для ввода.
getIncrement	Возвращает приращение значения при вводе с помощью кнопок.
setIncrement	Устанавливает приращение значения при вводе с помощью кнопок.
getStartValue	Возвращает начальное значение по умолчанию.
setStartValue	Устанавливает начальное значение по умолчанию.

NumericBox.metadata¶

Метаданные типа NumericBox.

Properties¶

Name	Type	Default	Description
MinValue	`Number`	–	Минимальное значение
MaxValue	`Number`	–	Максимальное значение
Increment	`Number`	1	Приращение значения
StartValue	`Number`	–	Начальное значение по умолчанию

Examples¶

{
  "LabelText": "Age",
  "LabelFloating": true,
  "MinValue": 0,
  "Value": {
    "Source": "mainDataSource",
    "Property": "$.Age"
  }
}

NumericBox.getIncrement¶

Возвращает приращение значения при вводе с помощью кнопок.

Syntax¶

NumericBox.getIncrement()

Returns¶

Приращение значения при вводе с помощью кнопок

Examples¶

var maxValue = numericBox.getIncrement();

See Also¶

setIncrement()

NumericBox.getMaxValue¶

Возвращает максимальное значение для ввода.

Syntax¶

NumericBox.getMaxValue()

Returns¶

Максимальное значение для ввода.

Examples¶

var maxValue = numericBox.getMaxValue();

See Also¶

setMaxValue()

NumericBox.getMinValue¶

Возвращает минимальное значение для ввода.

Syntax¶

NumericBox.getMinValue()

Returns¶

Минимальное значение для ввода.

Examples¶

var minValue = numericBox.getMinValue();

See Also¶

setMinValue()

NumericBox.getStartValue¶

Возвращает начальное значение по умолчанию.

Syntax¶

NumericBox.getStartValue()

Returns¶

Начальное значение по умолчанию.

Examples¶

var startValue = numericBox.getStartValue();

See Also¶

setStartValue()

NumericBox.metadata¶

Метаданные типа NumericBox.

Properties¶

Name	Type	Default	Description
MinValue	`Number`	–	Минимальное значение
MaxValue	`Number`	–	Максимальное значение
Increment	`Number`	1	Приращение значения
StartValue	`Number`	–	Начальное значение по умолчанию

Examples¶

{
  "LabelText": "Age",
  "LabelFloating": true,
  "MinValue": 0,
  "Value": {
    "Source": "mainDataSource",
    "Property": "$.Age"
  }
}

NumericBox.setIncrement¶

Устанавливает приращение значения при вводе с помощью кнопок.

Syntax¶

NumericBox.setIncrement(value)

Parameters¶

Name	Type	Description
`value`	`Number`	Приращение значения при вводе с помощью кнопок.

Examples¶

numericBox.setIncrement(5);

See Also¶

getIncrement()

NumericBox.setMaxValue¶

Устанавливает максимальное значение для ввода.

Syntax¶

NumericBox.setMaxValue(value)

Parameters¶

Name	Type	Description
`value`	`Number`	Максимальное значение для ввода.

Examples¶

numericBox.setMaxValue(100);

See Also¶

getMaxValue()

NumericBox.setMinValue¶

Устанавливает минимальное значение для ввода.

Syntax¶

NumericBox.setMinValue(value)

Parameters¶

Name	Type	Description
`value`	`Number`	Минимальное значение для ввода.

Examples¶

numericBox.setMinValue(0);

See Also¶

getMinValue()

NumericBox.setStartValue¶

Устанавливает начальное значение по умолчанию. Заданное значение будет автоматически подставляться в качестве значения в элементе при нажатии кнопок + / -, если значение еще не указано.

Syntax¶

NumericBox.setStartValue(value);

Parameters¶

Name	Type	Description
`value`	`Number`	Начальное значение по умолчанию.

Returns¶

Нет.

Examples¶

//js-demo


var numericBox = new InfinniUI.NumericBox();
numericBox.setStartValue(1980);
numericBox.setMinValue(1000);
numericBox.setMaxValue(2000);
//  Render
$elementForExample.append(numericBox.render());

See Also¶

getStartValue()

Panel¶

Контейнер в виде прямоугольной области.

Description¶

Панель - контейнер визуальных элементов в виде прямоугольной области. Дочерние элементы панели располагаются внутри контейнера и визуально не могут выходить за его пределы.

Extends¶

Syntax¶

new Panel(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getCollapsible	Возвращает значение, определяющее, разрешено ли сворачивание панели
setCollapsible	Устанавливает значение, определяющее, разрешено ли сворачивание панели
getCollapsed	Возвращает значение, определяющее, свернута ли панель
setCollapsed	Устанавливает значение, определяющее, свернута ли панель
getHeaderTemplate	Возвращает функцию шаблонизации заголовка панели
setHeaderTemplate	Устанавливает функцию шаблонизации заголовка панели
getHeader	Возвращает заголовок панели
setHeader	Устанавливает заголовок панели
getCollapseChanger	Возвращает имя элемента, при клике на который раскрывается панель
setCollapseChanger	Устанавливает имя элемента, при клике на который раскрывается панель

Events¶

Name	Description
onExpanding	Устанавливает обработчик события о том, что панель разворачивается
onExpanded	Устанавливает обработчик события о том, что панель была развернута
onCollapsing	Устанавливает обработчик события о том, что панель сворачивается
onCollapsed	Устанавливает обработчик события о том, что панель была свернута

Panel.metadata¶

Метаданные типа Panel.

Properties¶

Name	Type	Default	Description
Collapsible	`Boolean`	false	Значение, определяющее, разрешено ли сворачивание панели
Collapsed	`Boolean`	false	Значение, определяющее, свернута ли панель
HeaderTemplate	Element	–	Шаблон отображения заголовка панели
Header	`String`/BindingMetadata	–	Заголовок панели
CollapseChanger	`String`	–	Имя элемента, при нажатии на который панель будет сворачиваться/разворачиваться.
OnExpanding	Script	–	Обработчик события о том, что панель разворачивается
OnExpanded	Script	–	Обработчик события о том, что панель была развернута
OnCollapsing	Script	–	Обработчик события о том, что панель сворачивается
OnCollapsed	Script	–	Обработчик события о том, что панель была свернута

Examples¶

//infinni-ui-demo
{
  "Items": [
  //infinni-ui-display-begin
{
  "Panel": {
    "Collapsible": true,
    "Header": "Numbers",
    "OnExpanded": "{ alert('Panel is expanded!'); }",
    "OnCollapsed": "{ alert('Panel is collapsed!'); }",
    "Items": [
      {
        "Label": {
          "Value": "One"
        }
      },
      {
        "Label": {
          "Value": "Two"
        }
      },
      {
        "Label": {
          "Value": "Three"
        }
      }
    ]
  }
}
    //infinni-ui-display-end
  ]
}

Examples¶

{
  "LabelText": "Password",
  "LabelFloating": true,
  "Value": {
    "Source": "dataSource1",
    "Property": "$.Password"
  }
}

PasswordBox.getAutocomplete¶

Возвращает значение, определяющее, будет ли срабатывать стандартная автоподстановка пароля.

Description¶

Syntax¶

PasswordBox.getAutocomplete()

Returns¶

Значение, определяющее, будет ли срабатывать стандартная автоподстановка пароля: * false означает, что автоподстановка сохраненных ранее паролей происходить не будет. * true означает, что автоподстановка сохраненных ранее паролей будет срабатывать (поведение по умолчанию).

Examples¶

var autocomplete = PasswordBox.getAutocomplete();

See Also¶

setAutocomplete()

PasswordBox.getLabelFloating¶

Устанавливает значение, определяющее, является ли метка плавающей.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

PasswordBox.getLabelFloating()

Returns¶

Значение, определяющее, является ли метка плавающей. Значение true означает, что метка является плавающей, значение false означает, что метка является фиксированной.

Examples¶

var isFloating = PasswordBox.getLabelFloating();

See Also¶

setLabelFloating()

PasswordBox.getLabelText¶

Возвращает текст метки.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

PasswordBox.getLabelText()

Returns¶

Текст метки.

Examples¶

var labelText = PasswordBox.getLabelText();

See Also¶

setLabelText()

PasswordBox.metadata¶

Метаданные типа PasswordBox.

Properties¶

Name	Type	Default	Description
LabelText	`String`	–	Текст метки
LabelFloating	`Boolean`	`false`	Является ли метка плавающей
Autocomplete	`Boolean`	`true`	Автоподстановка сохраненных в браузере паролей

Examples¶

{
  "LabelText": "Password",
  "LabelFloating": true,
  "Value": {
    "Source": "dataSource1",
    "Property": "$.Password"
  }
}

PasswordBox.setAutocomplete¶

Устанавливает значение, определяющее, будет ли срабатывать стандартная автоподстановка пароля.

Syntax¶

PasswordBox.setAutocomplete(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, будет ли срабатывать стандартная автоподстановка пароля.

Returns¶

Нет.

Examples¶

PasswordBox.getAutocomplete(false); //Отключить автозаполнение

See Also¶

getAutocomplete()

PasswordBox.setLabelFloating¶

Устанавливает значение, определяющее, является ли метка плавающей.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

PasswordBox.setLabelFloating(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, является ли метка плавающей. Значение `true` означает, что метка является плавающей, значение `false` означает, что метка является фиксированной.

Examples¶

PasswordBox.setLabelFloating('Label text');

See Also¶

getLabelFloating()

PasswordBox.setLabelText¶

Устанавливает текст метки.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

PasswordBox.setLabelText(value)

Parameters¶

Name	Type	Description
`value`	`String`	Текст метки.

Examples¶

PasswordBox.setLabelText('Label text');

See Also¶

getLabelText()

PopupButton¶

Кнопка со всплывающим контейнером.

Extends¶

Container, Button

Syntax¶

new PopupButton([parent], [viewMode]])

Parameters¶

Name	Type	Default	Description
`parent`	Element		Родительский элемент
`viewMode`	viewMode	`common`	Режим отображения

PopupButton.metadata¶

Метаданные типа PopupButton.

Examples¶

{
  "Text": "Delete",
  "Items": [
    {
      "Button": {
        "Text": "Delete rows"
      }
    },
    {
      "Button": {
        "Text": "Delete columns"
      }
    },
    {
      "Button": {
        "Text": "Delete cells"
      }
    },
    {
      "Button": {
        "Text": "Delete table"
      }
    }
  ]
}

PopupButton.metadata¶

Метаданные типа PopupButton.

Examples¶

{
  "Text": "Delete",
  "Items": [
    {
      "Button": {
        "Text": "Delete rows"
      }
    },
    {
      "Button": {
        "Text": "Delete columns"
      }
    },
    {
      "Button": {
        "Text": "Delete cells"
      }
    },
    {
      "Button": {
        "Text": "Delete table"
      }
    }
  ]
}

RadioGroup¶

Список радиокнопок. Один из режимов отображения ListBox.

Syntax¶

new ListBox(parent, 'checking')

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Нет

Events¶

Нет

RadioGroup.metadata¶

Метаданные типа RadioGroup.

Properties¶

Метаданные строятся по той же схеме, что и ListBox.metadata.

Examples¶

{
  "RadioGroup": {
    "ItemTemplate": {
        "Label": {
          "Value": {
            "Source": "MainDataSource",
            "Property": "$.Childrens.#.Name"
          }
        }
    },
    "Items": {
      "Source": "MainDataSource",
      "Property": "$.Childrens"
    }
  }
}

RadioGroup.metadata¶

Метаданные типа RadioGroup.

Properties¶

Метаданные строятся по той же схеме, что и ListBox.metadata.

Examples¶

{
  "RadioGroup": {
    "ItemTemplate": {
        "Label": {
          "Value": {
            "Source": "MainDataSource",
            "Property": "$.Childrens.#.Name"
          }
        }
    },
    "Items": {
      "Source": "MainDataSource",
      "Property": "$.Childrens"
    }
  }
}

ScrollPanel¶

Контейнер в виде прокручиваемой области. Для корректной работы параметр InfinniUI.config.enableAutoHeightService должен иметь значение true, либо нужно задать высоту панели самостоятельно с помощью стилей.

Description¶

Прокручиваемая область - контейнер визуальных элементов, который позволяет отображать содержимое в области, размер которой меньше размера содержимого. Когда содержимое контейнера не отображается полностью, отображаются полосы прокрутки, с помощью которых можно перемещать видимую область содержимого.

Extends¶

Syntax¶

new ScrollPanel(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Name	Description
getHorizontalScroll	Возвращает видимость полосы прокрутки по горизонтали
setHorizontalScroll	Устанавливает видимость полосы прокрутки по горизонтали
getVerticalScroll	Возвращает видимость полосы прокрутки по вертикали
setVerticalScroll	Устанавливает видимость полосы прокрутки по вертикали

Events¶

Нет

ScrollPanel.metadata¶

Метаданные типа ScrollPanel.

Properties¶

Name	Type	Default	Description
HorizontalScroll	ScrollVisibility	‘Auto’	Видимость полосы прокрутки по горизонтали
VerticalScroll	ScrollVisibility	‘Auto’	Видимость полосы прокрутки по вертикали

Examples¶

//infinni-ui-demo
{
  "Items": [
  //infinni-ui-display-begin
{
  "ScrollPanel": {
    "HorizontalScroll": "Hidden",
    "VerticalScroll": "Visible",
    "Items": [
      {
        "Label": {
          "Value": "One"
        }
      },
      {
        "Label": {
          "Value": "Two"
        }
      },
      {
        "Label": {
          "Value": "Three"
        }
      }
    ]
  }
}
    //infinni-ui-display-end
  ]
}

При горизонтальной ориентации, если есть несколько дочерних элементов с нефиксированной шириной, все они будут иметь равную ширину, которая определяется, как результат деления свободного по ширине пространства стека и количества нефиксированных по ширине элементов. Свободное по ширине пространство равно разнице общей ширины стека и суммы широт всех фиксированных по ширине элементов. Высота элементов с нефиксированной высотой равна высоте стека.

При вертикальной ориентации, если есть несколько дочерних элементов с нефиксированной высотой, все они будут иметь равную высоту, которая определяется, как результата деления свободного по высоте пространства стека и количества нефиксированных по высоте элементов. Свободное по высоте пространство равно разнице общей высоты стека и суммы высот всех фиксированных по высоте элементов. Ширина элементов с нефиксированной широтой равна ширине стека.

Extends¶

Syntax¶

new StackPanel(parent, viewMode)

Parameters¶

Name	Type	Default	Description
parent	Element	–	Родительский элемент
viewMode	`String`	‘Base’	Строка со значением режима отображения. Возможные значения: ‘Base’, ‘FormGroup’. Отличие ‘FormGroup’ от ‘Base’ в том, что между элементами добавляются отступы

Methods¶

Name	Description
getOrientation	Возвращает ориентацию стека элементов
setOrientation	Устанавливает ориентацию стека элементов

Events¶

Нет

StackPanel.metadata¶

Метаданные типа StackPanel.

Properties¶

Name	Type	Default	Description
ViewMode	`String`	–	Режим отображения. Может принимать значения: ‘Base’, ‘FormGroup’.
Orientation	StackPanelOrientation	‘Vertical’	Ориентация стека элементов

Examples¶

//infinni-ui-demo
{
  "Items": [
  //infinni-ui-display-begin
{
  "StackPanel": {
    "ViewMode": "Base",
    "Orientation": "Horizontal",
    "Items": [
      {
        "Label": {
          "Value": "One"
        }
      },
      {
        "Label": {
          "Value": "Two"
        }
      },
      {
        "Label": {
          "Value": "Three"
        }
      }
    ]
  }
},
{
  "StackPanel": {
    "ViewMode": "FormGroup",
    "Orientation": "Horizontal",
    "Items": [
      {
        "Label": {
          "Value": "One"
        }
      },
      {
        "Label": {
          "Value": "Two"
        }
      },
      {
        "Label": {
          "Value": "Three"
        }
      }
    ]
  }
}
    //infinni-ui-display-end
  ]
}

Таблица - контейнер визуальных элементов, который делит свою рабочую область на строки и столбцы, на пересечении которых располагаются ячейки. Визуально сетка никак не отображается, однако задает правила расположения дочерних элементов. Количество столбцов всегда фиксировано и равно 12, количество строк - неограничено. Ячейки располагаются внутри строки, слева направо, строки следуют сверху вниз. Для каждой ячейки можно задать размер - целое число от 1 до 12 включительно, определяющее то, сколько колонок по горизонтали будет занимать ячейка. Высота ячейки определяется высотой самого высокого элемента, высота строки определяется высотой самой высокой ячейки данной строки.

Extends¶

Syntax¶

new TablePanel(parent)

Parameters¶

Name	Type	Description
parent	Element	Родительский элемент

Methods¶

Нет

Events¶

Нет

TablePanel.metadata¶

Метаданные типа TablePanel.

Properties¶

Нет

Examples¶

//infinni-ui-demo
{
  "Items": [
  //infinni-ui-display-begin
{
  "TablePanel": {
    "Items": [
      {
        "Row": {
          "Items": [
            {
              "Cell": {
                "ColumnSpan": 5,
                "Items": [
                  {
                    "Label": {
                      "Value": "Row 1, 5 columns"
                    }
                  }
                ]
              }
            },
            {
              "Cell": {
                "ColumnSpan": 3,
                "Items": [
                   {
                    "Label": {
                      "Value": "Row 1, 3 columns"
                    }
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "Row": {
          "Items": [
            {
              "Cell": {
                "ColumnSpan": 2,
                "Items": [
                  {
                    "Label": {
                      "Value": "Row 2, 2 columns"
                    }
                  }
                ]
              }
            },
            {
              "Cell": {
                "ColumnSpan": 6,
                "Items": [
                   {
                    "Label": {
                      "Value": "Row 2, 6 columns"
                    }
                  }
                ]
              }
            },
            {
              "Cell": {
                "ColumnSpan": 4,
                "Items": [
                   {
                    "Label": {
                      "Value": "Row 2, 4 columns"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  }
}
    //infinni-ui-display-end
  ]
}

TextEditorBase.getEditMask()

Returns¶

Маска ввода данных.

Examples¶

var editMask = TextEditorBase.getEditMask();

See Also¶

TextEditorBase.getLabelFloating¶

Устанавливает значение, определяющее, является ли метка плавающей.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

TextEditorBase.getLabelFloating()

Returns¶

Значение, определяющее, является ли метка плавающей. Значение true означает, что метка является плавающей, значение false означает, что метка является фиксированной.

Examples¶

var isFloating = TextEditorBase.getLabelFloating();

See Also¶

setLabelFloating()

TextEditorBase.getLabelText¶

Возвращает текст метки.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

TextEditorBase.getLabelText()

Returns¶

Текст метки.

Examples¶

var labelText = TextEditorBase.getLabelText();

See Also¶

setLabelText()

TextEditorBase.getLabelText¶

Возвращает значение, которое показывает, копировать метку в атрибут title или нет.

Syntax¶

TextEditorBase.getLabelTextTitle()

Returns¶

Значение, которое показывает, копировать метку в атрибут title или нет.

Examples¶

var labelText = TextEditorBase.getLabelTextTitle();

See Also¶

setLabelText()

TextEditorBase.metadata¶

Метаданные типа TextEditorBase.

Properties¶

Name	Type	Default	Description
`LabelText`	`String` (ƒ)	–	Текст метки
`LabelTextTitle`	`Boolean`	`false`	Копирование LabelText в атрибут title
`LabelFloating`	`Boolean`	`false`	Является ли метка плавающей
`DisplayFormat`	`String`	–	Формат отображения значения
`EditMask`	EditMask	–	Маска ввода значения

(ƒ) Свойство может быть задано, как JSExpression.

Examples¶

{
    "LabelText": "Birthday",
    "LabelTextTitle": true,
    "LabelFloating": true,
    "DisplayFormat": ":d",
    "EditMask": {
        "DateTimeEditMask": {
            "Mask": "d"
        }
    }
}

TextEditorBase.setDisplayFormat¶

Устанавливает функцию форматирования значения для отображения.

Description¶

В некоторых ситуациях для представления данных пользователю требуется их предварительная обработка. Метод setDisplayFormat() позволяет установить функцию форматирования значения редактора. Результат работы этой функции используется в качестве отображаемого значения.

Syntax¶

TextEditorBase.setDisplayFormat(value)

Parameters¶

Name	Type	Description
`value`	Script	Функция форматирования значения для отображения. В параметре `argument` передается информация, необходимая для форматирования. Свойство `argument.value` содержит значение редактора. Результатом работы функции должна быть строка.

Examples¶

TextEditorBase.setDisplayFormat(
  function(context, argument) {
    return localized.dateTimeFormatInfo.format("g", argument.value);
  }
);

See Also¶

getDisplayFormat()

TextEditorBase.setEditMask¶

Устанавливает маску ввода данных.

Syntax¶

TextEditorBase.setEditMask(value)

Parameters¶

Name	Type	Description
`value`	EditMask	Маска ввода данных.

Examples¶

var editMask = new NumberEditMask('n2');
TextEditorBase.setEditMask(editMask);

See Also¶

getEditMask()

TextEditorBase.setLabelFloating¶

Устанавливает значение, определяющее, является ли метка плавающей.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

TextEditorBase.setLabelFloating(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Значение, определяющее, является ли метка плавающей. Значение `true` означает, что метка является плавающей, значение `false` означает, что метка является фиксированной.

Examples¶

TextEditorBase.setLabelFloating(true);

See Also¶

getLabelFloating()

TextEditorBase.setLabelText¶

Устанавливает текст метки.

Description¶

В большинстве случаев вместе с редактором размещается текстовая метка, благодаря чему пользователь понимает какое значение он редактирует. Иногда подобные метки размещаются рядом с редактором, например, слева или сверху от редактора, иногда - внутри редактора в виде заполнителя (placeholder). Если метка размещается внутри редактора и остается видимой даже тогда, когда редактор получает фокус ввода и пользователь начинает вводить значение, она называется “плавающей”. Такое название связано с тем, что при получении фокуса ввода метка обычно перемещается в другую область рядом с редактором, чтобы оставаться видимой пользователю в момент ввода данных.

Текст метки можно установить с помощью метода setLabelText(), а способ отображения - с помощью метода setLabelFloating().

Syntax¶

TextEditorBase.setLabelText(value)

Parameters¶

Name	Type	Description
`value`	`String`	Текст метки.

Examples¶

TextEditorBase.setLabelText('Label text');

See Also¶

getLabelText()

TextEditorBase.setLabelTextTitle¶

Копирует текст метки в атрибут title для отображение браузерных всплывающих сообщений

Syntax¶

TextEditorBase.setLabelTextTitle(value)

Parameters¶

Name	Type	Description
`value`	`Boolean`	Копировать или нет метку в атрибут.

Examples¶

TextEditorBase.setLabelTextTitle(true);

See Also¶

getLabelText()

TimePicker¶

Редактор времени. Значением данного элемента всегдя является UNIX time - количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года.

Extends¶

DateTimePicker

Syntax¶

new TimePicker(parent)

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент.

Examples¶

//js-demo

//  Format
var timeZone = 0;
var format = new InfinniUI.DateTimeFormat("t");
format.setOptions({TimeZone: timeZone});
var displayFormat = function (context, args) {
    return format.formatValue(args.value);
}

//  EditMask
var editMask = new InfinniUI.DateTimeEditMask();
editMask.mask = "t";
editMask.format = format;

//  DateTimePicker
var minValue = InfinniUI.DateUtils.parseTimeISO8601toDate("09:00");
var maxValue = InfinniUI.DateUtils.parseTimeISO8601toDate("18:00");
var timePicker = new InfinniUI.TimePicker();
timePicker.setDisplayFormat(displayFormat);
timePicker.setEditMask(editMask);
timePicker.setMinValue(minValue);   // Set maximum value "09:00"
timePicker.setMaxValue(maxValue);   // Set maximum value "18:00"
timePicker.onValueChanged(function (context, args) {
    timePicker.setHintText("New Value: " + args.newValue);
    timePicker.setErrorText("Min Value: " + timePicker.getMinValue());
    timePicker.setWarningText("Max Value: " + timePicker.getMaxValue());
});

//  Render
$elementForExample.append(timePicker.render());

ToggleButton¶

Переключатель в виде кнопки.

Extends¶

Syntax¶

new ToggleButton([parent])

Parameters¶

Name	Type	Default	Description
`parent`	Element		Родительский элемент

Methods¶

Name	Description
getTextOn	Возвращает текст на включенное состояние.
setTextOn	Устанавливает текст на включенное состояние.
getTextOff	Возвращает текст на выключенное состояние.
setTextOff	Устанавливает текст на выключенное состояние.

ToggleButton.metadata¶

Метаданные типа ToggleButton.

Properties¶

Name	Type	Default	Description
TextOn	`String`	‘ON’	Текст на включенное состояние.
TextOff	`String`	‘OFF’	Текст на выключенное состояние.

Examples¶

{
  "Text": "Subscribe",
  "TextOn": "yes",
  "TextOff": "no",
  "Value": {
    "Source": "dataSource1",
    "Property": "$.IsSubscribe"
  }
}

//js-demo

var metadata = {
    ToggleButton: {
        "Text": "Subscribe",
        "TextOn": "yes",
        "TextOff": "no"
    }
};

var builder = new InfinniUI.ApplicationBuilder();
var toggle = builder.build(metadata);

//  Render
$elementForExample.append(toggle.render());

ToggleButton.getTextOff¶

Возвращает текст на выключенное состояние.

Syntax¶

toggleButton.getTextOff()

Parameters¶

Нет

Returns¶

Текст на выключенное состояние.

Examples¶

var text = toggleButton.getTextOff();

See Also¶

setTextOff

ToggleButton.getTextOn¶

Возвращает текст на включенное состояние.

Syntax¶

toggleButton.getTextOn()

Parameters¶

Нет

Returns¶

Текст на включенное состояние.

Examples¶

var text = toggleButton.getTextOn();

See Also¶

setTextOn

ToggleButton.metadata¶

Метаданные типа ToggleButton.

Properties¶

Name	Type	Default	Description
TextOn	`String`	‘ON’	Текст на включенное состояние.
TextOff	`String`	‘OFF’	Текст на выключенное состояние.

Examples¶

{
  "Text": "Subscribe",
  "TextOn": "yes",
  "TextOff": "no",
  "Value": {
    "Source": "dataSource1",
    "Property": "$.IsSubscribe"
  }
}

//js-demo

var metadata = {
    ToggleButton: {
        "Text": "Subscribe",
        "TextOn": "yes",
        "TextOff": "no"
    }
};

var builder = new InfinniUI.ApplicationBuilder();
var toggle = builder.build(metadata);

//  Render
$elementForExample.append(toggle.render());

ToggleButton.setTextOff¶

Устанавливает текст на выключенное состояние.

Syntax¶

toggleButton.setTextOff(value)

Parameters¶

Name	Type	Description
`value`	`string`	текст на выключенное состояние.

Returns¶

Нет.

Examples¶

toggleButton.setTextOff("OFF");

See Also¶

getTextOff

ToggleButton.setTextOn¶

Устанавливает текст на включенное состояние.

Syntax¶

toggleButton.setTextOn(value)

Parameters¶

Name	Type	Description
`value`	`string`	текст на включенное состояние.

Returns¶

Нет.

Examples¶

toggleButton.setTextOn("ON");

See Also¶

getTextOn

ToolBar¶

Панель инструментов.

Extends¶

Syntax¶

new ToolBar(parent)

Parameters¶

Name	Type	Description
`parent`	элемент	Родительский элемент.

TreeView¶

Иерархический список.

Extends¶

Syntax¶

new TreeView(parent)

Parameters¶

Name	Type	Description
`parent`	Element	Родительский элемент.

Methods¶

Name	Description
getKeySelector	Возвращает функцию выборки из элемента коллекции идентификатора.
setKeySelector	Устанавливает функцию выборки из элемента коллекции идентификатора.
getParentSelector	Возвращает функцию выборки из элемента коллекции идентификатора родителя.
setParentSelector	Устанавливает функцию выборки из элемента коллекции идентификатора родителя.

TreeView.metadata¶

Метаданные типа TreeView.

Properties¶

Name	Type	Description
KeySelector	Script	Функция выборки из элемента коллекции идентификатора.
KeyProperty	`String`	Свойство элемента коллекции с идентификатором.
ParentSelector	Script	Функция выборки из элемента коллекции идентификатора родителя.
ParentProperty	`String`	Свойство элемента коллекции с идентификатором родителя.
OnExpand	Script	Устанавливает обработчик события раскрытия элемента.
OnCollapse	Script	Устанавливает обработчик события скрытия элемента.

Examples¶

{
  "TreeView": {
    {
      "KeyProperty": "Id",
      "ParentProperty": "ParentId",
      "ItemProperty": "DisplayName",
      "Items": {
        "Source": "dataSource1"
      }
    }
  }
}

{
  "TreeView": {
    {
      "KeyProperty": "Id",
      "ParentProperty": "ParentId",
      "ItemProperty": "DisplayName",
      "Items": {
        "Source": "dataSource1"
      },
      "OnExpand": "{ console.log( 'This item is expanded: ', args.item ); }",
      "OnCollapse": "{ console.log( 'This item is collapsed: ', args.item ); }"
    }
  }
}

TreeView.getKeySelector¶

Возвращает функцию выборки из элемента коллекции идентификатора.

Syntax¶

TreeView.getKeySelector()

Parameters¶

Нет

Returns¶

Функция выборки из элемента коллекции идентификатора.

Examples¶

var selector = treeview.getKeySelector();

See Also¶

setKeySelector

TreeView.getParentSelector¶

Возвращает функцию выборки из элемента коллекции идентификатора родителя.

Syntax¶

TreeView.getParentSelector()

Parameters¶

Нет

Returns¶

Функция выборки из элемента коллекции идентификатора родителя.

Examples¶

var selector = treeview.getParentSelector();

See Also¶

setParentSelector

TreeView.metadata¶

Метаданные типа TreeView.

Properties¶

Name	Type	Description
KeySelector	Script	Функция выборки из элемента коллекции идентификатора.
KeyProperty	`String`	Свойство элемента коллекции с идентификатором.
ParentSelector	Script	Функция выборки из элемента коллекции идентификатора родителя.
ParentProperty	`String`	Свойство элемента коллекции с идентификатором родителя.
OnExpand	Script	Устанавливает обработчик события раскрытия элемента.
OnCollapse	Script	Устанавливает обработчик события скрытия элемента.

Examples¶

{
  "TreeView": {
    {
      "KeyProperty": "Id",
      "ParentProperty": "ParentId",
      "ItemProperty": "DisplayName",
      "Items": {
        "Source": "dataSource1"
      }
    }
  }
}

{
  "TreeView": {
    {
      "KeyProperty": "Id",
      "ParentProperty": "ParentId",
      "ItemProperty": "DisplayName",
      "Items": {
        "Source": "dataSource1"
      },
      "OnExpand": "{ console.log( 'This item is expanded: ', args.item ); }",
      "OnCollapse": "{ console.log( 'This item is collapsed: ', args.item ); }"
    }
  }
}

TreeView.setKeySelector¶

Устанавливает функцию выборки из элемента коллекции идентификатора.

Syntax¶

TreeView.setKeySelector(value)

Parameters¶

Name	Type	Description
`value`	Script	Функция выборки из элемента коллекции идентификатора.

Returns¶

Нет.

Examples¶

var keySelector = function (context, args) {
    return args.value ? args.value['Id'] : null;
}
treeview.setKeySelector(keySelector);

See Also¶

getKeySelector

TreeView.setParentSelector¶

Устанавливает функцию выборки из элемента коллекции идентификатора родителя.

Syntax¶

TreeView.setParentSelector(value)

Parameters¶

Name	Type	Description
`value`	Script	Функция выборки из элемента коллекции идентификатора родителя.

Returns¶

Нет.

Examples¶

var parentSelector = function (context, args) {
    return args.value ? args.value['parentId'] : null;
}
treeview.setParentSelector(parentSelector);

See Also¶

getParentSelector

ViewPanel¶

Контейнер для отображения представления.

Extends¶