Calendar & File Upload Components - Threadinar6

Question

Hi All,
This is the sixth in the "Threadinar" series , please see Threadinar5 at
http://swforum.sun.com/jive/thread.jspa?threadID=99473 for details
In this Threadinar we will focus on the
"Calendar" and "File Upload" Components
Let us begin our discussion with the Calendar Component.
Calendar Component
You can drag the Calendar component "calendar component icon" from the Palette's Basic category to a page open in the Visual Designer to create an entry field with an integrated calendar pop-up to help the user pick dates for the field.
You can also drop the calendar on a container component, like a table cell or group box.
After dragging the component to the Visual Designer, you can work with the following useful properties of the Calendar Component:-
General
* id. Type: String
The name of the Calendar component in the page bean and the JSP file.
Appearance
* columns. Type: int
The number of character columns used to render the component. The default value is 20.
* dateFormatPattern. Type: String
The format of the date to be entered by the user. It is not usually necessary to set this property because a pattern is chosen automatically based on the locale.
If you prefer to specify a date format, click the ellipsis button (...) to the right of the property and select a predefined date format from the property editor's list. You can also add your own formats. If you add a format, the values you can enter are limited to some combination of yyyy for the year, MM for the month, and dd for the day separated by separator characters. Typical separator characters are / (slash), . (period), and - (dash). For example, the following date formats are acceptable:
o MM/dd/yyyy
o yyyy.MM.dd
o MM-dd-yyyy
* dateFormatPatternHelp. Type: text
Text that appears below the date entry field and shows the format pattern that the date entry field accepts. If you have not set the dateFormatPattern property, the help text is chosen automatically for you. If you have set the dateFormatPattern property, you should bind the dateFormatPatternHelp property to a localized string that matches the setting for each locale you want to support.
* label. Type: String
A label that appears next to the text entry field, typically describing what the user is supposed to enter.
o Note: The label property is not as flexible as the Label component. You can use the Label component if you want more control over the label's appearance, such as positioning of the label relative to the component.
* labelLevel. Type: int
A number that affects the appearance of the label. 1 (Strong) is larger and bold. 2 (Medium), the default, is smaller and bold. 3 (Weak) is smaller and normal (not bold). This property takes effect only if the label property is set.
* style. Type: String
Cascading Style Sheet rules (CSS level 2) to be applied to the component. For example:
position: absolute; left: 288px; top: 312px
You can enter values directly or click the ellipsis (...) button to use the Style Editor.
o Note: This property overrides any settings in the theme or the project CSS file for this component. If a style specified in this property does not appear to take effect, it is because an area of the component is obscured by a child component that has different style settings.
For a list of CSS2 style attributes, see the web page at
http://www.w3.org/TR/REC-CSS2/propidx.html
* styleClass. Type: String
A space-separated list of CSS2 style classes to be applied when the component is rendered. The style classes must be defined in the project's style sheet or in the theme's CSS file. If you click the ellipsis button (...), you see a list of all styles you can add to this property. For information on adding CSS classes and rules to the project's cascading style sheet, see CSS Editor.
o Note: See the note above under the style property description for an explanation of why a class added to this property might appear to have no effect on the component.
o Note: If you add a CSS style class from the current theme to your project CSS file and you redefine the style class, the change affects all components that use this style class. However, you can add your own style classes to the project CSS file that redefine the default style classes, and then when you add them to this property, the changes affect only this instance of this component.
For the defaulttheme.jar CSS style classes for this component, see Calendar Component CSS Classes.
Data
* maxDate. Type: java.util.Date
The last date that the user can select. The default value is four years from the date set in the minDate property, for a total span of five years.
* minDate. Type: java.util.Date
The earliest date that the user can select. The default value is the value of the selectedDate property, which defaults to the current date if that property is not set.
* required. Type: boolean
If selected, the user must enter a value for the calendar before the page can be submitted. If you add a Message component to the page and link its for property to this component, an error message will be displayed if the user tries to submit the page without entering a value.
* selectedDate. Type: Date
A java.util.Date object representing the calendar date selected by the user. If you right-click the component and choose Bind to Data, you can bind this property to a data provider or object that can process the user entered value on the server.
When the component displays initially, if this property is not set, its value defaults to the current date. If you provide values for minDate and maxDate, you can also provide a value for this property that initially displays a date in that range.
* validator. Type: MethodBinding
Indicates the JavaServer Faces validator that is called when the value is submitted. A validator ensures that the correct value is entered by a user. Choose a validator from the drop-down list. If you choose (null), no validator is called. If you choose a validator, also select the required property to ensure that the validator is used. For descriptions of JavaServer Faces validators, see the list of topics at List of Validators.
o Note: If you define your own validate method, for example, by right-clicking the component and choosing Edit Event Handler > validate, any value you might have set in this property is overridden.
File Upload Component
You can drag the File Upload component "file upload component icon" from the Palette's Basic category to the Visual Designer to create an entry field and a browse button that opens a file chooser dialog on the local system, enabling the user either to select a file or to type a file name into the entry field. When the page is submitted, a copy of the file's contents is sent to the web application.
The component is similar to an HTML <input type="file"> element.
* Note: This component is neither supported by nor available in portlet projects due to security reasons.
* Note: The size of the component in the Visual Designer might not match the size of the component when it is rendered in a web browser, making the component appear to line up correctly in the Visual Designer, but not when the page is rendered in the user's web browser. Also, the rendering of this component can differ depending on the web browser. Be sure to test the component in the web browsers that you expect your users to use. For example, if you add a width setting to the style property that is smaller than the setting in the columns property, Internet Explorer observes only the width setting, while the Mozilla browser ignores it and sets the width according to the number of characters in the columns property.
The File upload component uses a filter, a com.sun.rave.web.ui.util.UploadFilter object that is configured for you in the web application's deployment descriptor. The UploadFilter uses the Apache commons fileupload package. You might need to change these settings in the following two cases:
* The server holds the uploaded file in memory unless it exceeds 4096 bytes; otherwise, the server holds the file contents in a temporary file. You can change this threshold by modifying the sizeThreshold parameter for the UploadFilter filter entry in the web application's web.xml file.
* By default, the File Upload component can handle files up to one megabyte in size. You can change the maximum file size by modifying the maxSize parameter for the UploadFilter filter entry in the application's web.xml file.
o
A negative value for the maxSize parameter indicates that there is no file size limit. Setting the parameter to a negative value is not recommended for security reasons. For example, if you allow unlimited file sizes, a malicious user could mount a denial of service attack on your site by using extremely large files
* To change the settings for the UploadFilter object in the web.xml file:
1. In the Files window, expand project-name > web > WEB-INF.
2. Double-click the web.xml node to open the file in the XML editor.
3. Click the Filters toolbar button.
4. In the UploadFilter section under Initialization Parameters, you can change the values for the maxSize and sizeThreshold parameters.
The contents of the uploaded file, together with some information about it, are stored in an instance of com.sun.rave.web.ui.model.UploadedFile. By using this object, you can get the content of the file as a String or write the contents to disk, as well as get properties such as the name and the size of the file. In the interest of conserving memory, the contents and file data are only available during the HTTP request in which the file was uploaded. To access the contents of the uploaded file, bind the uploadedFile property to a bean property of type com.sun.rave.web.ui.model.UploadedFile. Have the setter or an action method process the file.
The UploadedFile interface has methods for getting the name and size of the file, determining the file's MIME type (such as text/plain or image/jpeg), getting the file's contents as bytes or as a String, and writing the contents to disk. To learn more, in the Java editor, right-click on UploadedFile in a declaration statement and choose Show JavaDoc from the pop-up menu.
* To set the component's properties, select the component and edit its properties in the File Upload Properties Window.
* Right-click the component and choose one of the following pop-up menu items:
o Edit validate Event Handler. Opens the Java Editor with the cursor positioned in the component's validate method so you can insert code to validate the value of the component.
o Set Initial Focus. Gives this component focus when the user opens the page.
o Auto-submit on Change. Causes the form to be automatically submitted if the value of the component changes. Sets the component's JavaScript onclick property to common_timeoutSubmitForm(this.form, 'component-id');. At runtime, this code causes the form to be automatically submitted if the user changes the component value. Once the form is submitted, conversion and validation occur on the server and any value change listener methods execute, and then the page is redisplayed.
A component configured to Auto-submit on Change can use virtual forms to limit the input fields that are processed when the form is submitted. If the auto-submit component is defined to submit a virtual form, only the participants in that virtual form will be processed when the auto-submit occurs.
o Bind to Data. Bind the component's text property to an object or to a data provider. For more information, see Bind to Data Dialog Box.
o Property Bindings. Bind any of the component's properties to an object or data provider, such as the uploadedFile property to a bean property of type com.sun.rave.web.ui.model.UploadedFile.
o Configure Virtual Forms. Enables you to add the component to a virtual form.
For more details on using the "File Upload Component" Please see this tutorial
http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/file_upload.html
Please share your comments, experiences, additional information, questions, feedback, etc. on these components.
------------------------------------------------------------------------------- --------------------

Answer 1

Of interest relating to file upload component to users : "Saving Uploaded Files Uploaded by the File Upload Component " Check the blog:
http://blogs.sun.com/roller/page/divas