Controlar el Estilo Visual
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.