Describes the JViews Diagrammer JSF component set.

The view component is the central component of a JViews JSF application. All the other components depend on or interact with this view. The first and simplest page that can be made with a JViews JSF component is an empty view.

Creating a diagram view

The diagram view extends the common view so the common overview, zoom tool, pan tool, and interactor components are compatible.

To specify an empty view:

This produces a 500 by 300 pixel view.

The namespace jvdf (for JViews DiagrammerJSF) must be declared in the page as follows:

Using the style to specify the size of the component is preferable, but an alternative is to use the width and height attributes.

Creating a view with JViews Framework

This view can be extended to make more specific components.

Specify an empty view.

This produces a 500 by 300 pixel view.

The namespace jvf (for JViews Framework JSF) must be declared in the page as follows:

Using the style to specify the size of the component is preferable, but an alternative is to use the width and height attributes.

The boundingBox property specifies the area in manager coordinates represented by the view. This property can be used to set the initial visible area.

The changeBoundingBox property can be used during a JSF action to reset or modify the visible area.

This section shows the use of the boundingBox and changeBoundingBox properties.

The following code example shows how to control the initial display of the view.

The following code example shows how to reset or change the visible area of the view.

This code will only work in the JSF_CONTEXT (and not in the IMAGE_SERVLET_CONTEXT ), since it requires the JSF cycle to refresh the whole page.

At the JViews Framework level

This section shows the use of the boundingBox and changeBoundingBox properties.

The following code example shows how to control the initial display of the view.

The following code example shows how to reset or change the visible area of the view.

This code will only work in the JSF_CONTEXT (and not in the IMAGE_SERVLET_CONTEXT ), since it requires the JSF cycle to refresh the whole page.

Scroll bars allow you to scroll a view horizontally or vertically.

You can assign the following values to the scrollbar attribute:

The following code example shows how to enable scroll bars in a dashboard view using the scrollbar attribute in the dashboardView tag:

The following code example shows how to enable scroll bars in a diagram view using the scrollbar attribute in the diagrammerView tag:

When the zoom level is equal to 1, the manager content is adjusted to the bounds of the JSF view so as to be displayed entirely. Consequently, a zoom level of n means that the content is scaled by a factor of n. For example, a zoom factor of 2 means that the manager content is displayed double its size.

By default, the view is constrained by the manager content bounds. The direct consequences are that:

This constraint can be removed by setting the constrainedOnContents property to false.

The zoom level applied to the view by using the JavaScript™ zoom interactor can be free or constrained to specified zoom levels. In the free zoom mode, the only constraints are the minimum and maximum zoom levels. The default value of the minimum zoom level is set to 1 and the default value of the maximum zoom level is set to 10. These constraints can be customized with the minZoomLevel and the maxZoomLevel properties respectively.

To specify fixed zoom levels, use the zoomLevels property.

When this property is set:

Fixed zoom levels must be used in order for a tiled view to be cached on the client-side.

This section shows how to use these properties in JViews Diagrammer JSF.

This section shows how to use these properties with JViews Framework.

Use the progressiveZoom attribute to enable the zoom interactor to perform progressive zooming in a diagram view. The default value for this attribute is false.

The following code example shows how to enable progressive zooming:

The visibleLayers property contains the list of the names of the visible manager layers displayed by the view.

At first, all the layers are visible by default. To specify the visible layers at initialization, use the visibleLayers JSP™ tag attribute.

Then, if a JSF action adds or removes some layers, the values specified by this property can be updated.

To specify the initial visible layers:

To update the list of visible layers:

To specify the initial visible layers:

To update the list of visible layers:

The easiest way to configure the style and the data source of a diagram component is to set a JViews Diagrammer Designer project to the diagram view component. This is done with the data attribute of the tag that points to an idpr file.

For more information about the Designer for JViews Diagrammer, see the Using the Designer documentation.

You can set the CSS style sheet and data source separately.

If a project is not already set and you want to set a data source to a diagram, a data source component should be connected to the diagram.

Using an XML file

An easy way to connect to a data source is to use an XML file in diagram format.

Using value binding

Another way to specify a data source is to use a value binding. In this case, the data model will be provided by a bean property:

The bean should then provide the data model through its getDataSource method:

To use the value binding attribute, the bean must be declared in the faces-config.xml file or the managed-beans.xml:

For further information about these configuration files, see the http://http://java.sun.com/j2ee/javaserverfaces/reference/index.html JavaServer™ Faces specifications.

DataSource and XMLDataSource components

Another way of setting a data source to a diagram view is to use the dataSource and XMLDataSource components. These components allow you to create and configure a data source. The data source is stored in memory and is ready to be set on a diagram component.

In this example, we create two data sources: one filled from an XML file and another one from a bound diagram data source.

The two data sources are present in memory. It is then possible to query the server for switching the data source and updating the image without a complete page refresh by clicking one of the command buttons. To perform this task, we use the client-side JavaScript™ proxy of the diagram view.

The initial data source of the diagram view is configured through the data tag attribute that must match the id attribute of the desired data source component.

See JavaScript objects to learn how to use these proxies.

The diagrammer property allows you to bind an existing IlvDiagrammer instance to be reused by the diagrammerView component.

After you set the data source, you can customize the way it is displayed. You can use Cascading Style Sheets (CSS) to style your data. CSS can be applied with a styleSheets attribute:

The CSS file must be present in the data directory of the Web application. The style sheet file specification can also be a value binding, that is, a value provided by a bean.

The image map allows you to have images on the client-side with an attached map that points out certain hot spots or clickable areas. A typical use case for image maps is for displaying tooltips.

The role of the image map generator is to configure the attributes and JavaScript™ handlers for each zone of the image map.

See IlvSDMImageMapAreaGenerator and the associated sample Diagram Gallery for details of how to implement an image map object in JViews Diagrammer.

See IlvImageMapAreaGenerator and the associated sample Using a Manager View for details of how to implement an image map object at the JViews Framework level.

To add an image map and to display it, use the following code.

You can use the JavaScript representation of the view to show or hide the image map.

At the JViews Framework level

To add an image map and to display it, use the following code.

You can use the JavaScript representation of the view to show or hide the image map.

Hiding an image map for use with interactors

The image map must be hidden to use interactors. The following code sample shows how to hide the image map when another button in the same button group is clicked.

To connect a message box to a view, use the following code:

The messages issued are now displayed in the message box.

You can now install interactors on the view to interact with it:

The link between the view and its interactor is done through the identifier of the interactor. It is now possible to zoom on a view area by dragging a rectangle on the view.

The select interactor allows you to select one or more objects and move them without performing a full refresh of the page.

To define one object, use the following tag:

To set the object on the view, use the following tag:

Move selection

The select interactor allows you to move the selection if the following conditions are met:

Basic selection management configuration

You can customize the way the selection is performed and displayed by using a facet on the diagrammerView tag, as follows:

The selection manager has two display modes:

The default mode is the image mode.

Other parameters can be configured on the selection manager, like for example the line width or the color of the selection rectangle used in regular selection mode:

Information on selection

You can register a listener that will be called when the selection changes:

The onSelectionChanged attribute value is JavaScript™ code that is executed when the selection has changed. The execution context defines the variable selection, which stores the current selection as an array of IlvSelectionRectangle instances.

ThJavaScript code can be a function follows:

Besides ID and bounds properties of the selected object, you might want to get also the properties of the selected node or link in the JViews Diagrammer model.

This can be done by configuring a property accessor on the selection manager:

With:

The IlvFacesDiagrammerPropertyAccessor contains several methods that can be either called or redefined to configure or specialize the way it gives access to model properties.

Once done, in the JavaScript you can access all the methods of the IlvSelectionRectangle and code as follows:

In addition, if the diagrammerView has been set as editable:

you can also set properties on the client such that they can be committed back to the model on the server. You can do this by using the following code:

where:

To obtain selected object properties information on the client side while you are running the selection in image mode, you need to force an additional request by setting the property forceUpdateProperties to true. In regular mode this feature is available without any overhead.

Select an object by its identifier

Objects can be selected on the client side by their identifier by means of the following JavaScript method: selectById.

The identifier of an object is retrieved through the SDM model (see Implementing the behavior of data model objects). You can also retrieve the identifier by using directly the JViews Diagrammer method getId.

You can select one object by means of the following JavaScript method call:

This method call deselects the objects currently selected and selects the object with the identifier nodeId. You can extend or reduce the selection by selecting or deselecting a node as follows:

This method call keeps the existing selection and selects the object with the identifier nodeId if it is not already selected, otherwise it will deselect it.

Clear the selection

To clear the selection use the following JavaScript method call: deselectAll.

For example:

Select all the objects

To select all the selectable objects use the following JavaScript method: selectAll.

For example:

Image mode or Rectangle mode

Using one mode rather than the other depends on your criteria: performance or graphic feedback.

Image mode provides a better graphic feedback but is slower because of the image generation and the need for an extra request to get additional information about the selection on the client.

Rectangle mode offers basic graphic feedback but better performance.

Describes tooltip and highlight interactors.

The Hitmap Technology

Rogue Wave® JViews introduces a new interaction technology named Hitmap that considerably improves the responsiveness and the interactivity of JViews web applications. Hitmap technology enables you to provide pure client-side interaction capabilities in JViews web applications without requiring round-trips to the servers.

Highlighting and tooltips are typical interactions that you can perform using Hitmap technology. This section provides an overview of Hitmap technology.

For detailed instructions on how to perform highlighting and tooltips using Hitmap technology, see Highlight interactor and Tooltip interactor.

Background

The web was originally designed as a text-oriented distributed hypertext environment. Providing rich interactive graphics on this platform is much in demand. However, this demand has not yet been met with a satisfying, simple, and unified solution.

Three approaches compete to provide rich interactive graphics on the web:

The main drawback of the thin-client approach is the limited interactivity it provides. Each time the user clicks or performs a graphical interaction, a round trip to the web server has to be made to provide an updated representation of the display. JViews introduces the Hitmap technology to improve this situation.

In the context of graphical thin-client web applications, Hitmap technology performs fast hit testing on arbitrary graphic objects, thereby enabling the application to associate application-related information to a point or an area designated on the screen.

For example, the following thin-client web application screen displays a user-editable workflow network:

The image in the center is a bitmap generated by the server and displaying some network data. Without the Hitmap technology, clicking or hovering over a node to highlight this node and display related information requires sending to the server the coordinate of the point clicked, having the server compute the object that corresponds to this point, and returning a newly computed image representing the highlighted object (in orange), as well as the application data associated to this object (here, the phrase IlvSDMCompositeNode ). This greatly reduces the interactivity and the responsiveness of the thin-client solution.

What would be preferable instead is a means to retrieve, inside the client web browser, the semantic data associated to the object and the boundaries of the object to highlight, and then to execute local scripts to perform the highlighting and tooltip display, or any appropriate feedback, locally.

The natural (trivial) approach to implementing such graphics-to-application domain mapping in graphical applications is to maintain a data structure of graphic objects (polygons, text areas, rectangles, icons, and so on) and to associate to each of those objects a pointer to application domain objects. Hence, when the mouse is pointed at a region of the application display, traversing this data structure allows the application to retrieve the intersecting objects and from them to retrieve the semantic data associated with them. While this approach is easy to implement and is used in regular graphical user interfaces, it suffers some drawbacks in thin-client applications, which Hitmap technology resolves.

With Hitmap technology, the application defines a buffered and raster data structure that allows the application to reduce the computation cost when doing hit tests. The “color indices” in the associated bitmap do not represent real colors to display, but instead indices in an array of application data objects sent separately. Hence, this raster map embeds both the geometry of the graphic representations and the mapping to the related application objects. Because there are a limited number of objects that are useful to represent on the screen, the total number of “colors” used is very low and these images are highly compressible and very fast to generate. Thus, you can minimize the client-server bandwidth and extra server-side computation, while providing precise geometric description and application object mappings.

With Hitmap technology, the hit test and also the highlighting can be performed offline and do not cost a round-trip to the server. This gives JViews web applications excellent responsiveness and has a number of useful applications.

Data structure of the Hitmap

The Hitmap uses a raster data structure. Compared to the bitmap data structure that gives the color information of each pixel, the Hitmap data structure gives the hit test information of each pixel.

The set of pixels that have the same ““color index”” in the hitmap is called a region. A region consists of those pixels of a graphic object that are not hidden by other graphic objects.

For example, the following image shows two regions, coming from two graphic objects: a red line and a blue square.

The structure in the image on the left shows how the color information is represented. The structure in the image on the right shows the hit test information of the same bitmap, where the number 1 means that the pixel belongs to the first region (the blue square pixels that are not hidden by the red line) and the number 2 means that the pixel belongs to the second region (the red line).

You can consider a Hitmap as an indexed bitmap. Given the x and y coordinates of the mouse position, you can immediately tell to which graphic object the pixel belongs. This is why the hit test can be done extremely fast. Given the index of a region, you can easily find all pixels that belong to that region. This provides a fast way to highlight graphic objects.

How to generate the Hitmap

The Hitmap can be generated using the Java 2D™ drawing pipeline with a customized raster composite. Compared to a normal raster composite that writes pixel color information to the buffer when rasterizing graphic objects, the Hitmap composite writes the index of the graphic object being rendered to the raster buffer. Other 2D drawing pipelines can also be used to render Hitmaps.

For example, when rendering the red line shown in the preceding image, a normal raster composite marks the corresponding pixels as red. However, the Hitmap composite assigns the index of the red line, in this example 2, to the corresponding pixels.

The Hitmap generation is similar to normal painting but costs less in CPU time. Tests show that generating and compressing a Hitmap requires only 20% of the time consumed by the normal rendering and compressing of the same image.

How to associate application data to Hitmaps

When the server generates the Hitmap, it uses a corresponding table of application data objects. This table is kept and transmitted to the client software in addition to the bitmap and the Hitmap. JavaScript methods are provided (embedded in the client's HTML page) to retrieve the pixel color of a given point in response to a user mouse event, and from this color information, turn it into an integer (the region index) that is used to retrieve the application data associated with the area of the display on which the user clicked.

The following are examples of Hitmap use cases and applications:

Tooltip interactor

The tooltip interactor allows you to show customized tooltips when moving the mouse over graphic objects. Using Hitmap technology, the tooltip can be constructed and displayed on the client side without a round-trip to the server.

JViews provides a JavaServer™ Faces (JSF) component for this interactor. To use the tooltip interactor you must first insert the tooltip interactor tag into your JSF page.

To define one object, use the following tag:

You can use the interactor in a <jvf:view> view as follows:

You can use the interactor in a <jvdf:diagrammerView> view as follows:

The tooltips are visible when you move your mouse over the graphic objects.

The tooltip interactor works with both a <jvf:view> and a <jvdf:diagrammerView>.

The method described in the previous section shows you how to use the tooltip interactor with a <jvf:view> and a <jvdf:diagrammerView>. However, you might want to have both the pan interactor and the tooltip interactor working at the same time. The interactor group is designed for this purpose.

You can make two interactors work together as follows:

For more information, see <installdir> /jviews-diagrammer/samples/diagrammer/jsf-diagrammer-gallery/index.html

Using the tooltip template

The tooltip template allows easier tooltip styling with enhanced performance. To use the tooltip template, you must specify the value of the template attribute for the tooltip interactor, as shown in the following example.

In order to work with the tooltip template feature, the tooltip data for the Hitmap information that you generated on the server must be in a valid JSON format. For example:

For more information about Hitmap information customization, see Customizing Hitmap information.

There are two types of tooltip template: the HTML template and the JavaScript callback.

Using the HTML template

To use the HTML template, you can create the template as shown in the following example.

In the preceding code example, <%properties%> corresponds to the key of your JSON object generated from the server. This will be replaced by the value of the key of your JSON object when the tooltip is displayed.

Using the JavaScript callback

To use the JavaScript callback, you need to write the JavaScript callback to show the tooltip which will be invoked when the tooltip is displayed.

When writing your own JavaScript callback, there are two parameters for you to use in your callback function:

The following code is a JavaScript callback sample which generates a dynamic tooltip.

After creating the JavaScript callback, you can write the following code to invoke it with the tooltip interactor:

For more information, see the <installdir> /jviews-diagrammer/samples/diagrammer/jsf-diagrammer-gallery/index.html sample.

Highlight interactor

The highlight interactor allows you to highlight graphic objects when moving the mouse over them. Using Hitmap technology, the highlighting effect can be constructed and displayed on the client side without a round-trip to the server.

JViews provides a JavaServer™ Faces (JSF) component for this interactor. To use the highlight interactor you must first insert the highlight interactor tag into your JSF page.

To define one object, use the following tag:

You can use the interactor in a <jvf:view> view as follows:

You can use the interactor in a <jvdf:diagrammerView> view as follows:

The highlight effects are visible when you move your mouse over the graphic objects.

The highlight interactor works with both a <jvf:view> and a <jvdf:diagrammerView>.

The method described in the previous section shows you how to use the highlight interactor with a <jvf:view> and a <jvdf:diagrammerView>. However, you might want to have both the pan interactor and the highlight interactor working at the same time. The interactor group is designed for this purpose.

You can make two interactors work together as follows:

For more detail, see <installdir> /jviews-framework/samples/jsf-framework-demo/srchtml/framework7.jsp.html.

Tips for using multiple interactors

You can make some interactors work together at the same time.

The following example shows how to make a pan interactor, a highlight interactor, and a tooltip interactor work together:

For more detail, see <installdir> /jviews-framework/samples/jsf-framework-demo/srchtml/framework7.jsp.html.

Customizing Hitmap information

You can customize Hitmap information to generate specific information from the server side. For example, to highlight a group element or change the cursor when you move the mouse over a certain type of element..

The server side code will generate Hitmap information in JSON format for the Hitmap request.

On the server side you must do the following:

Your servlet must be a subclass of IlvDiagrammerServlet or of one of its existing subclasses, for example IlvFacesDiagrammerServlet.

For JSF, configure the servlet using the servlet attribute in the JSF view component.

Set the servlet attribute of JSF view component. For example:

You must extend IlvHitmapDefinition. For example:

Then add, for example, the following code in the web.xml file and add the hitmap init-param for your servlet.

For more information, see the <installdir> /jviews-diagrammer/samples/js-diagrammer-editing/index.html sample.

If you want to create nodes and/or links on the view, you have to set the editable mode on the view component as follows:

For example, by calling the following extract of JavaScript™ in response to a user action, an interactor will be set on the view. This interactor allows you to create a link with the thetag tag in the JViews Diagrammer model attached to the view.

When the second parameter is set to true, the create action is available only once. If you want to have the interactor available permanently, you can ignore that parameter.

Similarly, you can set a node creation interactor:

In addition to the tag name, the interactor can be configured to set some initial properties on the selected object at creation time:

In order to work correctly, a property accessor must be set and configured on the facet (see Information on selection).

If you want to be able to delete selected nodes and links on the view, you have to set the editable mode on the view component as follows:

This allows you to ask for deletion of the selected objects on the client side by using the following JavaScript™ code:

The resize interactor allows you to resize a selected node. Because this interactor works together with the select interactor, an interactor group consisting of both these interactors must be defined. If the selected node is resizable, the rectangle representing the selection is displayed on top of the view with 8 handles attached.

The following code example shows the tag needed to define one object:

The attribute selectionResizableClass is used to specify the class that implements the IlvSelectionResizable interface. This class determines whether the selected node is resizable or not.

For more detail see <installdir> /jviews-diagrammer/codefragments/jsf/srchtml/code_fragment23.jsp.html

The following code example shows how you can set the object on the view:

Set the attribute actionName to resizeNode.

In the interactorGroup definition the values of the attribute interactors must be listed in order with select preceding resize. This order is necessary because the resize interactor depends on the select interactor.

The link interactor allows you to move and reshape a selected link (polyline). It allows you to add points, remove points and move points in the selected link. Removing end points of a link deletes the link. Because this interactor works together with the select interactor, an interactor group consisting of both these interactors must be defined.

The following code example shows the tag needed to define one object:

Set the attribute modifier to one of the following values [ alt, shift, ctrl ]. The user can then hold down this modifier and use the mouse to reshape the selected link.

The following code example shows how to set the object on the view:

In the interactorGroup definition the values of the attribute interactors must be listed in order with select preceding linkInteractor. This order is necessary because the link interactor depends on the select interactor.

An overview displays the global area and a rectangle corresponding to the area visible in the main view. You can move this rectangle to change the area visible in the main view. This overview is connected with the view in the usual way with the identifier.

You can set whether the Overview aspect ratio is enforced by the View aspect ratio size.

The default setting for the ignoreContentAspectRatio attribute is false (disabled). When you set this flag to true (enabled) you keep the aspect ratio of the Overview the same as the View aspect ratio.

When you disable this flag, the initial aspect ratio of the Overview is defined to be the smallest area around all visible objects.

The most common reason for you to enable this attribute is because you want to keep the size of the Overview constant, when the View content is being modified.

See <installdir>/jviews-diagrammer/samples/diagrammer/jsf-diagrammer-gallery/index.html<installdir>/jviews-diagrammer/samples/diagrammer/jsf-diagrammer-gallery/index.html for more information.

The zoomTool component that shows a set of buttons. Each button corresponds to a zoom level; clicking the button will zoom the view to this zoom level. The button corresponding to the current zoom level is visually different from others so that you can tell what the current zoom level is. The component can be vertical or horizontal.

The panTool component is a component that allows you to pan the view in all directions.

The connection to the view will be done by setting the identifier of the view to the viewId property of the tools.

The pop-up menu component allows you to display a static or contextual menu when the application user right-clicks in the view.

For use of menus in Facelets environments, see also Supporting Facelets and Trinidad.

Pop-up menu tag in the view tag

Since the pop-up menu is attached to a view, its JSP™ tag must be enclosed in the JSP tag of the view.

The pop-up menu can be contextual or static. The following examples show contextual pop-up menu tags used in the view tag.

The following code is for JViews Diagrammer.

The following code is for JViews Framework.

Static pop-up menu

The pop-up menu is static and fully on the client side.

To define a menu and menu items in JViews Diagrammer use the menu, menuItem, and menuSeparator tags as shown in the following example.

To define a menu and menu items at the JViews Framework level use the menu, menuItem, and menuSeparator tags as in the following example.

Contextual pop-up menu

The pop-up menu is dynamically generated on the server side by a menu factory depending on:

To specify the factory use the factory or the factoryClass attribute of the contextual pop-up menu tag.

The factory must implement the IlvMenuFactory interface.

The pop-up menu is stylable by setting the following pop-up menu properties to a CSS class name:

The following set of code examples shows CSS styling in a pop-up menu.

Then continue with the code for a specific JViews JSF component.

The jvdf:dashboardView component allows you to display a dashboard diagram. This JSF component manages an IlvDashboardDiagram instance to display the image. This class is an IlvDiagrammer subclass, therefore the diagrammerView and the dashboardView share a lot of properties. This component can be used in the same way as the diagrammerView, except that the only way to set data is to use the data attribute (no project, style sheets properties). This attribute only accepts idbd files.

The dashboardDiagram property allows you to bind an existing IlvDashboardDiagram instance to be reused by the dashboardView component.

To implement tiling in the view you must specify the tile size. Other attributes, that is, the zoom levels and the dynamic or static layers, must be set to make tiling fully operational.

Install listeners to send notifications for actions executed on, the server side, such as when a graphic object is clicked, selected, or deleted.

To implement and configure a server action listener:

Install listeners to send notifications for client-side actions, such as when a graphic object is clicked, selected, dragged-and-dropped, zoomed, or deleted.

To implement and configure an intercept interactor:

As only one interactor can be installed in the view component, you can use an interactor group to combine multiple interactors to make them work simultaneously for the view. Not all the interactors, however, can work together. Some of them can work together based on the Hitmap technology. Some of them conflict with each other because they use the same mouse event to perform the operation. The following table shows interactors which conflict which other and therefore cannot be used simultaneously.

You must add code, as shown in the following example, to the JSP page to use interactors for multiple purposes.

For more details, see the sample <installdir> /jviews-diagrammer/samples/diagrammer/jsf-diagrammer-editing.

When the view is tiled, a server-side caching mechanism for tiles of static layers can be installed by using the tileManager property. No server-side caching mechanism is installed by default.

The following code example shows server-side caching of tiles.

See Server-side caching and the tile manager for more information.

The user session expires after a certain period of inactivity, usually defined in the Web deployment descriptor.

JViews components are stored in the HTTP user session. For example, after the user session expires, queries to update the image fail.

The beforeSessionExpirationHandler property allows you to add a JavaScript™ handler that is invoked when the user session is about to expire.

For example, to keep the session alive as long as the browser page is open, use the following code:

This example shows how to query an image and keep the user session alive.

Note the use of view, the implicit object that represents the view JavaScript proxy. The internal timer is reset only by requests issued by Rogue Wave® JViews objects. If the application implements other requests that do not refresh the image, this timer could be inaccurate. To reset the timer manually, use the following JavaScript code:

where viewID is the value of the id property of your view component.