Posts by DecSoft

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

Show threads by DecSoft

3352 posts found, page 38 of 224

DecSoft (In thread: Problem with Console.log and Browser Plugins)

Hello again, John,

More news... In order to show the console for the WebExtension, I do it from the right click menu of the "installed extensions" page... this is apparently wrong... or at least in Chrome don't work as in Firefox. Finally I can see the console message also in Chrome, but, launching the console from the WebExtension popup... you must right click in the WebExtension popup and select "Inspect"... then you must see the console message, at least from the app's view Show event, which is what I try for the moment.

DecSoft (In thread: Problem with Console.log and Browser Plugins)

Hello John,

Here some additional information... I am thinking in the browser's console to see the messages placed from the app's views, for example, from the app's view's Show event... I am wrong, John... the message appear in the console, but, in the console which is made specifically for the WebExtension.

Trying here the "WebExtension" sample app and place a "console.log" in the app's view Show event, I can see the message here in Firefox, but, not in Chrome (?). Again, we are talking about the console specifically for the WebExtension: I need to right click the installed WebExtension in Firefox and then select the menu item "Inspect".

Doing that I can see the message in the Firefox console, but not in the Chrome console... and right now I can't imagine why Firefox can show the message but Chrome can't show it...

DecSoft (In thread: Problem with Console.log and Browser Plugins)

Hello John,

But you are talking now about the new app? Are you try the new app in various browsers in addition to the AB debugger?

DecSoft (In thread: Problem with Console.log and Browser Plugins)

Hello John,

Sorry... I did not read the title of the post... It's clear that you refer to a WebExtension app... Anyway, try what I say in my previous post, because, it's quite rare and I think that maybe the browser can be the "problem"... (maybe I am wrong...)...

DecSoft (In thread: Problem with Console.log and Browser Plugins)

Hello John,

That's quite rare... please, try with a new app... and place a "console.log" in the app's Show event... and look in the console... I can see it here, so, you also must see it... The only thing in which I can think is that the browser don't show the console messages for some reason... (?)

P.S. Try the new app in various browsers like Chrome (I think you use this) but also in Firefox or Edge, for example.

DecSoft (In thread: Problem with Console.log and Browser Plugins)

Hello John,

That's quite rare... are you talking about a "normal" app or a WebExtension app? In the first case, you must see that message (I can see it here using an app's view Show event)... in the second case, maybe you are looking at the console of the WebExtension, but, the message must appear in the app's console: if I am not wrong that consoles are differents, due to the different contexts.

DecSoft (In thread: Create new reactive element at runtime)

Hello Jhonson,

Maybe there is a way, but, honestly I can't find it. Of course the code that you shows don't work as you expected. I think that we need a template to be prepared in order to properly work. I made some tests and here is what I can suggest. First of all, place the below Javascript code in the app's Mounted event:


app.setVar('myInputs', [
 {
   model: 0,
   id: "my-input-1",
   label: "My input 1",
   type: "text",
   classes: "form-control form-control-md",
   placeholder: "Input 1 placeholder"
 },
 {
   model: 1,
   id: "my-input-2",
   label: "My input 2",
   type: "number",
   classes: "form-control form-control-md",
   placeholder: "Input 2 placeholder"
 }
]);

app.setVar('myInputModels', []);

As you can see, we can define one or more "inputs", including their properties, types and even a possible "label" to be used for every input. Additionally, we define an app variable which will store the inputs models / values. Now, place the below HTML markup (VueJS template) inside an HTML control:


{{app.store.myInputModels}}



<div v-for="input in app.store.myInputs" class="form-group">
 <label v-bind:for="input.id" v-html="input.label"></label>
 <input v-bind:id="input.id" v-bind:type="input.type"
  v-bind:placeholder="input.placeholder" v-bind:class="input.classes"
   v-model="app.store.myInputModels[input.model]">
</div>

When you run the app you can see the two defined inputs along with all the properties and even the labels, properly referred for every input. You can even place the above template inside an HTML control, and, don't define the "myInputs" and "myInputsModels" variables in the app's Mounted event: you can also do in a button's Click event, for example, and, also works as expected: the point is that you can't see nothing in the HTML, except when the variables are properly defined.

On the other hand, you specifically ask how to create "reactive element at runtime", but, I honestly can't see the point for these elements to be "reactives". I mean, it's perfectly possible to create elements at runtime, handle their events, get their values, etc., etc., just like I already shows in this specific thread's post. If you ask me "what you will do", David, I will answer that, of course, depend on the app's needs, but, what I mean is that it's perfectly possible to create controls at runtime, not "reactives", but, perfectly usables and with all the expected characteristics and behaviour.

The only point that may you must take in consideration is the where to add the controls. In your above code, you add controls directly to the HTML document's body: this is not correct, to say like that, since you can / must use an HTML control, and, inside that control, place any control that you need at designtime or at runtime, depends on your needs. I do this in various apps, for example, to add inputs by user demand (supose an app's view which allows the user to add one or more input files to be uploaded) and it's perfectly possible.

Another thing to take in consideration can be the way in which you can add elements at runtime: since we have the jQuery library in our apps, ready to be used, I think there is no point to don't take the jQuery library advantages. So, suposing I want to add inputs at runtime when a user click a button, I will do in a way similar than the below one:


$('#html1').append('\
 <div class="form-group">\
  <input type="text" class="form-control form-control-md" placeholder="Type here">\
 </div>');

Please, don't hesitate to post here if you have any further questions around this thread's topic.

DecSoft (In thread: Responsive in DecSoft App Builder)

Hello Jhonson,

Yes; Place the below in the HTML control:


{{app.store.message}}

<br>

<input v-model="app.store.message">

And the below in the app's view Show event or the app's Mounted event:


app.setVar('message', 'Initial value');

Take a look at the app's store property. Take a look also at the "Html" sample app included with the AB installation.

P.S. Please, Jhonson, use different forum's threads for different questions / topics, so we keep the forum better organized.

DecSoft (In thread: New HTML Compiler 2021.17)

Hello to all,

Here is a new DecSoft HTML Compiler with the below changes, fixes and enhancements:


2021.17 (11/06/2020)

* Add the new State option in the app's options -> Window. This option allows to start the app in a normal state (by default) or in a maximized state, similar to the full screen style, but, maintaining the app's window title bar available.

Read the entire product's history

DecSoft (In thread: New App Builder 2021.13)

Hello to all,

Here is a new DecSoft App Builder with the below changes, fixes and enhancements:


2021.13 (11/06/2020)

* Add the new RowDblClick event in the Table control. This event is similar than the RowClick event, and allows to prepare some Javascript code to be executed when the user double click or double tap the Table's rows. See the product's help for more information.

* Add the new Grid sample app, which shows how we can use the power of Bootstrap CSS (for example, the Grid system) in our apps, thanks to the HTML control, which allows to add virtually any HTML markup that we wanted.

Read the entire product's history

DecSoft (In thread: Responsive in DecSoft App Builder)

Hello Johnson,

We must use the right HTML markup for every Bootstrap CSS control / component that we want to use. I already prepares a Grid sample app to be included in the next release of AB, however, in fact it's easy to explain how to proceed.

1º Place the below HTML markup inside an AB HTML control:


<div class="container">
 <div class="row">
  <div class="col-sm">
   <div class="form-group">
    <input id="my-input-1" class="form-control form-control-md" placeholder="Type here something">
   </div>
   <div class="form-group">
    <button id="my-button-1" class="btn btn-md btn-block btn-primary">Press here</button>
   </div>
  </div>
  <div class="col-sm">
   <div class="form-group">
    <input id="my-input-2" class="my-input form-control form-control-md" placeholder="Type here something">
   </div>
   <div class="form-group">
    <button id="my-button-2" class="btn btn-md btn-block btn-primary">Press here</button>
   </div>
  </div>
  <div class="col-sm">
   <div class="form-group">
    <input id="my-input-3" class="form-control form-control-md" placeholder="Type here something">
   </div>
   <div class="form-group">
    <button id="my-button-3" class="btn btn-md btn-block btn-primary">Press here</button>
   </div>
  </div>
 </div>
</div>

2º In the app's view in which you place the HTML control, place the below Javascript code in the app's view Show event:


// Handler for our my-button-1 click event
$('#my-button-1').unbind('click').bind('click', function () {
  var
    inputValue = $('#my-input-1').val().trim();

  if (inputValue === '') {
    app.showAlert('You do not type anything in my-input-1 control');
  } else {
    app.showAlert('You type: ' + inputValue + ' in my-input-1 control');
  }
});

// Handler for our my-button-2 click event
$('#my-button-2').unbind('click').bind('click', function () {
  var
    inputValue = $('#my-input-2').val().trim();

  if (inputValue === '') {
    app.showAlert('You do not type anything in my-input-2 control');
  } else {
    app.showAlert('You type: ' + inputValue + ' in my-input-2 control');
  }
});

// Handler for our my-button-3 click event
$('#my-button-3').unbind('click').bind('click', function () {
  var
    inputValue = $('#my-input-3').val().trim();

  if (inputValue === '') {
    app.showAlert('You do not type anything in my-input-3 control');
  } else {
    app.showAlert('You type: ' + inputValue + ' in my-input-3 control');
  }
});

So as you can see we use the Bootstrap CSS Grid system, place some inputs and some buttons, and, also the right handlers to react when the buttons are pressed by the user. In the same way that we add these inputs and buttons we can add any other Bootstrap CSS component and deal with it.

Again, the autoscale option of AB can be enough, in other words, not all the apps requires to use the referred HTML markup, the Bootstrap CSS Grid system, etc., but, if we wanted, we can do it, thanks to the HTML control of AB. Of course you must refer to the Bootstrap CSS framework documentation in order to properly use his components, CSS classes, etc.

DecSoft (In thread: New App Builder 2019.63)

Hello to all,

Here is a new DecSoft App Builder release, with the below changes, fixes and enhancements:

Note that this new release of DecSoft App Builder refers to the previous generation of DecSoft App Builder, which is still available, only for our customers, in their DecSoft customer area, under the "Releases" tab.


2019.63 (11/06/2020)

* Replace the davidesperalta.com by decsoftutils.com in the product, including the help, samples, GUI, etc. This fixes some problems related with the product's updater, some samples apps, etc.

* Modify the PushPlugin sample app in order to use the current Apache Cordova push plugin, as well to modify some app's options, in order to be properly compiled and to work as expected.

Read the entire product's history

DecSoft (In thread: Responsive in DecSoft App Builder)

Hello Jhonson,

Yes; certainly AB offers the ability to make the apps "autoscale": you can read more here in this help topic. Basically we can use a fixed style or a scaled style (we can changes between them even at runtime), and, combine this last one with the MaxWidth and MaxHeight app's properties.

On the other hand, AB apps uses the Bootstrap CSS framework, so, if we want to go beyond the autoscale option of AB, we can use the Bootstrap CSS grid system also. For example, here is some HTML markup that you can place inside an HTML control of AB (you can copy the below code and just paste it inside an app's view: then an HTML control with that HTML markup are automatically created):


<div class="container">
 <div class="row">
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
 </div>
</div>

In many apps (or app's views) the autoscale option can be enough, but, certainly there is no problem to use an HTML control (which can cover partially or all the app's view) to use the Bootstrap CSS grid system, that is, the appropriate HTML markup, like the above sample. And it's also possible to use the AB HTML control to place virtually any HTML markup (with the Bootstrap CSS power), including inputs, buttons, etc.

DecSoft (In thread: App Path in the File Manager)

Hello John,

Thanks for fixing this issue, for all of the support you provide and for App Builder.

Always thank you for your trust, sir, and, also for your kindly words. ;-)

DecSoft (In thread: App Path in the File Manager)

Hello John,

You are right. There is a bug for these kind of paths which has been solved in this new release of DecSoft App Builder.

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.

This website uses cookies only to store your preferences.

Ok! Hide this note More information