Diseñar el diseño de formularios de elemento de trabajo

  • Artículo

Cuando diseña un formulario de elemento de trabajo, desea colocar los campos en el formulario para que admitan la entrada de datos y los procesos de flujo de trabajo que los miembros del equipo seguirán. Si simplemente está agregando algunos campos a un formulario existente, debe determinar en qué parte del formulario desea agregarlos. Si está agregando varios campos para que admitan una nueva colección de datos cuyo seguimiento se va a llevar a cabo, tal vez simplemente desee agregar una nueva pestaña para estos campos. Para minimizar la necesidad de desplazarse por el formulario, puede agrupar los campos en varias columnas al principio del formulario o en una pestaña.

Si está agregando un nuevo tipo de elemento de trabajo, tal vez desee copiar un tipo existente y modificarlo para mostrar los campos y el proceso de flujo de trabajo compatibles con ese nuevo tipo.

Cuando defina el diseño, tenga en cuenta las siguientes sugerencias para obtener los mejores resultados:

  • Aquellos campos que los miembros necesiten actualizar o a los que tengan que hacer referencia con frecuencia sitúelos al comienzo del formulario.

  • Aquellos campos que los miembros del equipo tengan que actualizar o a los que tengan que hacer referencia de forma esporádica sitúelos en una pestaña. Por ejemplo, los controles que vinculan elementos de trabajo o adjuntan archivos normalmente se sitúan en pestañas independientes.

  • Agrupe los campos en columnas para maximizar la presentación de los campos de datos. Puede usar columnas en la parte superior del formulario o en una pestaña. También puede mostrar las pestañas en un formato con varias columnas.

  • Use uno o varios controles de vinculación en pestañas independientes o en la misma pestaña para restringir los tipos de vínculos que se pueden crear entre los campos de tipos de elemento de trabajo.

Para obtener información sobre cómo se exportan, importan y comprueban los cambios de los formularios de elemento de trabajo, vea Cambiar el diseño del formulario del elemento de trabajo.

En este tema

  • Segmentar el formulario en áreas

  • Trabajar con pestañas

  • Agrupar campos

  • Cambiar el tamaño de las columnas

  • Usar un divisor para admitir tamaños de columna variables

  • Controlar el tamaño del formulario y sus elementos

  • Especificar diseños diferentes para los distintos destinos

Segmentar el formulario en áreas

Puede usar los elementos de diseño para segmentar su formulario de elemento de trabajo en áreas diferentes, agrupar campos relacionados y asignar espacio en el formulario según los requisitos de entrada de datos. En la tabla siguiente se describen los elementos que se usan para segmentar el formulario en diferentes áreas.

Elemento

Descripción

FORM

Contiene los elementos Layout que determinan la presentación de los campos y los controles del tipo de elemento de trabajo.

Layout

Contiene todos los elementos que determinan la presentación de los campos y los controles de un determinado destino. Puede especificar diseños diferentes para los distintos destinos, como Visual Studio o Team Web Access. Los elementos secundarios que puede especificar en un elemento Layout son, entre otros, los elementos Control, Group, TabGroup y Splitter.

Group

Agrupa los elementos secundarios del formulario. Un borde y una etiqueta opcional separan visualmente un grupo. Los grupos que se definen en una posición adyacente en la pila XML se dividen en vertical en el formulario mostrado. Puede especificar el elemento Column como un elemento secundario de un elemento Group.

Column

Mantiene todos los elementos secundarios en una columna vertical o divide un formulario verticalmente. Las columnas deben aparecer en un Group. Los elementos Group de Column pueden utilizarse para crear áreas anidadas. De forma predeterminada, las columnas dividen un Group uniformemente. Puede especificar un atributo de ancho opcional de tipo porcentual para asignar más espacio a una o varias columnas.

Los elementos secundarios que puede especificar en un elemento Column son, entre otros, los elementos Control, Group, TabGroup y Splitter.

Splitter

Permite a los usuarios cambiar el tamaño del ancho asignado a dos columnas de un formulario.

Tab

Agrega pestañas diferentes a un formulario para admitir la presentación de campos y controles adicionales. Los elementos secundarios que puede especificar en un elemento Tab son, entre otros, los elementos Control, Group, TabGroup y Splitter.

TabGroup

Contiene un grupo de elementos TAB. En general, puede agregar las pestañas en un único grupo de pestañas. Sin embargo, podría apilar dos o más grupos de pestañas en un formulario.

En la siguiente ilustración puede ver un formulario en cuya área superior se muestran ocho campos organizados en dos columnas. En la parte inferior se muestran dos conjuntos de tres pestañas organizados en un diseño de dos columnas.

Formulario personalizado con tres pestañas en un diseño de dos columnas

Formulario de elemento de trabajo personalizado

Parte superior del formulario

El siguiente código define la parte superior del formulario. Puede incorporar tantas columnas como sea necesario. Como se muestra en este ejemplo, la primera columna, cuyo tamaño es un 70 por ciento del ancho del formulario, contiene dos grupos de campos. El diseño del segundo grupo de campos, que contiene los campos PU (Use Area Path) y Priority, se establece en dos columnas. La segunda columna abarca el 30 por ciento restante del ancho del formulario. Cuando se cambia el tamaño del formulario, las áreas que están asignadas a las columnas varían proporcionalmente.

<FORM>
      <Layout>
        <Group>
          <Column PercentWidth="70">
            <Group>
              <Column PercentWidth="100">
                <Control FieldName="System.Title" Type="FieldControl" Label="Title" LabelPosition="Left" />
                <Control FieldName="System.AreaPath" Type="WorkItemClassificationControl" Label="Area Path" LabelPosition="Left" />
                <Control FieldName="System.IterationPath" Type="WorkItemClassificationControl" Label="&amp;Iteration Path:" LabelPosition="Left" />
                <Group>
                  <Column PercentWidth="50">
                    <Control FieldName="Microsoft.VSTS.Common.ProductUnit" Type="FieldControl" Label="PU (Use Area Path)" LabelPosition="Left" />
                  </Column>
                  <Column PercentWidth="50">
                    <Control FieldName="Microsoft.VSTS.Common.Priority" Type="FieldControl" Label="Priority" LabelPosition="Left" />
                  </Column>
                </Group>
              </Column>
            </Group>
          </Column>
          <Column PercentWidth="30">
            <Group Label="Status">
              <Column PercentWidth="100">
                <Control FieldName="System.Id" Type="FieldControl" Label="Id" LabelPosition="Left" />
                <Control FieldName="System.State" Type="FieldControl" Label="State" LabelPosition="Left" />
                <Control FieldName="System.AssignedTo" Type="FieldControl" Label="Assigned To" LabelPosition="Left" />
              </Column>
            </Group>
          </Column>
        </Group>
        <Group Label="">
          <Column PercentWidth="60">
. . .
</Layout>
</FORM>

Volver al principio

Trabajar con pestañas

Puede usar pestañas para reunir un grupo de campos o para admitir uno o varios controles especiales, como los controles que vinculan elementos de trabajo, vinculan el historial de elementos de trabajo o adjuntan archivos. Algunas definiciones de tipos de elemento de trabajo de las plantillas de procesos de Microsoft Solutions Framework (MSF) usan diversas pestañas para controlar los tipos de vínculos que se pueden crear, en función del tipo de vínculo. Para obtener más información, vea Elementos de trabajo y flujo de trabajo (Agile) o Elementos de trabajo y flujo de trabajo (CMMI).

Para obtener más información sobre el uso de controles especiales, vea los temas siguientes:

Si se usan los atributos que se describen en la tabla siguiente, puede etiquetar la pestaña y especificar el relleno y los márgenes que controlan el número de píxeles del interior y exterior del borde del control de pestaña.

Atributo

Descripción

Label

Obligatorio. Texto que especifica el nombre de la ficha.

Margin

Opcional. Especifica la cantidad de espacio (en píxeles) que debe haber en torno a la pestaña.

Padding

Opcional. Especifica, en píxeles, la cantidad de espacio que debe haber en torno al borde interior y exterior de la pestaña.

Seis pestañas organizadas en un diseño en paralelo

Formulario personalizado que muestra dos grupos de seis pestañas

En el código siguiente se muestra la sintaxis que se utiliza para crear el diseño que se representa en la ilustración anterior.

<FORM>
      <Layout>
        . . . 
            <TabGroup>
              <Tab Label="Planning">
                <Group Label="Status" Padding="(0,0,0,3)">
                  <Column PercentWidth="50">
                    <Control FieldName="Microsoft.DevDiv.Importance" Type="FieldControl" Label="Importance" LabelPosition="Left" />
                    <Control FieldName="Microsoft.DevDiv.Commitment" Type="FieldControl" Label="Commitment / Confidence" LabelPosition="Left" />
                    . . .
                  </Column>
                  <Column PercentWidth="50" />
                </Group>
                <Group>
                  <Column PercentWidth="100">
                    <Control FieldName="Microsoft.DevDiv.Story" Type="HtmlFieldControl" Label="Story Board" LabelPosition="Top" />
                  </Column>
                </Group>
                <Group>
                  <Column PercentWidth="100">
                    <Control FieldName="System.Description" Type="HtmlFieldControl" Label="Value Proposition Description" LabelPosition="Top" />
                  </Column>
                </Group>
              </Tab>
              <Tab Label="Marketing">
                <Group>
                  <Column PercentWidth="100">
                    <Control FieldName="Microsoft.DevDiv.MarketingOwner" Type="FieldControl" Label="Marketing Owner" LabelPosition="Top" />
                    <Control FieldName="Microsoft.DevDiv.MarketingDescription" Type="HtmlFieldControl" Label="Marketing Description" LabelPosition="Top" />
                  </Column>
                </Group>
              </Tab>
              <Tab Label="Relationships">
                <Control Type="LinksControl" Label="Pillars" LabelPosition="Top" Name="Pillars">
                  . . . 
                </Control>
                <Control Type="LinksControl" Label="Experiences - Feature Groups" LabelPosition="Top" Name="Experiences">
                  . . . 
                </Control>
                <Control Type="LinksControl" Label="Flags / Associations" LabelPosition="Top" Name="Flags">
                  . . . 
                </Control>
              </Tab>
            </TabGroup>
          </Column>
          <Column PercentWidth="40">
            <TabGroup>
              <Tab Label="History">
                <Control FieldName="System.History" Type="WorkItemLogControl" Label="Detailed Description and History" LabelPosition="Top" Dock="Fill" />
              </Tab>
              <Tab Label="Links">
                <Control Type="LinksControl" LabelPosition="Top" >
                  . . . 
                </Control>
              </Tab>
              <Tab Label="File Attachments">
                <Control Type="AttachmentsControl" LabelPosition="Top" />
              </Tab>
            </TabGroup>
          </Column>
        </Group>
      </Layout>
</FORM>

Volver al principio

Agrupar campos

Puede usar el elemento Group para agrupar elementos visualmente, como el control GroupBox de Windows. Si se usan los atributos que se describen en la tabla siguiente, puede etiquetar cada grupo y especificar el relleno y los márgenes que controlan el número de píxeles del interior y exterior del borde del área de grupo. El elemento Group debe ir seguido siempre de un elemento Column, aunque el grupo tenga solo una columna.

Debe utilizar el elemento Group como contenedor de los campos de una columna y como contenedor de las columnas de un área segmentada del formulario. El elemento Column solo puede especificarse como elemento secundario de un elemento Group.

Puede controlar el espaciado y el tamaño del diseño general del formulario especificando los atributos que se describen en la tabla siguiente.

Atributo

Descripción

Label

Opcional. Texto que especifica el nombre del grupo.

Margin

Opcional. Especifica la cantidad de espacio (en píxeles) que debe haber alrededor del grupo y entre el control y sus elementos colindantes. Se puede variar la cantidad de espacio en cada lado.

Padding

Opcional. Especifica la cantidad de espacio (en píxeles) que debe haber alrededor del borde exterior del grupo. Se puede variar la cantidad de espacio en cada lado.

Grupo de campos organizados en una pestaña

Grupo de varios campos

En el código siguiente se muestra la sintaxis que se utiliza para crear el grupo de campos que se muestra en la ilustración anterior. Para obtener más información acerca de cómo se especifican los campos utilizando el elemento Control, vea Controlar cómo se muestran los campos de los elementos de trabajo.

<TabGroup>
<Tab Label="Planning">
<Group Label="Status" Padding="(0,0,0,3)">
   <Column PercentWidth="5100">
      <Control FieldName="Microsoft.DevDiv.Importance" Type="FieldControl" Label="Importance" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.Commitment" Type="FieldControl" Label="Commitment / Confidence" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.VisionDoc" Type="FieldControl" Label="Vision Doc" LabelPosition="Left" />
      <Control FieldName="Microsoft.DeveloperDivision.Features.EstimatedCost" Type="FieldControl" Label="Estimated Cost" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.BusinessUnit" Type="FieldControl" Label="BU (Use Area Path)" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.Website" Type="FieldControl" Label="Website" LabelPosition="Left" />
   </Column>
</Group>
   . . .
</Tab>
</TabGroup>

Volver al principio

Trabajar con columnas

Puede diseñar un área en un formulario que tenga dos o más columnas. Puede especificar un ancho de columna fijo o porcentual, en relación con el ancho del elemento que lo contiene usando los atributos FixedWidth o PercentWidth, respectivamente. Estos dos atributos Column son mutuamente excluyentes. Para permitir a un usuario cambiar el tamaño de la columna, puede especificar un control Splitter, tal y como se describe en Usar un divisor para admitir tamaños de columna variables.

Diseño de tres columnas

Presentación en tres columnas

El siguiente código genera el diseño de campos en tres columnas mostrado anteriormente. Cuando organice grupos de campos en columnas, utilice el elemento Group para que incluya cada columna de campos. Si lo desea, también puede etiquetar los grupos de campos.

<FORM>
   <Layout>
      <Group>
          <Column PercentWidth="36">
            <Group>
            <Control FieldName="System.Title" Type="FieldControl" Label="Title" LabelPosition="Left" />
            <Control FieldName="System.AreaPath" Type="WorkItemClassificationControl" Label="Area" LabelPosition="Left" />
            <Control FieldName="Microsoft.VSTS.Common.ProductUnit" Type="FieldControl" Label="Product Unit" LabelPosition="Left" />
            <Control FieldName="Microsoft.DevDiv.BusinessUnit" Type="FieldControl" Label="Business Unit" LabelPosition="Left" />
            </Group>
          </Column>
          <Column PercentWidth="33">
            <Group>
            <Control FieldName="Microsoft.DevDiv.SubTitle" Type="FieldControl" Label="Sub Title" LabelPosition="Left" />
            <Control FieldName="System.IterationPath" Type="WorkItemClassificationControl" Label="Iteration" LabelPosition="Left" />
            <Control FieldName="Microsoft.DevDiv.Other" Type="FieldControl" Label="Other" LabelPosition="Left" />
            </Group>
          </Column>
          <Column PercentWidth="31">
            <Group>
            <Control FieldName="Microsoft.DevDiv.Type" Type="FieldControl" Label="Type" LabelPosition="Left" />
            <Control FieldName="System.AssignedTo" Type="FieldControl" Label="Assigned To" LabelPosition="Left" />
            <Control FieldName="System.State" Type="FieldControl" Label="State" LabelPosition="Left" />
            </Group>
          </Column>
      </Group>
. . .
   </Layout>
</FORM>

Usar un divisor para admitir tamaños de columna variables

Puede usar el elemento Splitter si desea que el visor del formulario pueda cambiar el tamaño de las columnas dinámicamente. El divisor aparece como una línea de puntos en el formulario, tal y como se muestra en la siguiente ilustración. No puede especificar ningún elemento secundario en el elemento Splitter.

Diseño de dos columnas con un divisor

Presentación en dos columnas con Splitter

Un elemento Group que contiene elementos Column y Splitter debe especificar exactamente tres elementos Column en la secuencia siguiente:

  1. Un elemento Column a la izquierda del divisor

  2. Un elemento Column que contiene únicamente el elemento Splitter

  3. Un elemento Column a la derecha del divisor

Vea el ejemplo siguiente para obtener más información.

<Group>
   <Column PercentWidth="50">
      <Group Label="First Group Left ">
         <Column PercentWidth="50">
            <Control FieldName="Microsoft.VSTS.Common.Priority" Type="FieldControl" Name="Pri2" Label="Priority:" />
            <Control FieldName="Microsoft.VSTS.Common.Rank" Type="FieldControl" Label="Stack Rank:" />
            <Control FieldName="Microsoft.VSTS.Scheduling.BaselineWork" Type="FieldControl" Label="Original Estimate:" />
            <Control FieldName="Microsoft.VSTS.Scheduling.RemainingWork" Type="FieldControl" Label="Remaining:" />
   </Column>
   <Column>
      <Splitter>
   </Column>
   <Column PercentWidth="50">
      <Group Label="Second Group Right">
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.ChangeDate" Label="Change Date" Format="Short" LabelPosition="Right" />
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.EstimateStartDate" Label="Estimated Start Date" Format="Short" LabelPosition="Right" />
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.ActualStartDate" Label="Actual Start Date" Format="Short" LabelPosition="Right" />
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.FinishDate" Label="Finish Date" Format="Short" LabelPosition="Right" />
      </Group>
   </Column>
</Group>

Volver al principio

Controlar el tamaño del formulario y sus elementos

Puede especificar el tamaño horizontal y vertical mínimo de cada diseño de formulario utilizando el atributo MinimumSize. Sin embargo, el formulario cambia de tamaño en función de las dimensiones combinadas cuando el tamaño horizontal y el tamaño vertical combinados de los controles de campo y los diseños definidos en cada formulario son mayores que las dimensiones mínimas especificadas. Además, el tamaño vertical de todas las pestañas se ajusta a la dimensión necesaria para establecer el tamaño de la pestaña con el diseño vertical máximo. El tamaño del último control de campo de cada pestaña se puede modificar como corresponda para rellenar la dimensión vertical.

Las barras de desplazamiento aparecen cuando el contenedor que está mostrando el diseño del formulario es menor que el tamaño mínimo horizontal o vertical del formulario. En este caso, podría producirse un problema de doble desplazamiento. Con el doble desplazamiento, los usuarios pueden tener que desplazar tanto el propio formulario como el control de campo para localizar la información que desean ver. Para evitar el problema de doble desplazamiento, quizás desee situar controles de campo, como campos HTML y campos de historial, que estén sujetos al desplazamiento de su propia pestaña.

Volver al principio

Controlar el tamaño del diseño

Puede controlar el espaciado y el tamaño del diseño general del formulario especificando los atributos que se describen en la tabla siguiente.

Atributo

Descripción

Ejemplo de un valor de modelo

MinimumSize

Opcional. Cadena con el formato (Ancho, Alto). Este valor especifica el tamaño mínimo para el propio formulario. Cuando el contenedor en el que se muestra el diseño del formulario es menor que este tamaño, aparecen barras de desplazamiento horizontal y vertical. Cuando el tamaño combinado de los controles de campo del formulario de diseño es mayor que el tamaño definido por el atributo MinimumSize, se omite el atributo.

(100,100)

Margin

Opcional. Cadena con el formato (Izquierda, Superior, Derecha, Inferior) que especifica, en píxeles, la cantidad de espacio que debe haber alrededor del diseño. Se puede variar la cantidad de espacio en cada lado.

(2,0,2,0)

Padding

Opcional. Cadena con el formato ((Izquierda, Superior, Derecha, Inferior) que especifica, en píxeles, la cantidad de espacio que debe haber entre el borde exterior del diseño y el borde interior. Se puede variar la cantidad de espacio en cada lado.

(2,0,2,0)

ControlSpacing

Opcional. Especifica el espaciado vertical entre los controles del formulario. Integer.

N/D

Volver al principio

Controlar el tamaño de los elementos del formulario

Puede usar el atributo MinimumSize del elemento Control para especificar el tamaño y el alto mínimos que cada elemento del formulario debe ocupar. Si no tiene espacio vertical suficiente, aparecerá una barra de desplazamiento para mantener el tamaño mínimo. Sin este atributo, los controles se dibujan con sus tamaños predeterminado, a menos que haya controles en otras pestañas que ocupen más espacio y que aumenten el tamaño de la pestaña. Puede utilizar otros atributos, como Dock, Margin y Padding, para alinear o ajustar el control y definir el tamaño del borde que rodea al control. Para obtener más información, vea los temas siguientes:

Volver al principio

Especificar diseños diferentes para los distintos destinos

Puede especificar diseños distintos para los diferentes destinos utilizando el atributo Target del elemento Layout. Si el destino es Visual Studio o Team Explorer Everywhere, puede especificar WinForms, y si el destino es Team Web Access, puede especificar Web.

<FORM>
   <Layout Target="WinForms" >
      . . . 
   </Layout>
   <Layout Target="Web" >
      . . . 
   </Layout >
</FORM>

Volver al principio

Vea también

Tareas

Cambiar el diseño del formulario del elemento de trabajo

Conceptos

Diseñar y personalizar un formulario de elementos de trabajo

Otros recursos

Controlar cómo se muestran los campos de los elementos de trabajo

Proporcionar texto de ayuda, guía de procesos, contenido web y vínculos con páginas web en un formulario de elemento de trabajo

Agregar el control de datos adjuntos

Definir controles de vínculos para restringir las relaciones de los vínculos

Historial de cambios

Fecha

Historial

Motivo

Mayo de 2011

Se ha corregido el uso de minúsculas o mayúsculas en varios elementos XML. La definición de esquema para el seguimiento de elementos de trabajo establece todos los elementos secundarios del elemento FORM con la convención Camel y escribe los demás elementos en mayúsculas.

Corrección de errores de contenido.

Junio de 2010

Se han agregado ilustraciones y ejemplos de código adicionales.

Mejora de la información.

Julio de 2010

Se han reescrito algunas secciones por motivos de claridad. Se ha corregido la referencia a Team Explorer Everywhere de la última sección.

Mejora de la información.