{{indexmenu_n>1}}
====== PROP Node ======
\\
The **prop** node is the basic unit inside of every collection, defines the characteristics of an object both at the screen display level and its storage in BD. \\
\\
A very simplified defintion of a **prop** could be: "a form field in its equivalent to HTML", while in XOne, a**prop** can be much more complex, being able to define fields to capture the signature, taking pictures using the device´s camera, a slide of images, a calendar, a bars code, HTML code, adding attachments, bars-pies- lines graphycs, a tree of categories...etc\\
\\
The prop node **mandatory attributes ** are the following ones:\\
\\
* **NAME**
* **GROUP**
* **VISIBLE**
* **FIELDSIZE**
* **SIZE**\\
\\
For the label of the field it is searched by priority order:
- Attribute**title**.
- If the previous one wasn´t defined, the string there is between **tittle we want** will be searched.
- Finally, if none of the previous ones were defined, the name of the field content in the **name** attribute will be used.
\\
The XML attributes have to be written in lower case and the object names (attribute name) will be written in CAPITAL LETTERS. (that last is a Los atributos del XML se tienen que escribir en minúsculas y los nombres de objeto (atributo name) se escriben en MAYÚSCULAS. (this last one is a convention of the XOne programmers, it does not have to be this way necessarily.)
\\
\\
===== XONE PROPERTIES =====
\\
Recursos Propios\\
===== MANDATORY ATTRIBUTES =====
==== name="Value" ====
\\
This attribute contains the object name in **CAPITAL LETTERS**, this one must be unique inside the collection. If there were two object names repeated, the first one it was defined would be taken.\\
\\
* For the fields linked from other collections the "MAP_" prefix is put to the object name, this indicates to the machinery that this field is not recorded, it is just for reading only.
* For the fields of the "NC" type (an integer we take as separated bits) the "%" prefix is put to the object name.
* For the calculated fields (also called formule type fields) the "$" prefix is put to the object name.
* For the fields of "Z" type (CONTENT type, relation of 1 to n with another collection) the "@" prefix is put to the object name.
==== group="Num. Tab" ====
\\
This attribute contains a number indicating to which tab this field belongs to, in a way that the fields that make up the enter data form are grouped, and at the same time, it is optimized its visualization on devices with a reduced screen as the case of the mobile devices. \\
\\
^ Tab viewing in POCKET PC ^ Tab viewing in Blackberry ^ Tab viewing in IPhone ^
| {{wiki:pda1.jpg?nolink}} | {{wiki:bb_pestanas.jpg?nolink}} | {{wiki:iphone.jpg?nolink}} |
==== visible="Value" ====
\\
This attribute indicates where we are going to be able to see that field in the different nodes in which we can see a collection.\\
\\
This field can be displayed as an integer with 4 bits, each one of them we can added in binary and it will give us the value we need. \\
\\
^ Position BIT in binary ^ Visibility ^
| 0 ( 0 0 0 **__0__** ) | Visible in Edition mode |
| 1 ( 0 0 **__0__** 0 ) | Visible in Grid mode |
| 2 ( 0 **__0__** 0 0 ) | Visible in Content mode (Grid associated to another main collection) |
| 3 ( **__0__** 0 0 0 ) | Visible in Combo mode to filter |
\\
Examples:
\\
^ Value ^ Equivalent Binary ^ Visibility ^
| Visible="7" | 0111 | Visible in Edition mode, listing and content |
| Visible="3" | 0011 | Visible in Edition mode and listing |
| Visible="1" | 0001 | Visible only in Edition mode |
| Visible="0" | 0000 | Not Visible in any mode |
==== fieldsize="Value" ====
\\
This attribute is used to indicate the visible size of the field on screen.
==== size="Value" ====
\\
This attribute is used to indicate the real size in the Database.
==== type="Value" ====
\\
This attibute is used to indicate the type of visual control we will use to give value to that object. \\
\\
IMPORTANT:
\\
The types outlines in the DB column are the **RECOMMENDED** values that work 100% in all the DBMS, do not forget that XOne Technology may work in many different devices.
\\
The use of any other type of data other than the displayed ones in the bottom table (//char//, //nvarchar//, //tinyint//, etc) they can make your application doesn´t work in any specific device (PDA, BLACKBERRY…) or making the app doesn´t work with any DBMS (ORACLE, MSSQL, MYSQL...), for the simple fact that this type does not exist in that DBMS or even, even if it is supported, bad experiences with some of these types in different devices makes us discourage their use. \\
\\
^ Visual Control ^ Type ^ Mappings ^ DB ^
| {{ :wiki:control_texto.png | }} | Text | Type="T" | Varchar |
| {{ :wiki:control_numerico.png | }} | Numeric | Type="N" | Int |
| {{ :wiki:control_real.png | }} | Real | Type="N2" (*) | Double |
| {{ :wiki:control_fecha.png | }} | Date | Type="D" | Datetime |
| {{ :wiki:control_bit.png | }} | Bit | Type="NC" | Int |
| {{ :wiki:control_label.png | }} | Label | Type="TL" | |
| {{ :wiki:control_password.png | }} | Password | Type="X" | Varchar |
| | Image | Type="IMG"(*2) | Varchar(100) |
| | Attach | Type="AT" | Varchar(100) |
| | Pict | Type="PH" | Varchar(100) |
(*) On the Real type of data, in the mappings it is necessary to put type=”N2, N3, N4…”, by specifying after the N the decimal numbers we want for that field. \\
(*2) In android, if barcode="tipo" is defined, a bar code will be generated that encodes the data saved in this purpose. Supported types: codabar, code11, code128, code25, code39, code93, datamatrix, ean128, ean13, ean8, isbn, issn, itf14, identcode, interleaved2of5, leitcode, msi, onecode, pdf417, planet, postnet, rm4scc, upca, upce.\\
===== Attached (type="AT") =====
\\
^ Attribute ^Description ^
| **showgallery="true"** | By clicking on the attachment button, firstly it will show the photo gallery of the device.|
| **path="/rutaabsoluta/"** | By clicking on the Attachment button, firstly it will show the specified path. |
\\
=== New Attribute of the "AT" types ===
\\
A new attribute for the props type=”AT”, allowed-extensions="pdf;txt" was implemented, which it indicates separately by “;” the allowed extensions when the file selection window is taken out to. \\
=====Type="N"=====
\\
===Slider and Rounded-slider===
\\
From the **viewmode** attribute, in the props Type N, these controls are defined:\\
* viewmode=”slider”
* viewmode=”rounded-slider”
\\
The max attribute defines the maximum value the control may have.\\
Examples:
\\
===== Changing images by default =====
\\
Some attributes have been added to change the icons by default of the Android frame.
Icons in :
|< 100% 180px - >|
^ Attribute ^Description ^
| **img="cadena"** | It enablesto define the image used in the main button of the control. |
| **img-sel="cadena"** | It defines the image when you click on the button defined by "**img**".\\ All the attributes starting with "**img**", allow to have a value for the "**sel**" suffix.\\ Examples: "**img**" **->** "**img-sel**" and "**img-delete**" **->** "**img-delete-sel**" |
| **img-delete="cadena"** | It defines the image of the delete or clear button for the edition controls. |
| **img-search="cadena"** | It defines the image of the linkeado "magnifying glass" button for the edition controls. |
| **img-spinner="cadena"** | It defines the image of the linkeado "combo" button with showinline="true" for the edition controls. |
| **img-phone="cadena"** | It defines the image of the phone button in the nodes with "**phone=true**" attribute. |
| **img-width="Entero"** | It enables to define the main button width. \\ For any other button is by adding **-width** at the end of the image definition.\\ Examples: **img-undo-width="60"** and **img-delete-width="60"**. |
| **img-height="Entero"** | It enables to define the main button height.\\ For any other button is by adding **-height** at the end of the image definition.\\ Examples: **img-undo-height="60"** and **img-delete-height="60"**. |
| **img-undo="cadena"** | It defines the image of the undo button for the edition controls. |
| **undo-button="true|false"** | It indicates if the undo or clear buttons are shown in the edition controls. |
| **img-date** | It enables to define the date. |
| **img-time** | It enables to define the image in time-type controls. |
| **img-att** | It indicates if a clip to attach files will be shown. |
| **img-delete-width** | It enables to set the width of the delete or clear button for the edition controls. |
| **img-delete-height**| It enables to set the height of the delete or clear button for the edition controls. |
| **img-phone-width** |It enables to set the phone button width. |
| **img-phone-height** | It enables to set the phone button height. |
| **img-date-width** |It enables to set the date button width. |
| **img-date-height** |It enables to set the date buton height. |
| **img-time-width** |It enables to set the width of the button for time-type controls. |
| **img-time-height** |It enables to set the height of the button for time-type controls. |
| **img-att-width** |It enables to set the width of the button for attaching files. |
| **img-att-height** |It enables to set the height of the button for attaching files. |
Example of CSS:
prop
{
img-spinner:arrow_down.png;
img-spinner-sel:arrow_down_click.png;
img-search:lupa.png;
img-search-sel:lupa_click.png;
img-delete:delete.png;
img-delete-sel:delete_click.png;
img-undo:undo.png;
img-undo-sel:undo_click.png;
img-phone:phone.png;
img-phone-sel:phone_click.png;
}
prop:AT
{
img:attachment.png;
img-sel:attachment_click.png;
}
prop:PH
{
img:camera.png;
img-sel:camera_click.png;
}
prop:IMG
{
img:firma.png;
img-sel:firma_click.png;
}
prop:VD
{
img:video.png;
img-sel:video_click.png;
}
\\
====Support for images with .GIF extension ====
\\
The possibility to put in props type=”IMG” images with .GIF extension has been implemented.
\\
====Floating Attibute====
\\
The floating attribute has been implemented for any type of prop node, it works the same as the one defined for the frame nodes with Left and top.\\
\\
====Radio Button====
\\
The ratio button has been implemented from the props type NC, through the following attributes:\\
\\
* check-type : It defines if we want the NC looks like radio button with the "radio" value.
* radio-group : It defines an id, that the framework will group all the NC with the same radio-group value and will be responsible for marking and unchecking as appropriate.
\\
Example:
\\
===== Upload of files Limits =====
\\
Some attributes have been added for "limiting" the files upload in the type "**AT**" (Attaching file), "**IMG**" (Signature), "**VD**" (Video) and "**PH**" (Photo).
Attributes:
|< 100% 240px - >|
^ Attribute ^Description ^
| **file-maxsize="XXX"** | Size in bytes, maxium size of the file to be uploaded. |
| **file-msgfail="Mensaje Error"** | We customize the error if we try to upload a very big file. |
| **file-maxwidth="800"** | Maximum width of the photo taken. |
| **file-maxheight="600"** | Maximum height of the photo taken. |
File-maxwidth and file-maxheight must be implemented for the photo and signature fields in order the devices replicate all the photos and signatures with the same resolution. This will make the photos size more predictable and small in size, and it will avoid memory problems in low-end devices.
===== Types of Controls =====
==== TYPE "X" ====
\\
The type="X" is in appearance to the type="T", with the difference that the character entered into this field will be shown on screen with asterisks, since it is a password type field, by default with a BASE64 codification, although with the following attributes its behaviour may be modified. \\
\\
**Attibutes:**
|< 100% 240px - >|
^ Attribute ^Description ^
| **type="X"** | This one has to be always, which is to indicate that is a key field. |
| **hash-type="MD5"** | This one is to indicate that is a key of MD5-type. |
| **encode="HEX"** | This one is to see how the key comes. The key has to come with the letters or all in uppercase or all in lowercase, they can not come with uppercase and lowercase letters at the same time. Then if in this property you put “HEX” in uppercase, it is because the letters are coming in uppercase in the key, and if you put “hex” in lowercase it is because they come in lowercase. |
==== TYPE "DR" ====
\\
The type="DR" (DRaw) is to be able to draw on screen with the finger, it is ideal for a SIGNATURE-type field. .\\
\\
**Attributes:**
|< 100% 300px - >|
^ Attribute ^Description ^
| **stroke-color="#333333"** | To indicate the color of the line we are going to draw. |
| **stroke-width="4"** | To indicate the size in points of the line that we are going to draw. |
| **apply-format-to-file="true"** | To indicate that the final image includes the format styles we have applied it. If this parameter is put to false, the final file will have no colors and the text will be applied in black-color and the background will be applied in white-color. |
| **bgcolor="#FFFFFF"** | Background color of the control. |
| **img="fondo.jpg"** | Image we want to put in the background. |
\\
Example of code:\\
ui.saveDrawing("FIRMACLIENTE") 'Con este método guardamos el fichero con la firma.
==== PHOTO field (type "T") ====
\\
For a field of PHOTO type, we will combine the use of a type="T" field which have the name of the file to transmit with a type="IMG" file to have a preview of the file, for this, we make use of a button that calls the camera and put the results of the photo in the text and image fields. \\
\\
Example of code:\\
\\
====type=”T” with floating tooltip ====
\\
They are Props with floating tooltip, when the user click on the tooltip field it floats over the text that the user types.
\\
Attributes:
\\
* floating-tooltip: It enables the floating tooltip . \\
* expanded-hint-color: It determines the text color of the tooltip when expanded.\\
\\
Example:
==== WEB-type field====
\\
A type="WEB" field is like an iframe of html. After specifying a width and a height, we give it value by specifying a web address or associating it HTML code directly.
\\
===== Other Attributes =====
==== fixed-text ====
\\
To control the amount of characters entered is NOT greater than a specific limit, we can use together the //**fixed-text**// and //**size**// attributes . \\
\\
Whenever these two attributes are used together, **fixed-text**="true" (by default is false), the **size** attribute indicates the limit of characters can be entered into a field. \\
\\
By default, the fields have a maximum limit of 50 characters and the multiline fields have 500 characters.\\
\\
Sintax:
/* Example of entering only 120 characters into a field. */
==== onchange="refresh#" ====
\\
This attribute indicates which values of the same collection are we going to refresh when the current property changes value.
\\
The number it appears followed of the onchange="refresh#" attribute is the equivalent in decimal to a bits map that indicates which parts of the objects are necessary to refresh and which ones are not. \\
What is explained here, is only for PDA(POCKET PC), since painting the screen with a so limit in processor and memory device was something very expensive and slow, in the latest platforms (Android,Iphone,Windows Phone...) it is not necessary anymore, simply a **onchange="refresh"** will refresh everything.
\\
The first bit (bit=0) which it would be represented as onchange="refresh1" or simply onchange="refresh", it would refresh all the properties of the uploaded object but it wouldn´t refresh the contents contained in the object.
The second bit (bit=1) it would indicate that contents are going to be refreshed by indicating in the consecutive bits to this one (2,3,4,5,6,7) which contents are going to be refreshed according the order of appearance in the collection. \\
\\
It is necessary to combine the bit 1 with the following ones to indicate which contents we want to refresh:\\
\\
^ BIT position in binary ^ Visibility ^
| 0 ( 0 0 0 0 0 0 0 **__0__** ) | We are going to refresh all the properties of the current tab. |
| 1 ( 0 0 0 0 0 0 **__0__** 0 ) | We are going to refresh the contents. |
| If the previous bit is 1, we will define which contents are going to be refreshed. ||
| 2 ( 0 0 0 0 0 **__0__** 0 0 ) | 1 content by appearance order in the collection will be refreshed |
| 3 ( 0 0 0 0 **__0__** 0 0 0 ) | 2 content by appearance order in the collection will be refreshed |
| 4 ( 0 0 0 **__0__** 0 0 0 0 ) | 3 content by appearance order in the collection will be refreshed |
| 5 ( 0 0 **__0__** 0 0 0 0 0 ) | 4 content by appearance order in the collection will be refreshed |
| 6 ( 0 **__0__** 0 0 0 0 0 0 ) | 5 content by appearance order in the collection will be refreshed |
| 7 ( **__0__** 0 0 0 0 0 0 0 ) | 6 content by appearance order in the collection will be refreshed |
\\
\\
**Examples**
\\
\\
^ Value ^ Equivalent Binary ^ Visibility ^
| refresh1 | 00000001 | All properties will be refreshed |
| refresh6 | 00000110 | First content of the collection |
| refresh11 | 00000111 | First content of the collection and all the properties |
| refresh255 | 11111111 | ALL the content of the CURRENT TAB will be refreshed |
| refresh256 | 100000000 | The disablevisible of the tab will be evaluated, but it WILL NOT refresh the content |
| refresh511 | 100000000 | EVERYTHING will be refreshed |
\\
\\
This modality of refreshment is designed to avoid hight data volume by refreshing a feild, for instance, in PC apps with object than have an amount of contents more than 5.\\
Usually, in the rest of pocketpc, blackberry devices, only the //refresh1//and//refresh255// will be used, since the contents load is done independently by tab by showing it to the user and it is not visibly feasible to position some contents in a tab. \\
\\
On the WEB, there is no sense in content-independent refresh either, since the page must be reloaded each time the object is refreshed. \\
\\
For pocketpc also is used the bit 8 of the onchange="**refresh256**"mask, which is used to check the conditions of the //disablevisible// the different tabs of the object have. \\
\\
If a tab is not visible because a certain condition of the //disablevisible// is not fulfilled and we want it is visible at the time in which this condition is modified, we would have to use this kind of refresh. \\
\\
==== mapcol="collection" | mapfld="field" | default-mapcol="collection"====
\\
**mapcol:** It indicates that this property is linked with another collection, in other words, this is a key field in the relationship of many to one
\\
\\
Example of code:
In this example is indicated that the property which name is IDTIPO is numeric and is linked to an collection named tiposusuario".\\
\\
The field used to link this property with the external collection is indicated by the 'mapfld' attribute.\\
\\
This attribute value must be the name of a valid collection within the app. If the collection isn´t defined the user interface can cause an error when trying link this property with another one. \\
\\
For this value, we can use the ##OWNERCOLL## macro indicating that you are referring to the collection in which the object that owns this object is defined. \\
\\
\\
If the property is declared in a collection of document details, the proprietary collection would be the collection of documents of which it is.\\
\\
The data layer replaces the name of this macro when the value of this property is asked, so that, the collection has to be used as a contents. \\
\\
In case the collection is get directly from the app and do not as a content collection, the result of this macro will be obtained from the //default-mapcol// attribute, in case this attribute is defined, on the contrary it will be an empty string. \\
\\
**default-mapcol:** This attribute is used to complete the previous one when the collection that contains this property is used as a base collection and not as a content collection. \\
\\
\\
In this case the //mapcol// attribute will return the value that this attribute has. \\
\\
In the following example this behaviour is shown:\\
\\
\\
In this example, the “**Recibos**” collection has been declared to be used as content collection in the “**Documentos**” collection. When this is done like this, the //mapcol// attribute returns the "Documentos" name because this is its propietary collection.
\\
In case the “Recibos” collection is get directly from the app and do not as “Documentos” content, the //mapcol// attribute will return the “Facturas” value that is the value by default.\\
\\
**mapfld:** It indicates which field of the external collection is the one used to link it with this property.\\
In the previous example, the IDTIPO property is linked to the “TiposUsuario” collection through the ID field. \\
\\
The properties containing this pair are usually link properties only, so they usually invisible in the edition (visible=”0”). \\
See more in: [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:2.-lupa-combo:start]]
==== linkedto="field" | linkedfield="field" ====
\\
These attributes indicate the property has been get through a link with an external collection. It is defined for those properties starting with the MAP_ prefix to indicate that they come from a link among tables. \\
\\
The **linkedto** value must be the field used to link it with the external collection, as indicated in the following example:\\
\\
This attribute is used in combination with the **linkedfield** attribute to indicate the link with another collection. In this case it is indicated that the **MAP_TIPOUSER** field is linked through the **IDTIPO** field with the “TiposUsuario” collection. The field which correspond to the **MAP_TIPOUSER** property is the one of the **ETIQUETA** property of the destination collection. The program doesn´t use this relation to read the data, since this is done by the SQL sentence, but to make cascade update, as described further on.\\
\\
Another use of the //linkedto// attribute is to define the property name to which a property of type "bitmapped" is linked, as described below. \\
\\
The**[[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:2.-lupa-combo:start|Relaciones entre Colecciones]]** sections have a detailed explanation about how to build links using the attributes explained above. \\
\\
==== newline="true/false" | lmargin="true/false" ====
\\
With the newline attribute we indicate if we want one field (property) to be next to another one, for that, this attribute must have a value of false, this attribute must always be assigned to the field that we want to be shown next to the other one. With lmargin we will indicate the space between the two fields.
\\
Example:
We will see how the 2nd Surname field is after the 1st surname.
1er APELLIDO2do APELLIDO
If we remove these attributes, the second surname field will be shown below and not next.
==== updates="field" ====
\\
This attribute is optional and indicates the app that any change occurred in this property will cause a similar change in the property which name is indicated. This is used to make cascade changes, as for instance, updating the value of a field named **DESCRIPCION** in a document detail by getting it from the **DESCRIPCION** field of the linked product collection.\\
Following we show this case in particular:
Example:
==== tooltip="Field description" ====
\\
This attribute has a text to be assigned to the control tooltip shown on screen when this field is being edited. \\
The tooltips can be very usefuls to explain briefly the goal of this fiels or its function. \\
The displaying mechanism of tooltips used is Windows itself. \\
The following example shows a tooltip use case:\\
==== showinline="true/false" ====
\\
It shows the collection linked by the mapcol attribute as a drop-down menu.
==== lines="value" ====
\\
It indicates the number of lines the prop will take.
==== bgcolor="value" ====
\\
Value of the background color in RGB format. Can be expressed in decimal, hexadecimal (#), or binary (B).
==== forecolor="value" ====
\\
Value of the text color in RGB format. It can be expressed in decimal, hexadecimal (#), or binary (B).
==== xlat="coleccion" | targetfield="campo" | create="true\false" | cmpfield="campo" | cmpvalue="valor" ====
\\
===xlat===
\\
It indicates that this property is translated from an object coming from one of the collections contained into the object. \\
For instance, you can have a document heading containing several details and the amount of units of the first detail can be shown as a property of the document itself.
\\
The data layer will be in charge to look for this value in the corresponding detail when this property is read, and, in case it changes value, it will be in charge to take it to its corresponding property in the object contained. \\
The effect that the use of **xlat** has and its associated attributes is the one to carry out a field that is vertical (or in a row) to an horizontal position in the form of a column.
\\
For this reason, we call this mechanism “**horizontalization**” of fields.\\
\\
===targetfield===
\\
Used with //xlat//. It defines the contained object field which was "translated" inside of this field.\\
===create===
\\
Usec with **xlat**. \\
When this attribute value is **true** it is being indicated to the data layer that in case of assigning value to the translated property, if the corresponding object in the contained collection does not exist, it must be created. \\
Thus, in the example we put above, if the amount "horizontalized" was assigned value and the detail did not exist, the data layer will create it and give it the corresponding value with no need to program anything.\\
===cmpfield===
\\
Used with //xlat//. This field is which the data layer will use to look for the object from which it will read and towards which you will write the value of this property when necessary. The mechanism consists in searching in the collection indicated by the // xlat // attribute that object whose field of name // cmpfield // has the value specified by the // cmpvalue // attribute . In case you want to use the first available object in the contained collection, both this attribute and the following must be // self //.
\\
===cmpvalue===
\\
Used with **xlat**. It has the value which will be searched inside the contents collection indicated by **xlat**. \\
In case you want to use the first object available, this attribute and the previous one must be **self**.\\
\\
**Example**:
\\
EFECTIVO
\\
\\
In this example a property named **MAP_EFECTIVO** has been defined. The object has a content collection named “CajaFisica” which will have several objects, one for each type of payment method used.\\
\\
If the application requests the value of this field, the data layer will search in that collection for an object whose type is // 0 // and the value will return its
** EFECTIVO** field. \\
\\
Likewise, if the property ** MAP_EFECTIVO ** is assigned value, the data layer will search for the object whose TIPO field is // 0 //, if it does not find it, it will create it, and will assign it the value it has just receive the property to the ** EFECTIVO** field .\\
\\
This avoids the need to go through the collection of payment methods by program, at the same time allowing to show each of the amounts as a column (for instance, for a list) without having to denormalize the table.
==== disableedit="condition" ====
\\
A condition is placed. If this condition is met, it does not allow editing, if on the contrary, it is false, it is possible to edit.
\\
==== disablevisible="condition" ====
\\
If the condition is met, all the prop belonging to that group will be disabled.
==== formula="ext.[NOMBREFORMULA]" ====
\\
With this attribute we specify the name of the formule we want to execute to find any valy by executing a sql.
\\