¿Se pueden aplicar clases bootstrap a componentes web Xojo?

Hola.

Estoy intentando escribir mi primera aplicación web en Xojo y nada más empezar ya me asaltan las primeras dudas.

Quiero usar un TextField como si fuera un form-floating de Bootstrap, de forma que en la parte superior del TexField aparezca el texto del PlaceHolder. Es para una pantalla de Login.

Fuera de Xojo solo tendría que escribir esto en mi html:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

¿Hay alguna forma de hacer esto en Xojo? Porque imagino que si Xojo utiliza Bootstrap 5, alguna forma habrá de aplicar las clases Bootstrap.

Un saludo,
Óscar.

Se usa bootstrap de base pero todavía falta implementar funciones que ofrece el Bootstrap.

Me imagino que puedes crear tus propios controles con el WebSDK para poder lograr esto.

O puedes crear un Feature Request para que se implemente en una futura versión.


Después de hacer unas pruebas, yo creo que @Ricardo_Cruz podría agregar esta opción sin mucho problema. El código que muestra Xojo actualmente para un WebTextField con caption es el siguiente:

<div id="n6Uxb1" class="XojoTextField" style="left: 102px; top: 42px; width: 233px; height: 62px; position: absolute;">
<label for="n6Uxb1_field">Email address</label>
<input id="n6Uxb1_field" value="" name="TextField1" class="form-control" tabindex="1" type="text" placeholder="" autocomplete="off" spellcheck="false" style="width: 100%;">
</div>

lo que nos da lo siguiente:
image

Si se cambia el orden del label y se agrega la clase de bootstrap, de esta forma:

<div id="jDeyUA" class="XojoTextField form-floating" style="left: 102px; top: 42px; width: 233px; height: 62px; position: absolute;">
<input id="jDeyUA_field" value="" name="TextField1" class="form-control" tabindex="1" type="text" placeholder="test@test.com" autocomplete="off" spellcheck="false" style="width: 100%;">
<label for="jDeyUA_field">Email address</label>
</div>

se obtiene:
2023-09-30_14-35-04.2023-09-30 14_37_08


#74270 - Add Bootstrap form-floating option to WebTextFields/WebTextArea

1 Like

¡Eso es precisamente lo que quiero conseguir!

Entiendo que lo has hecho modificando directamente el código desde el navegador, no desde Xojo.

He grabado el issue https://tracker.xojo.com/xojoinc/xojo/-/issues/74272 solicitando esta característica.

Ya hay varias solicitudes para incorporar classes a Web, por ejemplo:
#72204 - Request to make Xojo Web more powerful with one trick (css classes in properties panel)
#71233 - Make it posible too add and remove bootstrap and custom classes directly on Xojo

En el caso de form-floating, no es sólo agregar la clase al control sino que hay que cambiar el orden de los componentes (label/input) para que funcione. Así que se requiere algo extra a sólo agregar la clase.

Creo que estas confundiendo las capacidades de las clases de Bootstrap. Como dice alberto, agregar una clase “form-floating” no va a crear los controles necesarios para lo que buscas.

En todo caso, el issue debio haber sido directamente para agregar la capacidad “form-floating” a los WebTextField ya que existen varios issues pidiendo que se permita agregar clases desde el IDE.

Por otra parte, si necesitas esta carateristica para un proyecto cercano, te recomendaría fijarte en que algunos de los issues referenciados tienen más de 3 años y no han sido implementados.

Hola, Iván.

Tienes razón. He cerrado el issue porque en realidad tiene más sentido solicitar la capacidad “form-floating” a un WebTextField.

Acabo de empezar con el desarrollo web en Xojo y aún tengo que acostumbrarme a cómo se trabaja con él.

Un saludo,
Óscar.

Técnicamente parece fácil de implementar lo de la etiqueta flotante. El problema es ver cómo lo exponemos en el IDE.

En Android se usa la propiedad Hint, pero hacerlo en Web de esta manera modificaría el comportamiento de las aplicaciones actuales.

A ver si encontramos una manera adecuada para todos :slight_smile: