AngularJS-The Introduction

 HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. AngularJS is a JavaScript framework. It is a library written in JavaScript.It can be added to an HTML page with a script tag.

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.

AngularJS adds behavior to your HTML and speeds up your application’s responsiveness.

It helps you to organize your JS and is perfect for SPAs (Single Page Applications).It is easy to test also.

How AngularJS works?

In a SPA, either all necessary code “HTML, JavaScript, and CSS are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process.Data is loaded into existing page in response to new request.

Architectural Pattern 

View: Visual appearance (declarative languages).

Model: Data model of the app (JavaScript object).

Controller: Adds behavior (imperative language).

 User interacts with the view changes the model, calls the Controller.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

as shown below diagram(download from the link http://angularjs.org and give the reference of AngularJS file)

AngularJS extends HTML with ng-directives.The ng-app directive defines an AngularJS application.The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.The ng-bind directive binds application data to the HTML view.

ng- tells that is an Angular directive. It’s a built-on directive. You can also write custom ones. You can get third party ones and things like that.

ng-app is used to initialize the AngularJS application.

Directives and Data Binding

A Directive is a marker on HTML tag that tells Angular to run or reference some JavaScript code

Expressions:

AngularJS expressions bind data to HTML.AngularJS expressions are written inside double braces: {{expression}}.AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.For example, we can see in the below diagram:

The output is as:

My first expression: 10

If ng-app is removed, HTML will display the expression as it is, without solving it.

The output is as:

Without the ng-app directive, HTML will display the expression as it is, without solving it.

My first expression :{{ 5+5}}

TypeScript-How does it work?

Now we will see how to work with TypeScript in Visual Studio 2012.
TypeScript is a language for application-scale JavaScript development. This power tool adds TypeScript support to Visual Studio 2012.We can download TypeScript for Visual Studio from the below link http://www.microsoft.com/en-in/download/details.aspx?id=34790

After downloading, run the install Typescript exe (TypeScriptSetup.1.0.rtm.VS2012.exe).Double click on exe file and we will get TypeScript window.

Click on install button and then TypeScript will be installed in our system for Visual Studio 2012.
Now open Visual Studio 2012 and go to File->New->Projects.Under Templates, click on TypeScript.

Click on button Ok in New project window and then will launch TypeScript window with TypeScript syntax.

Now press F5 and then will populate first TypeScript output.

Now we can see the differences and compare the syntax between TypeScript file and JavaScript file.

TypeScript-The Basic

TypeScript is a superset of JavaScript that brings to it an additional object-oriented-like syntax familiar to .NET programmers that compiles down into JavaScript that any browser can run today.TypeScript

• is an open source project, so there’s direct input from its users.
• is a standard in its own right.
• is a proof of concept for, and therefore points to a part of the ECMAScript 6 standard.TypeScript is just JavaScript. You only need to know JavaScript to use TypeScript, and all your favorite third-party JavaScript libraries will work fine with it.

JavaScript is just TypeScript. Any valid .js file can be renamed .ts and be compiled with other TypeScript files.

TypeScript borrows from the Harmony specification. When Harmony is ratified, the TypeScript compiler can just let the new language elements alone and allow the new Harmony-compliant engines to parse your TypeScript as pure JavaScript instead.

The TypeScript compiler is itself a JavaScript file (compiled down from TypeScript). Thus it can be hosted in any browser, on any host, on any operating system if required. There’s no dedicated.

 

RAZOR-The Basic

Razor is a simple programming syntax for embedding server code in web pages.The server based code can create dynamic web contenton dynamically while a web page is written to the browser.It is based on ASP.NET and designed for creating web application.
The concept behind razor is to provide an optimized syntax for HTML generation using a code –focused templating approach with minimal trnsition between HTML and code.
Adavantages of Razor

• Razor minimizes the number of characters and keystrokes required in a file. You do not need tobother of interruption of your coding to explicitly denote server blocks within your HTML. The parser is smart enough to infer this from your code. This enables a really compact and expressive syntax which is clean, fast and fun to type.
• Razor is easy to learn and enables you to quickly be productivea nd effective with a minimum of concepts. You can use all your existing language and HTML skills.
• We made to enable developers to use their existing C#/VB language skills with Razor, and deliver a template markup syntax that enables an ainteractive HTML construction workflow with your possible language.
• Razor doesn’t require a specific tool and enables you to be in any plain old text editor like notepad.
• The new view engine implementation will support the ability to unit test views without  a controller or web-server, and can be hosted in any unit test project.
• It Supports IntelliSense.
• It Supports layouts ,an alternative to the "master page" concept in classic aspx pages

Razor Syntax

• Razor code blocks are enclosed in @{ ... }.
• Inline expressions (variables and functions) start with @
• Code statements end with semicolon.
• Variables are declared with the var keyword.
• Strings are enclosed with quotation marks.
• C# code is case sensitive.
• C# files have the extension .cshtml.

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain javascript.It enables to write the JavaScript the way we really think of it. We can write JavaScript in any OS, run in any browser and host in any host. It is a language for application-scale JavaScript development. Unlike JavaScript code, however, TypeScript program code must go through a compiler--one is available as open source from Microsoft. The output is formatted as JavaScript, and that code can run on any browser, and be incorporated into any JavaScript framework or server-side technology, such as node.js.

By compiling the code, TypeScript can offer many features typically associated with more traditional programming languages, such as Java and C++.TypeScript offers static typing, which requires developers to define the data type of a variable before using that variable. It also features generics which allows methods to be applied on different data types.

JSP:The Basic Syntax

There are different jsp tags or elements. All tags are case sensitive. The elements in a JSP page can be expressed in JSP syntax or XML syntax.

There are following rules that are followed while developing JSP page.
1. JSP and XML syntax cannot be mixed within a page.
2. A page in one syntax can include or forward to a page in the other syntax.
3. Some elements have attributes whose value can be computed at request time. In JSP syntax, the format of a value is the same as a JSP expression: <%= expression%>. In XML syntax, the format of the value is %= expression %.

The common tags or elements we use in JSP are as follows
1.jsp:root: Defines standard elements and namespace attributes of tag libraries.
2.Hidden Comment: Documents the JSP page but is not inserted into the response.
3.Declaration: Declares a variable or method valid in the scripting language used in the page.
4.Expression: Contains an expression valid in the scripting language used in the page.
5.Scriptlet: Contains a code fragment valid in the scripting language used in the page.
6jsp:text: Encloses template data.
7.Include Directive: Includes a resource of text or code when the JSP page is translated.
8.Page Directive: Defines attributes that apply to an entire JSP page.
9.Taglib Directive: Defines a tag library and prefix for the custom tags used in the JSP page.
10.jsp:forward: Forwards a request to an HTML file, JSP page, or servlet.
11.jsp:getProperty: Inserts the value of a bean property into the response.
12.jsp:include: Includes a static resource or the result from another web component
13.jsp:plugin: Causes the execution of an applet or bean. The applet or bean executes in the
specified plugin.If the plugin is not available, the client displays a dialog to initiate the download
of the plugin software.
14.jsp:setProperty: Sets a bean property value or values.
15.jsp:useBean: Instantiates or references a bean with a specific name and scope..

 

 

JSP:The Lifecycle

A JSP page services requests as a servlet. So, the life cycle of JSP are determined by Java Servlet technology.

There are following steps followed by JSP

1.Translation and Compilation

2.Initialization

3.Execution

4.Destruction

Translation and Compilation

When a browser asks for a JSP, the web container first checks to see whether the JSP page's servlet is older than the JSP page. If the servlet is older, the web container translates the JSP page into a servlet class and compiles the class. During development, one of the advantages of JSP pages over servlets is that the build process is performed automatically.During the translation phase each type of data (Html and JSP elements) in a JSP page is treated differently. Both the translation and the compilation phases can yield errors that are observed only when the page is requested for the first time. If an error is encountered during either phase, the servers will return JasperException and a message that includes the name of the JSP page and the line where the error occurred.

Initialization

After the page has been translated and compiled, container loads JSP page’s servlet class and instantiates an instance of the servlet class by calling jspInit method.

Execution

Whenever a browser requests a JSP and the page has been loaded and initialized, the web container invokes the _jspService () method in the JSP.

The _jspService () method takes an HttpServletRequest and an HttpServletResponse as its parameter. The _jspService () method of a JSP is invoked once per a request and is responsible for generating the response for that request. We can control various JSP page execution parameters by using page directive. When a JSP page is executed, output written to the response object is automatically buffered. We can set the size of the buffer using the following page directive:

<%@ page buffer="none|xxxkb" %>

A larger buffer allows more content to be written before anything is actually sent back to the client, thus providing the JSP page with more time to set appropriate status codes and headers or to forward to another web resource. A smaller buffer decreases server memory load and allows the client to start receiving data more quickly.

Destruction

The destruction phase of the JSP life cycle represents when a JSP is being removed from use by a container. If the container needs to remove the JSP page's servlet, it calls the jspDestroy method.

JSP:An Architecture

JSP Architecture

Web browser directly accesses the JSP page of web container. The JSP pages interact with the web container’s JavaBeans which represent the application model. When client sends request from a JSP page, the response is sent back to the client depending on the requests which are invoked by the client request. If response requires accessing the database, the JSP page uses JavaBeans to get data from the database.

JSP:A Overview

JavaServer Pages(TM) is a technology specified by Sun Microsystems as a convenient way of generating dynamic content in pages that are output by a Web application (an application running on a Web server). JSP enables us to separate the dynamic content of webpage from static presentation content. A JSP page consists of HTML tags and JSP tags. HTML tags are used to create static page content and JSP tags are used to add dynamic content to web pages.
Why JSP?
Some benefits are following:
1.Web pages created using JSP are portable and can be used across multiple platforms without making any changes.
2.JSP pages are automatically compiled by servers. Developers need to compile JSP pages when the source code of the JSP page is changed.
3.Most important benefit of JSP is the separation of business logic from presentation logic. JavaBeans contain business logic and JSP pages contain presentation logic. This separation makes an application created in JSP more secure and reusable.
4.It easily combines static templates like HTML or XML fragments.
5.Its environment provides compilation of pages automatically.
6.Servlets cannot be accessed directly whereas a JSP page can be accessed directly as a simple HTML page.

Xml Binding using XmlDataProvider in WPF

There are several ways to achieve xml binding but we will discuss about XmlDataProvider.

XmlDataProvider provides Source and XPath properties.

Info.xml file

xmlBinding.xaml

UI Display

After pressing F5,we can see the below UI with all the information present in Info.xml file in DataGrid.

ContextMenu Example in WPF

Menu

A Menu is normally we see at the top of the window.Each of them in those menus are MenuItems.

ContextMenu

It is similar to Menu that pops ups when we right click on something.It is contexted to what is clicked.

Example of ContextMenu

ContextMenuExample1.xaml

UI Display:

After right click on RichTextBox,we can see the Context Menu.

Difference between Grid, StackPanel, WrapPanel, DockPanel and Canvas in WPF

Grid

Grid is the default container where we can arrange the elements in table format.

StackPanel

By using StackPanel we can arrange the elements vertically or horizontally.We can arrange child elements in a panel without affecting the size of the lements.

WrapPanel

WrapPanel is same as StackPanel but it wraps the elements accordingly to size of the form.  The control in Wrap Panel is shifted to the next line automatically if the form size is getting changed.

DockPanel

DockPanel is used to place the control in exact location like as Left, Right, Top and Bottom.
If we not specify any position then control will occupy entire space on the container.

Canvas

Canvas is used to place the control by specifying the position in pixel format.We can use Canvas.Left, Canvas.Right,Canvas.Bottom and Canvas.Top.

Actions on TextBox:Example1

TextChanged Event

This event occurs only when text in TextBox changes.

ActionOnTextBoxExample1.xaml

ActionOnTextBoxExample1.xaml

  .cs

UI Display.

After pressing F5,enter some text or update the text in TextBox,we can the see the messagebox.