Diferencias
Muestra las diferencias entre dos versiones de la página.
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.1 | wiki: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**, | ||
+ | \\ 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, | ||
+ | |||
+ | **Ejemplo: | ||
+ | \\ | ||
+ | <code javascript> | ||
+ | <frame name=" | ||
+ | <prop name=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | \\ | ||
+ | \\ | ||
+ | {{: | ||
+ | \\ | ||
+ | \\ | ||
+ | ^ Atributos ^ Descripción ^ | ||
+ | | **viewmode=" | ||
+ | | **calendar-viewmode**|Este es un submodo del anterior (Hay que especificar también el atributo anterior **viewmode=" | ||
+ | | **forecolor:# | ||
+ | | **bgcolor:# | ||
+ | | **cell-forecolor:# | ||
+ | | **cell-border-width: | ||
+ | | **cell-align: | ||
+ | | **align: | ||
+ | | **fontsize: | ||
+ | | **cell-selected-bgcolor:# | ||
+ | | **cell-selected-border-color:# | ||
+ | | **weekdays-bgcolor:# | ||
+ | | **weekdays-forecolor:# | ||
+ | | **weekdays-fontsize: | ||
+ | | **weekdays-longname: | ||
+ | | **weekdays-align: | ||
+ | | **border-width: | ||
+ | | **textfont-bold: | ||
+ | | **cell-border-color:# | ||
+ | | **page-swipe: | ||
+ | | **border: | ||
+ | | **week-start-hour: | ||
+ | | **week-end-hour: | ||
+ | | **cell-bgcolor="## | ||
+ | | **cell-other-month-bgcolor="## | ||
+ | | **cell-selected-forecolor="## | ||
+ | \\ | ||
+ | |||
+ | |||
+ | |||
+ | ==== 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: | ||
+ | |||
+ | cell-border-width: | ||
+ | cell-align: | ||
+ | align: | ||
+ | fontsize: | ||
+ | |||
+ | forecolor:# | ||
+ | bgcolor:# | ||
+ | |||
+ | cell-forecolor:# | ||
+ | cell-bgcolor:# | ||
+ | |||
+ | cell-other-month-bgcolor:# | ||
+ | |||
+ | cell-selected-forecolor:# | ||
+ | cell-selected-bgcolor:# | ||
+ | cell-selected-border-bgcolor:# | ||
+ | |||
+ | cell-border-color:# | ||
+ | |||
+ | weekdays-bgcolor:# | ||
+ | |||
+ | |||
+ | / | ||
+ | / | ||
+ | weekdays-forecolor:# | ||
+ | weekdays-fontsize: | ||
+ | weekdays-longname: | ||
+ | weekdays-align: | ||
+ | border-width: | ||
+ | textfont-bold: | ||
+ | page-swipe: | ||
+ | paging-enabled: | ||
+ | border: | ||
+ | week-start-hour: | ||
+ | week-end-hour: | ||
+ | } | ||
+ | </ | ||
+ | \\ | ||
+ | |||
+ | ==== Eventos capturables Javascript==== | ||
+ | <code javascript> | ||
+ | < | ||
+ | <action name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | <script language=" | ||
+ | var monthNames = new Array(" | ||
+ | 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(); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | < | ||
+ | <action name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | <script language=" | ||
+ | var monthNames = new Array(" | ||
+ | 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(); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Eventos capturables VBScript==== | ||
+ | <code vb> | ||
+ | |||
+ | 'Este nodo se ejecuta cuando se selecciona un día del mes | ||
+ | < | ||
+ | <action name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | < | ||
+ | ' | ||
+ | thisDataColl.OwnerObject(" | ||
+ | thisDataColl.OwnerObject(" | ||
+ | thisDataColl.OwnerObject(" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 'Este nodo se ejecuta cuando se cambia el mes | ||
+ | < | ||
+ | <action name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | <param name=" | ||
+ | < | ||
+ | thisDataColl.OwnerObject(" | ||
+ | thisDataColl.OwnerObject(" | ||
+ | thisDataColl.OwnerObject(" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | '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. | ||
+ | < | ||
+ | <action name=" | ||
+ | <param name=" | ||
+ | < | ||
+ | ' | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Control del calendario por script ==== | ||
+ | <code javascript> | ||
+ | // ***** JAVASCRIPT ***** | ||
+ | self.getContents(" | ||
+ | |||
+ | self.getContents(" | ||
+ | </ | ||
+ | |||
+ | |||
+ | <code vb> | ||
+ | ' ***** VBSCRIPT ***** | ||
+ | this.Contents(" | ||
+ | |||
+ | this.Contents(" | ||
+ | </ | ||
+ | |||
**Ejemplo: | **Ejemplo: | ||
\\ | \\ |