In-Portal Developers Guide

This is a wiki-based Developers Guide for In-Portal Open Source CMS. The purpose of this guide is to provide advanced users, web developers and programmers with documentation on how to expand, customize and improve the functionality and the code the In-Portal software. Please consider contributing to our documentation writing effort.

K4:Adding New Button to Toolbar

From In-Portal Developers Guide

Jump to: navigation, search
(Translating)
Current revision (18:07, 26 November 2010) (view source)
(Translation)
 
(2 intermediate revisions not shown.)
Line 1: Line 1:
{{toc | category = Работа с шаблонами и блоками | sortkey = 003.001}}
{{toc | category = Работа с шаблонами и блоками | sortkey = 003.001}}
-
The toolbar is one of the key elements to control events in the templates. In order to add a new button to already existing Toolbar you would need to use the following Javascript code:
+
The Toolbar is one of the key elements to control events in the templates. In order to add a new button to already existing Toolbar you would need to use the following Javascript code:
<source lang="javascript">
<source lang="javascript">
Line 20: Line 20:
! Name || Description
! Name || Description
|-
|-
-
| {{ConfigProperty|title|string}} || Button identifier (ID). The identifier must unique within a Toolbar. Additionally, in there is a way to specify a Module name in identifier which will be used in building the source path of the button image (see [[K4:Структура директорий|Структура директорий]]). Below are examples of filename for the button images which also determine type of the button:
+
| {{ConfigProperty|title|string}} || Button identifier (ID). The identifier must unique within a Toolbar. Additionally, in there is a way to specify a Module name in identifier which will be used in building the source path to the image of button (see [[K4:Структура директорий|Структура директорий]]). Below are examples of filename for the button images which also determine type of the button:
-
* '''<code>tool_sample_button.gif</code>''' - default state/view of the button (can be clicked);
+
* '''<code>tool_sample_button.gif</code>''' - default state of the button (can be clicked);
-
* '''<code>tool_sample_button_f1.gif</code>''' - вид кнопки, если на неё подвести курсор мышки (можно нажать);
+
* '''<code>tool_sample_button_f1.gif</code>''' - button when you mouse-over it (can be clicked);;
-
* '''<code>tool_sample_button_f2.gif</code>''' - вид кнопки, когда она не активна (можно не создавать если не используется).
+
* '''<code>tool_sample_button_f2.gif</code>''' - button when it's disabled (inactive and can't be clicked).
-
В приведённом выше примере вместо "sample_button" нужно подставить фактическое название кнопки. Название модуля отделяется от названия кнопки при помощи символа двоеточия ("<code>:</code>"). Если используемый модуль "<code>core</code>", то его указывать не требуется. В последствии можно использовать название кнопки (не идентификатор) для работы с кнопкой (включение, выключение и т.п.) из объекта панели инструментов.
+
 
 +
In the example above "sample_button" should be replaced with the actual button name. The Module name is separated from the button name with a colon ("<code>:</code>"). There is '''no need''' to specify module in the button name if it's "<code>core</code>" module. Later on the template the button can be referred by name (not identifier) in order to Enable or Disable it on the toolbar. Good example would be disabling "<code>Delete</code>" button in a toolbar until at least one grid record is selected.
|-
|-
-
| {{ConfigProperty|alt|string}} || Фраза, показываемая при наведении курсора мыши на кнопку (mouseover). Также эта фраза используется для показывания вспомогательного текста под кнопкой (только если опция конфигурации [[K4:Configuration#UseToolbarLabels|UseToolbarLabels]] включена). Если указать 2 фразы разделённые с использованием двух двоеточий ("<code>::</code>"), то фраза указанная до разделителя будет использована в качестве краткой подсказки (при наведении мышки), а фраза указанная после разделителя будет использована в качестве текста, показываемого под кнопкой.
+
| {{ConfigProperty|alt|string}} || Phrase that is shown when you mouse-over the button. The same phrase will be used to show the text right under the actual button (only if [[K4:Configuration#UseToolbarLabels|UseToolbarLabels]] configuration option is on). Also, there is a way to have 2 separate phrases for a '''Hint''' (shown on mouse-over) and the one below the button, in this case they should be separated with double-colon ("<code>::</code>"). The phrase when double-colon will be used for a Hint while the one after the separator will be shown below the button.
|-
|-
-
| {{ConfigProperty|onclick|string}} || Действие, которое должно происходить при нажатии на кнопку. Обычно, для наглядности, динамически определяется функция и в ней пишется фактический JavaScript код, который должен быть выполнен.
+
| {{ConfigProperty|onclick|string}} || The action that takes place when button is clicked. Usually, there is a call for dynamic Javascript function which has the actual Javascript that should be executed on click.
|-
|-
-
| {{ConfigProperty|$hidden|int}} || Кнопка должна быть сразу спрятана после своего добавления в панель инструментов.
+
| {{ConfigProperty|$hidden|int}} || Button needs to be hidden right after Toolbar initialization. This is done for cases when you need more visual control over when to show the button in the toolbar, but at the same time all buttons needs to be initialized when the toolbar is created.
|-
|-
-
| {{ConfigProperty|prefix|string}} || [[K4:Unit Configs#Prefix|Префикс]], который влияет на ID, которое будет проставлено созданной кнопке.
+
| {{ConfigProperty|prefix|string}} || [[K4:Unit Configs#Prefix|Префикс]] that is used for the current button.
|}
|}
[[en:{{FULLPAGENAME}}]]
[[en:{{FULLPAGENAME}}]]
[[ru:K4:Добавление_кнопки_в_панель_инструментов]]
[[ru:K4:Добавление_кнопки_в_панель_инструментов]]

Current revision

Работа с шаблонами и блоками Работа с шаблонами и блоками
Статьи в этой категории

The Toolbar is one of the key elements to control events in the templates. In order to add a new button to already existing Toolbar you would need to use the following Javascript code: 

a_toolbar.AddButton(
	new ToolBarButton(
		'custom:sample_button',
		'<inp2:m_phrase label="la_ToolTip_SampleButton" escape="1"/>::<inp2:m_phrase label="la_ShortToolTip_SampleButton" escape="1"/>',
		function() {
			// alert('button worked');
		}
	)
);

Class constructor ToolBarButton accepts 5 parameters where only first 3 are requires:

Name Description
title (string) Button identifier (ID). The identifier must unique within a Toolbar. Additionally, in there is a way to specify a Module name in identifier which will be used in building the source path to the image of button (see Структура директорий). Below are examples of filename for the button images which also determine type of the button:
  • tool_sample_button.gif - default state of the button (can be clicked);
  • tool_sample_button_f1.gif - button when you mouse-over it (can be clicked);;
  • tool_sample_button_f2.gif - button when it's disabled (inactive and can't be clicked).

In the example above "sample_button" should be replaced with the actual button name. The Module name is separated from the button name with a colon (":"). There is no need to specify module in the button name if it's "core" module. Later on the template the button can be referred by name (not identifier) in order to Enable or Disable it on the toolbar. Good example would be disabling "Delete" button in a toolbar until at least one grid record is selected.

alt (string) Phrase that is shown when you mouse-over the button. The same phrase will be used to show the text right under the actual button (only if UseToolbarLabels configuration option is on). Also, there is a way to have 2 separate phrases for a Hint (shown on mouse-over) and the one below the button, in this case they should be separated with double-colon ("::"). The phrase when double-colon will be used for a Hint while the one after the separator will be shown below the button.
onclick (string) The action that takes place when button is clicked. Usually, there is a call for dynamic Javascript function which has the actual Javascript that should be executed on click.
$hidden (int) Button needs to be hidden right after Toolbar initialization. This is done for cases when you need more visual control over when to show the button in the toolbar, but at the same time all buttons needs to be initialized when the toolbar is created.
prefix (string) Префикс that is used for the current button.
Retrieved from "http://guide.in-portal.org/eng/index.php/K4:Adding_New_Button_to_Toolbar"