What are Layers
Normally when you work with InfiView applications you only have one viewport. With layers it is possible to have multiple view ports sitting on top of each other. The different layers can then be blended together, hidden and revealed so that data can be visually mixed. This enables you to create many interesting new features in your applications. A map application could for example have bitmap graphics on one layer and vector edges displaying routes in another layer. A third layer could display street names etc. The user would then be able to turn these layers on and off as desired.
It should be noted that there is no class in InfiView called "Layer". Instead the viewports themselves become layers when they are added to a special container component called LayerPane. Sometimes when we talk about layers we then actually mean Viewports inside a LayerPane.
The LayerPane Component
To create a layered InfiView application you create several view ports and add them all to a LayerPane component. The LayerPane component only takes infiview.AbstractViewport derivates as children. The LayerPane completely takes over the control of size and position of all its Viewports and positions them exactly on top of each other. All Viewports are automatically kept in sync by the LayerPane. Zooming and panning in the LayerPane translates to all its Viewports.
Because Viewports are stacked on top of each other, the top-most Viewport shadows underlying Viewports. The initial order of the Viewports is determined by the order they are added to the LayerPane. The first viewport will be at the bottom of the stack and the last will be at the top. If you wish to override this order you can use z-index.
Because layers, and their nodes, shadow each other visually, this affects event propagation. When you for example click a node and when two nodes are on top of each other, only one node will receive the event. In essence, nodes shadow each other from receiving events. When you click with the mouse in the LayerPane the top most layer receives the event. If there is no node at that location in the top layer, the event will propagate to the lower layers. It will search the Viewports until it finds one with a node in the mouse location and select that node. If no node is found, it will start marquee selection for the top Viewport. The default search order (or propagation order) is the reverse of the order the Viewports were added. This means that the last added viewport will receive events first.
You can override this order in the ADF using an order number attribute. A low order number means early in the propagation order.
<iv:LayerPane id="lp" top="0" left="0" bottom="0" right="0" > <iv:InfiViewViewport id="vp1" iv:LayerPane.order="1" ...
var vp1 = application.getComponentById("vp1 "); lp.setOrder(vp1, 0);
If you move a layer to the top by setting its order other layers will be shifted down in the order queue.
It is also possible to force the propagation skip a specific layer. It can be useful if you have a layer where the opacity has made is so transparent that it is unlikely that the user want to manipulate nodes on it. In xml layers can be skipped like this:
<iv:InfiViewViewport iv:LayerPane.skip= "true" ...
Blending layers involves setting opacity, background color and modifying the order on the layers. When a layer or a node covers another layer and it's nodes, we say that it "shadows" the other layer. Here are some useful facts that will make you understand how it all works.
- By setting the background color on a layer you make it opaque. It will completely cover layers behind it in the visual stack and any nodes they may contain.
- If you don't set the background color of a layer, its content area will be transparent but its nodes will still be fully opaque and hence shadow lower order nodes.
- Two opaque layers can be made semi visible at the same time by modifying the opacity of the higher layer.
- Opacity affects both the nodes of a layer as well as its background.