DecSoft App Builder

Runtime selectors

Every app views, app dialog and app frames, every controls inside them, have their own identifiers and classes so we can apply certain customized CSS style if we wanted, as well to refer to it in some piece of JavaScript code, again, if we needed. Here in this help topic we will try to explain how these identifiers and classes are so you can use them in case you need it.

Index of contents

App views and app dialogs
App frames and Frames controls
App controls
App controls inside app frames

App views and app dialogs

All the app views and app dialogs are inside a "div" HTML element which will have the "app-view" and "app-dialog" classes, respectively. Additionally, all the app views and app dialogs have their own unique identifier, which match with the app views and app dialogs names. Take a look at the below code examples:


// Attach an event to all the app views

$('.app-view').on('click', function () {
  // Your click event handler code
});

// Attach an event to all the app dialogs

$('.app-dialog').on('click', function () {
  // Your click event handler code
});

// Attach an event to the named "myCuteView" app view

$('#myCuteView').on('click', function () {
  // Your click event handler code
});

// Attach an event to the named "myCuteDialog" app dialog

$('#myCuteDialog').on('click', function () {
  // Your click event handler code
});


/* Apply some CSS style to all app views */

.app-view {
  background-color: red;
}

/* Apply some CSS style to all app dialogs */

.app-dialog {
  background-color: red;
}

/* Apply some CSS style to the named "myCuteView" app view */

#myCuteView {
  background-color: red;
}

/* Apply some CSS style to the named "myCuteDialog" app dialog */

#myCuteDialog {
  background-color: red;
}

App frames and Frame controls

The case of the app frames is a bit different, but, not complicated. The app frames itself do not have an identifier, since they are always used inside a Frame control. Even the same appapp frame can more than one time be inside a the same app view or app dialog, but, they are inside their unique Frame controls. So these controls have their own identifier, not the app frame itself. However, these controls have also a class "app-frame". So take a look at the below code examples:


// Attach an event to all the app Frame controls

$('.app-frame').on('click', function (event) {
  // Your click event handler code
});

// Attach an event to the named "myCuteFrameControl" Frame control

$('.myCuteFrameControl').on('click', function (event) {
  // Your click event handler code
});


/* Apply some CSS style to all the Frames controls */

.app-frame {
  background-color: red;
}

/* Apply some CSS style to the named "myCuteFrameControl" control */

#myCuteFrameControl {
  background-color: red;
}

App controls

As we referred above, all the controls have their own identifiers, which match with their names. Take in consideration, however, that a "button1" control can exist in more than one app view, app dialog or app view. So, just take a look at the below code examples:


// Attach an event to the "button1" control (can be one or plenty of them!)

$('#button1').on('click', function (event) {
  // Your click event handler code
});

// Attach an event to the "button1" control inside "myCuteView" app view

$('#myCuteView #button1').on('click', function (event) {
  // Your click event handler code
});

// Attach an event to the "button1" control inside "myCuteFrameControl"

$('#myCuteFrameControl #button1').on('click', function (event) {
  // Your click event handler code
});

// Attach an event to the "button1" control inside "myCuteFrameControl" inside "myCuteView" app view

$('#myCuteView #myCuteFrameControl #button1').on('click', function (event) {
  // Your click event handler code
});


/* Apply some CSS style to the named "button1" control (can be plenty of them!) */

#button1 {
  background-color: red;
}

/* Apply some CSS style to the named "button1" control inside "myCuteView" app view */

#myCuteView #button1 {
  background-color: red;
}

/* Apply some CSS style to the named "button1" control inside "myCuteFrameControl" inside "myCuteView" app view */

#myCuteView #myCuteFrameControl #button1 {
  background-color: red;
}

App controls inside app frames

The app controls inside app frames do not have usable identifiers: they have, of course, but, used only internally by the app in order to positioned it, etc. However, of course it's possible to refer to this controls too, but using classes instead of identifiers. These classes are composed by the name of the app frames and the name of the controls in this way: ".[frame name]-[control name]". Just take a look at the below code examples:


// Attach an event to the "button1" control inside "myCuteFrame" app frame

$('.myCuteFrame-button1').on('click', function (event) {
  // Your click event handler code
});

// Attach an event to the "button1" control inside "myCuteFrame" app frame inside "myCuteFrameControl"

$('#myCuteFrameControl .myCuteFrame-button1').on('click', function (event) {
  // Your click event handler code
});

// Attach an event to the "button1" control inside "myCuteFrame" app frame inside "myCuteFrameControl" inside "myCuteView" app view

$('#myCuteView #myCuteFrameControl .myCuteFrame-button1').on('click', function (event) {
  // Your click event handler code
});


/* Apply some CSS style to the named "button1" control inside "myCuteFrame" app frame */

.myCuteFrame-button1 {
  background-color: red;
}

/* Apply some CSS style to the "button1" control inside "myCuteFrame" app frame inside "myCuteFrameControl"  */

#myCuteFrameControl .myCuteFrame-button1 {
  background-color: red;
}

/* Apply some CSS style to the "button1" control inside "myCuteFrame" app frame inside "myCuteFrameControl"  */

#myCuteView #myCuteFrameControl .myCuteFrame-button1 {
  background-color: red;
}

In addition to the above conventions, the IDE editor and while debugging apps you will be helped. For example, the IDE editor completions feature will show to you all the existing app views, dialogs, frames, controls, etc. On the other hand, you can use the console developer of the debugger to inspect the app code, so you will also see there all the app identifiers.