Estudo de caso do NodeModel – Interface do usuário personalizada
Os nós baseados no NodeModel fornecem significativamente mais flexibilidade e potência do que os nós Sem toque. Neste exemplo, levaremos o nó de grade Sem toque para o próximo nível ao adicionar um controle deslizante integrado que randomiza o tamanho do retângulo.
O controle deslizante dimensiona as células em relação a seu tamanho, de modo que o usuário não precise fornecer um controle deslizante com o intervalo correto.
Padrão “Model-View-Viewmodel”
O Dynamo é baseado no padrão de arquitetura do software model-view-viewmodel (MVVM) para manter a interface do usuário separada do back-end. Ao criar nós Sem toque, o Dynamo faz a associação de dados entre os dados de um nó e sua interface de usuário. Para criar uma interface de usuário personalizada, é preciso adicionar a lógica de vinculação de dados.
Em um alto nível, há duas partes para estabelecer uma relação de vista de modelo no Dynamo:
Uma classe
NodeModel
para estabelecer a lógica central do nó (o “modelo”)Uma classe
INodeViewCustomization
para personalizar como oNodeModel
está sendo visualizado (a “vista”)
Os objetos NodeModel já têm um modelo de vista associado (NodeViewModel), portanto, podemos nos concentrar no modelo e na vista para a interface do usuário personalizada.
Como implementar o NodeModel
Os nós NodeModel têm diversas diferenças significativas dos nós Sem toque que abordaremos neste exemplo. Antes de passarmos para a personalização da interface do usuário, vamos começar compilando a lógica do NodeModel.
1. Criar a estrutura do projeto:
Um nó NodeModel pode chamar somente funções, portanto, precisamos separar o NodeModel e as funções em diferentes bibliotecas. A forma padrão de fazer isso para pacotes do Dynamo é criar projetos separados para cada um. Comece criando uma nova solução para englobar os projetos.
Selecionar
File > New > Project
Selecionar
Other Project Types
para ativar a opção SoluçãoSelecionar
Blank Solution
Nomear a solução
CustomNodeModel
Selecionar
Ok
Crie dois projetos de biblioteca de classes C# na solução: um para as funções e outro para implementar a interface NodeModel.
Clicar com o botão direito do mouse na Solução e selecionar
Add > New Project
Escolher a biblioteca de classes
Nomeá-la
CustomNodeModel
Clicar em
Ok
Repita o processo para adicionar outro projeto nomeado
CustomNodeModelFunctions
Em seguida, precisamos renomear as bibliotecas de classes que foram criadas automaticamente e adicionar uma ao projeto CustomNodeModel
. A classe GridNodeModel
implementa a classe NodeModel abstrata, GridNodeView
é usada para personalizar a vista e GridFunction
contém as funções que precisamos chamar.
Adicionar outra classe clicando com o botão direito do mouse no projeto
CustomNodeModel
, selecionandoAdd > New Item...
e escolhendoClass
.No projeto
CustomNodeModel
, precisamos das classesGridNodeModel.cs
eGridNodeView.cs
No projeto
CustomNodeModelFunction
, precisamos de uma classeGridFunctions.cs
Antes de adicionarmos qualquer código às classes, adicione os pacotes necessários para este projeto. CustomNodeModel
precisará de ZeroTouchLibrary e WpfUILibrary e CustomNodeModelFunction
só precisará de ZeroTouchLibrary. A biblioteca WpfUIL será usada na personalização da interface do usuário que faremos mais tarde, e a biblioteca ZeroTouchLibrary será usada para criar a geometria. É possível adicionar os pacotes individualmente para os projetos. Como esses pacotes têm dependências, o Core e o DynamoServices serão instalados automaticamente.
Clicar com o botão direito do mouse em um projeto e selecionar
Manage NuGet Packages
Instalar somente os pacotes necessários para aquele projeto
O Visual Studio copiará os pacotes NuGet aos quais fizemos referência para o diretório de compilação. Isso pode ser definido como false, para que não tenhamos arquivos desnecessários no pacote.
Selecionar pacotes do Dynamo NuGet
Definir
Copy Local
como false
2. Herdar a classe NodeModel
Como mencionado anteriormente, o aspecto principal que torna um nó NodeModel diferente de um nó Sem toque é a implementação da classe NodeModel
. Um nó NodeModel precisa de diversas funções dessa classe, e podemos obtê-las adicionando :NodeModel
após o nome da classe.
Copie o seguinte código para o GridNodeModel.cs
.
Isso é diferente dos nós Sem toque. Vamos entender o que cada parte está fazendo.
Especificar os atributos do nó, como nomes Name, Category, InPort/OutPort, tipos InPort/OutPort e descrições.
public class GridNodeModel : NodeModel
é uma classe que herda a classeNodeModel
deDynamo.Graph.Nodes
.public GridNodeModel() { RegisterAllPorts(); }
é um construtor que registra as entradas e saídas do nó.BuildOutputAst()
retorna um AST (Abstract Syntax Tree), a estrutura necessária para retornar os dados de um nó NodeModel.AstFactory.BuildFunctionCall()
chama a função RetangularGrid deGridFunctions.cs
.new Func<int, int, double, List<Rectangle>>(GridFunction.RectangularGrid)
especifica a função e seus parâmetros.new List<AssociativeNode> { inputAstNodes[0], inputAstNodes[1], sliderValue });
mapeia as entradas do nó para parâmetros de funçãoAstFactory.BuildNullNode()
compilará um nó nulo se as portas de entrada não estiverem conectadas. Isso é para evitar a exibição de um aviso no nó.RaisePropertyChanged("SliderValue")
notifica a interface do usuário quando o valor do controle deslizante é alteradovar sliderValue = AstFactory.BuildDoubleNode(SliderValue)
compila um nó no AST que representa o valor do controle deslizanteAlterar uma entrada para a variável
sliderValue
na variável functionCallnew List<AssociativeNode> { inputAstNodes[0], sliderValue });
3. Chamar uma função
O projeto CustomNodeModelFunction
será compilado em uma montagem separada de CustomNodeModel
para que possa ser chamado.
Copie o seguinte código para GridFunction.cs
.
Essa classe de função é muito similar ao estudo de caso de Grade sem Toque, com uma diferença:
[IsVisibleInDynamoLibrary(false)]
impede que o Dynamo “veja” o seguinte método e classe, já que a função já está sendo chamada deCustomNodeModel
.
Assim como adicionamos referências para pacotes NuGet, CustomNodeModel
precisará fazer referência a CustomNodeModelFunction
para chamar a função.
A declaração de uso para CustomNodeModel estará inativa até que a função seja referenciada
Clicar com o botão direito do mouse em
CustomNodeModel
e selecionarAdd > Reference
Escolher
Projects > Solution
Marcar
CustomNodeModelFunction
Clicar em
Ok
4. Personalizar a vista
Para criar um controle deslizante, é preciso personalizar a interface do usuário implementando a interface do INodeViewCustomization
.
Copie o seguinte código para GridNodeView.cs
public class CustomNodeModelView : INodeViewCustomization<GridNodeModel>
define as funções necessárias para personalizar a interface do usuário.
Após a estrutura do projeto ter sido configurada, use o ambiente de projeto do Visual Studio para compilar um controle de usuário e definir seus parâmetros em um arquivo .xaml
. Na caixa de ferramentas, adicione um controle deslizante a <Grid>...</Grid>
.
Clicar com o botão direito do mouse em
CustomNodeModel
e selecionarAdd > New Item
Selecionar
WPF
Nomear o controle de usuário
Slider
Clicar em
Add
Copie o seguinte código para Slider.xaml
Os parâmetros do controle deslizante são definidos no arquivo
.xaml
. Os atributos Mínimo e Máximo definem o intervalo numérico dessa barra deslizante.Dentro de
<Grid>...</Grid>
, podemos colocar diferentes controles de usuário na caixa de ferramentas do Visual Studio
Quando criamos o arquivo Slider.xaml
, o Visual Studio criou automaticamente um arquivo C# chamado Slider.xaml.cs
que inicializa o controle deslizante. Altere o namespace nesse arquivo.
O namespace deve ser
CustomNodeModel.CustomNodeModel
O GridNodeModel.cs
define a lógica de cálculo do controle deslizante.
5. Configurar como um pacote
Antes de compilarmos o projeto, a etapa final é adicionar um arquivo pkg.json
para que o Dynamo possa ler o pacote.
Clicar com o botão direito do mouse em
CustomNodeModel
e selecionarAdd > New Item
Selecionar
Web
Selecionar
JSON File
Nomear o arquivo
pkg.json
Clicar em
Add
Copie o seguinte código para
pkg.json
"name":
determina o nome do pacote e seu grupo na biblioteca do Dynamo"keywords":
fornece termos de pesquisa para pesquisar na biblioteca do Dynamo"node_libraries": []
as bibliotecas associadas ao pacoteA última etapa é compilar a solução e publicar como um pacote do Dynamo. Consulte o capítulo Implantação do pacote para saber como criar um pacote local antes de publicar on-line e como compilar um pacote diretamente do Visual Studio.
Last updated