Responsive in DecSoft App Builder

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

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

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

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

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

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

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.

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

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

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

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.

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

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

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

Jhonson

Hi David,

AppBuilder claimed to cover responsiveness, but I could not find any tutorials related. Could you please give me an example of demonstrating responsive Between devices. For example this https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=responsive-layout, if would like show 4 columns on larger device and 1 column on small device.

Also, I would be having input fields and buttons inside this columns.

Thank you!

decsoft

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.

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

Jhonson

David, Still not clear how to put AB INPUTS and BUTTONS elements inside HTML control with your html markup?

<div class="container">
 <div class="row">
  <div class="col-sm">
    <b>INPUTS and BUTTONS elements</b>
  </div>
  <div class="col-sm">
    <b> INPUTS and BUTTONS elements</b>
  </div>
  <div class="col-sm">
   <b> INPUTS and BUTTONS elements</b>
  </div>
 </div>
</div>

BUTTONS
Push button
Dropdown
Image push


INPUTS
Text
Number
Password
Email
Color
Phone
Date
Search
File
Select
Multiselect
Textarea
Radio
Checkbox
Switch
Range

decsoft

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.

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

Jhonson

David, how to use the following vue markup inside HTML control, currently not working.


<div id="appl">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

app show event


new Vue({
  el: '#appl',
  data: {
    message: 'Hello Vue!'
  }
});

decsoft

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.

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.