DecSoft App Builder - Help

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:

Name property
Classes property
InAnimation property
OutAnimation property
TransitionName property
TransitionMode property

App view events

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

Show event
Hide event
Created event
Click event
DblClick event
SwipeRight event
SwipeLeft event
MouseUp event
MouseDown event
MouseMove event
KeyUp event
KeyDown event
ContextMenu event
Events variables

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.


// Show the view1 name
alert(views.view1.name);

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.


// Set some additional classes for the app view
views.view1.classes = 'one-class another-class';

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.


// Set the animation "bounceIn" for the app view
views.view1.inAnimation = app.inAnimation.bounceIn;

// All the available constant values:

app.inAnimation.bounceIn
app.inAnimation.bounceInDown
app.inAnimation.bounceInLeft
app.inAnimation.bounceInRight
app.inAnimation.bounceInUp
app.inAnimation.fadeIn
app.inAnimation.fadeInDown
app.inAnimation.fadeInDownBig
app.inAnimation.fadeInLeft
app.inAnimation.fadeInLeftBig
app.inAnimation.fadeInRight
app.inAnimation.fadeInRightBig
app.inAnimation.fadeInUp
app.inAnimation.fadeInUpBig
app.inAnimation.fadeInTopLeft
app.inAnimation.fadeInTopRight
app.inAnimation.fadeInBottomLeft
app.inAnimation.fadeInBottomRight
app.inAnimation.flipInX
app.inAnimation.flipInY
app.inAnimation.lightSpeedIn
app.inAnimation.lightSpeedInRight
app.inAnimation.lightSpeedInLeft
app.inAnimation.rollIn
app.inAnimation.rotateIn
app.inAnimation.rotateInDownLeft
app.inAnimation.rotateInDownRight
app.inAnimation.rotateInUpLeft
app.inAnimation.rotateInUpRight
app.inAnimation.zoomIn
app.inAnimation.zoomInDown
app.inAnimation.zoomInLeft
app.inAnimation.zoomInRight
app.inAnimation.zoomInUp
app.inAnimation.bounce
app.inAnimation.flash
app.inAnimation.pulse
app.inAnimation.rubberBand
app.inAnimation.shake
app.inAnimation.swing
app.inAnimation.tada
app.inAnimation.wobble
app.inAnimation.jello

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.

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.


// Set the animation "bounceOut" for the app view
views.view1.outAnimation = app.inAnimation.bounceOut;

// All the available constant values:

app.outAnimation.bounceOut
app.outAnimation.bounceOutDown
app.outAnimation.bounceOutLeft
app.outAnimation.bounceOutRight
app.outAnimation.bounceOutUp
app.outAnimation.fadeOut
app.outAnimation.fadeOutDown
app.outAnimation.fadeOutDownBig
app.outAnimation.fadeOutLeft
app.outAnimation.fadeOutLeftBig
app.outAnimation.fadeOutRight
app.outAnimation.fadeOutRightBig
app.outAnimation.fadeOutUp
app.outAnimation.fadeOutUpBig
app.outAnimation.fadeOutTopLeft
app.outAnimation.fadeOutTopRight
app.outAnimation.fadeOutBottomRight
app.outAnimation.fadeOutBottomLeft
app.outAnimation.flipOutX
app.outAnimation.flipOutY
app.outAnimation.lightSpeedOut
app.outAnimation.lightSpeedOutRight
app.outAnimation.lightSpeedOutLeft
app.outAnimation.rollOut
app.outAnimation.rotateOut
app.outAnimation.rotateOutDownLeft
app.outAnimation.rotateOutDownRight
app.outAnimation.rotateOutUpLeft
app.outAnimation.rotateOutUpRight
app.outAnimation.slideOutUp
app.outAnimation.slideOutDown
app.outAnimation.slideOutLeft
app.outAnimation.slideOutRight
app.outAnimation.zoomOut
app.outAnimation.zoomOutDown
app.outAnimation.zoomOutLeft
app.outAnimation.zoomOutRight
app.outAnimation.zoomOutUp
app.outAnimation.backOutDown
app.outAnimation.backOutLeft
app.outAnimation.backOutRight
app.outAnimation.backOutUp
app.outAnimation.bounce
app.outAnimation.flash
app.outAnimation.pulse
app.outAnimation.rubberBand
app.outAnimation.shake
app.outAnimation.swing
app.outAnimation.tada
app.outAnimation.wobble
app.outAnimation.jello
app.outAnimation.hinge

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:

tn-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
tn-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
tn-enter-to: Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.
tn-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
tn-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
tn-leave-to: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.

Note that the "tn" 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 Mozilla 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:


/* "sideleft" transition */

.slideleft-leave-active,
.slideleft-enter-active {
  transition: 2s;
}
.slideleft-enter {
  transform: translate(-100%, 0);
}
.slideleft-leave-to {
  transform: translate(100%, 0);
}

/* "sideright" transition */

.slideright-leave-active,
.slideright-enter-active {
  transition: 1s;
}
.slideright-enter {
  transform: translate(100%, 0);
}
.slideright-leave-to {
  transform: translate(-100%, 0);
}

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 Hide event

The app view Hide event handler is fired everytime than the app view is hidden to the user, for example, when goto another app view.

App view Created event

The app view Created event is fired when the app view internal component is created. You will be tempted to use this event instead of the app view Show event, but don't do it! The app view 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 view) established in the app Instanced event. See the app Instanced event for more information about this.

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 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 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.