MyMobileWeb DateField Tag

From Morfeo Wiki

Contents 1 Overview 2 Attributes 3 CSS styles 4 Content 5 Example

Overview

Used to specify the appearance of a date input control in the rendering. This control will be binded to a context data item. This way, the control will initially display that context data item and, vice versa, the content of that field will be automatically updated in the context. This will happen when the user presses the "submit" control in the rendering. The data item entered will be validated as java.sql.Date and will be used to indicate the object class type that will be deposited directly in the context (bindingtype). For example, an expression of the type:

  <mymw:datefield id="date1" bind="${ myDate }" bindingtype="String"/>

will store to context the date entered by the user as a string with the format indicated in the java-date-mask style. Valid "bindingtypes" are:

• java.lang.Long, Long, long
• java.sql.Date, Date
• java.util.Date
• java.lang.String, String

The difference between specifying the Java native type or its wrapper class is the object type that will finally be stored in the context. If the wrapper class is specified, then the data item will be stored as an object of that class. If the Java native type is specified, then the data will be stored in a Holder type class, specified in the org.morfeo.tidmobile.util package. The strength of this class is that, unlike Java wrapper classes, it is mutatable, and a new object does not have to be created to assign a new value.

Attributes

The attributes supported by this tag are the following:

• Attribute: id (required)
  Identifier for this control.
• Attribute: class
  Reference to the CSS2 style for this component, or a E.L. which solves this reference.
• Attribute: display
  E.L. which contains the condition to show the control or not.
  Default value: true.
• Attribute: title
  Datefield control title
• Attribute: bind
  EL with context data item to which the component is binded. The field will display that context data item at the start.
• Attribute: labelid
  Label label identifier associated with this component. If the control is associated with a descriptive label, this attribute is used precisely to indicate its reference to the system.
• Attribute: bindingtype
  Type storing the value entered in the component to context. Default value is java.sql.Date.

CSS styles

Style: display-as style Date field generation type. The possible fields are:

• textfields: the control will be divided into three textfields: one to enter the day, another for the month and another for the year.
  • label-color, color of the day, month and year literals.
  • cols, indicates the number of columns. If the value is 3, the first row will display "day", "month" and "year", and the second, the text fields for each one. If the value is 2, the literal will be displayed alongside its text field. Finally, if

the value is 1, the literal and the text field are displayed alternately on different rows..

• chained-menus, will display a disabled text field next to a link that will reroute to a new rendering where you will be asked to enter the year, through either a combo or a menu depending on the device. Once you have entered the year, you will be asked to select the month and, finally, the day, from the options of the possible days for that month in that year. After choosing the date, it will go back to the previous rendering, showing the result in the disabled text field. The date format will depend on the java-date-mask style.
  • years-range, range of years displayed in the combo or on the selectable menu, defined as: first year,last year, e.g. 1990,2032.
• calendar, will display a disabled text field together with a link that will reroute to another rendering displaying a calendar. The calendar will have the option of moving forward and back monthly or six-monthly. As above, it will go back to the original rendering, displaying the selected date in the disabled field with the format indicated in java-date-mask. This display format is only available for html devices and for xhtml devices with specific capabilities, like number of display columns and table layout enabled.
  • colored, indicates whether each calendar week will be displayed with different alternate background colours. If this option is chosen, the control will be displayed with a combination of two colors chosen either by means of background-color1 or background.color2, or, failing this, selected from the most suitable device colors. Its possible values are true/false. The default value is true.
  • background-color1, first of the colors to be combined in a colored style.
  • background-color2, second of the colors to be combined in a colored style.
  • label-color, color of the "month,year" literal.
  • header-color, color of the row indicating the day of the week.
  • outdate-color, background color of the days that do not belong to the month on display.
  • sunday-color, color for displaying links to Sundays.

The link's text that will reroute to another rendering displaying a calendar can be configured on MyMobileWeb_literals_en_US.xml and MyMobileWeb_literals_es_ES.xml files.

  <Literal name="CalendarView">
     <Translation>View</Translation>
  </Literal>

Style: display-chainedmenu-as style If the control is displayed as chained-menu, the value of this style indicates how the chained menu is displayed. The values are the same as for the chainedmenu control.

Style: required style True/false value indicating whether the data item is required

Style: java-date-mask style Java format date mask for building a java.sql.Date object. Its default value is dd-MM-yyyy.

Style: required-mark style Indicates whether a mark needs to be placed at the side of the control signifying that the control is required.

Style: required-mark-char style The mark that will be used to indicate the above. The default value will be "*".

Style: required-mark-position style Position of the mark on the terminal screen. If the value is left, it will be placed right in front of the label for the control and if its value is right, the mark will be displayed on the right of the control. The platform automatically places the mark to the right of the control.

Style: required-mark-color Color of the mark.

Content

<datefield> contains no child tags.

Example

  <?xml version="1.0" encoding="UTF-8"?>
  <?xml-stylesheet href="datefield.css" type="text/css"?>
  <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1">  
     <mymw:head>  
        <mymw:title>Date</mymw:title>    
     </mymw:head>  
     <mymw:body>  
        <mymw:div id="p1" class="nowrap center vertical">
           <mymw:label id="date">Date:</mymw:label>
           <mymw:datefield class="calendar" labelid="date" id="dateField" bind="${ date }" />      
        </mymw:div>    
        <mymw:div id="p2" class="center">      
           <mymw:submit id="submit" value="Send" principal="true"/>      
        </mymw:div>
     </mymw:body>  
  </mymw:document>

  datefield.calendar {
     /* Datefield is displayed as calendar */
     display-as:calendar;
  }

• Datefield examples are available in Basic Examples [1]