Plantillas
El diseño de IBM® ILOG® Dojo
Diagrammer se puede dividir en dos casos principales:
en el primer caso, el widget Diagram se utiliza para
mostrar el contenido de un almacén de datos como un diagrama.
en el segundo caso, un objeto
Selection
normalmente se
compone de formas GFX que se crean en el nivel de la interfaz de
usuario y no están vinculadas con el almacén de datos. Esta división afecta a la funcionalidad de copiar y
pegar. En el primer caso, si copia y pega contenido en un almacén de
datos, se produce una duplicación en éste y el gráfico refleja el
cambio mediante actualizaciones de dependencia. En el segundo caso,
la duplicación se produce en el nivel de GFX. También es posible que
un usuario desee almacenar datos de usuario y que se usen en las
operaciones de copiar y pegar, incluidos datos de usuario que
actualmente no son visibles. Estas operaciones dan lugar a resultados
diferentes dependiendo de la situación en que se produzcan.
Para corregir esta variabilidad,
IBM® ILOG® Dojo Diagrammer proporciona
una biblioteca con operaciones de plantilla que permiten implementar
personalizaciones.
Representación
La representación de elementos copiados debe ser
independiente del contexto. Por ejemplo, la representación debe estar
presente aunque no haya ninguna superficie GFX activa (por ejemplo,
si no hay ninguna conexión
DataStore
). La representación
es parecida al algoritmo de serialización de
dojox.gfx
, que tiene esta
propiedad (independencia de la plataforma y del visualizador). La
serialización convierte objetos GFX en una representación de objetos
JavaScript compatible con JSON, independiente del visualizador y de
la existencia de la superficie. El mismo concepto se aplica para
representar formas copiadas. Serialización y deserialización
La clase Serializer
maneja la lógica de esqueleto de la serialización y, en concreto, las
operaciones de copiar y pegar. Las operaciones de copiar se
serializan en el portapapeles y las operaciones de pegar se
deserializan del portapapeles.
La clase
ibm_ilog.diagram.util.Serializer
tiene un conjunto de respuestas de usuario que manejan los detalles
más precisos de los datos que se copian. Las respuestas incluyen una
función para obtener los identificadores asociados con las entidades
copiadas y una función de serialización para todas las entidades de
un gráfico. Las respuestas de serialización generan y devuelven la
representación de la entidad asociada. Estos datos los utiliza la
respuesta de usuario asociada para la deserialización, por lo que
debe poner todos los datos necesarios para la reconstrucción de la
entidad en el contexto adecuado.
Las respuestas de deserialización crean nuevas entidades
basándose en la representación existente. Estas respuestas reciben
los datos serializados por las respuestas de usuario, incluido un
diccionario ordenado por ID de todas las entidades nuevas que ya se
han creado en el proceso de deserialización, y el contenedor en el
que la respuesta actual ha creado la nueva entidad. Una respuesta de
deserialización también debe devolver un objeto que representa la
entidad recién creada mediante la deserialización. Este valor se
almacena en el diccionario para las posteriores llamadas de respuesta
que se produzcan en el proceso y se pasa como el argumento del
contenedor en llamadas a los hijos de la entidad (en el caso de
subgráficos).
En el proceso de serialización y deserialización se
utilizan las respuestas siguientes:
getId
identifica los elementos del gráfico serializados a través del proceso de serialización y deserialización.serializeNodeData
se utiliza para serializar un nodo. Utilice esta función de respuesta para crear la representación adecuada de un nodo que más adelante utilizará la función de deserialización correspondiente.serializeLinkData
se utiliza para serializar un enlace. Utilice esta función de respuesta para crear la representación adecuada de un enlace que más adelante utilizará la función de deserialización correspondiente.serializeSubgraphData
se utiliza para serializar un subgráfico. Utilice esta función de respuesta para crear la representación adecuada de un subgráfico que más adelante utilizará la función de deserialización correspondiente.deserializeNodeData
deserializa un nodo a partir de los datos serializados en el contenedor especificado.deserializeLinkData
deserializa un enlace a partir de los datos serializados en el contenedor especificado.deserializeSubgraphData
deserializa un subgráfico a partir de los datos serializados en el contenedor especificado.
Para personalizar las operaciones de copiar y pegar,
llame a la función
serialize(entity)
y, a
continuación, a la función
deserialize(representation,container)
.
El argumento entity
es el
objeto que se serializa. El argumento
representation
es el resultado
obtenido de la llamada anterior a
serialize
y
container
es el objeto
compatible con los objetos definidos por el usuario devueltos en la
respuesta deserializeSubgraph
.
La función deserialize
recopila los resultados de las respuestas de usuario y las devuelve
en una estructura de datos.Ejemplo
En el ejemplo siguiente se muestra cómo escribir un
serializador de gráficos basado en un almacén de datos básico:
var serializer = new ibm_ilog.diagram.util.Serializer({ getId: function(ge) { return ge.getId(); }, serializeNodeData: function(ge){ return { transform:m.clone(ge.getTransform()) }; }, deserializeNodeData: function(s,newByOldId,container){ var node = container.graph.createNode(); node.setTransform(s.transform); return {created:node}; }, serializeSubgraphData: function(ge){ return { transform:m.clone(ge.getTransform()) }; }, deserializeSubgraphData: function(s,newByOldId,container){ var sg = container.graph.createSubgraph(); sg.setTransform(s.transform); return {created:sg,graph:sg.getGraph()}; }, serializeLinkData: function(ge){ return { startId:ge.getStartNode().getId(), endId:ge.getEndNode().getId() }; }, deserializeLinkData: function(s,newByOldId,container){ var link = container.graph.createLink(); link.setStartNode(newByOldId.item(s.startId).created); link.setEndNode(newByOldId.item(s.endId).created); return {created:link}; } });