Controlar el Estilo Visual

Ingresar texto

Motivo de uso editar

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

Ejemplo editar

Modificar el ancho de un input editar

<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 editar

<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) editar

@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 editar

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