ProgressBar con opción de 2 datos

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

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!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.