Xamarin.Forms CarouselView with image indicators

Download source code

Most of us when we are very familiar with Bootstrap carousel, we expect the same output in mobile CarouselView either. But the problem with Xamarin.Form CarouselView doesn’t provide us such CarouselView with Image Indicators. 

So this article will help the crazy professionals

Step1: Create a Mobile App (Xamarin.forms) project

Open Visual Studio 2017    File    New    Project    Choose Cross-Platform template    choose Mobile App (Xamarin.Forms)    Name it as CarouselViewApp    Click on OK    choose .Net Standard    Click OK

 

Step2: Install CarouselView NuGet Package

Right click on CarouselViewApp    Manage NuGet Packages    type CarouselView.FormsPlugin and Install the package

 

Step3: Create a Model for Images as ImageModel.cs

Before that add the images in CarouselViewApp.Android    Resource    drawable

File: ImageModel.cs

 

Step4: Create ViewModel for MainPage.xaml

Right click on CarouselViewApp    Add    NewItem    Visual C#    Add new class MainPageViewModel.cs

File: MainPageViewModel.cs

 

Step5:  Adding namespace in the MainPage.xaml

 

Step6: Assign BindingContext for MainPage.xaml.cs

File: MainPage.xaml.cs

 

Step7: Creating UI for MainPage.xaml

File: MainPage.xaml

  1. By using Image.GestureRecognizers, we are firing click events using MVVM Architecture
  2. Rotation property for ListView helps us to set or get the current rotation of the element. Here we are rotating ListView to 270 deg
  3. Here the indicators row in Grid is build using RelativeLayout.
  4. RelativeLayout is used here to turn the ListView in Horizontal Direction
    1. At first we move ListView into RelativeLayout, and maintaining the RelativeLayout HeightRequest.
    2. Now we need to fit the ListView in RelativeLayout bounds, this we can do it by using RelativeLayout Constraints.
    3. RelativeLayout.XConstraint, RelativeLayout.YContraint  are used to fix the x,y positions. And then RelativeLayout.WidthConstraint is to set the width for image, RelativeLayout.HeightContraint is to set the height for image.
    4. And the final step is to rotate the ContentView. This will first rotate the cell and the fit image into it.

 

output: Now run the application

  

Authentication and Authorization in ASP.NET Web API using Custom Filters

  • Web API is a platform for building RESTful applications on DotNet Framework. 
  • These API’s can be consumed from Console, Windows, Web, Mobile Applications.
  • As Web API is a part of core ASP.NET, it can be created on either MVC applications, or any other web applications.
  • Web API’s uses all the HTTP features like Request and Response headers, caching and so on…
  • Web API’s can return the data in various formats like
    • string format
    • Json format
    • XML format
    • BSON format

Step 1: Create a  ASP.NET Web API application

Open Visual Studio –> File –> New –> Project –> choose template Web –> click on ASP.NET Web Application  and provide name of the application–> choose Web API from the below check boxes –> Click OK

Step 2: Create a Model and inherit GenericIdentity from Security.Principal assembly

File: UserModel.cs

 

Step 3: Now add a new class for Creating custom filter as MyAuthorization and inherit AuthorizationFilterAttribute and add the following assemblies MyAuthorization class.

File: MyAuthorization.cs

 

Step 4: Here is your CustomAuthorization Filter MyAutorization

 

Step 5: Now create an API Controller and add your custom filter. Here I’m adding for only one method for testing you can add it for the entire class or add it globally.

File: Global.asax 

Add the below line in Application_Start( ), this registers our custom Filter for the entire application.

 File: EmployeeAPIController.cs

 

Step 6: Now create your GUI and on a button click write a server side method. Form this method you can communicate with API. In my case I took a console application.

  1. If you run the web project you will get your local host URL, in my case it was http://localhost:58100/
  2. Here in the authorization Header I have added my username and password in the given format username:password and encoding it to Base64 so that it provides security.
  3. If you don’t pass valid credentials from here, in the method OnAuthorization it should add Unauthorized Response.

 

Step 7: Create console / windows/ web application to consume the API

Here I’ve created Console application.

File: Program.cs

  • Here HTTPClient is used to consume RESTful API’s.
  • And then creating the Authorization header to pass the username and password in format (username: password).
  • client.GetAsync consumes the API and returns the Result.
  • From the result we can check the Status Code.

 

Angular 4 Directives – Lesson 3.3

3.2 Attribute Directives

Here directive is just a class with decorator @Directive and this allows us to specify the directive’s selector.

  • Using custom attribute directive we can change the color, back-ground, font-size etc., of the HTML host element by using ElementRef
  • Renderer class is a built-in service that provides an abstraction for UI rendering manipulations.

Let’s create a custom attribute directive “ShowAlert

Step 1: Create a folder and name it as CustomDirective: /src/app/CustomDirective

Step 2: Now create a typescript file to create your own attribute directive under the associated folder created. And then import Directive, ElementRef, HostListener, Renderer from @angular/core library.

Step 3: And provide your selector name, here I’ve named it as ShowAlert, and create a class that make this directive visible to the component i.e.,add export before the class.

File: app.myDirective.ts

Step 4: Now define contructor for FirstAttrDirective class, and define the style and events using renderer.

For setting up styles,

Renderer.setElementStyle(rendererElement:any, styleName: string, styleValue: string)

(or)

ElementRef.nativeElement.style

For creating events,

Renderer.listen(parentElement: any, name: string, callBack: function)

Step 5: Create your component

File: app.component.ts

Step 6: Add component and Directive in the declaration[ ] of the NgModule  i.e., AppModule

Step 7:  Create a main.ts to bootstrap the NgModule

Step 8: Create a HTML file in /src/

File: CustomDirective.html

Refer required scripts shim.min.js, zone.js, system.src.js, system.config.js and refer the main.js from CustomDirective folder

Output: Default color will be blue, on mouseover font size get increased and changes its color to red, on mouseout will change color to blue and decrease its font size.

Tadaaaa.. 🙂

Angular 4 Directives- Lesson 3.2

Hi friends, in the last session we have learned about built-in directives (ngIf, ngFor, ngSwitch). In this session we will learn,

  • Style and Class Directives ( ngClass, ngStyle)

ngClass:

  • It is used to add and remove CSS classes on an HTML element.
  • CSS Classes can be added in several ways
  1. Using string
  2. Using array
  3. Using object
  4. Using Component methods
  • When using ngClass with object, classes will be added and removed based on the Boolean value that returned.
  • If the value of expression istrue then respective CSS class will be added otherwise that CSS class will be removed from HTML element at run time.

Using String: When using string format, class names must be presented between single quotes with in double quotes “‘class1′” and multiple classes can be separated by space.

File: template.html

File: app.component.ts

Adding styles for the respective classes in component

ngClass using array: When using Array format, each ngClass array item (i.e.,class) must be presented in the string format.

Ex: [ngClass] =”[‘class1′,’class2’]”

File: template.html

ngClass using object: When using object, classes will be formatted in the form of object i.e., each class will be of key and value pairs.

Key: css class name

Value: expression that returns Boolean value

In component file add styles for the respective classes

Using Component Methods: Whereas when using component methods, instead declaring styles statically here styles will be dynamically rendered into template by calling component methods.

  • Depending upon the need/requirement we can pass parameters to the component methods and can dynamically get the required styles.

Ex: [ngClass]=”GetStyles( )”

File: template.html

File: app.component.ts

ngStyle: This directive is used to modify the elements / component styles

  • It accepts an object which defines the elements styles.
  • Both kebab case and lower camel case can be used when specifying style properties.
  • Flexible to add and remove style properties.

File: template.html

File: app.component.ts

JSX Expressions

  • Overview of JSX
  • Creating HTML/XML elements/nodes with JSX
  • JSX Attributes / props
  • Comments in JSX
  • Expressions with
    • Arithmetic operators
    • Ternary Operators
    • Comparison Operators
    • Assignment Operators

Overview of JSX

  1. The full-form of JSX is Javascript and XML, e., simply JSX = Javascript + XML/HTML
  2. JSX is a simple syntax with a combination of HTML/XML tags with Javascript
  3. React used JavaScript expressions within curly braces “{ <expression> }”. We can put any type of JavaScript expression in the curly braces inside JSX.
  4. React can perform only one-way binding, to perform two-way binding we need to use React component’s state and props/ Event listeners.
  5. Each React Element is like a real kind of javascript object which can be either stored in a variable or can be used throughout the program.
  6. After coding in JSX pages no need to precompile the code, the JSX file will be automatically compiled and generates JavaScript syntax in the browser if the JSX is written in ES5, but if the JSX is written in ES6 then this should be pre-compiled by either Babel/ Typescript e.,
    1. Babel
      1. Babel is a process that transforms your JSX code (ES6) into Javascript (ES5) which is browser understandable code.
      2. Bable engine abstracts the Reacts ES6 JSX syntax and recreates that into ES5 syntax, for exampleCode written in ES6 syntax

        Now Babel converts it into ES5 syntax as follows
      3. We will install the following dev dependencies:
        1. babel-loader: babel module loader
        2. babel-core: the core transpiler used for transporting ES2015 and JSX code
        3. babel-preset-es2015: ES6/ES2015 support
        4. babel-preset-react: React/JSX support
        5. babel-preset-stage-2: babel preset for some extra features such as destructuring
        6. webpack: for bundling our packages for distribution and managing dependencies
        7. webpack-dev-server: our development server
      4. Babel 6 doesn’t supports the bundle.js to transform the ES6 to ES5, so for that we need to use Babel older version (i.e., 5.8.X) to transform the JSX code to be pre-compiled and generates the javascript and saved into bundle.js (this can be renamed, and this code is rendered int0 browser) by using webpack.config.js.
    2. Typescript
      1. Typescript is a language the can be either written in ES5/ ES6. Typescript has its own compiler tsc(typescript compiler) to pre-compile the ES6 syntax to ES5.
      2. We will install the following dev dependencies:
        1. ts-loader: typescript module loader to build .tsx
        2. typescript: language for programming in react (either in ES5/ ES6 syntax)
        3. webpack: for bundling our packages for distribution and managing dependencies
        4. webpack-dev-server: our development server
        5. This also uses the bundle.js where after compiling will be saved here with ES5 syntax.
        6. React with Typescript will be written in special extension files i.e., .tsx.               Ex: sample.tsx
  7. Within a JSX syntax we can perform both Data-Binding and Event Binding.

 

Creating HTML/XML Elements/nodes in JSX:

For creating HTML/XML nodes in JSX React provides a pre-defined function.

Syntax:

Where type, props and children are the arguments for function React.createElement( ).

  1. Type (string / React.createClass( ) ):   This is a mandatory argument. Type argument can be a string value (or) it can be a ReactComponent instance.
  1. Props (null / object):   This is an optional argument, where we can pass null (or) an object
  1. Children (null / string / React.createClass( ) / React.createElement( ) ):  This is an optional argument, we can either pass null value (or)  string value (or) React.createElement (or)  React.createClass instance.

 

ReactDOM.render( ):  For rendering react nodes into DOM, React provides function ReactDOM.render( )  from “react-dom” module.

  1. Rendering in react is also possible on server-side withrenderToString( ).
  2. If a change is made (or) a new child nodes has been added to DOM element, ReactDOM will only update the child nodes which is called Re-Rendering.

Ex: Creating <ul> tag with nested <li> tags

 

JSX Props: We have already know the syntax for creating custom HTML elements, second parameter props can be passed as an object/null.

  1. Props are nothing but HTML attributes that are passed as name-value pairs.
  2. Props are generally used for passing inputs to the component.
  3. Props can be passed to nodes in a Component (or) directly to the Component.
    1. Props that are used for nodes/elements are called Node Props/Attributes.
    2. Props that are used for Components are called Component Props/Attributes.
  4. Props creating may vary when using Typescript with React (TSX) with Formal React (JSX). When using TSX must define the type of the Props when creating nodes.

 

Using Typescript with React (TSX)

 

Comments in JSX:

  • Comments in jsx use //  and /* */

Ex:

 

Javascript Expressions:

To make use of Javascript statements with JSX, React provides a syntax using curly braces “{  }”.

Note: Follow the steps for setup ASP.NET MVC application in React Introduction.

Example:

Step1: Open your ASP.NET MVC application à  src/expressions.tsx (Creating file expressions.tsx in src )

Note: Run webpack.config.js , because unless it is running in the background the changes which we have done will not be reflected in the bundle.js. So make sure that while making any changes in .tsx files, webpack.config.js is running in the background.

File: expressions.tsx

File: index.cshtml

File: webpack.config.js

Change the entry point to expressions.tsx

Output:

Sum of 2+3 = 5

 

JSX Expression with Arithmetic Operators:

File: src/expressions.tsx

Note: Run webpack.config.js , because unless it is running in the background the changes which we have done will not be reflected in the bundle.js. So make sure that while making any changes in .tsx files, webpack.config.js is running in the background.

 

JSX Expression with Ternary Operators:

Javascript Ternary Operators ( ? : ) returns two expression depending on condition

Ex:

var a = true;

var result = a == true ?’yes’ : ‘no’;

File: expressions.tsx

Modify the render( ) as follows

Note: Run webpack.config.js , because unless it is running in the background the changes which we have done will not be reflected in the bundle.js. So make sure that while making any changes in .tsx files, webpack.config.js is running in the background.

 

JSX Expression with Comparison Operators

Comparison operators are used to compare any two values / variables

List of the comparison operators

 

 

JSX Expression with Assignment Operators:

Assignment operators just assigns the value to a variable.

Ex:

 

Complete Example

Note: Run webpack.config.js , because unless it is running in the background the changes which we have done will not be reflected in the bundle.js. So make sure that while making any changes in .tsx files, webpack.config.js is running in the background.

 

Angular 4 Directives – Lesson 3

Hi friends, in the last session we have learnt about how to setup in the local environment. In this session we will learn about Directives. Topics that are going to be covered in this session are

  1. Structural directives (Built-in Directives (ngIF, ngFor, ngSwitch)
  2. Style and Class Directives ( ngClass, ngStyle)
  3. Attribute directives
  4. Host Listener and Host Binding

 

Overview of Directives:

Directives are the classes that can change the behaviour or appearance of the components by using CSS Classes, CSS Styles and events.

There are three kinds of directives in Angular:

  1. Components—directives with a template.
  2. Structural directives—change the DOM layout by adding and removing DOM elements.
  3. Attribute directives—change the appearance or behavior of an element.

Components are the most common of the three directives. You saw a component for the first time in the QuickStart example.

Structural Directives change the structure of the view. Two examples are NgFor and NgIf in the Template Syntax page.

  • We use (*) before the structural directives, and when we use (*) before ngIf/ ngFor, angular actually recognizes that the current element as a template and it will read the current elements as <ng-template>. Where as in Angular 2.X it reads as <template>.

Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax page, for example, can change several element styles at the same time.

 

*ngIf:  This directive is used for conditional check on the HTML targeting elements. This will work similar to ng-if in Angular 1.X, where the elements will not get rendered into DOM until the condition satisfies. 

Step1: From the quick start example edit the component.ts

File: app.component.ts

Step2: Create a template.html in the app folder

File: template.html

Note: when use * before ngIf, angular treats it as <ng-template>

 

*ngIf else:  Angular 4  *ngIf has if/else syntax that make sense when you are making ajax calls we can show loading within the page. Where as else block is not existed in Angular 2.

From the above example, add the following html in the template

File: template.html

Angular compiler (JIT or AOT) transforms any <ng-template> elements and directives used with an asterisk (*) into views that are separate from the root component view.

Here when we use (*) before ngIF, angular actually recognizes that the current element as a template, and angular reads it as,

 

*ngIf then else: *ngIf directive can use two templates, one for If condition and the other for else condition. In the previous example we have seen using template for else condition, now for If condition we need to use then statement.

File: template.html

 

*ngFor: *ngFor directive is used to iterate through each element of any array, it works similar to For Loop in JavaScript, where in JavaScript we will write for loop within the <script> tag, but in angular we use *ngFor in the HTML as directive for any kind of elements.

From the above example add the following code in the component file

File: app.component.ts

File: template.html

Here we are using for..of, where

  1. for..of iterates through items and returns values
  2. for..in iterates through properties and  returns list of keys
  3. let is a keyword which is a dynamic datatype of ECMA script.
  4. emp is a temporary variable that hold the current employee from the employees array.
  5. employees is the array of items

Here the let can also create a index as a reference of the current item.

Here index is a built-in keyword of angular framework which can be used in *ngFor. Where angular renders the above code as follows.

 

*ngFor with select tag:

(or)

ngSwitch: ngSwitch works similarly the switch statement that we use in C# / java etc., Here for defining case we use *ngSwitchCase and for default case we use *ngSwitchDefault

From the above example using the same list of employees, we have created a example

Setup for local environment in Visual Studio – Lesson 2

Setting up Angular2/Angular4 is a quite complex, it needs a lot of work when compared with the installation for Angular1.X applications.

To setup with the quick start files follow these steps:

Step1: Install Node JS and npm

Step2: Install visual studio 2015 update3

Step3: Configuring External Web Tools.

Step4: Install Typescript

Step5: Download quick start files

Step6: Create ASP.NET Project

Step7: Copy the quick start files into your ASP.NET Project

Step8: Restore Packages

Step9: Build and Run

Install Node and NPM
  • Angular 2/4 is developed with compatible latest versions of Node, where you must have Node JS version 4.6.X or higher and npm 3.X.X or higher.
  • Older versions produce errors
  • Before installing make sure whether you have already installed Node JS before. For checking the Node JS and npm versions follow these commands in command prompt.

For Node JS: node –v

For npm: npm –v

  • If the PC don’t have Node JS installed it will show you like “node” is not recognized as an internal or external command, “npm” is not recognized as an internal or external command. Or if your PC has older version than the required please update to the latest versions.
  • For installing latest version of Node JS and npm go to https://nodejs.org/en/download/
  • Your first step will be completed if you have installed the required versions.

 

Install Visual Studio 2015 Update 3

Note: For studio 2017 versions can ignore this step

Minimum requirement for developing Angular2/ Angular4 applications is Visual Studio 2015 Update3 because the earlier versions do not follow the best practice for developing applications with Typescript.

  • To check the version of Visual Studio 2015

Open Visual Studio 2015    go to Help    click on About Microsoft Visual Studio

  • If you don’t have install Visual studio 2015 update 3

 

Configure External WebTools
  • We need to configure Visual Studio to use the global external web tools before the tools that ship with visual studio.
  • Go to Visual Studio    Click on Tools    Options    Expand Projects and Solutions    click on External Web Tools    now in the right hand side move $(PATH) entry above the $(DevEnvDir) This tells the visual studio to use the external tools like (npm) found in the global path before using its own version of the external tools.
  • Now click OK and restart the Visual Studio to reflect these changes. Visual Studio now looks first for external tools in the current workspace and if it doesn’t find them, it looks in the global path. If Visual Studio doesn’t find them in either location, it will use its own versions of the tools.

 

Install Typescript
  • To develop Angular applications we need Typescript 2.2.0 or its higher versions, as Visual studio Update3 doesn’t have such specifications we need to install it externally.
  • Before installation we can check our Typescript version in the Visual Studio

Open Visual Studio 2015    go to Help    click on About Microsoft Visual Studio

 

Download Quick start files

You can download the quick start files from Git hub https://github.com/angular/quickstart and then extract the files.

 

Create ASP.NET Project

Create ASP.NET 4.X or above project in the visual studio

Go to Visual Studio       File      New     Project    select Visual C# under Templates    click on ASP.NET Web Application     select Desired Templates    give the project name and click on OK.

 

Copy Quick start files into ASP project

Copy the quick start files into your project, but all the files are not necessary to be included into your project. So copy only selected files from the extracted folder.

Copy the following files into your .csproj

  • Src
  • Bs-config.json
  • json
  • json

 

Restore  Packages

Restore the packages required for your application

  • For restoring packages right click on json     select Restore Packages. This uses npm to install all the packages defined in package.json.
  • In between you can open the Output window to watch the npm commands that are executed. Simply we can ignore the warnings.
  • After you see the message Installing Packages Complete make sure that your project doesn’t includes node_modules

 

Build and Run

 File: /src/app/component.ts

In the above example that we have copied from the quick start files,

  1. In the first statement we are importing Component Package from angular/core package directory. After restoring package.json in /node_modules you can see all the packages that are downloaded using npm commands.
  2. In the second statement according to angular,
    1. @ is called –> decorator
    2. @Component  is called –> Component decorator
    3. selector –> xml tag / custom html tag
    4. template –> view for the component

Complete syntax of component, (Component decorator + class followed by the component decorator)

3. In the third statement we are exporting the component, to make it visible to other modules in our angular application.

  • After Installing packages build the Application.
  • To run the application open Command Prompt     go to your Project Directory       execute command npm start.
  • When this command is executed,
  • firstly it will launch typescript compiler and compiles the application with the following command tsc –p src/
  • Now it will start the lite-server and launches the browser where you can see the

Output: Hello Angular

  • But if you run the html by pressing F5 in visual studio it will not show the same output.

To Run in VS with F5 follow these steps

    1. In html, change base href from <base href=”/”>to <base href=”/src/”>.
    2. Also in html, change the scripts from node_modules to /node_modules with a slash
    3. In src/systemjs.config.js, near the top of the file, change the npm pathto /node_modules/ with a slash.
    4. After these changes npm start command no longer works, you must choose to configureeither for F5 with IIS or for npm start with the lite-server.
    5. Now run the application using F5

Tips to become Experienced Programmer

 “Experience is just a number”, in fact there is nothing difference between a Fresher and Experience. Every experience person also feels the same. When you are Fresher it doesn’t mean that you are less Intelligent / Skilled than Experience, you just need some time to stabilize your skills, intelligence, logical thinking and patience. Time will teach you everything. Most important difference is “Patience”, experience people will always show patience in any work. If you are a Fresher just keep some key points into your mind while coding, “That’s it”. Those key points will make you very closer to an Experience programmer/developer.

Key points to change you to an Experience programmer/developer:

  1. Learn how to Google
  2. Grip on OOPS
  3. Code Reuse
  4. Code comments
  5. Follow Standards

 

Learn how to Google:

  • Most of the Experience developers in IT sector are surviving because of If you know how to Google for a solution no doubt you can survive anywhere in IT sector. But need to remember is “Compromise nowhere until find the solution”.
  • Experience Developer:
    • Analyze the problem first
    • Google with the exact keywords
    • Picks up the popular forum sites like (stack overflow, Code project, Code Guru etc…)
    • start applying the up voted answers first
    • If not working, go for the all the other solutions and keep trying
    • if not working till, now he/she will start learning that new concept from technical content sites.

Note: As you have seen from the above process, “No where the person give up“. Just keep on trying till you find the solution, if not take your colleagues help.

Google API’s working formula

Minimum and simple words     Maximum results

For Example:

  • Who is the author of C (many words) gives few results
  • Author of C (few words)  good results

  • Prefer stack overflow first (Note: if it’s a known concept for you)
    • Some of the popular discussion forum sites (stack overflow, Code project, Code Guru etc…)
    • In the stack overflow the very first step search for the “Most up voted answer”.
    • “Read all the solutions”. Many solutions will work even if it’s not an up voted and vice versa.
  • Prefer site which has easy slang according to your terminology. If you pick the toughest slang of technical terminology you will never understand that topic in depth.

 

Grip on OOPS:

 

Strong in OOPS       you will argue with someone

Weak in OOPS         you will listen to someone

Confused wright!!

Yes when you are strong at something (For example: You know very well HTML). If your colleague doesn’t follow standards then what will be your reaction, sure you will argue with him and teach him the right way.

  1. Concentrate more and more on Loops (for, while, do while).
    1. If you are not confident on loops write every iteration on paper for some days.
    2. Iterate loops in your mind once you are confident.
  2. Use all oops concepts in every module if it’s not even required. So that you will not forget it.
  3. Teach someone who doesn’t know OOPS, teaching is the best-way to remember the basics all the time.
  4. Concentrate on unknown topics and learn at least one topic a day.

 

Code reuse

Most of the Experience Developers follow Code Reusing techniques all the time. Few techniques are using

  • Inheritance
  • Libraries (DLL’s)
  • Web Services & Web API’s

 

  1. Don’t ever write every piece of code in the same file
  2. Create libraries (or) Packages and Reuse them for Business Logics.
  3. Always prefer multi-layered architecture in all the Tiers of project. So that presentation of your code will be very clean.
  4. Create API’s for the Repositories (Repositories are noting but your Data Access Layer).
  5. Always try to maintain Loose coupling e., use Dependency Injection. This will be very helpful to test the application.
  6. Use Inheritance as much as you can.

 

Code Comments:

Few places where you should write comments:

  • File level / Class level comments
  • Method level comments
  • Code level comments

 

  1. Your code behind file (or) JavaScript file should look more green (or) red in color (color of comment depends on the language).
  2. Write a brief description on the top about complete file (Class file / script file) with Block Comment.
  3. Write XML comments on every method about the inputs, output, exception handling, date modified, and modified by.
  4. Write comments for every two or three lines, and for every code block in a function/ method.

Block Comment

XML comments

Follow Code Standards:

  1. Always use Pascal case (or) Camel case
  2. Don’t use names begin with numeric characters.
  3. Do not use Hungarian Notation!

Example: strName or nCount

  1. Don’t include the parent class name within a property name.

Example: Use Employee.Name NOT Employee.EmployeeName

  1. Give prefixes to Boolean variables using “IS”, “Has”, “Can”.
  2. Every developer has their own coding style.
  3. Don’t give more than one empty line in any piece of code
  4. Don’t write multiple classes in same file.

Connected and Disconnected Architectures in DotNet

  • NET (Active x Data Object) is mediator between front end and back end that interacts with client side application and server side application which supports two types of Data Accessing models, one is Connection oriented and Disconnected oriented.
  • NET leverages the power of XML for accessing data using disconnected architecture. It was completely designed with XML classes in .NET Framework.

 

Note: Before going into this article you should have a basic understanding on SQL queries on select, insert, update and delete commands.

Connection String

Connection string plays very crucial role in connecting your front end application and back end application. It’s a normal string which contains the information to establish the connection between backend Database and application and secured information such as user Id and password.

  • Usually Data Providers uses this connection string which contains parameters that are needed for establishing the connection.
  • Let’s have a look at Data Providers that are supported by .Net Framework.

List of Data providers which is supported by .Net Framework.

SQL server Provider connection string:

OLEDB Provider connection string:

ODBC Provider connection string:

 

Connection Oriented Architecture

 

The architecture which needs an open connection to access the data from database is known as Connection Oriented Architecture.

Following are the list of classes on which Connection Oriented Arch is built on:

  • ConnectionUsed to establish the connection between front end and back end.
  • CommandEnables access to database commands to return data, modify data, run stored procedures, and send or retrieve parameter information
  • Data Reader Used to read the data from Source. Provides high performance stream of data from data source.
  • Data Adapter
  1. Mediator between front end and back end which doesn’t have feature of containing data with in this , so it uses Dataset which is a result set.
  2. Also provides bridge between DataSet and data source.
  3. Use Command Objects to execute commands.

As Connected architecture needs connection for every transaction and creates much traffic to database since it do several trips. It shows very high impact on performance when the transaction has many commands i.e. for larger transactions. If it’s doing smaller transactions it is normally much faster.

Note:  In this Connected oriented arch the application stays connected even when it’s not doing any operations on database. To overcome this ADO.NET introduced a new component called DataSet which is a central component in Disconnected Architecture.

DataSet ds = new  DataSet( );

 

Disconnection Oriented Architecture

 

The architecture in which data can be retrieved from database even when the connection gets disconnected or closed is known as Disconnected Oriented Architecture.

Following are the list of classes on which disconnected arch is built on:

  • Connection
  • Command Builder Can generate insert, update and delete commands on single data base table for a data adapter.
  • Data Adapter
  • Data Set Contains the set of Data Tables (Data Table is set of Data Rows and Data Columns)

  • Data View It’s a view of table available in Can be used to perform insert, update and delete commands as in case of Data Set. Can be used to find, sort and filter the records.

  • Disconnected architecture is a method of retrieving the result set from database and giving the user ability to perform all CRUD operations like insert, update and delete. No traffic issues will get occurred because even though connection was gone data will be get already stored into dataset object.
  • By keeping connections open for only a minimum period of time, ADO .NET conserves system resources and provides maximum security for databases and also has less impact on system performance.
  • Any changes to data in DataSet doesn’t show effect on database directly, to save the changes need to use Update() method of Data Adapter.
  • Can be used with multiple and differing data sources, used with XML data, or used to manage data local to the application.

 

Da.Update(ds,”Table Name”);

 

Differences between Connection and Disconnection Oriented Architecture

 

 


 
 

Differences between Java and DotNet

  • Java and .Net are two incomparable guided, but by fact that .Net is Framework of simply platform and supports for almost 63 languages and java is just a programming language.
  • These two technologies have different syntax but gives the same result.
  • Let’s look at some basic imports and usings used in java and .Net.

  • Now let’s look at some application based differences.

  • Now let’s look at some basic differences.