Responsive Media Controls

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