# Extensiones
Las extensiones son una eficaz herramienta de desarrollo en el ecosistema de Dynamo. Permiten a los desarrolladores impulsar funciones personalizadas basadas en interacciones y la lógica de Dynamo. Las extensiones se pueden dividir en dos categorías principales, extensiones y extensiones de vista. Como indica su nombre, la estructura de extensiones de vista permite ampliar la interfaz de usuario de Dynamo mediante el registro de elementos de menú personalizados. Las extensiones normales funcionan de una manera muy similar, pero sin la interfaz de usuario. Por ejemplo, podemos crear una extensión que registre información específica en la consola de Dynamo. En este caso, no se necesita una interfaz de usuario personalizada y, por lo tanto, también se puede lograr lo mismo con una extensión.
#### Caso real de extensión
Siguiendo el ejemplo SampleViewExtension del repositorio DynamoSamples de GitHub, recorreremos los pasos necesarios para crear una sencilla ventana sin modo que muestre los nodos activos del gráfico en tiempo real. Una extensión de vista requiere que creemos una interfaz de usuario para la ventana y que vinculemos valores a un modelo de vista.
> 1. La ventana de extensión de vista desarrollada siguiendo el ejemplo SampleViewExtension en el repositorio de GitHub.
Aunque compilaremos el ejemplo desde cero, también puede descargar y compilar el repositorio DynamoSamples para que le sirva de referencia.
Repositorio DynamoSamples:
> Este recorrido hará referencia específicamente al proyecto denominado SampleViewExtension, que se encuentra en `DynamoSamples/src/`.
#### Cómo implementar una extensión de vista
Una extensión de vista incluye las siguientes tres partes esenciales:
* Un montaje que contiene una clase que implementa `IViewExtension`, así como una clase que crea un modelo de vista.
* Un archivo `.xml`, que indica a Dynamo dónde debe buscar este montaje en el tiempo de ejecución y el tipo de extensión
* Un archivo `.xaml` que enlaza datos a la visualización de gráficos y determina el aspecto de la ventana.
**1. Crear la estructura del proyecto**
Cree un nuevo proyecto `Class Library` denominado `SampleViewExtension`.
> 1. Cree un nuevo proyecto. Para ello, seleccione `File > New > Project`.
> 2. Seleccione `Class Library`.
> 3. Asigne el nombre `SampleViewExtension` al proyecto.
> 4. Seleccione `Ok`.
En este proyecto, necesitaremos dos clases. Una clase que implementará `IViewExtension` y otra que implementará `NotificationObject.`. `IViewExtension` contendrá toda la información sobre cómo se implementará, se cargará y se desechará la extensión, y cómo se hará referencia a ella. `NotificationObject` proporcionará notificaciones de cambios en `IDisposable` y Dynamo. Cuando se produzca un cambio, el recuento se actualizará en consecuencia.
> 1. Un archivo de clase denominado `SampleViewExtension.cs` que implementará `IViewExtension`.
> 2. Un archivo de clase denominado `SampleWindowViewMode.cs` que implementará `NotificationObject`.
Para utilizar `IViewExtension`, necesitaremos el paquete NuGet WpfUILibrary. Al instalar este paquete, se instalarán automáticamente los paquetes Core, Services y ZeroTouchLibrary.
> 1. Seleccione WpfUILibrary.
> 2. Seleccione `Install` para instalar todos los paquetes dependientes.
**2. Implementar la clase IViewExtension**
En la clase `IViewExtension`, determinaremos qué ocurre cuando se inicia Dynamo, se carga la extensión y se cierra Dynamo. En el archivo de clase `SampleViewExtension.cs`, añada el código siguiente:
```
using System;
using System.Windows;
using System.Windows.Controls;
using Dynamo.Wpf.Extensions;
namespace SampleViewExtension
{
public class SampleViewExtension : IViewExtension
{
private MenuItem sampleMenuItem;
public void Dispose()
{
}
public void Startup(ViewStartupParams p)
{
}
public void Loaded(ViewLoadedParams p)
{
// Save a reference to your loaded parameters.
// You'll need these later when you want to use
// the supplied workspaces
sampleMenuItem = new MenuItem {Header = "Show View Extension Sample Window"};
sampleMenuItem.Click += (sender, args) =>
{
var viewModel = new SampleWindowViewModel(p);
var window = new SampleWindow
{
// Set the data context for the main grid in the window.
MainGrid = { DataContext = viewModel },
// Set the owner of the window to the Dynamo window.
Owner = p.DynamoWindow
};
window.Left = window.Owner.Left + 400;
window.Top = window.Owner.Top + 200;
// Show a modeless window.
window.Show();
};
p.AddExtensionMenuItem(sampleMenuItem);
}
public void Shutdown()
{
}
public string UniqueId
{
get
{
return Guid.NewGuid().ToString();
}
}
public string Name
{
get
{
return "Sample View Extension";
}
}
}
}
```
La clase `SampleViewExtension` crea un elemento de menú en el que se puede hacer clic para abrir la ventana y lo conecta al modelo de vista y la ventana.
* `public class SampleViewExtension : IViewExtension` `SampleViewExtension` hereda de la interfaz de `IViewExtension` y proporciona todo lo que necesitamos para crear el elemento de menú.
* `sampleMenuItem = new MenuItem { Header = "Show View Extension Sample Window" };` crea un MenuItem y lo añade al menú `View`.
> 1. El elemento de menú
* `sampleMenuItem.Click += (sender, args)` activa un evento que abrirá una nueva ventana cuando se haga clic en el elemento de menú.
* `MainGrid = { DataContext = viewModel }` establece el contexto de datos para la rejilla principal de la ventana, haciendo referencia a `Main Grid` en el archivo `.xaml` que crearemos.
* `Owner = p.DynamoWindow` establece el propietario de la ventana emergente en Dynamo. Esto significa que la nueva ventana depende de Dynamo, por lo que acciones como, por ejemplo, minimizar, maximizar y restaurar Dynamo provocarán que la nueva ventana siga este mismo comportamiento
* `window.Show();` muestra la ventana en la que se han establecido las propiedades adicionales de ventana.
**3. Implementar el modelo de vista**
Ahora que hemos establecido algunos de los parámetros básicos de la ventana, añadiremos la lógica para responder a diversos eventos relacionados con Dynamo e indicaremos a la interfaz de usuario que realice la actualización en función de estos eventos. Copie el código siguiente en el archivo de clase `SampleWindowViewModel.cs`:
```
using System;
using Dynamo.Core;
using Dynamo.Extensions;
using Dynamo.Graph.Nodes;
namespace SampleViewExtension
{
public class SampleWindowViewModel : NotificationObject, IDisposable
{
private string activeNodeTypes;
private ReadyParams readyParams;
// Displays active nodes in the workspace
public string ActiveNodeTypes
{
get
{
activeNodeTypes = getNodeTypes();
return activeNodeTypes;
}
}
// Helper function that builds string of active nodes
public string getNodeTypes()
{
string output = "Active nodes:\n";
foreach (NodeModel node in readyParams.CurrentWorkspaceModel.Nodes)
{
string nickName = node.Name;
output += nickName + "\n";
}
return output;
}
public SampleWindowViewModel(ReadyParams p)
{
readyParams = p;
p.CurrentWorkspaceModel.NodeAdded += CurrentWorkspaceModel_NodesChanged;
p.CurrentWorkspaceModel.NodeRemoved += CurrentWorkspaceModel_NodesChanged;
}
private void CurrentWorkspaceModel_NodesChanged(NodeModel obj)
{
RaisePropertyChanged("ActiveNodeTypes");
}
public void Dispose()
{
readyParams.CurrentWorkspaceModel.NodeAdded -= CurrentWorkspaceModel_NodesChanged;
readyParams.CurrentWorkspaceModel.NodeRemoved -= CurrentWorkspaceModel_NodesChanged;
}
}
}
```
Esta implementación de la clase de modelo de vista escucha en el `CurrentWorkspaceModel` y activa un evento cuando se añade o se elimina un nodo del espacio de trabajo. Esto genera un cambio de propiedad que notifica a los elementos de la interfaz de usuario o enlazados que los datos han cambiado y deben actualizarse. Se llama al captador `ActiveNodeTypes`, que llama internamente a una función auxiliar adicional `getNodeTypes()`. Esta función recorre todos los nodos activos en el lienzo, rellena una cadena que contiene los nombres de estos nodos y devuelve esta cadena al enlace en el archivo .xaml para que se muestre en la ventana emergente.
Con la lógica básica de la extensión definida, ahora especificaremos los detalles de apariencia de la ventana con un archivo `.xaml`. Todo lo que necesitamos es una ventana sencilla que muestre la cadena mediante el enlace de propiedad `ActiveNodeTypes` en `TextBlock` `Text`.
> 1. Haga clic con el botón derecho en el proyecto y seleccione `Add > New Item...`.
> 2. Seleccione la plantilla de control de usuario que modificaremos para crear una ventana.
> 3. Asigne el nombre `SampleWindow.xaml` al nuevo archivo.
> 4. Seleccione `Add`.
En el código `.xaml` de la ventana, deberemos enlazar `SelectedNodesText` a un bloque de texto. Añada el siguiente código a `SampleWindow.xaml`:
```
```
* `Text="{Binding ActiveNodeTypes}"` enlaza el valor de propiedad de `ActiveNodeTypes` en `SampleWindowViewModel.cs` con el valor de `TextBlock` `Text` de la ventana.
Ahora inicializaremos la ventana de ejemplo en el archivo de copia de seguridad .xaml de C# `SampleWindow.xaml.cs`. Añada el siguiente código a `SampleWindow.xaml`:
```
using System.Windows;
namespace SampleViewExtension
{
///
/// Interaction logic for SampleWindow.xaml
///
public partial class SampleWindow : Window
{
public SampleWindow()
{
InitializeComponent();
}
}
}
```
La extensión de vista ya puede crearse y añadirse a Dynamo. Dynamo requiere un archivo `xml` para registrar el archivo `.dll` de salida como una extensión.
> 1. Haga clic con el botón derecho en el proyecto y seleccione `Add > New Item...`.
> 2. Seleccione Archivo XML.
> 3. Asigne el nombre `SampleViewExtension_ViewExtensionDefinition.xml` al archivo.
> 4. Seleccione `Add`.
* El nombre de archivo sigue la norma de Dynamo para hacer referencia a un montaje de extensión de la siguiente forma: `"extensionName"_ViewExtensionDefinition.xml`.
En el archivo `xml`, añada el siguiente código para indicar a Dynamo dónde debe buscar el montaje de extensión:
```
C:\Users\username\Documents\Visual Studio 2015\Projects\SampleViewExtension\SampleViewExtension\bin\Debug\SampleViewExtension.dll
SampleViewExtension.SampleViewExtension
```
* En este ejemplo, hemos generado el montaje en la carpeta de proyecto por defecto de Visual Studio. Sustituya el destino `...` por la ubicación del montaje.
El último paso consiste en copiar el archivo `SampleViewExtension_ViewExtensionDefinition.xml` en la carpeta de extensiones de vista de Dynamo, que se encuentra en el directorio de instalación de Dynamo Core `C:\Program Files\Dynamo\Dynamo Core\1.3\viewExtensions`. Es importante tener en cuenta que hay carpetas independientes para `extensions` y `viewExtensions`. Si coloca el archivo `xml` en la carpeta incorrecta, puede que no se cargue correctamente en el tiempo de ejecución.
> 1. El archivo `.xml` que hemos copiado en la carpeta de extensiones de vista de Dynamo
Esta es una introducción básica a las extensiones de vista. Para obtener un caso real más sofisticado, consulte el paquete DynaShape, un proyecto de código abierto de GitHub. El paquete utiliza una extensión de vista que permite la edición activa en la vista del modelo de Dynamo.
Puede descargar un instalador de paquetes para DynaShape desde el foro de Dynamo, .
El código fuente se puede clonar desde GitHub, .