CSC/ECE 517 Spring 2015/ch1b 22 SF - Revision history

Zchen15 at 01:27, 24 February 2015

2015-02-24T01:27:54Z

← Older revision		Revision as of 01:27, 24 February 2015
Line 9:		Line 9:
	=== Background ===		=== Background ===

	Simple Form ~~aims~~ to ~~be as flexible as possible while helping you with~~ powerful components to create your forms . ~~The basic goal of~~ Simple Form is to ~~not touch~~ your ~~way of defining the layout~~, ~~letting~~ you ~~find the better design for your eyes~~. Most of the DSL <ref>https://http://en.wikipedia.org/wiki/Domain-specific_language</ref> was inherited from '''Formtastic<ref>https://github.com/justinfrench/formtastic</ref>'''.		Many web applications would contain forms and these forms are made of some basic elements, like text input, button, checkbox, etc. To generate forms with different layouts but similar elements, designers/developers would sometimes write duplicate codes. Simple Form provides a flexible way for designers/developers to define the markup that works better for each application by providing some powerful components to create your own forms. Simple Form let you to define your form better with similar or no extra markup, so that you could transfer to desigy using Simple Form almost seamlessly. Most of the DSL <ref>https://http://en.wikipedia.org/wiki/Domain-specific_language</ref> was inherited from '''Formtastic<ref>https://github.com/justinfrench/formtastic</ref>'''.

	== Getting Started ==		== Getting Started ==

Zchen15 at 00:59, 24 February 2015

2015-02-24T00:59:27Z

← Older revision		Revision as of 00:59, 24 February 2015
Line 9:		Line 9:
	=== Background ===		=== Background ===

	Simple Form aims to be as flexible as possible while helping you with powerful components to create your forms . The basic goal of Simple Form is to not touch your way of defining the layout, letting you find the better design for your eyes. Most of the DSL was inherited from '''Formtastic<ref>https://github.com/justinfrench/formtastic</ref>'''.		Simple Form aims to be as flexible as possible while helping you with powerful components to create your forms . The basic goal of Simple Form is to not touch your way of defining the layout, letting you find the better design for your eyes. Most of the DSL <ref>https://http://en.wikipedia.org/wiki/Domain-specific_language</ref> was inherited from '''Formtastic<ref>https://github.com/justinfrench/formtastic</ref>'''.

	== Getting Started ==		== Getting Started ==

Zchen15 at 04:00, 19 February 2015

2015-02-19T04:00:47Z

← Older revision		Revision as of 04:00, 19 February 2015
Line 230:		Line 230:

	==Conclusion==		==Conclusion==
			Simple Form provides a simple and flexible way for developers to generate forms. These forms could then work seamlessly with other CMV components to deliver, process and display data.
			Compared with Bootstrap, Simple Forms provides an easier way to generate the same form. It costs less codes and time, and the codes are more concise and readable.

	== References ==		== References ==
	<references/>		<references/>

Zchen15 at 03:45, 19 February 2015

2015-02-19T03:45:33Z

← Older revision		Revision as of 03:45, 19 February 2015
Line 126:		Line 126:

	<div class="center" style="width: auto; margin-left: auto; margin-right: auto;">Figure 1 The resulting form generated by Simple Form.<ref>http://simple-form-bootstrap.plataformatec.com.br/documentation</ref></div>		<div class="center" style="width: auto; margin-left: auto; margin-right: auto;">Figure 1 The resulting form generated by Simple Form.<ref>http://simple-form-bootstrap.plataformatec.com.br/documentation</ref></div>

			===A Comparison between Simple Form and Bootstrap===
			Using Simple Form to generate forms costs less time and codes than Bootstrap, and here is a comparison<ref>Simple Form and Bootstrap http://simple-form-bootstrap.plataformatec.com.br/?optionsRadios=option1&optionsRadios=option1</ref>. The Simple Form code and Bootstrap codes generate almost the same forms, as are shown below.

			<div class="center" style="width: auto; margin-left: auto; margin-right: auto;"> [[File:SFexample2.png]]</div>

			<div class="center" style="width: auto; margin-left: auto; margin-right: auto;">Figure 2 Forms generated by Simple Form and Bootstrap.<ref>http://simple-form-bootstrap.plataformatec.com.br/documentation</ref></div>

			The code to generate the form with Simple Form is

			<pre>
			<%= simple_form_for @user_basic, url: create_basic_examples_url, as: 'user_basic' do \|f\| %>
			<%= f.error_notification %>

			<%= f.input :email, placeholder: 'Enter email' %>

			<%= f.input :password, placeholder: 'Password' %>

			<%= f.input :file, as: :file %>

			<%= f.input :active %>

			<%= f.input :choices, as: :check_boxes,
			collection: ["Option one is this and that—be sure to include why it's great", "Option two can be something else and selecting it will deselect option one"] %>

			<%= f.input :sex, as: :radio_buttons,
			collection: ["Male", "Female"] %>

			<%= f.button :submit %>
			<% end %>
			</pre>

			And the code to generate the form with Bootstrap is

			<pre>
			<form role="form">
			<div class="form-group">
			<label class="control-label" for="exampleInputEmail1">Email</label>
			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
			<p class="help-block">Lorem ipsum dolor sit amet</p>
			</div>

			<div class="form-group">
			<label class="control-label" for="exampleInputPassword1">Password</label>
			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			<p class="help-block">Lorem ipsum dolor sit amet</p>
			</div>

			<div class="form-group">
			<label class="control-label" for="exampleInputFile">File</label>
			<input type="file" id="exampleInputFile">
			<p class="help-block">Example block-level help text here.</p>
			</div>

			<div class="form-group">
			<div class="checkbox">
			<label>
			<input type="checkbox"> Active
			</label>
			</div>
			<p class="help-block">Lorem ipsum dolor sit amet</p>
			</div>

			<div class="form-group">
			<label class="control-label">Choices</label>
			<div class="checkbox">
			<label>
			<input type="checkbox" name="optionsRadios" id="optionsCheckbox1" value="option1" checked>
			Option one is this and that—be sure to include why it's great
			</label>
			</div>
			<div class="checkbox">
			<label>
			<input type="checkbox" name="optionsRadios" id="optionsCheckbox2" value="option2">
			Option two can be something else and selecting it will deselect option one
			</label>
			</div>
			</div>

			<div class="form-group">
			<label class="control-label">Sex</label>
			<div class="radio">
			<label>
			<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
			Male
			</label>
			</div>
			<div class="radio">
			<label>
			<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
			Female
			</label>
			</div>
			<p class="help-block">Lorem ipsum dolor sit amet</p>
			</div>

			<button type="submit" class="btn btn-default">Create User</button>
			</form>

			</pre>

			As can be seen from above codes, it is easier to to implement the form with Simple Form than the Bootstrap.

	==Conclusion==		==Conclusion==

Njiang4: /* Examples */

2015-02-19T03:44:53Z

Examples

← Older revision		Revision as of 03:44, 19 February 2015
Line 45:		Line 45:
	For more information see the generator output, out example application code and the live example app.		For more information see the generator output, out example application code and the live example app.

	==Examples==		==Usage and Examples==
	===A Simple Form and Bootstrap Sample===		===A Simple Form and Bootstrap Sample===
	A simple form and bootstrap sample application <ref>A simple form example http://simple-form-bootstrap.plataformatec.com.br/documentation</ref> gives some insight into how to build a decent form with the help of simple form and bootstrap.		A simple form and bootstrap sample application <ref>A simple form example http://simple-form-bootstrap.plataformatec.com.br/documentation</ref> gives some insight into how to build a decent form with the help of simple form and bootstrap.

Njiang4 at 03:41, 19 February 2015

2015-02-19T03:41:30Z

← Older revision		Revision as of 03:41, 19 February 2015
Line 45:		Line 45:
	For more information see the generator output, out example application code and the live example app.		For more information see the generator output, out example application code and the live example app.

	==~~=Usage===~~		==Examples==

	~~==Other~~ Examples==
	===A Simple Form and Bootstrap Sample===		===A Simple Form and Bootstrap Sample===
	A simple form and bootstrap sample application <ref>A simple form example http://simple-form-bootstrap.plataformatec.com.br/documentation</ref> gives some insight into how to build a decent form with the help of simple form and bootstrap.		A simple form and bootstrap sample application <ref>A simple form example http://simple-form-bootstrap.plataformatec.com.br/documentation</ref> gives some insight into how to build a decent form with the help of simple form and bootstrap.

Zchen15 at 03:02, 19 February 2015

2015-02-19T03:02:03Z

← Older revision		Revision as of 03:02, 19 February 2015
Line 49:		Line 49:
	==Other Examples==		==Other Examples==
	===A Simple Form and Bootstrap Sample===		===A Simple Form and Bootstrap Sample===
	A simple form and bootstrap sample application <ref>http://simple-form-bootstrap.plataformatec.com.br/documentation</ref> gives some insight into how to build a decent form with the help of simple form and bootstrap.		A simple form and bootstrap sample application <ref>A simple form example http://simple-form-bootstrap.plataformatec.com.br/documentation</ref> gives some insight into how to build a decent form with the help of simple form and bootstrap.
	The code to create a form is listed below.		The code to create a form is listed below.

Line 124:		Line 124:

	Then the code would become more DRY<ref>http://en.wikibooks.org/wiki/Ruby_on_Rails/Getting_Started/Don%C2%B4t_repeat_yourself</ref>.		Then the code would become more DRY<ref>http://en.wikibooks.org/wiki/Ruby_on_Rails/Getting_Started/Don%C2%B4t_repeat_yourself</ref>.
			Finally the form generated by this Simple Form code and bootstrap looks like
			<div class="center" style="width: auto; margin-left: auto; margin-right: auto;"> [[File:basic_form_example.png]]</div>

			<div class="center" style="width: auto; margin-left: auto; margin-right: auto;">Figure 1 The resulting form generated by Simple Form.<ref>http://simple-form-bootstrap.plataformatec.com.br/documentation</ref></div>

	==Conclusion==		==Conclusion==

	== References ==		== References ==
	<references/>		<references/>

Zchen15 at 02:34, 19 February 2015

2015-02-19T02:34:47Z

@@ Line 48: / Line 48: @@
 ==Other Examples==
 ==Conclusion==
 == References ==
 <references/>

Njiang4 at 22:02, 18 February 2015

2015-02-18T22:02:22Z

← Older revision		Revision as of 22:02, 18 February 2015
Line 44:		Line 44:

	For more information see the generator output, out example application code and the live example app.		For more information see the generator output, out example application code and the live example app.

			===Usage===

	==Other Examples==		==Other Examples==

Njiang4 at 22:01, 18 February 2015

2015-02-18T22:01:41Z

← Older revision		Revision as of 22:01, 18 February 2015
Line 44:		Line 44:

	For more information see the generator output, out example application code and the live example app.		For more information see the generator output, out example application code and the live example app.

			==Other Examples==

			==Conclusion==

	== References ==		== References ==
	<references/>		<references/>