CSC/ECE 517 Spring 2016/Mozilla Implement HTML5 form validation: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
(Created page with "'''' Implement HTML5 form validation '''' Servo is a prototype web browser engine being developed by Mozilla and written in the Rust language. =='''Introduction'''== The [http...")
 
No edit summary
Line 1: Line 1:
'''' Implement HTML5 form validation ''''
'''' Implement HTML5 form validation ''''


Servo is a prototype web browser engine being developed by Mozilla and written in the Rust language.  
Servo is a prototype web browser engine being developed by Mozilla and written in the Rust language. This project implements  [https://en.wikipedia.org/wiki/HTML5 HTML5]HTML5 validations for servo.


=='''Introduction'''==
=='''Introduction'''==
The [https://en.wikipedia.org/wiki/HTML5]HTML5 is a markup language used for displaying content on the World Wide Web
The [https://en.wikipedia.org/wiki/HTML5 HTML5]HTML5 is a markup language used for displaying content on the World Wide Web


HTML5 defines set of specification which users needs to follow to make web pages HTML5 complient. defines a mechanism by which website authors can require browsers to validate the contents of forms before the user is allowed to submit them. Servo currently implements support for a subset of the form element types defined by the specification; this project is intended to implement the client-side validations steps and extend the supported subset to include additional form elements that support validation.
HTML5 defines set of specification which users needs to follow to make web pages [https://en.wikipedia.org/wiki/HTML5]HTML5 compliant. defines a mechanism by which website authors can require browsers to validate the contents of forms before the user is allowed to submit them. Servo currently implements support for a subset of the form element types defined by the specification; this project is intended to implement the client-side validations steps and extend the supported subset to include additional form elements that support validation.


===Servo===
===Servo===
Line 23: Line 23:
     ./mach run tests/html/about-mozilla.html
     ./mach run tests/html/about-mozilla.html


* The next requirement was to build the Rust-layers independently of Servo. For this, we
* The next requirement was to uncomment the attributes in ValidityState.weidl and fix the resulting build errors by implementing appropriate stub methods in validitystate.rs
* Next, we had to over-ride cargo to use our local copy of Rust-layers, so we had to add a cargo override to it. For this, we created a <code>.cargo</code> folder in our home directory(same place that servo and Rust-layers reside), and added a <code>config</code> file to that folder. The content of that config file is a path to our local Rust-layers.
* Next, we had to modify the ValidityState constructor to take an &Element argument and store it as element variable of JS<Element> type member in the ValidityState.
    paths = [path/to/rust_layers]
* The changes to the constructor resulted in build errors in following files
* Next, we had to add a new command line argument in Servo, which would allow selecting the graphics background (GL or ES2). For this, we made the following changes:
<code>
- We added a command line option which lets the user enter the option <code>-E</code> or <code>--es2</code> if the user wants to set ES2 as the graphic back end option. GL is set by default, hence if the user doesn't give any argument, Gl is selected as the graphic back end option. Example is as below
htmlselectelement.rs
    ./mach run [url] -E
htmloutputelement.rs
* Next, we had to add a flag in Rust-layers. This change was made in the file [https://github.com/prashantgupta24/rust-layers/blob/master/src/rendergl.rs Rust/src/rendergl.rs] in the <code>RenderContext::new</code> function. For this, we did the following change:
htmlobjectelement.rs
- We defined an enum <code>GraphicOption</code> which defined two options <code>GL</code> and <code>ES2</code> and then based on the boolean value from the servo <code>opts.rs</code>, we set a variable with the respective enum value <code>GL</code> or <code>ES2</code>.
htmlfieldsetelement.rs
* Finally, we had to use the new command line option to pass the selected graphics back-end option to the Rust-layers context which we created in the previous step. For this we made changes to the [https://github.com/prashantgupta24/servo/blob/master/components/compositing/compositor.rs compositor.rs] in Compositing folder which is how Servo interacts with the Rust layers. The command line option is passed through the <code>initialize_compositing</code> function.
htmlbuttonelement.rs
</code>
So, the constructors called in these files were modified to send the required extra parameter.
* Next, we had to add a new enum “ValidityStatus” in ValidityState having each possible validity check in ValidityState.
* Next, we had to define a new trait Validatable having method “is_instance_validatable”. (which takes the new ValidityStatus enum as an argument.)
* Next, we implemented this trait and the corresponding method in the following files
<code>
htmltextareaelement.rs
htmlselectelement.rs
htmllabelelement.rs
htmlinputelement.rs
htmlbuttonelement.rs
htmlanchorelement.rs </code>
* Then, we had to define method as_maybe_validatable in file “element.rs”  which returns an &Validatable value if the element implements the newly defined trait.
* Finally, we added a new html file “form_html5_validations.html” to test the HTML5 validation for the mentioned conditions


=='''Design Pattern'''==
=='''Design Pattern'''==
Line 37: Line 51:


=='''Conclusion'''==
=='''Conclusion'''==
As a result of these initial changes, currently validation of the form elements has a basic implementation of the code required. The enum “ValidityStatus” is used to identify different states for the element. For each element in the form, the flow goes in this manner - First the “as_maybe_validatable” method in the element.rs file is called, which in turn finds out the type of the element and then calls the “is_instance_validatable” method on that element.
After making our changes , the user can now dynamically pass in the option of GL or ES2 through the graphic command line option, and this option is passed on through the compositor to the rust layers during initialization. A video demonstration for the code changes is available [https://drive.google.com/file/d/0B9TVPg3YRoHqQUlvQXZkUUJPRzA/view?usp=sharing here]
After making our changes , the user can now dynamically pass in the option of GL or ES2 through the graphic command line option, and this option is passed on through the compositor to the rust layers during initialization. A video demonstration for the code changes is available [https://drive.google.com/file/d/0B9TVPg3YRoHqQUlvQXZkUUJPRzA/view?usp=sharing here]


Line 43: Line 58:
2.    https://en.wikipedia.org/wiki/Rust_(programming_language)<br>
2.    https://en.wikipedia.org/wiki/Rust_(programming_language)<br>
3.    https://en.wikipedia.org/wiki/Servo_(layout_engine)<br>
3.    https://en.wikipedia.org/wiki/Servo_(layout_engine)<br>
4.    https://github.com/servo/servo/wiki/Refactor-GLES2-student-project<br>
4.    https://github.com/servo/servo/wiki/Form-validation-student-project<br>
5.   http://doc.crates.io/guide.html#overriding-dependencies<br>
5.   https://doc.rust-lang.org/book/
6.    http://rustbyexample.com/<br>
7.   http://javarevisited.blogspot.com/2014/11/strategy-design-pattern-in-java-using-Enum-Example.html<br>

Revision as of 04:07, 22 March 2016

' Implement HTML5 form validation '

Servo is a prototype web browser engine being developed by Mozilla and written in the Rust language. This project implements HTML5HTML5 validations for servo.

Introduction

The HTML5HTML5 is a markup language used for displaying content on the World Wide Web

HTML5 defines set of specification which users needs to follow to make web pages [1]HTML5 compliant. defines a mechanism by which website authors can require browsers to validate the contents of forms before the user is allowed to submit them. Servo currently implements support for a subset of the form element types defined by the specification; this project is intended to implement the client-side validations steps and extend the supported subset to include additional form elements that support validation.

Servo

ServoServo is an open source prototype web browser layout engine being developed by Mozilla, and it is written in Rust language. The main idea is to create a highly parallel environment, in which different components can be handled by fine grained, isolated tasks. The different components can be rendering, HTML parsing, etc.

Rust

Rust is an open source systems programming language developed by Mozilla. Servo is written in Rust. The main purpose behind it's design is to be thread safe and concurrent. The emphasis is also on speed, safety and control of memory layout.

Project Description

  • The project requirement initially stated that we build and Compile servo. Following are the steps for this:

Servo is built with Cargo, the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks. 

   git clone https://github.com/servo/servo
   cd servo
   ./mach build --dev
   ./mach run tests/html/about-mozilla.html
  • The next requirement was to uncomment the attributes in ValidityState.weidl and fix the resulting build errors by implementing appropriate stub methods in validitystate.rs
  • Next, we had to modify the ValidityState constructor to take an &Element argument and store it as element variable of JS<Element> type member in the ValidityState.
  • The changes to the constructor resulted in build errors in following files

htmlselectelement.rs htmloutputelement.rs htmlobjectelement.rs htmlfieldsetelement.rs htmlbuttonelement.rs So, the constructors called in these files were modified to send the required extra parameter.

  • Next, we had to add a new enum “ValidityStatus” in ValidityState having each possible validity check in ValidityState.
  • Next, we had to define a new trait Validatable having method “is_instance_validatable”. (which takes the new ValidityStatus enum as an argument.)
  • Next, we implemented this trait and the corresponding method in the following files

htmltextareaelement.rs htmlselectelement.rs htmllabelelement.rs htmlinputelement.rs htmlbuttonelement.rs htmlanchorelement.rs

  • Then, we had to define method as_maybe_validatable in file “element.rs” which returns an &Validatable value if the element implements the newly defined trait.
  • Finally, we added a new html file “form_html5_validations.html” to test the HTML5 validation for the mentioned conditions

Design Pattern

We attempted to follow good OO practices by implementing the Strategy design pattern using Enum.

Conclusion

As a result of these initial changes, currently validation of the form elements has a basic implementation of the code required. The enum “ValidityStatus” is used to identify different states for the element. For each element in the form, the flow goes in this manner - First the “as_maybe_validatable” method in the element.rs file is called, which in turn finds out the type of the element and then calls the “is_instance_validatable” method on that element. After making our changes , the user can now dynamically pass in the option of GL or ES2 through the graphic command line option, and this option is passed on through the compositor to the rust layers during initialization. A video demonstration for the code changes is available here

References

1. https://doc.rust-lang.org/stable/book/
2. https://en.wikipedia.org/wiki/Rust_(programming_language)
3. https://en.wikipedia.org/wiki/Servo_(layout_engine)
4. https://github.com/servo/servo/wiki/Form-validation-student-project
5. https://doc.rust-lang.org/book/

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2016/Mozilla_Implement_HTML5_form_validation&oldid=101021"