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:
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.
All the app dialog provides to you the below properties, ready to be used:
All the app dialogs provides to you the below events, ready to be used:
Runtime. String variable. The app dialog Name property stores the name of the view as you set it at designtime.
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.
Runtime. String variable. The app dialog Size property determines the size of the app dialog. You can set this variable to one of the available "app.size.*" variables.
Runtime. String variable. The app dialog Fullscreen property determines the size of the app dialog and when. You can set this variable to one of the available "app.dialogFullscreen.*" variables.
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.
The app dialog Created event is fired when the dialog internal component is created. You will be tempted to use this event instead of the app dialog Show event, but don't do it! The app dialog Created event is intended only for advanced users who want, for example, to prepare some component (to be used inside an HTML control, for example, placed in the app dialog) established in the app Created event. See the app Created event for more information about this.
The app dialog Created event is fired when the app dialog internal component is created. You will be tempted to use this event instead of the app dialog Show event, but don't do it! The app dialog Created event is intended only for advanced users who want, for example, to prepare some JavaScript object for a component (to be used inside an HTML control, for example, placed in the app dialog) established in the app Instanced event. See the app Instanced event for more information about this.
The app dialog Click event handler is fired when the user click or tap into the app dialog. See also the available events variables.
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.
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.
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.
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.
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.
The app dialog MouseUp event handler is fired when the user up the mouse into the app dialog. See also the available events variables.
The app dialog MouseDown event handler is fired when the user down the mouse into the app dialog. See also the available events variables.
The app dialog MouseMove event handler is fired when the user move the mouse into the app dialog. See also the available events variables.
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.
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. |