Posts by DecSoft

Hello Peter,

If I use the new Debugger from the 2021.xx Versions the upper 10-20 % of my Apps from the 2020.xx Version are not visible.

That's quite rare. I suggest you two things: firstly remove the "_cache" and "compile" directory of your app, and then compile it and run to see if that solve the problem. If not, then you must click in the "bug" icon in the debugger toolbar or press the F12 key, in order to open the Developer Console: we must see some possible error that cause the problem. With that possible error / message we can know what happen and try to fix it.

Is it possible to have two AppBuilder Installations on one Computer??

No; certainly it's not possible due to various reasons, but, in fact we must look what is the cause of the problem with the debugger, because it's quite rare and for sure we must handle it. Maybe it's possible to install two versions... choosing two installation directories, but, the configuration become the same for both installations, and that can cause some unexpected behaviour. But again, I think the best is to look for the possible problem with the debugger.

Is there a zoom function in the new Debugger??

No; certainly it's not an option like that right now... I am not sure if that can be useful... we always can use an external browser which allow the zoom, but, anyway, maybe this can be a good option to have in a next release of the product.. The next release of the product will offer three new buttons at the debugger toolbar to zoom in, zoom out and reset the zoom.

A different problem appears with the text input field. In the Chrome based Browsers like Chrome or Opera I have to klick on the right side of the field to input text. If I click on the left side then a window for input of a filename for an image opens. This does not happen in the Firefox.

I am not quite sure if can understand the question. Are you may talking about File inputs? Because Text inputs must have no differences in their left or right sides... in fact we can click at any place in the input in order to start to type text. So... maybe I can't understand the question and you can explain it a bit more. If you wanted and can prepare a sample app, feel free to send me an EMail with that sample app, so I can try to reproduce the problem here.

P.S. The debugger in the new releases of the product is better than the previous one: the current is based in the Microsoft Edge Runtime (Chromium) and the previous one is based in Internet Explorer: the first one is preferred and offer to us the Console Developer, which can be very, very useful to find possible bugs, etc.

Hello Mario,

After some research and according to the specification, but, mainly after to some tests too, in order to get your desired behaviour on iOS, the capture attribute must be NOT specified. I think you must play with the possible user's options (pick, capture image) and the OS in which the app is running, to get what you wanted.

Try firstly to remove the capture attribute if you are on iOS (you can use the Cordova Device plugin, for example, to know if the app run on iOS). You can use the app's view Show event, for example, and a code like the below:

Talking about Android, we have another issue... I try several different approach, and, can't get the camera working from the file input: the file's picker is always show. Apparently there is a bug / issue in Apache Cordova on this point. So here is what I will try / do in your case:

1º Use the input file, but, not the input file itself: we can hide the input file and use a label control referring to the input file, or an HTML control which contains a label referring to the input file: doing this we can "launch" the input file, but, not by using the input file control itself. So place the input file out of the view and set his Hidden property to "true", and then, use some HTML markup inside an HTML control like the below one:

2º We must look if the app run on iOS or Android. If we run on iOS, we can remove the capture attribute (like above) if we want to use the file picker / camera or leave the attribute if we want to use the camera.

3º If we the app run in Android, we must use the file input if we want to use the file picker, or, we must use the Apache Cordova Camera plugin if we want to use the camera. To get this last working I think we must remove the "for" attribute of the file input's label, and, react to a click on that label control, so we can launch the camera using the Apache Cordova Camera plugin.

4º We can also take the 3 step / point on iOS if we want to use the Camera, that is, use the Apache Cordova Camera plugin if we wanted, instead of the input file.

Another possibility can be to avoid the File Input usage (at least in Android and iOS) and use the Apache Cordova Camera plugin, since we can use that plugin for both: take a photo from the camera but also pick a image from the gallery (look at the CordovaCamera sample app). So maybe can be a good idea (due to the above) to use the Apache Cordova plugin, except for platforms different than Android and iOS.

Please, Mario, take your time, make some tests and finally go ahead if you have any further questions around this.

You're welcome, sir! ;-)

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.

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

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?

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

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.

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.

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:

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:

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:

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

Hello Jhonson,

Yes; Place the below in the HTML control:

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

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.

Hello to all,

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

Read the entire product's history

Hello to all,

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

Read the entire product's history

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:

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:

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.

Hello to all,

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

Read the entire product's history