Share via Share via... Twitter LinkedIn Facebook Pinterest Telegram WhatsApp Yammer RedditCambios recientesSend via e-MailImprimirEnlace permanente × Tabla de Contenidos Ajustes de diseños según resolución Como adaptar la resolución y fuente de tu App en los distintos dispositivos Formas de ajustar tamaños de controles y fuentes Atributos que utilizan para ajustes de tamaño de fuentes Ajustes de diseños según resolución Como adaptar la resolución y fuente de tu App en los distintos dispositivos Las aplicaciones XOne gozan de gran versatilidad, ya que su utilización puede realizarse en cualquier dispositivo, sin que las especificaciones de los mismos influyan en su funcionamiento o diseño. Para lograr que el diseño de las mismas se adapten a cualquier tipo de dispositivo independientemente de su resolución es indispensable usar scale-fontsize como atributo en el xml de nuestra app: Atributo Funcionalidad scale-fontsize Permite ajustar o escalar las fuentes del proyecto a la resolución del dispositivo con el que se trabaja. Por defecto su valor es “false”. En el caso de los dispositivos iOS, puede usarse conjuntamente con el atributo ios-font-factor. No es obligatorio, pero si aconsejable para realizar una adaptación entre tamaños de fuentes entre los dispositivos Android e iOS. El atributo scale-fontsize por defecto su valor es “false”, al tomar valor “true” permite el ajuste de las fuente de nuestra aplicación de manera que los atributos relacionados con las fuentes de nuestras aplicaciones tomaran el valor del tamaño de fuente de ese dispositivo en específico. Por ejemplo si hemos definido un prop cuyo atributo es fontsize=“5”, el tamaño de la fuente en este caso, al haber previamente definido a true el atributo scale-fontsize hará que la fuente tome el tamaño 5 que le corresponde a ese dispositivo. En el caso de los dispositivos iOS, puede usarse conjuntamente con el atributo ios-font-factor. No es obligatorio, pero si aconsejable para realizar una adaptación entre tamaños de fuentes entre los dispositivos Android e iOS, que no es más por el valor que vamos a multiplicar la fuente de nuestra app para lograr el tamaño deseado. Formas de ajustar tamaños de controles y fuentes Detalle Descripción Por porcentaje (%) Se utiliza con mejor resultado de diseño en controles que utilizan width y height, como en los frames. Por píxel (p) Se adaptará el width y el height a la resolución del dispositivo usando regla de 3, tanto en tamaño de los controles como en fuentes. Ejemplo: <prop name="FECHA" type="D" visible="0" text-fontsize="5" labelwidth="0" lmargin="5p" width="400p" text-align="right" locked="true" /> <prop name="MAP_HORA" type="T" visible="0" text-fontsize="5" labelwidth="0" locked="true" lmargin="5p" width="150p" text-align="left" newline="false" /> <prop name="MAP_COLORVIEW" type="T" visible="0" info="#4fbb74"/> <prop name="MAP_FORECOLOR" type="T" visible="0" info="#4fbb74"/> <prop name="TIPO" type="N" visible="0" info="texto,documento,foto,voz"/> Atributos que utilizan para ajustes de tamaño de fuentes Atributos para ajustes de tamaño de fuentes Descripción fontsize Tamaño de la fuente labelfont-size Tamaño de la fuente para controles con etiquetas textfont-size Tamaño de fuente para la parte del texto del control Ejemplos: <?xml version="1.0" encoding="iso-8859-15" standalone="yes"?> <xml> <app prefix="gen" version="V:24.07.2020" vtime="4" application-max-priority="true" autologon="true" load-wait="false" show-wait-dialog="false" ios-font-factor="12" scale-fontsize="true" resolution-height="2560" resolution-width="1440" screen-orientation="portrait" debug="true" default-language="javascript" > <style url="default.css" strict-mode="true" /> <style url="default-colors.css" strict-mode="true" /> <style url="cssframe.css" strict-mode="true" /> <style url="controles.css" strict-mode="true" /> <style url="camara.css" strict-mode="true" /> <entry-point> <item name="EntradaApp" conditions="" /> </entry-point> --> <connection name="DatosOnline" datemask="ymd" connstring="Provider=Xone Remote ..... /> <connection name="OnlineSpeed" datemask="ymd" connstring="Provider=Xone Remote Provider...... /> <coll name="Ayuda" title="Ayuda" objname="gen_ayuda" updateobj="gen_ayuda" progid="ASData.CASBasicDataObj" loadall="true" connection="DatosOnline" sql="SELECT ID, TITULO, DESCRIPCION, DOCUMENTO, TIPO, 'iconoayudas.png' AS MAP_IMAGEN FROM GEN_AYUDA WHERE BAJA=0 AND DESTINO='APP' ORDER BY ORDEN ASC" no-data-text="No hay documentos disponibles" cell-bgcolor="#00000000" > <group name="General" id="1"> <frame name="todo" width="100%" height="50%" align="top|center" bgcolor="#00000000" forecolor="#00000000" framebox="false" > <frame name="derecha" width="40%" height="50%" lmargin="30%" tmargin="10%" bgcolor="#00000000" align="center"> <prop name="MAP_IMAGEN" type="IMG" width="80%" visible="4" /> </frame> <frame name="izquierda" width="100%" height="40%" align="center" bgcolor="#00000000"> <prop name="TITULO" type="T" class="propGrid fuente7" text-align="center" heightx="30%" text-forecolor="#FFFFFF" textfont-bold="true" lines="2p" /> <prop name="DESCRIPCION" visible="0" type="T" class="propGrid" heightx="70%" textfont-size="3" text-forecolor="#FFFFFF" lines="2" /> <prop name="DOCUMENTO" type="T" visible="0" /> <prop name="BAJA" type="N" visible="0" info="0 activo. 1 borrado(no se ve)"/> <prop name="TIPO" type="T" visible="0" info="VIDEO, YOUTUBE, PDF"/> </frame> </frame> </group> <selecteditem refresh="false" show-wait-dialog="true"> <action name="runscript"> <script language="javascript"> //Ver el documento, segun el tipo que sea if (comprobarConexion() == 'OK') { verAyuda(self); } else { showPregunta('P0',self); } </script> </action> </selecteditem> </coll> .propPH { bgcolor:#00000000; forecolor:#222222; img-width:125p; img-height:125p; img-delete:bt_Delete.png; img-delete-sel:bt_Delete.png; img-camera:bt_camera.png; img-camera-sel:bt_camera.png; } .propGrid { visible:4; width: 97%; locked:true; text-align:left; labelwidth:0; labelbox:false; fontsize:4; textfont-size:3; floating-tooltip:false; text-bgcolor:#00000000; text-forecolor:#000000; fontbold:false; xlpadding:50p; lmargin:3%; text-border:false; }