DecSoft App Builder

App view

The DecSoft App Builder apps can have any number of app views. You can show an specific view by using the app.showView() method or the app.replaceView() method.

An app view is intended to be the container of one or more app controls, so you can use one view to say welcome to the user, another app view to show the app options, another one to show the app help, etc.

To add a new view 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 views list, as you can see in the belo animated GIF image:

App view 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 view, you can also set custom CSS rules for the app view 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 view properties

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

App view events

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

App view properties

App view Name property

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

App view Classes property

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

App view InAnimation property

Runtime. String variable. The InAnimation property of the app views can be set to one of the available "out of the box" animations, in order to apply certain animation when the app view is show to the user.

This property is empty by default, means no animation is performed. You can set this property at both designtime and runtime. In this last case you can set this property with one of the available "app.inAnimation.*" constants values.

In addition to the "out of the box" available animations, you can prepare your own custom transitions by using the TransitionName property and the TransitionMode property view properties.

App view OutAnimation property

Runtime. String variable. The OutAnimation property of the app views can be set to one of the available "out of the box" animations, in order to apply certain animation when the app view is hide to show another one to the user.

This property is empty by default, means no animation is performed. You can set this property at both designtime and runtime. In this last case you can set this property with one of the available "app.outAnimation.*" constants values.

In addition to the "out of the box" available animations, you can prepare your own custom transitions by using the TransitionName property and the TransitionMode property view properties.

App view TransitionName property

Runtime. String variable. You can use this app view property to set the name of a custom CSS transition to be used, instead of the "out of the box" available animations that you can set by simply use the InAnimation property and the OutAnimation property.

What you must set in the TransitionName app view property is the name of the transition. You can place the CSS rules for thet transition in the app Custom style option or in a CSS stylesheet file that you add from the app Files manager.

Basically, the transitions are possible by certain CSS classes that are automatically added to the app view in different transition states. There are six classes applied for enter/leave transitions:

Note that the "nt" prefix that you can see in the above CSS classes, must be the name of the transition, for example, a "fade" transition name must prepare the classes "fade-enter", "fade-enter-active", and so on.

You can learn more about the transitions in the VueJS framework documentation

Below you can see the CSS rules for some samples transitions. What you must set in this app view property are "fade", "slideleft" or "slideright", in order to apply the proper transition:

There is a Transitions sample app included with the installation of DecSoft App Builder. Take a look to see the transitions in action!

App view TransitionMode property

Runtime. String variable. This app view property is an empty string by default, means the previous app view and the next app view transitions are applied at the same time. This can be enough, however, we can establish the order of the transitions by this app view property.

This app property can be set to the below values:

Name Type Description
String Set this property to an empty string (by default) to get the previous app view and the next app view transitions applied at the same time.
in-out String Firstly perform the previous app view transition, and, when complete, perform the next app view transition.
out-in String Firstly perform the next app view transition, and, when complete, perform the previous app view transition.

App view events

App view Show event

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

App view Click event

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

App view DblClick event

The app view DblClick (Double Click) event handler is fired when the user double click or double tap into the app view. 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 view. 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 view. 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 view. 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 view. See also the available events variables.

App view MouseUp event

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

App view MouseDown event

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

App view MouseMove event

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

App view ContextMenu event

The app view 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 view. 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 view 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 views. 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.