Other Output Components

Browser Frame (forms::BrowserFrame)

The Browser Frame renders as a view with the URL content. The target URL is defined in the URL property as a String, for example "http://www.whitestein.com".

To URL is loaded when the frame is initialized; to refresh the Browser Frame, call its setURL() method.

Image (forms::Image)

The Image ( ) component renders an image which is defined as a DownloadableResource object of the image component.

The image objectj can be:

• ThemeResource which defines a file from the current CSS schema
• FileResource with a file uploaded with your modules
• ExternalResource with an external URL to an

Displaying an Image

To display an image in your form, do the following:

1. Insert the Image ( ) component into your Form.
2. In the Properties view, define the icon source in the resource expression or with the setSource() method.

Note that the component does not check the type of the source. If you serve it a source of an incorrect type, it might result in a runtime exception or the content might not be displayed.

Expression that adds an Image located in the module to a Vertical Layout

def Image image := new forms::Image();
image.setSource(new FileResource({ -> getResource("image description", "resource/picture.jpg")}));
 
myVerticalLayout.addComponent(image);

Expression that an Image component with an image located in the current theme

def Image image := new forms::Image();
image.setSource(new ThemeResource("icons/auth_delegate.gif"));
image

Download (forms::Download)

The Download ( ) component is rendered as a link or button, which downloads a resource when clicked. The resource can be a file uploaded with your modules, an external URL resource, or a file from the current application schema.

Downloads define the following type of data sources:

• ExternalResource: resource accessed via a URL
• FileResource: resource that holds a File object
• ThemeResource: resource from the current CSS theme

Defining a Download Button or Link

To create a Button or Link that starts a file download when clicked, do the following:

1. Insert the Download ( ) component into your Form.
2. In the Properties view, define the resource expression.
3. In the Style property, define whether the component should be rendered as a link or as a button.

Expression that returns a Download component

new Download(
  "Download",
  new FileResource({ ->
    getResource("form_components", "output/myfile.txt")
  }),
  DownloadStyle.Link)

Form with a Download component

Calendar (forms::Calendar)

Important: In the Vaadin 8 implementation, this component is not supported. For more information, refer to information on Vaadin 8 upgrade.

The Calendar component serves to display and manage event data. The calendar API required that the event data be wrapped in CalendarItems.

Calendar can be rendered in the month, week, and day mode.

Calendar entries are defined as a list of CalendarItems returned by the calendar item provider, that can be either a ClosureCalendarItemProvider or a ListCalendarItemProvider.

new ClosureCalendarItemProvider(
  { from, to ->
    collect(
      //get data of event that occur within the displayed period:
      select(
        tripEvents,
        {e:TripEvent -> 
            e.startDate <= to || e.endDate >= from
        }
      ),
      //Create CalendarItems over the data:
      {e:TripEvent ->
        new forms::CalendarItem(
          allDay -> true,
          data -> e, 
          endDate -> e.endDate,
          caption -> e.description,
          startDate -> e.startDate)
      }
    )
  }
)

In the component, you can handle the following events:

• creating a new calendar item: the CreateEvent is thrown when the user clicks on a day field or drags the mouse pointer over multiple fields

  TripCalendar.setCreateListener (
    { x:forms::CalendarCreateEvent ->
       //display popup for event creating (event is created on button click
       //in the popup and added to the business data):
       createPopup(x.from, x.to).show();
       TripCalendar.refresh()
    }
  );
  

• editing a calendar item: the EditEvent is thrown when the user clicks an event text

    TripCalendar.setEditListener({
    x:forms::CalendarEditEvent -> createPopup().show();
    TripCalendar.refresh()
  });

• rescheduling a calendar item: the RescheduleEvent is thrown when the user drag-and-drops an existing item

  TripCalendar.setRescheduleListener({
    x:forms::CalendarRescheduleEvent ->
    def TripEvent te := x.data as TripEvent;
    te.startDate := x.from;
    te.endDate := x.to;
    TripCalendar.refresh();
  });

Map Display (forms::MapDisplay)

The Map Display component renders as an OpenStreetMap with the defined center location, zoom, and one or multiple markers. You can work with map markers with the maps methods addMarker(), removeMarker(), onMarkerClick(), and onMarkerDrag().

Note: To work with the client GPS coordinates, use the Forms.detectLocation() method.

Map Properties

• Center: coordinates of the center of the rendered map
• Zoom level: default zoom on initialization and refresh defined as an Integer with value 0-18 (0 being the lowest zoom with the entire Earth displayed)
• On click: closure executed when the map is clicked

PDF Viewer (forms::PdfViewer)

The PDF Viewer component, PDFViewer, displays a PDF defined as a FileResource; for example, new FileResource({->getResource(thisModel().name, "MyDoc.pdf")}).

When opening a PDF in your browser, the browser saves data about the currently open page, applied zoom, and sidebar position. By default, the PDF Viewer component applies this data when it is available: you can enable or disable this behavior with the restoreLastPdfState() method.

On the first load, the viewer might need a few seconds to load its resources.