Responsive Media Controls

#### Search Results

Search

# Responsive Media Controls

- BMOBILE:VIDEO

- BMOBILE:MEDIAUPLOAD, BMOBILE:MEDIAPREVIEW, BMOBILE:MEDIAPREVIEWBUTTON and BMOBILE:MEDIAUPLOADBUTTON

- BMOBILE:IMAGEFILEUPLOAD, BMOBILE:IMAGEPREVIEW, BMOBILE:IMAGEPREVIEWBUTTON and BMOBILE:IMAGEUPLOADBUTTON

## BMOBILE:VIDEO

The `BMOBILE:VIDEO` control supports the integration of a video, a web cam or a camera into a responsive container.

#### Example

Several examples and corresponding description are provided in the Natural for Ajax demos.

#### Properties for BMOBILE:VIDEO

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
videourl | URL of the video file | Optional |
videotype | Type of the video format. Default is video/mp4. | Optional | video/mp4 video/ogg video/webm
videotypeprop | Name of the adapter parameter that dynamically defines the video format at runtime. Default value of the video format is video/mp4. | Optional |
videocontrols | Set this property to true if you want the controls for starting, pausing, resuming...of the video to be shown. | Optional | true false
autoplay | If set to true the video automatically starts playing when the page is loaded. | Optional | true false
autoplayprop | Name of the adapter parameter that dynamically defines if a video automatically starts playing. Default is FALSE. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
playsinline | Some mobile browsers enter fullscreen mode for videos. Set this to TRUE to not enter fullscreen mode. This is not supported in all browsers. | Optional | true false
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
Natural
njx:natname | If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2. | Optional |
njx:natstringtype | If the control shall be bound to a Natural system variable of string format with the attribute njx:natsysvar, this attribute indicates the format of the string, A (code page) or U (Unicode). The default is A. | Optional |
njx:natcomment | The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate for a generated statusprop variable to which field the statusprop belongs. | Optional |

## BMOBILE:MEDIAUPLOAD, BMOBILE:MEDIAPREVIEW, BMOBILE:MEDIAPREVIEWBUTTON and BMOBILE:MEDIAUPLOADBUTTON

These controls implement the upload of a picture or image taken from a `BMOBILE:VIDEO` control (video, web cam, camera). The picture or image is uploaded as a BLOB via the `XCIOBJECT` control.

When dragging the `BMOBILE:MEDIAUPLOAD` control from the palette to your page layout, several controls are arranged as sub-controls under the `BMOBILE:MEDIAUPLOAD.` You can arrange the controls differently, change the text for panes and buttons, replace the panes by other controls and style them according to your needs. You have to keep the following controls as sub-controls:

- `BMOBILE:MEDIAPREVIEWBUTTON`

- `BMOBILE:MEDIAUPLOADBUTTON`

- `BMOBILE:MEDIAPREVIEW`

- `BMOBILE:VIDEO`

You also need to add an `NJX:OBJECT` control to your page. The Adapter Interface and Built-in Events are described below for the following layout definition:

    <bmobile:mediaupload valueprop="mediaupload" >

#### Adapter Interface

    1 MEDIAUPLOAD
      2 CONTENTID (A) DYNAMIC
    1 XCIOBJECTS (1:*)
      2 CONTENT (B) DYNAMIC
      2 CONTENTID (A) DYNAMIC
      2 CONTENTTYPE (A) DYNAMIC

The `MEDIAUPLOAD.CONTENTID` field contains the content ID of the uploaded image in the `XCIOBJECTS` data structure

#### Built-in Events

For the example definition above, the event `mediaupload.onUpload` is triggered when the upload button is pressed.

#### Example

Several examples and corresponding description are provided in the Natural for Ajax demos.

#### Properties for BMOBILE:MEDIAUPLOAD

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
mediatype | Default is camera. If you want the picture to be taken from a video file instead of the camera device, set video. | Optional | video camera
Natural
njx:natname | If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2. | Optional |
njx:natstringtype | If the control shall be bound to a Natural system variable of string format with the attribute njx:natsysvar, this attribute indicates the format of the string, A (code page) or U (Unicode). The default is A. | Optional |
njx:natcomment | The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate for a generated statusprop variable to which field the statusprop belongs. | Optional |

#### Properties for BMOBILE:MEDIAPREVIEW

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
previewstyle | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
previewstyleclasses | CSS style classes separated by a blank. | Optional | col-auto col col-* col-sm-* col-md-* col-lg-* col-xl-* offset-* offset-sm-* offset-md-* offset-lg-* offset-xl-* mx-auto btn-group btn-group-vertical
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3

#### Properties for BMOBILE:MEDIAPREVIEWBUTTON

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
type | The type of the button like reset or submit. | Optional | button submit file reset
renderaslink | If set to "TRUE" the control is rendered as a link. | Optional | true false
title | Text that is shown as tooltip for the control. Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal. | Optional |
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-sm btn-lg btn-icon-sm btn-icon-lg btn-responsive btn-outline-primary btn-outline-info btn-outline-success btn-outline-warning btn-outline-danger close mx-auto
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
titlestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
Binding
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
titleprop | Name of the adapter parameter that dynamically defines the title of the control. The title is displayed as tool tip when ther user moves the mouse onto the control. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

#### Properties for BMOBILE:MEDIAUPLOADBUTTON

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
type | The type of the button like reset or submit. | Optional | button submit file reset
renderaslink | If set to "TRUE" the control is rendered as a link. | Optional | true false
title | Text that is shown as tooltip for the control. Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal. | Optional |
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-sm btn-lg btn-icon-sm btn-icon-lg btn-responsive btn-outline-primary btn-outline-info btn-outline-success btn-outline-warning btn-outline-danger close mx-auto
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
titlestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
Binding
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
titleprop | Name of the adapter parameter that dynamically defines the title of the control. The title is displayed as tool tip when ther user moves the mouse onto the control. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

## BMOBILE:IMAGEFILEUPLOAD, BMOBILE:IMAGEPREVIEW, BMOBILE:IMAGEPREVIEWBUTTON and BMOBILE:IMAGEUPLOADBUTTON

When dragging the `BMOBILE:IMAGEFILEUPLOAD` control from the palette to your page layout, several controls are arranged as sub-controls under the `BMOBILE:IMAGEFILEUPLOAD` control. You can arrange the controls differently, change the text, replace the container controls by other containers and style them according to your needs. You must keep the following controls as sub-controls:

- `BMOBILE:IMAGEPREVIEWBUTTON`

- `BMOBILE:IMAGEUPLOADBUTTON`

- `BMOBILE:IMAGEPREVIEW`

You also need to add an `NJX:OBJECT` control to your page. When pressing the Upload button, an event is triggered in the Natural program.

The Adapter Interface and Built-in Events are described below for the following layout definition:

    <bmobile:imagefileupload valueprop="imagefileupload" fileinfoprop="myfileinfo" >

#### Adapter Interface

    DEFINE DATA LOCAL
    1 IMAGEFILEUPLOAD
      2 CONTENTID (A) DYNAMIC
    1 MYFILEINFO (A) DYNAMIC
    1 XCIOBJECTS (1:*)
      2 CONTENT (B) DYNAMIC
      2 CONTENTID (A) DYNAMIC
      2 CONTENTTYPE (A) DYNAMIC

The `IMAGEFILEUPLOAD.CONTENTID` field contains the content ID of the uploaded image in the `XCIOBJECTS` data structure. The client side filename is used as content ID. In this example, a `fileinfoprop` property is defined. The corresponding `IMAGEFILEUPLOAD.MYFILEINFO` field will contain information such as the file name and the file size.

The maximum allowed size for upload depends on the configuration of your application server. In a Tomcat installation per default only files less than 2 MB are allowed for upload. You can change this limit in your application server. If you want to upload big files to Natural you also need to increase the Natural configuration parameter Buffer Sizes/Work Area Size correspondingly.

#### Built-in Events

For the example definition above, the event `imagefileupload.onUpload` is triggered when the upload button is pressed.

#### Example

Several examples and corresponding description are provided in the Natural for Ajax demos.

#### Properties for BMOBILE:IMAGEFILEUPLOAD

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
fileinfoprop | Name of the adapter parameter that contains information of the file like name and size. | Optional |
Natural
njx:natname | If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2. | Optional |
njx:natstringtype | If the control shall be bound to a Natural system variable of string format with the attribute njx:natsysvar, this attribute indicates the format of the string, A (code page) or U (Unicode). The default is A. | Optional |
njx:natcomment | The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate for a generated statusprop variable to which field the statusprop belongs. | Optional |

#### Properties for BMOBILE:IMAGEPREVIEW

Basic
previewstyle | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
previewstyleclasses | CSS style classes separated by a blank. | Optional | col-auto col col-* col-sm-* col-md-* col-lg-* col-xl-* offset-* offset-sm-* offset-md-* offset-lg-* offset-xl-* mx-auto btn-group btn-group-vertical
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |

#### Properties for BMOBILE:IMAGEPREVIEWBUTTON

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
type | The type of the button like reset or submit. | Optional | button submit file reset
renderaslink | If set to "TRUE" the control is rendered as a link. | Optional | true false
title | Text that is shown as tooltip for the control. Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal. | Optional |
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-sm btn-lg btn-icon-sm btn-icon-lg btn-responsive btn-outline-primary btn-outline-info btn-outline-success btn-outline-warning btn-outline-danger close mx-auto
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
titlestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
Binding
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
titleprop | Name of the adapter parameter that dynamically defines the title of the control. The title is displayed as tool tip when ther user moves the mouse onto the control. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

#### Properties for BMOBILE:IMAGEUPLOADBUTTON

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
type | The type of the button like reset or submit. | Optional | button submit file reset
renderaslink | If set to "TRUE" the control is rendered as a link. | Optional | true false
title | Text that is shown as tooltip for the control. Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal. | Optional |
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-sm btn-lg btn-icon-sm btn-icon-lg btn-responsive btn-outline-primary btn-outline-info btn-outline-success btn-outline-warning btn-outline-danger close mx-auto
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
titlestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
Binding
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
titleprop | Name of the adapter parameter that dynamically defines the title of the control. The title is displayed as tool tip when ther user moves the mouse onto the control. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

### On this page

- BMOBILE:VIDEO
- BMOBILE:MEDIAUPLOAD, BMOBILE:MEDIAPREVIEW, BMOBILE:MEDIAPREVIEWBUTTON and BMOBILE:MEDIAUPLOADBUTTON
- BMOBILE:IMAGEFILEUPLOAD, BMOBILE:IMAGEPREVIEW, BMOBILE:IMAGEPREVIEWBUTTON and BMOBILE:IMAGEUPLOADBUTTON