DecSoft App Builder

App dialog

The DecSoft App Builder apps can have any number of app dialogs. You can show an specific dialog by using the app.showDialog() method, and, can hide a showing dialog by using the app.hideDialog() method or the app.hideDialogs() method.

An app dialog is intended to be the container of one or more app controls, in the same way than the app views can be used. The difference is that the app dialog is show over the current app view. Look below an animated GIF image with the Dialog sample app running:

To add a new dialog into the app you can use the provided IDE main toolbar button, IDE main menu element and also the contextual menu (right click) of the IDE dialogs list, as you can see in the belo animated GIF image:

App dialog CSS rules

In addition to the Classes property, that you can use to establish one or more CSS classes to be applied to the app dialog, you can also set custom CSS rules for the app dialog by using the IDE controls style inspector, and, even include any number of CSS stylesheets in the app by using the app files manager.

If you want to use CSS stylesheets, you need to know how to refer to the app view, so take a look at the Runtime selectors help topic.

App dialog properties

All the app dialog provides to you the below properties, ready to be used:

App dialog events

All the app dialogs provides to you the below events, ready to be used:

App dialog properties

App dialog Name property

Runtime. String variable. The app dialog Name property stores the name of the view as you set it at designtime.

App dialog Classes property

Runtime. String variable. The app dialog Classes property stores one or more additionals CSS classes (space separated) to be applied to the app dialog HTML container.

App dialog DialogSize property

Runtime. String variable. The app dialog Size property determines the size of the app dialog, depending on the established Bootstrap CSS framework breakpoints. You can set this variable to one of the available "app.size.*" variables.

App dialog events

App dialog Show event

The app dialog Show event handler is fired everytime than the app dialog is show to the user. At this time all the controls HTML markup (DOM) are ready to be used if needed.

App dialog Click event

The app dialog Click event handler is fired when the user click or tap into the app dialog. See also the available events variables.

App dialog DblClick event

The app dialog DblClick (Double Click) event handler is fired when the user double click or double tap into the app dialog. See also the available events variables.

App SwipeUp event

The SwipeUp event handler is fired when the user made the swipe up gesture with the mouse (browsers) or with the finger (devices) in the app dialog. See also the available events variables.

App SwipeRight event

The SwipeRight event handler is fired when the user made the swipe right gesture with the mouse (browsers) or with the finger (devices) in the app dialog. See also the available events variables.

App SwipeDown event

The SwipeDown event handler is fired when the user made the swipe down gesture with the mouse (browsers) or with the finger (devices) in the app dialog. See also the available events variables.

App SwipeLeft event

The SwipeLeft event handler is fired when the user made the swipe left gesture with the mouse (browsers) or with the finger (devices) in the app dialog. See also the available events variables.

App dialog MouseUp event

The app dialog MouseUp event handler is fired when the user up the mouse into the app dialog. See also the available events variables.

App dialog MouseDown event

The app dialog MouseDown event handler is fired when the user down the mouse into the app dialog. See also the available events variables.

App dialog MouseMove event

The app dialog MouseMove event handler is fired when the user move the mouse into the app dialog. See also the available events variables.

App dialog ContextMenu event

The app dialog ContextMenu event handler is fired when the browser must shown the context menu of the the app, which occur when the user click with the right mouse button into the app dialog. See also the available events variables.

App events variables

The below Javascript variables are available in all the referred App events handlers:

Name Type Description
event Mixed This variable is received in almost all app events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more.
self Object Stores the app object. This is a shortcut to the "view" variable, and it's available since we are talking about specific app dialog events.
view Object

Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName".

views Object Stores all the loaded app dialog. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls.
frames Object Stores all the app frames. You can use this variable to access to all the app frames and their controls.
dialogs Object Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls.
app Object Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods.