Web Application Architectures - Revision history

Suhridk: /* AJAX */

2014-09-28T09:14:55Z

AJAX

Suhridk: /* AJAX */

2014-09-28T08:55:41Z

AJAX

Suhridk: /* Javascript */

2014-09-28T08:55:10Z

Javascript

Suhridk: /* Javascript */

2014-09-28T06:49:11Z

Javascript

Suhridk: /* CSS */

2014-09-28T05:59:36Z

CSS

Suhridk: /* CSS */

2014-09-27T12:38:44Z

CSS

Suhridk: /* CSS */

2014-09-27T12:36:48Z

CSS

Suhridk: /* CSS */

2014-09-27T12:33:49Z

CSS

Suhridk at 12:30, 27 September 2014

2014-09-27T12:30:13Z

Suhridk: /* Dynamic Content in Rails */

2014-09-27T12:09:18Z

Dynamic Content in Rails

← Older revision		Revision as of 09:14, 28 September 2014
Line 327:		Line 327:
	* XMLHttpRequest is an API available to the browser via JS. It is used to send asynchronous HTTP request to a web server (while browser is active doing other things) & then load server response data back into the script. Any data can be retrieved, not just XML. So JSON, HTML, JS, text etc.		* XMLHttpRequest is an API available to the browser via JS. It is used to send asynchronous HTTP request to a web server (while browser is active doing other things) & then load server response data back into the script. Any data can be retrieved, not just XML. So JSON, HTML, JS, text etc.
	* This data is then used to alter the current document shown in the browser (through the DOM) without having to reload the page - so updating just portions of a page becomes possible.		* This data is then used to alter the current document shown in the browser (through the DOM) without having to reload the page - so updating just portions of a page becomes possible.
		+	* Jquery Lib provides a full suite of AJAX capabilities.
		+	* Rails provides an unobtrusive Jquery adapter called jquery_ujs. Forms and links that have the attribute data-remote = "true" will be submitted using jquerys ajax method. Data-remote attribute can be set by using the :remote to true when generating HTML using Rails API's such as form_for etc.

@@ Line 326: / Line 326: @@
 * Originally, Asynchronous Javascript And XML, but now sort of means a group of technologies to deliver a more interactive web browsing experience.
 * XMLHttpRequest is an API available to the browser via JS. It is used to send asynchronous HTTP request to a web server (while browser is active doing other things) & then load server response data back into the script. Any data can be retrieved, not just XML. So JSON, HTML, JS, text etc.
-* This data is then used to alter the current document shown in the browser (through the DOM) without having to reload the page.
+* This data is then used to alter the current document shown in the browser (through the DOM) without having to reload the page - so updating just portions of a page becomes possible.

← Older revision		Revision as of 08:55, 28 September 2014
Line 321:		Line 321:
	$("div.byebye").hide().addClass("removed");		$("div.byebye").hide().addClass("removed");
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	=== AJAX ===
		+
		+	* Originally, Asynchronous Javascript And XML, but now sort of means a group of technologies to deliver a more interactive web browsing experience.
		+	* XMLHttpRequest is an API available to the browser via JS. It is used to send asynchronous HTTP request to a web server (while browser is active doing other things) & then load server response data back into the script. Any data can be retrieved, not just XML. So JSON, HTML, JS, text etc.
		+	* This data is then used to alter the current document shown in the browser (through the DOM) without having to reload the page.

@@ Line 315: / Line 315: @@
 * Retrieved elements are wrapped with additional methods - the JQuery API.
 * The following example, div elements with a class of byebye is retrieved and the hide() method is called.
 <syntaxhighlight lang="javascript">
 $("div.byebye").hide();
 </syntaxhighlight>

← Older revision		Revision as of 05:59, 28 September 2014
Line 306:		Line 306:
	* CSS treats every element as a box. Important to understand the box model.		* CSS treats every element as a box. Important to understand the box model.
	* CSS can be used to position the boxes on a page and therefore the page layout. Hitherto, this was done using HTML tables and IFrames, but no longer needed.		* CSS can be used to position the boxes on a page and therefore the page layout. Hitherto, this was done using HTML tables and IFrames, but no longer needed.
		+
		+	== Javascript ==
		+
		+	* Rails supports the JQuery JS library by default.
		+	* Jquery supports unobtrusive JS - i.e. any JS expressions are never embedded in the body of an HTML document. Behaviour is separated from structure.
		+	* The focus on jquery is on retrieving elements from the HTML pages and performing operations on them.
		+	* Elements are retrieved via selectors (same as CSS selectors)
		+	* Retrieved elements are wrapped with additional methods - the JQuery API.
		+	* The following example, div elements with a class of byebye is retrieved and the hide() method is called.
		+
		+	<syntaxhighlight lang="javascript">
		+	$("div.byebye").hide();
		+	</syntaxhighlight>

← Older revision		Revision as of 12:38, 27 September 2014
Line 305:		Line 305:
	* Pseudo classes were introduced to allow for selection on info. that lies outside the DOM. e.g. visited/unvisited links etc, hover etc.		* Pseudo classes were introduced to allow for selection on info. that lies outside the DOM. e.g. visited/unvisited links etc, hover etc.
	* CSS treats every element as a box. Important to understand the box model.		* CSS treats every element as a box. Important to understand the box model.
		+	* CSS can be used to position the boxes on a page and therefore the page layout. Hitherto, this was done using HTML tables and IFrames, but no longer needed.

← Older revision		Revision as of 12:36, 27 September 2014
Line 303:		Line 303:

	* Common selectors include type (elements of a particular type), class selectors (elements having a certain class attribute set) or id selectors (having the id element set)		* Common selectors include type (elements of a particular type), class selectors (elements having a certain class attribute set) or id selectors (having the id element set)
		+	* Pseudo classes were introduced to allow for selection on info. that lies outside the DOM. e.g. visited/unvisited links etc, hover etc.
		+	* CSS treats every element as a box. Important to understand the box model.

← Older revision		Revision as of 12:33, 27 September 2014
Line 301:		Line 301:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+	* Common selectors include type (elements of a particular type), class selectors (elements having a certain class attribute set) or id selectors (having the id element set)

← Older revision		Revision as of 12:30, 27 September 2014
Line 285:		Line 285:
	* A layout file is used as a centralized mechanism to control look & feel of a site. By default application.html.erb file is used. Custom layouts per controller can be created.		* A layout file is used as a centralized mechanism to control look & feel of a site. By default application.html.erb file is used. Custom layouts per controller can be created.
	* The ERB template will be placed where the yield statement in the layout file is present.		* The ERB template will be placed where the yield statement in the layout file is present.
		+
		+	== CSS ==
		+
		+	* A CSS rule has the following syntax : selector {declaration}
		+	* Selector - specifies the elements the styling rule will apply to.
		+	* Declaration - semicolon separated list of property:value pairs.
		+
		+	<syntaxhighlight lang="css">
		+
		+	h1, h2 {
		+	font-weight : bold,
		+	font-family : arial,
		+	color : black
		+	}
		+
		+	</syntaxhighlight>

← Older revision		Revision as of 12:09, 27 September 2014
Line 279:		Line 279:

	* In Rails, a controller makes every instance variable it creates available to the associated view files.		* In Rails, a controller makes every instance variable it creates available to the associated view files.
		+	* In Rails, dynamic content is generated using templates and the most common templating framework is Embedded Ruby. Sort of works like JSP.
		+	* The Ruby code in the ERB should never contain app/business logic. Should just be used to provide dynamic information to specific resources.
		+	* To generate HTML elements and to format data in the view, Rails provides numerous helper methods.
		+	* When generating the final HTML, the ERB template is passed as a block to a layout file.
		+	* A layout file is used as a centralized mechanism to control look & feel of a site. By default application.html.erb file is used. Custom layouts per controller can be created.
		+	* The ERB template will be placed where the yield statement in the layout file is present.