ProgressBar con opción de 2 datos

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

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

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

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

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

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

DecSoft HTML Compiler 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.

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.

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

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

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

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

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.

Jordi Mesa

Buenas David, quería saber somo podría utilizar la opción ProgressBar para poder poner dos valores en dos colores distintos, como ganador y perdedor. He visto que Angular lo tiene incluido en su ProgressBar pero no veo como implementarlo en AB. Es la funcion: STACKED https://angular-ui.github.io/bootstrap/#!#progressbar

decsoft

Hola Jordi,

Creo que la mejor opción sería utilizar Bootstrap CSS, pero, tendrás que hacerlo tú mismo, en un control HTML. Por ejemplo, echa un vistazo a la siguiente app: copia el XML y guárdalo en un archivo "MyApp.ab", por ejemplo, para después abrirlo y probarlo en AB:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.39">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-05-16T11:06:09.755</Created>
    <Modified>2019-05-16T11:06:34.305</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>20</Top>
          <Left>20</Left>
          <Width>284</Width>
          <Height>36</Height>
          <Html>
            <![CDATA[<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.39 (5/2/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

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

Jordi Mesa

ok... lo haré así...

estoy intentando crear la progressBar utilizando el ejemplo de RuntimeButtons.. porque no se cuantas progressBar me hacen falta y se tienen que crear automáticamente... pero no me reconoce ningún atributo que le paso.

pan.innerHTML = '40%'; pan.setAttribute('class', 'progress-bar progress-bar-striped bg-success'); pan.setAttribute('id', window.App.RootScope.TotalButtons2); pan.setAttribute('aria-valuenow', '40'); pan.setAttribute('aria-valuemin', '0'); pan.setAttribute('aria-valuemax', '100');

Que datos tengo que pasarle para poder poner los valores, y los colores de fono

decsoft

Hola Jordi,

Echa un vistazo al siguiente ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.39">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-05-16T12:38:17.232</Created>
    <Modified>2019-05-16T12:48:21.369</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
SetVar "[ProgressBar1Range1Pos]" "20%" "String"
SetVar "[ProgressBar1Range2Pos]" "70%" "String"

SetVar "[ProgressBar2Range1Pos]" "10%" "String"
SetVar "[ProgressBar2Range2Pos]" "90%" "String"
]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>ProgressBarsHtml</Name>
          <Top>16</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>72</Height>
          <Html>
            <![CDATA[
<div class="progress" id="progress-bar-1">
 <div id="progress-bar-1-range-1" class="progress-bar bg-danger" role="progressbar" ng-style="{width: $root.ProgressBar1Range1Pos}"></div>
 <div id="progress-bar-1-range-2" class="progress-bar bg-success" role="progressbar" ng-style="{width: $root.ProgressBar1Range2Pos}"></div>
</div>

<div class="progress mt-3" id="progress-bar-2">
 <div id="progress-bar-2-range-1" class="progress-bar bg-danger" role="progressbar" ng-style="{width: $root.ProgressBar2Range1Pos}"></div>
 <div id="progress-bar-2-range-2" class="progress-bar bg-success" role="progressbar" ng-style="{width: $root.ProgressBar2Range2Pos}"></div>
</div>
]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.39 (5/2/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

El color de las barras de progreso se consigue utilizando las clases CSS correspondientes "bg-danger", "bg-success", etc., aunque, tal vez puedas aplicar un color de fondo usando "background-color".

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

Jordi Mesa

Buenas David, estoy metiendo ese codigo por html desde JS... porque me hace falta crear los progressbar de forma automatica... pero no lo hace bien... me crea dos barras... una con cada valor.

StartJS ancho1 = window.App.RootScope.ProgressBar1Range1Pos; ancho2 = window.App.RootScope.ProgressBar1Range2Pos; pan = document.getElementById("ButtonsHtmlContent2"); pan.innerHTML += "<div class='progress' id='progress-bar-1'>"; pan.innerHTML += "<div id='progress-bar-1-range-1' class='progress-bar bg-danger' role='progressbar' ng-style='{width: "+ ancho1 + "}'>20%</div>"; pan.innerHTML += "<div id='progress-bar-1-range-2' class='progress-bar bg-success' role='progressbar' ng-style='{width:"+ ancho2 + "}'>80%</div>"; pan.innerHTML += "</div><br>"; EndJs

Jordi Mesa

Buenas David te adjunto una captura para que veas cómo crea el progresbar si creo el código desde js en AB.

Me crea 2 barras en lugar de 1 y en el ancho entero.

Imagen: http://img.fenixzone.net/i/v2tO1xq.jpeg

decsoft

Hola Jordi,

Echa un vistazo al siguiente ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.39">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-05-16T12:38:17.232</Created>
    <Modified>2019-05-18T11:38:56.004</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
SetVar "[ProgressBar1Range1Pos]" "30%" "String"
SetVar "[ProgressBar1Range2Pos]" "70%" "String"

StartJS

  $('#progressbar-container').html(
    '<div class="progress" id="progress-bar-1">' +
    '<div id="progress-bar-1-range-1" class="progress-bar bg-danger" role="progressbar"></div>' +
    '<div id="progress-bar-1-range-2" class="progress-bar bg-success" role="progressbar"></div>' +
    '</div>');

  $('#progress-bar-1-range-1').css('width', window.App.RootScope.ProgressBar1Range1Pos);
  $('#progress-bar-1-range-2').css('width', window.App.RootScope.ProgressBar1Range2Pos);

EndJS
]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>ProgressBarsHtml</Name>
          <Top>16</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>72</Height>
          <Html>
            <![CDATA[
<div id="progressbar-container">
</div>]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.39 (5/2/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

El código Javascript "principal" del ejemplo (lo encontrarás en el evento "Show" de la vista) es el siguiente:


SetVar "[ProgressBar1Range1Pos]" "30%" "String"
SetVar "[ProgressBar1Range2Pos]" "70%" "String"

StartJS

  $('#progressbar-container').html(
    '<div class="progress" id="progress-bar-1">' +
    '<div id="progress-bar-1-range-1" class="progress-bar bg-danger" role="progressbar"></div>' +
    '<div id="progress-bar-1-range-2" class="progress-bar bg-success" role="progressbar"></div>' +
    '</div>');

  $('#progress-bar-1-range-1').css('width', window.App.RootScope.ProgressBar1Range1Pos);
  $('#progress-bar-1-range-2').css('width', window.App.RootScope.ProgressBar1Range2Pos);

EndJS

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

Jordi Mesa

Ahora si... muchísimas gracias.

decsoft

¡De nada Jordi! :-)

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.