DecSoft Support - Dynamically creating objects and adding events to it

Dynamically creating objects and adding events to it

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Take a look at some frequently asked questions about us and our products!

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

John Clarke

AppBuilder has a number of visual and non-visual components. I am interested in dynamically creating these components in my code and adding event handlers to them. For example, how can I dynamically create an instance of the HTTP component in my code and add events for done and fail to it?

DecSoft

Hola John,

Maybe we can specify a bit more what is needed. Certainly, it's possible to create AB controls at runtime (or any other kind of control, just by providing the right HTML markup and Javascript code), however, I am not sure if this apply to non visual controls like the HTTP control. But the point, in this case, is that we no need to use the HTTP control, that is, we can use the jQuery "post", "get", or even the "ajax" methods, in order to perform HTTP calls and get ready for the "done" and "fail" events.

The creation of AB controls in runtime is not documented, because in fact we rarely need something like that, and, on the other hand, we can create the controls by using the right HTML markup and Javascript code. It's possible to do it, but, maybe not really needed. You can get what is needed in the app's views HTML (once compiled) and the "app.js" objects that every control has. As a sample, you can place the bellow HTML markup in an HTML control in an app's view:


<dab-push-button v-bind="app.store.mybutton"></dab-push-button>

And then you can place the bellow Javascript code, which defines the "dab-push-button":


app.setVar('mybutton', {
 name: "button1",
 classes: "",
 size: "sm",
 title: "",
 tabIndex: 0,
 text: "button1",
 kind: "primary",
 outline: false,
 active: false,
 leftIcon: "",
 rightIcon: "",
 leftBadge: "",
 leftBadgeKind: "light",
 leftBadgePilled: false,
 rightBadge: "",
 rightBadgeKind: "light",
 rightBadgePilled: false,
 hidden: false,
 disabled: false,
 event: null,
 blurHandler: function () {},
 focusHandler: function () {},
 clickHandler: function () {
   alert('You clicked mybutton!');
 },
 dblclickHandler: function () {},
 mouseupHandler: function () {},
 mousedownHandler: function () {},
 mousemoveHandler: function () {},
 mouseenterHandler: function () {},
 mouseleaveHandler: function () {},
 contextmenuHandler: function () {}
});

However, it's also possible to place a button in this way, by providing the right HTML markup and Boostrap CSS, which as you know is the framework used in DecSoft App Builder. Again, you can place the below HTML markup inside an HTML control in an app's view:


 <button id="mybutton" class="btn btn-sm btn-primary">Press here!</button>

And then you can place the below Javascript code in the app's view Show event:


$('#mybutton').unbind('click').bind('click', function () {
  alert('You clicked mybutton!');
});

Note the "unbind().bind()" use: this is to avoid to attach twice the "click" event of the button, for example, if we goto another app's view and then go back to the view which attach the event. If we don't "unbind" the event, then the "click" event can be executed twice, which probably is not what we expected. We can also use here a possible global variable in order to avoid a double event attaching.

If this don't answer your, please, John, don't hesitate to post here any further questions.

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.