<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>jésus lopes &#187; meiomask</title>
	<atom:link href="http://jlopes.zigotto.com.br/tag/meiomask/feed" rel="self" type="application/rss+xml" />
	<link>http://jlopes.zigotto.com.br</link>
	<description>@zigotto &#124; ruby &#124; rails &#124; desenvolvimento &#124; software</description>
	<lastBuildDate>Tue, 28 Dec 2010 19:11:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Utilizando Formtastic e Inputs</title>
		<link>http://jlopes.zigotto.com.br/rails/utilizando-formtastic-e-inputs</link>
		<comments>http://jlopes.zigotto.com.br/rails/utilizando-formtastic-e-inputs#comments</comments>
		<pubDate>Fri, 04 Dec 2009 23:35:31 +0000</pubDate>
		<dc:creator>Jésus Lopes</dc:creator>
				<category><![CDATA[plugins]]></category>
		<category><![CDATA[projetos]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[formtastic]]></category>
		<category><![CDATA[inputs]]></category>
		<category><![CDATA[mask]]></category>
		<category><![CDATA[meiomask]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[zigotto]]></category>

		<guid isPermaLink="false">http://jlopes.zigotto.com.br/?p=172</guid>
		<description><![CDATA[Alguns meses atrás escrevi um plugin chamado Inputs. Como pode ser lido neste post, o objetivo é facilitar a criação de máscaras em campos de formulário.
Após ter descoberto o Formtastic, passei a utilizar o mesmo em todos os projetos aqui na Zigotto. Gosto muito da maneira que ele me permite trabalhar e escrever o código [...]]]></description>
			<content:encoded><![CDATA[<p>Alguns meses atrás escrevi um plugin chamado <a href="http://github.com/jtadeulopes/inputs">Inputs</a>. Como pode ser lido <a href="http://jlopes.zigotto.com.br/rails/plugin-inputs-crie-mascaras-para-campos-de-formularios">neste post</a>, o objetivo é facilitar a criação de máscaras em campos de formulário.</p>
<p>Após ter descoberto o <a href="http://jlopes.zigotto.com.br/rails/formularios-com-formtastic">Formtastic</a>, passei a utilizar o mesmo em todos os projetos aqui na <a href="http://www.zigotto.com.br">Zigotto</a>. Gosto muito da maneira que ele me permite trabalhar e escrever o código mais limpo e organizado.</p>
<p>E com tudo isso, comecei a me perguntar:</p>
<ul>
<li>O Inputs pode ser utlizado junto com o Formtastic?</li>
<li>Como unir os dois de uma maneira bem simples e continuar usando o Formtastic para trabalhar com os formulários?</li>
</ul>
<p>Imaginei algo como:</p>
<pre class="rails"><code>&lt;% semantic_form_for <span class="re1">@product</span> <span class="kw1">do</span> |form| %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="kw5">input</span> <span class="re3">:price</span>, <span class="re3">:mask</span> =&gt; <span class="re3">:decimal</span> %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="me1">commit_button</span> %&gt;
&lt;% <span class="kw1">end</span> %&gt;</code></pre>
<p>Gostei! É exatamente isso que eu quero! <img src='http://jlopes.zigotto.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Inputs foi <a href="http://github.com/jtadeulopes/inputs/commits/master/">atualizado</a> e agora é possível através da opção <strong>:mask</strong> informar qual o tipo de máscara que você quer inserir no campo do formulário!</p>
<h4>Como usar?</h4>
<ol>
<li>Instale e configure o Formtastic em seu projeto. Veja como fazer isso <a href="http://jlopes.zigotto.com.br/rails/formularios-com-formtastic">aqui</a>.</li>
<li>Instale e configure o plugin Inputs. Veja como fazer isso <a href="http://jlopes.zigotto.com.br/rails/plugin-inputs-crie-mascaras-para-campos-de-formularios">aqui</a>.</li>
</ol>
<p>Após tudo configurado, é possível se fazer isso: </p>
<pre class="rails"><code>&lt;% semantic_form_for <span class="re1">@customer</span> <span class="kw1">do</span> |form| %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="kw5">input</span> <span class="re3">:name</span> %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="kw5">input</span> <span class="re3">:phone</span>, <span class="re3">:mask</span> =&gt; <span class="re3">:phone</span> %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="kw5">input</span> <span class="re3">:cpf</span>, <span class="re3">:mask</span> =&gt; <span class="re3">:cpf</span> %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="me1">commit_button</span> %&gt;
&lt;% <span class="kw1">end</span> %&gt;</code></pre>
<p>Você pode utlizar outras máscaras já definidas:</p>
<ul>
<li>phone</li>
<li>phone-us</li>
<li>cpf</li>
<li>cnpj</li>
<li>date</li>
<li>date-us</li>
<li>cep</li>
<li>time</li>
<li>cc</li>
<li>integer</li>
<li>decimal</li>
<li>decimal-us</li>
<li>signed-decimal-us</li>
</ul>
<p>ou criar a sua própria máscara:</p>
<pre class="rails"><code>&lt;% semantic_form_for <span class="re1">@product</span> <span class="kw1">do</span> |form| %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="kw5">input</span> <span class="re3">:year</span>, <span class="re3">:mask</span> =&gt; <span class="st0">'9999'</span> %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="kw5">input</span> <span class="re3">:phone</span>, <span class="re3">:mask</span> =&gt; <span class="st0">'99-9999-9999'</span> %&gt;
  &lt;%= <span class="kw5">form</span>.<span class="me1">commit_button</span> %&gt;
&lt;% <span class="kw1">end</span> %&gt;</code></pre>
<p>Inputs utiliza o plugin <a href="http://www.meiocodigo.com/projects/meiomask/">meioMask</a> para criar as máscaras, demais opções e configurações podem ser vista na própria página do <a href="http://www.meiocodigo.com/projects/meiomask/">meioMask</a>.</p>
<p>Sugestões, criticas são bem vindas. O código esta no <a href="http://github.com/jtadeulopes/inputs">Github</a>, fiquem a vontade para utilizar, modificar e compartilhar <img src='http://jlopes.zigotto.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://jlopes.zigotto.com.br/rails/utilizando-formtastic-e-inputs/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

