DateField
The DateField allows you to enter dates and time in different modes:
- Native Input Mode: When the native mode is used, a new input screen will pop up for the user. This allows your user to use all native input mechanisms that the target device supports but it does interrupt the flow within the application. The Native Input Mode is used by default.
- Direct Input Mode: With the Direct Input Mode J2ME Polish accepts input directly without showing a new popup screen.
<variable name="polish.DateField.useDirectInput" value="true"/>
Design
The above DateField has been designed with following styles:
colors {
fontColor: rgb( 30, 85, 86 );
}
.dateInput {
margin: 1;
padding: 4;
font-style: bold;
font-size: small;
font-color: fontColor;
background-color: silver;
border-color: black;
}
.dateInput:hover {
padding: 3;
border-width: 2;
background-color: white;
}
Additionally following settings have been made:
<variable name="polish.DateField.useDirectInput" value="true"/>
You can use following attributes for designing a DateField:
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| after | - | imageurl | The URL of the image that should be shown after the item in question. | 1.3 |
| always-include | false | true, false | Defines if a style should always be included, even if not used. This is useful for programmatically accessed and for HTML browser styles. | 2.0 |
| background | - | background definition | The background of an item or screen. The default background for items is "none", the default background for screens is a simple white background. | 1.0 |
| background-anchor | left | top | left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom | The orientation of the background in case either it's width or height is different from the item's dimensions. | 2.1 |
| background-height | 0px | dimension (px, %), e.g. 3.5% | The height of the background in pixel or percent, if it should differ from the the item's width. | 2.1 |
| background-width | 0px | dimension (px, %), e.g. 3.5% | The width of the background in pixel or percent, if it should differ from the the item's width. | 2.1 |
| before | - | imageurl | The URL of the image that should be shown before the item in question. | 1.3 |
| bgborder | - | border | The border of an item which is painted before the background. This needs to be a reference to a border defined in the borders section. | 2.1 |
| complete-border | - | border | A border reference from the borders section. The border includes the label of the item and is independent of the item's normal border. | 2.0 |
| border | - | border definition | The border of an item or screen. The default border is "none". | 1.0 |
| colspan | 1 | integer | The number of columns wich are used by the item within a table. | 1.3 |
| complete-background | - | background | A background name from the backgrounds section. The background includes the label of the item and is independent of the item's normal background. | 1.3 |
| complete-background-padding | - | integer | The padding that is added to the complete-background and/or complete-border. Note that this does not change the size of the item, so you might need to adapt margins or normal paddings for your design. | 2.0 |
| content-visible | true | true, false | Activates or deactives the visibility of the item's contents. When the content is not visible, only the label as well as before and after attributes are visible. | 2.1 |
| content-x-adjust | 0px | dimension (px, %), e.g. 3.5% | The horizontal position adjustment of an item's content, use a negative value to move it to the left. | 2.1 |
| content-y-adjust | 0px | dimension (px, %), e.g. 3.5% | The vertical position adjustment of an item's content, use a negative value to move it to the top. | 1.3 |
| filter | - | Defines a filter for the specified UI element. | 2.1 | |
| focused-style | focused | style | The name of the style for the currently focused item, usually applied with a [style-name]:hover construct. | 1.0 |
| font | none | object | The font reference for a StringItem, TextField, etc. | 1.0 |
| font-bitmap | - | string | Defines which bitmap (bmf) font should be used. | 1.3 |
| font-color | black | color | The font color of an item or screen element. | 1.0 |
| font-face | medium | system, default, normal, proportional, monospace | The font face of an item or screen element. | 1.0 |
| font-size | medium | small, little, medium, default, normal, large, big | The font size of an item or screen element. | 1.0 |
| font-style | plain | plain, default, normal, bold, italic, cursive, underlined, underline | The font style of an item or screen element. | 1.0 |
| force-lines | - | true, false | forces the StringItem to display the lines stated in max-lines | 2.1 |
| include-label | false | true, false | Usually the label of an item is rendered separately of the item's content. You can expand the background and border over the label as well using this attribute. | 1.3 |
| inherit | true | true, false | Defines if a style that extends this style should inherit all attributes. | 1.3 |
| inline-label | false | true, false | Inlines the label of an item, so that the content will be on the same row (or at least start on the same row). The label can only occupy 90% or less of the available width, otherwise this setting is ignored. | 2.1 |
| label-style | label | style | The name of the style for the label of the corresponding Item. | 1.0 |
| max-height | - | dimension (px, %), e.g. 3.5% | The maximum height of an item. | 1.3 |
| max-width | - | dimension (px, %), e.g. 3.5% | The maximum width of an item. | 1.3 |
| min-height | - | dimension (px, %), e.g. 3.5% | The minimum height of an item. | 1.3 |
| min-width | - | dimension (px, %), e.g. 3.5% | The minimum width of an item. | 1.3 |
| text-layout | left | top | left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom, horizontal-expand, h-expand, hexpand, expand, vertical-expand, v-expand, vexpand, horizontal-shrink, h-shrink, hshrink, vertical-shrink, v-shrink, vshrink, newline-after, newline-before | The layout of the text, this is useful in combination with min-width or max-width and an item layout that differs from the desired text layout. | 2.1 |
| max-lines | - | integer | the maximum lines to show in a stringitem | 2.1 |
| opacity | 100% | dimension (px, %), e.g. 3.5% | The opacity of an item between 0 (fully transparent) and 100% / 255 (fully opaque). | 1.3 |
| pressed-style | - | style | The style which indicates that an item is being pressed, usually applied with a [style-name]:pressed construct. | 2.0 |
| text-effect | - | Sets a text effect. | 1.3 | |
| text-horizontal-adjustment | 0 | integer | Adjusts the text by the specified number of pixels horizontally. Negative values move the text to the left. | 1.3 |
| text-vertical-adjustment | 0 | integer | Adjusts the text by the specified number of pixels vertically. Negative values move the text to the top. | 1.3 |
| text-wrap | true | true, false | Determines wether the text should be wrapped or whether it should be kept on a single line, even when it is larger than the available width. | 1.3 |
| text-wrap-animate | true | true, false | You can deactivate animations for texts that should not be wrapped and which are too long for a single line. | 2.0 |
| text-wrap-animation-direction | both | both, left, right | The direction of the animation when the text is too wide and wrapping is deactivated. | 2.0 |
| text-wrap-animation-speed | 1 | integer | The speed of the animation when the text is too wide and wrapping is deactivated. | 2.0 |
| view-type | - | fade-in, fade-out, particle, size-decrease, size-increase | Defines another visualization for an Item or a Screen. | 1.3 |
| visible | true | true, false | Toggles the visibility of an item. When an item is invisible, it will not occupy any space. | 2.0 |
| x-adjust | 0px | dimension (px, %), e.g. 3.5% | The horizontal position adjustment of an item, use a negative value to move it to the left. | 2.1 |
| y-adjust | 0px | dimension (px, %), e.g. 3.5% | The vertical position adjustment of an item, use a negative value to move it to the top. | 2.1 |
DateField-Commands
A DateField adds the "Clear" command to the menu when the direct input mode is used. The names of this and other commands can be changed easily using localization in your messages.txt file:
polish.command.clear=Reset
Programming
Use the DateField like the MIDP javax.microedition.lcdui.DateField:
//#style dateInput this.birthdate = new DateField( "birthday:", DateField.DATE ); this.birthdate.setDate( new Date( System.currentTimeMillis() ) );
Please refer to the "datefield" sample application for a working example.
Configuration
There are several preprocessing variables that you can either specify in the <variables> section of your build.xml or in your messages.txt files when using the Localization framework.
| Variable | Default | Explanation |
|---|---|---|
| polish.DateFormat | ymd | The sequence of date parts - use y for the year, m for the month and d for the day.
US American format is for example mdy.
You can also use the abbreviations us for US American, fr for French and de for
German date formats.
For TIME or DATE_TIME DateFields hh:mm will be appended in any case.
|
| polish.DateFormatEmptyText | YYYY-MM-DD | Defines the text that should be shown by an empty DateField - the shown default depends on the polish.DateFormat variable as well
- if polish.DateFormat is for example mdy, the default will be MM-DD-YYYY.
|
| polish.DateFormatSeparator | - | The separator between years, months and days of a DATE or DATE_TIME DateField. |
| polish.DateField.useDirectInputForPointer | false | Enables the usage of a CalendarItem when a DateField is clicked on a touch device. By default the native implementation is used. |
JavaDoc
