Ensimmäistä kertaa, kun tutustuin Ruby on Railsiin, olin aika häkeltynyt. Se oli ensimmäinen ohjelmointikehys, jonka opin, ja minun on sanottava, että hieman rakastuin. Olin juuri oppinut rakentamaan sovelluksia Sinatran avulla ja pidin sitä melko mahtavana työkaluna, mutta sitten näin, mitä Rails voi tehdä…
Yksi Railsin tärkeimmistä ominaisuuksista, joiden käyttämisestä todella nautin, oli From Helpers. Sen avulla pystyin välttämään kaiken HTML:n kirjoittamisen lomakkeen rakentamiseksi, ja se puolestaan antoi minulle mahdollisuuden tehdä monimutkaisempia ominaisuuksia. Tässä artikkelissa aion eritellä Railsin tarjoamat erilaiset lomake-apurit ja jopa käsitellä uutta apuria, joka lanseerattiin Rails 5.1 -julkaisussa.
Lomakkeiden luominen HTML:llä voi toisinaan olla hankalaa, varsinkin kun ne ovat erityisen pitkiä ja niissä on aivan liikaa syöttökenttiä. Niistä voi tulla vielä hankalampia, kun lomakkeen on lähetettävä tietoja tiettyyn api-päätepisteeseen tai se on liitettävä tietokantamalliin. Tässä on html-lomake käyttäjän luomista varten:
<form class="new_user" action="/users" method="post">
<label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User">
</form>
Kuten näet, tämän kaiken kirjoittaminen voi muuttua nopeasti monimutkaiseksi. Jos tarkastelet lomaketta tarkemmin, voit nähdä, että välitämme lomakkeellemme uuden käyttäjän luomista varten action- ja method-attribuutin. Tämä on hienoa ja kaikkea, mutta Rails on erittäin nirso, kun on kyse lomakkeiden lähettämisestä. Tämä lomake ei päässyt läpi, kun se lähetettiin. Tässä kohtaa Form helpers tulevat apuun.
Form helpers
Kun opettelin ensimmäistä kertaa käyttämään Form helpersia, en rehellisesti sanottuna voinut uskoa, mitä ne tekivät. Kuten edellisestä tekemästämme lomakkeesta näitte, se vaatii aikaa ja monimutkaisuutta. Lomakeapulaisten avulla tämä voidaan kuitenkin saavuttaa paljon vähemmällä työllä ja melkoisella ”taikuudella”.
On olemassa kolme erilaista apulaista, jotka auttavat meitä rakentamaan nopeita ja käyttökelpoisia lomakkeita Railsissa: form_tag, form_for ja form_with. Viimeinen, form_with, otettiin käyttöön Rails 5.1:n julkaisussa ja se lähinnä yhdistää kaksi edellistä auttajaa.
form_tag
form_tag on auttajista yksinkertaisin ja tekee puolestaan vähemmän ”taikoja” puolestasi. Se rakentaa edelleen lomakkeen puolestasi, mutta sinun täytyy olla selkeämpi, kun ilmoitat url-polkuja, ja sitä käytetään pääasiassa silloin, kun lomake ei ole liitetty Controller#actioniin. Käytetään esimerkkinä yksinkertaista hakulomaketta:
<%= form_tag("/search", method: "get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("Search") %>
<% end %>
Tämä tuottaa seuraavan HTML:
<form accept-charset="UTF-8" action="/search" method="get">
<input name="utf8" type="hidden" value="✓" />
<label for="q">Search for:</label>
<input name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>
Kuten näet, ilmoitamme reitin, jonka haluamme lomakkeen parametrien välittyvän form_tag:ssa. Voit nähdä tämän tapahtuvan rivillä <%= form_tag("/search", method: "get") do %> ja näet myös, että määrittelemme http-pyynnön. Tämä on silti aika mahtavaa ja näet, että Rails huolehtii paljon puolestamme jo peruslomakeavustajassakin, mutta Railsilla on tästä tehokkaampi versio…
form_for
Form_for on se oikea juttu. Tämän helperin avulla voimme sitoa lomakkeen objektiin, jolloin voimme luoda/muokata objektin. Kuten näimme form_tag-esimerkissä, meidän piti olla selvillä siitä, mitä url-polkua käytämme lomakkeen parametrien lähettämiseen, mutta form_for:n avulla voimme abstrahoida tämän pois. Tässä on esimerkki:
<%= form_for @user do |f| %> <%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit %><% end %>
Tämä tuottaa saman koodin, jonka näimme ensimmäisessä esimerkissämme html-lomakkeesta.
<form class="new_user" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token"
value="QPJXa5iS/XNvodHhpcwV5q42RoGFWsmZkwL3ATHFfeKqxZ8IQsLs1QjJvcrdO3BwCaOfQ4TxNLDD0b6VbxiACg=="> <label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User"></form>
Voit heti nähdä, kuinka paljon siistimmältä tämä koodi näyttää form_for:n avulla. Rehellisesti sanottuna on hieman ällistyttävää, että näin pieni koodi voi luoda kaiken tuon html:n, mutta niin se todella tekee! Voit nähdä form_for:n ensimmäisellä rivillä, että välitämme käyttäjän instanssimuuttujan, joka liittää tämän lomakkeen kyseiseen objektiin. Toinen hieno asia tämän muuttujan syöttämisessä on se, että Rails etsii itsestään sopivan url-polun, verrattuna form_tag:een, jossa meidän piti nimenomaisesti kertoa sille, minne data lähetetään.
form_with
- Mahdollisesti puhutaan form_with:stä ja sen käytöstä
- Käytä koodinpätkiä esimerkkinä
Jos katsot Ruby on Rails 5.1:n julkaisuilmoituksia, siellä on huomautus siitä, että form_for ja form_tag yhdistyvät form_with:ksi. Tämän uuden apurin suurin hyöty on form_with voi luoda lomaketageja URL-osoitteiden, laajuuksien tai mallien perusteella
Tarkistetaanpa sitä!
form_with käyttäen URL-osoitteita
Käytetään samaa esimerkkiä, jota käytimme form_for:ssä ja sovelletaan sitä form_with:llä käyttäen vain URL-osoitetta:
<%= form_with url: user_path do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>
Kuten näet, se on hyvin samanlainen kuin form_tag, jossa määrittelemme tietyn URL-osoitteen (user_path)
form_with using models
Todella hieno juttu form_with:ssä on se, että sitä voidaan käyttää myös malliobjektien välittämiseen, samaan tapaan kuin malliobjekteja välitettäessä form_for.
<%= form_with model: @user do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>
Tämä luo saman HTML:n, joka tuotettiin käyttämällä form_for.
Suurin hyöty form_with:stä on se, että meidän ei enää tarvitse huolehtia siitä, että päätämme form_tag:n ja form_for välillä. Meillä on näppärä apuohjelma, jonka avulla voimme tehdä kumman tahansa tehtävän vain vaihtamalla ilmoitetun lomakkeen ensimmäisellä rivillä.
Conclusion
Railsin lomakkeiden apuohjelmat ovat mahtavia, ja uusi lisäys form_with todella yhdistää kaikki sekä form_tag:n että form_for:n edut. Sinulla on nyt työkalu, jonka avulla voit rakentaa lomakkeen minkä tahansa tarpeesi mukaan. Olipa kyseessä sitten hakulomake tai lomake tietojen tallentamiseksi tietokantaan, saat sen hoidettua Railsin lomakeavustajien avulla.
Suosittelen myös käymään läpi Railsin oppaita oppiaksesi tekemään monimutkaisempia lomakkeita. Sinulla on melko paljon vaihtoehtoja siitä, että sallit mallin hyväksyä sisäkkäisiä attribuutteja, sinulla on sisäkkäisiä attribuutteja ja muita lomakeapulaisia, joilla voit luoda mukautettuja syöttökenttiä. On niin paljon leikkimistä, kun käydään läpi näitä dokumentteja, joten hyödynnä niitä!
Happy Coding!