Controlar el Estilo Visual

Esta página se ha identificado como una «hoja suelta» de algún wikilibro. Esta hoja se ha marcado con la categoría Wikilibros:Hojas sueltas y se debe integrar al wikilibro correspondiente.

Motivo de uso

Cuando se quiera cambiar el estilo visual de los controles xforms.

Ejemplo

Modificar el ancho de un input

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <head>
      <title>Controlling Input Field Width</title>
      <style type="text/css"><![CDATA[
   @namespace xf url("http://www.w3.org/2002/xforms");
   body {
      font-family: Helvetica;sans-serif;
   }
   
   label, legend {
      font-weight: bold;
   }

   /* The default field width for all inputs */
   .xf-value {
      width: 100px
   }

   /* custom field width overrides relative to current font size */
   /* ex is the size of the current lowercase 'x' in pixels */
   /* em is the size of the current "M" character in pixels */
   .PersonGivenName .xf-value {width:20ex}
   .PersonMiddleName .xf-value {width:15ex}
   .PersonSurName .xf-value {width:25ex}
   .LocationCityName .xf-value {width:20ex}
   .LocationStateCode .xf-value {width:2em}
   .LocationPostalID .xf-value {width:10ex}
]]>
   </style>
      <xf:model>
         <xf:instance xmlns="">
            <Data>
               <PersonGivenName>John</PersonGivenName>
               <PersonMiddleName>George</PersonMiddleName>
               <PersonSurName>Doe</PersonSurName>
               <LocationCityName>Anytown</LocationCityName>
               <LocationStateCode>MM</LocationStateCode>
               <LocationPostalID>55123-1234</LocationPostalID>
            </Data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <fieldset>
      <legend>Name and Address</legend>
       <xf:input class="PersonGivenName" ref="/Data/PersonGivenName" incremental="true">
         <xf:label>First:</xf:label>
       </xf:input>
       <xf:input class="PersonMiddleName"  ref="/Data/PersonMiddleName" incremental="true">
         <xf:label>Middle:</xf:label>
       </xf:input>
       <xf:input class="PersonSurName" ref="/Data/PersonSurName" incremental="true">
         <xf:label>Last:</xf:label>
       </xf:input>
       <br/>
       <xf:input class="LocationCityName" ref="/Data/LocationCityName" incremental="true">
         <xf:label>City:</xf:label>
       </xf:input>
       <xf:input class="LocationStateCode" ref="/Data/LocationStateCode" incremental="true">
         <xf:label>State:</xf:label>
       </xf:input>
       <xf:input class="LocationPostalID" ref="/Data/LocationPostalID" incremental="true">
         <xf:label>Postal:</xf:label>
       </xf:input>
       </fieldset>

       <xf:output ref="/Data/PersonGivenName">
         <xf:label>First Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/PersonMiddleName">
         <xf:label>Middle Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/PersonSurName">
         <xf:label>Last Name:</xf:label>
       </xf:output>
        <br/>
        <xf:output ref="/Data/LocationCityName">
         <xf:label>City Name:</xf:label>
       </xf:output>
        <br/>
       <xf:output ref="/Data/LocationStateCode">
         <xf:label>State Code:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/LocationPostalID">
         <xf:label>Postal Code:</xf:label>
       </xf:output>
       <br/>
   </body>
</html>

Text area con estilo

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms textarea demo</title>
      <link rel="stylesheet" type="text/css" href="textarea.css" />
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <Default>Default Default Default Default</Default>
               <Small>Small Small Small Small Small Small Small Small Small Small Small
               Small Small Small Small Small Small Small </Small>
               <Medium>Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium
               Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium
               Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium</Medium>
               <Large>Large Large Large Large Large Large Large Large Large Large Large Large
               Large Large Large Large Large Large Large Large Large Large Large Large Large
               Large Large Large Large Large Large Large Large Large Large Large Large Large
               Large Large Large Large Large Large Large Large Large Large Large Large</Large>
               <XLarge>X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
               X-Large X-Large X-Large X-Large X-Large X-Large X-Large</XLarge>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Resizing textarea and scrolling.</p>
      <xf:textarea ref="Default">
         <xf:label>Default: </xf:label>
      </xf:textarea>
      <xf:textarea class="small-textarea" ref="Small">
         <xf:label>Small: </xf:label>
      </xf:textarea>
      <xf:textarea class="medium-textarea" ref="Medium">
         <xf:label>Medium: </xf:label>
      </xf:textarea>
      <xf:textarea class="large-textarea" ref="Large">
         <xf:label>Large: </xf:label>
      </xf:textarea>
      <xf:textarea class="x-large-textarea" ref="XLarge">
         <xf:label>X-Large: </xf:label>
      </xf:textarea>
   </body>
</html>

Hoja de estilo (textarea.css)

@namespace xf url("http://www.w3.org/2002/xforms");

/* put each textarea on its own row */
xf|textarea {
 display: table-row;
}

xf|textarea > xf|label {
   display: table-cell;
   font-family: sans-serif;
   font-size: 10pt;
   font-weight: bold;
   vertical-align: top;
   text-align: right;
   padding-right: 3px;
}

textarea {
   font-family: Courier, sans-serif;
}

.small-textarea textarea { 
   height: 4.4em; /* a bit less than four lines to demonstrate scrolling */
   width: 300px;
}

.medium-textarea textarea { 
   height: 6em;
   width: 400px;
}

.large-textarea textarea {
   font-family: Courier, sans-serif;
   height: 10em;
   width: 500px;
}

.x-large-textarea textarea {
   font-family: Courier, sans-serif;
   height: 20em;
   width: 700px;
}

Nota

Este docuemnto se ira actualizando en el futuro para incluir ejemplos para los otros controles.