Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Próxima revisión		 Revisión previa
wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:2.-calendario:start [2018/02/07 11:53] – editor externo 127.0.0.1wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:2.-calendario:start [2023/09/14 13:51] (actual) – ary
Línea 5: Línea 5:
 \\ \\
 \\ \\
 +XOne tiene como funcionalidad en sus diseños el uso del calendario, el cual resulta muy útil para la entrada de datos tipo fecha y además de brindar muy buena apariencia a la aplicación.
 +
 +El calendario que en lugar de ponerlo como colección directamente como se hizo en los inicios, que sale con el diseño por defecto interno del framework y que no se puede cambiar nada de la apariencia visual, se ha definido en forma de **content**, utilizando el atributo **viewmode="calendarview"**.
 +\\ De esta forma, al ser un content, tenemos una mayor versatilidad a la hora de colocarlo en pantalla.\\
 +\\
 +En adelante, será el calendario en forma de content el que siga desarrollándose, y aquí se describen los atributos que aplican a la hora de cambiar la apariencia visual.\\
 +
 +**Ejemplo:**
 +\\
 +<code javascript>
 +  <frame name="frcontentcalendario" width="100%" height="30%" bgcolor="#273238" align="center">
 +      <prop name="CuentaClienteCalendario" type="Z" viewmode="calendarview" contents="CuentaClienteCalendario"  class="z_calendario" width="90%" height="100%"/>
 +      <contents name="CuentaClienteCalendario" src="CuentaClienteCalendario" />
 +  </frame>
 +</code>
 +\\
 +\\
 +{{:wiki:2.-desarrollo-app:2.5.-controles-by-xone:l.-calendario:calendario.png?nolink&250|}}   {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:2.-calendario:screenshot_20230914-123315.png?nolink&250|}}    {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:2.-calendario:screenshot_20230914-123751.png?nolink&220|}}
 +\\
 +\\
 +^ Atributos ^ Descripción ^
 +| **viewmode="calendarview"**|Esto es para el mes.|
 +| **calendar-viewmode**|Este es un submodo del anterior (Hay que especificar también el atributo anterior **viewmode="calendarview"**).\\ Posibles valores **"week"** y **"month"**(por defecto), para vista semanal y mensual respectivamente|
 +| **forecolor:#FFFFFF**|Color de fuente.|
 +| **bgcolor:#DFDFDF**|Color de fondo por defecto.|
 +| **cell-forecolor:#ffffff**|Color de fuente de la celda.|
 +| **cell-border-width:2**|Tamaño del borde de cada línea.|
 +| **cell-align:center**| Alineación de la celda.|
 +| **align:center**| Alineación general del control.|
 +| **fontsize:12**| Tamaño de la fuente.|
 +| **cell-selected-bgcolor:#00000000**| Color del fondo de la celda seleccionada.|
 +| **cell-selected-border-color:#00CC00**| Color del borde de la celda seleccionada.|
 +| **weekdays-bgcolor:#00000000**|Color de los días. |
 +| **weekdays-forecolor:#333333,#999999,#999999,#999999,#999999,#999999,#999999**|Color de la fuente de cada uno de los días: DOMINGO, LUNES, MARTES, MIÉRCOLES, JUEVES, VIERNES, SÁBADO.  |
 +| **weekdays-fontsize:5**|Tamaño de los días de la semana.|
 +| **weekdays-longname:false**| Qué tipo de nombre sale, si el tipo largo o el tipo corto. |
 +| **weekdays-align:topleft**| Alineación de esos nombres. |
 +| **border-width:2**|Tamaño de los bordes.|
 +| **textfont-bold:true**|Para hacerlo negrita **bold**.|
 +| **cell-border-color:#00000000**|Color borde de la celda.|
 +| **page-swipe:false**|Si permite que se desplace los meses o las semanas con el dedo. Por defecto **true**.|
 +| **border:false**|Si tiene borde o no.|
 +| **week-start-hour:0**|Inicio de la hora que se indica en el día, ya que los días se dividen entre 0 a 23:59.|
 +| **week-end-hour:1**|Final de la hora que se indica en el día. |
 +| **cell-bgcolor="##FLD_MAP_COLOREMPRESA##"** |Color de la celda.|
 +| **cell-other-month-bgcolor="##FLD_MAP_COLORCALENDARIO_NOMESACTUAL##"**|Color de la celda de los días del otro mes que no es el mes seleccionado.|
 +| **cell-selected-forecolor="##FLD_MAP_COLOREMPRESA##"** |Color de  la fuente del día seleccionado. Permite **width** y **height** para poner el tamaño, lo ideal sería poner todos los atributos en una clase y asociársela.|
 +\\
 +
 +
 +
 +==== Ejemplo de clase definida para calendario ====
 +A continuación se muestra como pueden usarse algunos de los atributos para diseño de calendario XOne, estos definidos en una CSS **(.z_calendario)**
 +\\
 +<code xml>
 +.z_calendario
 +{
 + extends:prop;
 +
 + cell-border-width:0;
 + cell-align:center;
 + align:center;
 + fontsize:11;
 +
 + forecolor:#FFFFFF;
 + bgcolor:#273238;
 +
 + cell-forecolor:#FFFFFF;
 + cell-bgcolor:#273238;
 +
 + cell-other-month-bgcolor:#777777;
 +
 + cell-selected-forecolor:#FABB00;
 + cell-selected-bgcolor:#FFFFFF;
 + cell-selected-border-bgcolor:#000000;
 +
 + cell-border-color:#273238;
 +
 + weekdays-bgcolor:#00000000;
 +
 +
 + /*DOMINGO,LUNES,MARTES,MIERCOLES,JUEVES,VIERNES,SABADO*/
 + /*weekdays-forecolor:#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF;*/
 + weekdays-forecolor:#FFFFFF;
 + weekdays-fontsize:5;
 + weekdays-longname:false;
 + weekdays-align:top|left;
 + border-width:3;
 + textfont-bold:true;
 + page-swipe:false;
 + paging-enabled:false;
 + border:false;
 + week-start-hour:0;
 + week-end-hour:1;
 +}
 +</code>
 +\\
 +
 +==== Eventos capturables Javascript====
 +<code javascript>
 +      <ondateselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHACALENDAR,MAP_TITLE_MES_MR,MAP_TITLE_ANO_MR">
 +        <action name="runscript">
 +          <param name="DATEVALUE" />
 +          <param name="TIMEVALUE" />
 +          <param name="EVENTVALUE" />
 +          <script language="javascript">
 +                var monthNames = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
 + selfDataColl.getOwnerObject().MAP_FECHACALENDAR = DATEVALUE;
 + selfDataColl.getOwnerObject().MAP_TITLE_MES_MR = monthNames[DATEVALUE.getMonth()].toString().toUpperCase();
 + selfDataColl.getOwnerObject().MAP_TITLE_ANO_MR = DATEVALUE.getFullYear().toString();
 + </script>
 +        </action>
 +      </ondateselected>
 +      
 +      <onpageselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHACALENDAR,MAP_TITLE_MES_MR,MAP_TITLE_ANO_MR">
 +        <action name="runscript">
 +          <param name="DATEVALUE" />
 +          <param name="CURRENT" />
 +          <param name="DATEFROM" />
 +          <param name="TOTALDAYS" />
 +          <script language="javascript">
 + var monthNames = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
 + selfDataColl.getOwnerObject().MAP_FECHACALENDAR = DATEVALUE;
 + selfDataColl.getOwnerObject().MAP_TITLE_MES_MR = monthNames[DATEVALUE.getMonth()].toString().toUpperCase();
 + selfDataColl.getOwnerObject().MAP_TITLE_ANO_MR = DATEVALUE.getFullYear().toString();
 + </script>
 +        </action>
 +      </onpageselected>    
 +</code>
 +
 +
 +==== Eventos capturables VBScript====
 +<code vb>
 + 
 +'Este nodo se ejecuta cuando se selecciona un día del mes
 +<ondateselected refresh="true" show-wait-dialog="false" refresh-owner="DatosPoblaciones,MAP_FECHA,MAP_TITLE_NAMES_MES,MAP_TITLE_ANO,MAP_RUTA">
 + <action name="runscript">
 + <param name="DATEVALUE" />
 + <param name="TIMEVALUE" />
 + <param name="EVENTVALUE" />
 + <script language="vbscript">   
 + 'Esto es para coger el valor de la fecha del día seleccionado
 + thisDataColl.OwnerObject("MAP_FECHA")= DATEVALUE
 + thisDataColl.OwnerObject("MAP_TITLE_NAMES_MES")=ucase(cstr(monthname(DATEVALUE)))
 + thisDataColl.OwnerObject("MAP_TITLE_ANO")= cstr(year(DATEVALUE))
 + </script>
 + </action>
 +</ondateselected>
 +
 +'Este nodo se ejecuta cuando se cambia el mes 
 +<onpageselected refresh="true" show-wait-dialog="false" refresh-owner="DatosPoblaciones,MAP_FECHA,MAP_TITLE_NAMES_MES,MAP_TITLE_ANO,MAP_RUTA">
 + <action name="runscript">
 + <param name="DATEVALUE" />
 + <param name="TIMEVALUE" />
 + <param name="EVENTVALUE" />
 + <script language="vbscript">          
 + thisDataColl.OwnerObject("MAP_FECHA")= DATEVALUE
 + thisDataColl.OwnerObject("MAP_TITLE_NAMES_MES")=ucase(cstr(monthname(DATEVALUE)))
 + thisDataColl.OwnerObject("MAP_TITLE_ANO")= cstr(year(DATEVALUE))
 + </script>
 + </action>
 +</onpageselected>
 +
 +
 +'Esto se ejecuta cuando se van a pintar CADA UNA de las celdas del calendario. Si el script es pesado, puede tardar mucho.
 +'Se recomienda no utilizar si se requiere velocidad.
 +<oncelldraw>
 + <action name="runscript">
 + <param name="CELLDATE" />
 + <script language="VBScript">
 + 'Poner el script que sea.                              
 + </script>
 + </action>
 +</oncelldraw>
 +</code>
 +
 +==== Control del calendario por script ====
 +<code javascript>
 +// ***** JAVASCRIPT *****
 +self.getContents("GastosCalendar").setVariables("moveto","prev");   //Para ir al mes anterior
 +
 +self.getContents("GastosCalendar").setVariables("moveto","next");   //Para ir al mes siguiente
 +</code>
 +
 +
 +<code vb>
 +' ***** VBSCRIPT *****
 +this.Contents("DatosCalendario").variables("moveto")="prev"   'Para ir al mes anterior
 +
 +this.Contents("DatosCalendario").variables("moveto")="next"   'Para ir al mes siguiente
 +</code>
 +
 **Ejemplo:**\\ **Ejemplo:**\\
 \\ \\