Customizing Web Components Dock Manager

O componente Infragistics Web Components Dock Manager fornece as propriedades necessárias para personalizar ainda mais o layout para atender aos requisitos específicos do aplicativo. Vamos nos aprofundar e explorar como o Web Components DockManager permite que você crie interfaces de usuário excepcionais e aumente a produtividade de seus aplicativos!

Proximity Dock

Nesse modo, os indicadores do joystick ficam ocultos e o encaixe pode ser realizado arrastando um painel para perto da borda de outro painel. Ao arrastar um painel, quando o cursor do mouse atinge a área correspondente à posição do encaixe, uma visualização do encaixe é mostrada. Ao passar o mouse para cima, o painel arrastado é encaixado no local visualizado. Para habilitar o encaixe por proximidade, basta definir a proximityDock propriedade como true.

this.dockManager.proximityDock = true;

Inner Docking

Para encaixar à direita um painel arrastado 1 no painel 2, o cursor deve estar na área definida pela borda direita do painel 2 e a borda direita deslocada para a esquerda. A distância de deslocamento é especificada como um limite de encaixe de proximidade e é definida como um valor de 50px. Nos casos em que há um divisor, o encaixe pode ser realizado de ambos os lados do divisor.

Outer Docking

Para executar o encaixe externo, você deve primeiro atender a critérios específicos. No Dock Manager, o encaixe externo só é permitido em um host de documentos, o que significa que você encaixará o painel de destino nas regiões externas do host do documento.

Para executar um encaixe superior externo, por exemplo, deve estar dentro da região definida pela borda superior do host do documento e permanecer dentro do deslocamento da borda superior. A distância de deslocamento é especificada como um limite externo de encaixe de proximidade e é explicitamente definida como um valor de 25px. O valor do limite de encaixe de proximidade de 50 px permanece inalterado, o que significa essencialmente que, nesse cenário, apenas uma área de 25 px está disponível para encaixe interno. Nos casos em que há um divisor dentro do host do documento, o encaixe externo pode ser executado em ambos os lados do divisor.

NOTA: Quando o encaixe de proximidade está ativado, os usuários não podem executar um encaixe externo para as posições esquerda e direita e superior e inferior a partir de um único painel. Por exemplo, em um cenário em que dois painéis divididos estão presentes com um divisor entre eles, os usuários poderão executar apenas um encaixe externo esquerdo quando o painel arrastado estiver sobre o painel dividido esquerdo e vice-versa.

Experimente você mesmo no exemplo abaixo:

Focus Panes Programmatically

O focusPane método permite que os desenvolvedores concentrem dinamicamente e programaticamente um painel específico dentro do layout, fornecendo o contentId painel desejado.

this.dockManager.focusPane('content1');

Ao usar o focusPane método, o comportamento varia dependendo do estado do painel de destino. Veja como funciona:

1. Painéis flutuantes: se o painel estiver flutuante, a invocação focusPane o colocará em foco, definirá como o activePane e garantirá que ele apareça na parte superior de quaisquer outros painéis flutuantes.

2. Painéis desafixados: quando o painel de destino é desafixado, focusPane o painel voará para seu estado aberto.

3. Regular Pinned Panes: For regular pinned panes, focusPane will set the pane as the activePane.

Ao utilizar esse método, os desenvolvedores podem controlar sem esforço a visibilidade e o posicionamento dos painéis com base na interação do usuário ou nos eventos do aplicativo.

Experimente você mesmo no exemplo abaixo:

Auto-hide Pane Headers

Com a showPaneHeaders propriedade do DockManager, os desenvolvedores agora têm a flexibilidade de controlar a visibilidade dos cabeçalhos do painel dentro do layout. Por padrão, showPaneHeaders é definido para always garantir que os cabeçalhos do painel estejam sempre visíveis. Quando definido como onHoverOnly, todos os cabeçalhos do painel ficarão ocultos até que você passe o mouse sobre a borda superior de um painel de conteúdo. O cabeçalho do painel correspondente aparecerá e se ocultará suavemente quando o mouse se afastar. Dê uma olhada no exemplo abaixo:

Control Inner Docking

Por padrão, o Dock Manager permite que os usuários arrastem e encaixem painéis sem esforço uns dentro dos outros, criando guias. Para fornecer mais controle sobre essa funcionalidade, introduzimos duas propriedades -allowInnerDock and acceptsInnerDock.

Ao definir o acceptsInnerDock propriedade de um IgcContentPane, os desenvolvedores podem controlar o encaixe dentro de painéis de conteúdo específicos. Quando essa propriedade for definida como false, os usuários serão impedidos de executar o encaixe interno no painel especificado.

{
    type: IgcDockManagerPaneType.contentPane,
    header: 'Floating 1',
    contentId: 'content3',
    acceptsInnerDock: false
}

Se você deseja desativar o encaixe interno em todo o DockManager, basta definir allowInnerDock como false. Essa propriedade determina se o usuário final tem permissão para painéis de encaixe internos.

this.dockManager.allowInnerDock = false;

Control Pane Dragging

Com a propriedade, os containedInBoundaries desenvolvedores podem controlar se os lados dos painéis flutuantes estão sempre contidos no DockManager. Quando definido como true, o arrastar do painel será interrompido quando qualquer um dos lados tentar se mover além dos limites do DockManager.

Experimente no exemplo abaixo:

Split Panes Fixed Size Mode

Por padrão, o tamanho de um painel é relativo aos tamanhos de seus painéis irmãos e o padrão é 100. Se você tiver dois painéis irmãos, onde o primeiro tem seu tamanho definido como 400 e o segundo - como 200, o primeiro terá o dobro do tamanho do segundo e esses dois painéis preencherão todo o espaço disponível.

Se, para determinados painéis, você quiser especificar seus tamanhos em pixels, em vez de depender da distribuição relativa de todo o espaço disponível, você deve definir o useFixedSize do painel de divisão pai. Quando essa propriedade é definida como true, todos os filhos são dimensionados em pixels, com base em sua size propriedade. Com essa modificação, o primeiro painel se estenderá por 400 pixels e o segundo - 200 pixels. O redimensionamento adicional por meio do divisor alteraria apenas o tamanho do painel de conteúdo atual sem afetar os tamanhos de seus irmãos. Quando a soma dos tamanhos dos painéis filho exceder o tamanho do pai, uma barra de rolagem aparecerá tornando o painel dividido pai rolável.

const splitPaneRelativeSize: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1',
            size: 400 // Size will be relative to siblings
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2',
            size: 200 // Size will be relative to siblings
        }
    ]
}

const splitPaneFixedSize: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    useFixedSize: true,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content3',
            header: 'Pane 3',
            size: 400 // Size will be applied in pixels
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content4',
            header: 'Pane 4',
            size: 200 // Size will be applied in pixels
        }
    ]
}

Observe que, quando você encaixa um painel dentro de um painel dividido definido useFixedSize como true, o painel encaixado terá a mesma largura/altura (dependendo da orientação do painel dividido) que o painel flutuante.

Experimente você mesmo no exemplo abaixo:

API References

• IgcDockManagerComponent
• IgcContentPane