El widget
DiagramEditor puede editar los campos de texto de las entidades
de un gráfico. Para ello, las plantillas deben identificar
attachPoints
con el atributo
editable
. Si
attachPoint
se marca como
editable, una línea punteada rodea el componente editable, que puede
editarse si se efectúa una doble pulsación en él. Cuando se
efectúa una doble pulsación en el área del componente editable, se
abre un editor que nos permite cambiar el valor asociado. Acepte el
valor nuevo pulsando la tecla Intro o cancele la operación saliendo
del editor. Es posible registrar editores alternativos en el widget
DiagramEditor
para los campos
que no son de texto. El editor disponible utiliza
dojoTextBox
y está registrado
con el ID textbox.
El atributo editable especifica el editor asociado con cada campo. El atributo editable es un atributo compuesto que
contiene la información que se utiliza para iniciar el editor en
línea, a saber:
set/get
: los nombres de los métodos de obtención y establecimiento que se van a utilizar para acceder al valor de la entidad. Debe ser un método del nodo, subgráfico o enlace.id
: una alternativa para establecer/obtener y proporciona el nombre en minúsculas de la propiedad asociada (los atributos set:/get: se establecen automáticamente en este nombre).editor
: el ID del editor que se ha de utilizar en este campo.options
: un atributo compuesto que se utiliza para pasar parámetros específicos al editor registrado.baseRegion
: el recuadro delimitador base opcional del área editable si el área editable llegara a ser demasiado pequeña para poder pulsarse.regionStyle
: el estilo opcional que se aplicará a la marca que rodea el área editable (sustituye al valor predeterminado, que es una línea punteada).border
: un entero que representa el ancho del margen para aumentar el área editable sobre el recuadro delimitador actual del campo.
El ejemplo siguiente está extraído de la plantilla de
nodos predeterminada:
... editable: { id:'label', editor:'textbox', border:2, regionStyle:{selectedStyle:{stroke:{color:'white',style:'ShortDot'}}}, baseRegion:{x:20,width:40,y:11,height:15} } ...