API for editor - Layout

Generality

When you create a window or using the system plugins of RPG Creator, you have an Layout object. It allows you to put text fields standardized, checkboxs etc.

All these methods have common parameters :

{
 container: [array],
 parent: [string],
 fieldset: [string],
 div: [string],
 help: [string],
_class: [string],
 radio: [string],
 checkbox: [string]
}

Example :

Plugin.hook("database", "add_tab", {
    name: "Foo",
    id: "foo"
}, function(layout, attr) {
    layout.addInput("area", attr.area, {
          label: "Area Detection",
          min: 0,
          type: "number",
          width: 50,
          help: "Sample Help"
     });
});

Container

A container is a table to create multiple columns and separating elements.

layout.addContainer(ID, COLS, {
    width: [Array]
});
  • ID : Container id
  • COLS : The number of columns

Additional parameters :

  • width: Array showing the size of each column. Example :

    layout.addContainer("cont", 2, {
           width: [100, 200]
    });
    

Above, the container has two columns, the first measurement 100px, 200px the second

After creating the container, the other elements may have the container with the following value :

container: [ID_CONTAINER, POSITION]
  • ID_CONTAINER : Id container created
  • POSITION : The column where you want to insert the element.

Example :

layout.addContainer("cont", 2);
layout.addInput("input", attr.input, {
   label: "My Input",
   container: ["cont", 1]
});

Block

The operation is almost similar to the parts except that there is no column.

 layout.addFieldSet(ID, TITLE, {})
  • ID : Bloc id
  • TITLE : Bloc title

No additional parameters.

To insert an element in the block, use the fieldset indicating its identifier

Example :

layout.addFieldSet("my_field", "My Fieldset");
layout.addInput("input", attr.input, {
   label: "My Input",
   fieldset: "my_field"
});

Note that can combine the blocks and containers :

layout.addContainer("cont", 2);
layout.addFieldSet("my_field", "My Fieldset", {
    container: ["cont", 1]
});
layout.addInput("input", attr.input, {
   label: "My Input",
   fieldset: "my_field"
});

Text field

layout.addInput(ID, VALEUR, {
   label: [string]
   min: [integer]
   max: [integer]
   type: [string] (text by default)
   width: [integer]
   disabled: [boolean] (falseby default)),
   onChangeRealTime: function(val, ev) {}
});
  • ID : Text field id
  • VALEUR : value by default

All parameters are optional :

  • label : Display the field label
  • min : minimum value (if type=number)
  • max : maximum value (if type=number)
  • type : text or number
  • width : width in pixels of the field (takes all width by default)
  • disabled : Enables or disables the field
  • onChangeRealTime: retrieve the value val to hitting a key in the field

Returns a <div> tag containing <input>

var div = layout.addInput(...);
div.children("input").val("foo");

Example :

 layout.addInput("area", attr.area, {
      label: "Area Detection",
      min: 0,
      type: "number",
      width: 50
 });

Textbox

layout.addTextArea(ID, VALEUR, {
   label: [string]
   width: [integer],
   height: [integer]
   disabled: [boolean] (false by default)),
   onChangeRealTime: function(val, ev) {}
}

(view addInput properties)

Plain text

layout.addText(TEXT, ID, {
   ret_p: [boolean]
}
  • ret_p (optional) : returns tag <p> containing the text (jQuery)

Button

layout.addButton(TEXT, ID, CALLBACK, {
   _class: [string]
   data: [object]
   bottom: [boolean]
   submit: [boolean]
});
  • TEXT : Text button
  • CALLBACK : callback function when the button is clicked

Paramètres (tous sont facultatives)

  • _class : CSS class
  • data : assign values ​​to the button to collect it in the window (if the button opens a window)
  • bottom: place the button at the bottom of a window
  • submit : closes the window and retrieves the data entered into the fields in the window. In this case, the callback function (CALLBACK) has a parameter data

List

layout.addList(LIST, {
   size: [string],
   scroll: [boolean],
   relative: [boolean],
   id: [string],
   _class: [string],
  selectable: [boolean],
  margin: [integer],
  width: [integer]
}, CALLBACK)

LIST is an array of the list consists of the following ways :

[ 
 {
    data: [object],
    content: [string]
 },
 ...
]

content is the visual content of HTML list item

CALLBACK is a callback function when a list item is clicked. Data object data in LIST is returned in the first parameter

Parameters :

  • size : defines the display mode : normal, milarge, large
  • relative : force the CSS position relative
  • id : List ID
  • _class : CSS class
  • selectable : indicates whether the list is selectable (applies only class selected in CSS on the element)
  • margin : adds a margin around the list (in pixels)
  • width : width of the list

Liste d'édition

This list can have add, edit and remove buttons

layout.addListEdit(NAME, ATTR, LIST, {

}, CALLBACKS);

CALLBACKS is an object with multiple callbacks:
{
  add: [function]
  remove: [function]
  edit: [function]
}

Note that if an event is not present the button will be displayed anyway. Not to display a button, you must assign the value to false key (add: false for example)

Function add has 3 parameters:

add: function(DATA, INPUT, FUNCTION)
  • DATA : List Object
  • INPUT : Hidden field containing the list in JSON (jQuery)
  • FUNCTION : Refresh function to call with the new table (same values ​​as LIST) to refresh the list after adding

Example :

add: function(data, input, refresh) {

}

Function remove has 2 parameters :

remove : function(DATA, INPUT) (see add above)

Function edit has 3 parameters :

  • remove : function(LI, DATA, INPUT)
  • LI : tag
  • (jQuery) selected in the list (see add above the rest)

ComboBox

layout.addComboBox(NAME, OPTIONS, {
   _default: [object]
   width: [integer]
   onChange: function(e, val) {

   }
});
  • NAME : ComboBox name
  • OPTIONS: List of options: array component objects of this scheme :

    {
     value: [object]
     text: [string]
    }
    

Parameters (all are optional)

  • _default : Value by default
  • width : Combobox width
  • onChange : Function called when a change. The val is the value of the new option selected

Predefined lists

layout.drawListData(TYPE, ATTR)

TYPE is types are declared in the database

  • actors
  • classes
  • skills
  • items
  • weapons
  • armors
  • states
  • animations
  • tilesets
  • autotiles
  • actions
  • common_events
  • dynamic_events
  • elements
  • variables
  • switches

ATTR corresponds to the various values ​​for the data.

Example 1 :

layout.drawListData("variables", "name")

Example 2 :

layout.addComboBox("foo", layout.drawListData("variables", "name"), {
   _default: attr.foo
});

Additional functions

See list of local switches :

listSelfSwitch();

Example :

layout.addComboBox("foo", listSelfSwitch(), {
   _default: attr.foo
});

View the events of the current map

 layout.drawListCurrentEvent(ATTR, THIS, NONE, PLAYER);
  • ATTR : Attribute of an event (graphic, name, etc.)
  • THIS (boolean) : Displays the word This event
  • NONE (boolean) : Displays the word None
  • PLAYER (boolean) : Displays the word Player

See list of menus :

layout.drawListMenus(ATTR, NONE)
  • ATTR : Attribute menu
  • NONE (boolean) : Displays the word None

Exemple :

 layout.drawListMenus("name", true);

RadioBox

layout.addRadio(NAME, RADIO, {
   new_line: [boolean]
   id: [string]
   _default: [string]
    click: [function]
});
  • NAME : Name list RadioBox
  • OPTIONS: List of options: array component objects of this scheme: { value: [object] text: [string] }

Parameters (all are optional)

  • _default : Value by default
  • id : Identifier for the radio link to other elements
  • new_line : View on a new line
  • click : Callback function when the user clicks on the radio.

Radiobox that active components

layout.addRadio(NAME_RADIO, RADIO, {
    id: 1
});

layout.addComboBox("foo", layout.drawListData("variables", "name"), 
    _default: attr.foo,
    radio: [NAME_RADIO, 1]
}));

Checkbox

layout.addCheckbox(NAME, RADIO, {
   new_line: [boolean]
   id: [string]
   _default: [string]
});
  • NAME : Name list Checkbox
  • OPTIONS: List of options: array component objects of this scheme: { value: [object] text: [string] }

Parameters (all are optional)

  • _default : Valeur par défaut
  • id : Identifier for the radio link to other elements
  • new_line : View on a new line

Tabs

layout.addTab(TITLE, ID, CALLBACK, {
    cache: [boolean]
    clickSelected: [boolean]
    onClick: [function]
    multiline: [boolean]
    data: [object]
});
  • TITLE : Tab title
  • ID : Group tab ID
  • CALLBACK : Callback function when the user clicks on the tab. two parameters :
    • A layout object corresponding to the tab page
    • Data passed to the data

Additional parameters are :

  • onClick : Callback function when a tab is clicked. Two parameters:
    • event : click event
    • index : tab index
  • data : data object to pass to the callback function

Example :

layout.addTab("Foo", "tabs", function(layout_tab, data) {

    layout_tab.addInput("input_id", data.bar, {
       label: "My Label"
    });

}, {
    data: {bar: "Hello World"}
});

Simple div

 layout.addDiv(ID, {
    _class: [string]
    overflow: [string]
    width: [Integer]
    height: [Integer]
});
  • ID : Div ID

Additional parameters are :

  • _class : CSS class
  • width : Width (pixels)
  • height : Height (pixels)
  • overflow : Adding scroll bars (CSS value)

You can get the div to manipulation. This is a jQuery.

Example :

var div = layout.addDiv("my_div");
div.html('<img src="my_img.png" alt="">');

accordion

layout.addAccordion(ID, TITLE, CALLBACK, {});
  • ID : accordion ID
  • TITLE : accordion title
  • CALLBACK : Function containing the accordion content. A new Layout object is instantiated

No additional parameters.

Example :

 layout.addAccordion("my_accordion", "Foo", function(ar_layout) {
       ar_layout.addInput("my_input", "");
 });
 layout.addAccordion("my_accordion", "Bar", function(ar_layout) {

 });

If accordions have the same username, they are part of the same group.

Slider

layout.addSlider(ID,  {
    value: [object]
    _change: [Function]
});
  • ID : Slider ID

Additional parameters are :

  • value : Value by default
  • _change : Callback when the value is changed. The parameters returned by the function is equivalent to change method to jQuery UI

Other parameters are available. This is the options of jQuery UI Slider

Command list event.

Preconfigured list found in the edition of an event or common events in the database

layout.addLayoutCommands(ID, COMMANDS, ONCHANGE, {});
  • ID : List ID
  • COMMANDS : JSON or object containing the list of commands

Example :

["SHOW_TEXT: {'text': 'Hello World'}","SELF_SWITCH_ON: {'id': 'A'}"]

This is commands in RPG JS. Note that, normally, you have nothing to attribute because it is the user who filled himself the list by selecting commands. To load changes its :

 layout.addLayoutCommands("my_commands", attr.my_commands);
  • ONCHANGE : Callback function when the command list is changed. A parameter is returned: the new object in the list.

No additional parameters

Choose a material

The user can select a resource from the graphics and sounds loaded in RPG Creator

layout.addInputMaterial(TYPE, ID, TEXT, VALUE, CALLBACK, {
    width: [integer]
});
  • TYPE : Type of resource :
    • tileset
    • character
    • icon
    • animation
    • autotile
    • picture
    • bgm
    • bgs
    • me
    • se
  • ID : Element ID
  • TEXT : Text to display in the area of ​​the element
  • VALUE : Element value
  • CALLBACK : Callback when the resource was selected. A parameter is returned:
    • data_selected : Data of the selected resource
    • name
    • material_id

Additional parameter :

  • width : Element width

Choose a character

The selection of a character enables the user to :

  1. Define the character's appearance
  2. Give additional options (number of sequences, initial direction, etc.).

Structure :

layout.addGraphicChoice(TYPE, ID, ATTR, {
       index: [integer]
});
  • TYPE : Type of material (view list of addInputMaterial)
  • ID : Element ID. Generally graphic
  • ATTR : The object returned by the parent (see the beginning of this document)

Additional parameter:

  • index : If there are several choices (in different tabs for example), give an index different to each element