DevXperts - Expert's Voice in Programming

Using Camera along with Gallery in Xamarin Forms

January 3, 2019January 3, 2019 admin847785456 2 Comments

Hi guys. This article gives beginners a very good understanding about how to use Camera & Gallery in Xamain Forms.

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017 File New Project Choose Cross-Platform Template Choose MobileApp (Xamarin.Forms ) Name it as CamandDocApp Click on OK Choose .NetStandard Click OK

Step2: Creating a model Gallery.cs

Go to Project CamandDocApp Right Click Add Class Gallery.cs

File: Gallery.cs

Model as shown in the following code,
Let consider two properties as Path and Index, as we considering Path as OnpropertyChange .

namespace CamandDocApp
{
   public class Gallery: OnpropertyBase
    {

        string _Path;
        public string Path
        {
            get => _Path; set
            {
                _Path = value; onPropertyChanged();
                ;
            }
        }
        public int index { get; set; }
    }
}

namespace CamandDocApp

{

public class Gallery: OnpropertyBase

{

string _Path;

public string Path

{

get => _Path; set

{

_Path = value; onPropertyChanged();

;

}

public int index { get; set; }

}

Step 2: Setting up OnpropertyBase

File: OnpropertyBase.cs

namespace CamandDocApp
{
   public class OnpropertyBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        #region Private Methods

        public void onPropertyChanged([CallerMemberName]string propertyName = "") =>
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        #endregion
    }

}

namespace CamandDocApp

{

public class OnpropertyBase : INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

#region Private Methods

public void onPropertyChanged([CallerMemberName]string propertyName = "") =>

PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

#endregion

}

As the Application is creating through MVVM Pattern , we have declared the Model and

Now we have to create the View of Application

Step 3: Setting up Mainpage.Xaml

File: MainPage.Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CamandDocApp"
             x:Class="CamandDocApp.MainPage">
    <StackLayout Padding="5" VerticalOptions="CenterAndExpand">
        <Label Text="Pic a Image through Camera or Gallery Location" FontSize="18" HorizontalOptions="CenterAndExpand"/>
        <Grid x:Name="Picgrid" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <AbsoluteLayout Grid.Row="0" Grid.Column="0" HeightRequest="300" BindingContext="{Binding Item1}" x:Name="Item1" >
                <!--here we are binding the path (Property of Model through MVVM)-->
                <Image Source="{Binding Path }" BindingContext="{Binding Source={x:Reference Item1}, Path=BindingContext}" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="Fill" />
                <!--Here we are consider as Image source "doc.png" through resoursable file we can take any image-->
                <Image Source="cam.png" WidthRequest="30" HeightRequest="30" AbsoluteLayout.LayoutBounds="0,1,0.5,0.2" AbsoluteLayout.LayoutFlags="All">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding PickPhoto_Click}" CommandParameter="{Binding Source={x:Reference Item1}, Path=BindingContext}" BindingContext="{Binding Source={x:Reference Picgrid}, Path=BindingContext}" />
                    </Image.GestureRecognizers>
                </Image>
                <!--Here we are consider as Image source "cam.png" through resoursable file we can take any image-->
                <Image Source="doc.png" WidthRequest="30" HeightRequest="30" AbsoluteLayout.LayoutBounds="0.8,1,0.5,0.2" AbsoluteLayout.LayoutFlags="All">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding TakePhoto_Click}" CommandParameter="{Binding Source={x:Reference Item1}, Path=BindingContext}" BindingContext="{Binding Source={x:Reference Picgrid}, Path=BindingContext}" />
                    </Image.GestureRecognizers>
                </Image>
            </AbsoluteLayout>

            <AbsoluteLayout Grid.Row="0" Grid.Column="1" HeightRequest="300" BindingContext="{Binding Item2}" x:Name="Item2" >

                <Image Source="{Binding Path }" BindingContext="{Binding Source={x:Reference Item2}, Path=BindingContext}" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="Fill" />
                <!--Here we are consider as Image source "doc.png" through resoursable file we can take any image-->
                <Image Source="cam.png" WidthRequest="30" HeightRequest="30" AbsoluteLayout.LayoutBounds="0,1,0.5,0.2" AbsoluteLayout.LayoutFlags="All">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding PickPhoto_Click}" CommandParameter="{Binding Source={x:Reference Item2}, Path=BindingContext}" BindingContext="{Binding Source={x:Reference Picgrid}, Path=BindingContext}" />
                    </Image.GestureRecognizers>
                </Image>
                <!--Here we are consider as Image source "cam.png" through resoursable file we can take any image-->
                <Image Source="doc.png" WidthRequest="30" HeightRequest="30" AbsoluteLayout.LayoutBounds="0.8,1,0.5,0.2" AbsoluteLayout.LayoutFlags="All">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding TakePhoto_Click}" CommandParameter="{Binding Source={x:Reference Item2}, Path=BindingContext}" BindingContext="{Binding Source={x:Reference Picgrid}, Path=BindingContext}" />
                    </Image.GestureRecognizers>
                </Image>
            </AbsoluteLayout>
        </Grid>
       
    </StackLayout>
</ContentPage>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:CamandDocApp"

x:Class="CamandDocApp.MainPage">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image.GestureRecognizers>

</Image.GestureRecognizers>

</Image>

<Image.GestureRecognizers>

</Image.GestureRecognizers>

</Image>

</AbsoluteLayout>

<Image.GestureRecognizers>

</Image.GestureRecognizers>

</Image>

<Image.GestureRecognizers>

</Image.GestureRecognizers>

</Image>

</AbsoluteLayout>

</Grid>

</StackLayout>

</ContentPage>

Step 4: Installing NuGet Pakages for Camera/Media and Connectivity

Xam.Plugin.Media
Xam.Plugin.Connectivity

Go to Project CamandDocApp Right Click ManageNuGet Pakages for Solution

Step 5: Initializing CrossMedia

Go to Project .Android MainActivity.cs

Step 6: Creating ViewModel

File: GalleryViewModel.cs

using Plugin.Media;
using Plugin.Media.Abstractions;
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;

namespace CamandDocApp
{
   public class GalleryViewModel:OnpropertyBase
    {
        #region PrivateMembers
        #endregion

        #region BindingModels
        //Here we are  binding  the model of Gallery 
        //Let us consoder model Names as Item1,Item2

        private Gallery _Item1;

        public Gallery Item1
        {
            get { return _Item1; }
            set { _Item1 = value;onPropertyChanged();}
        }

        private Gallery _Item2;

        public Gallery Item2
        {
            get { return _Item2; }
            set { _Item2 = value; onPropertyChanged(); }
        }
        public ICommand PickPhoto_Click => new Command(PickPhotoClick);
        public ICommand TakePhoto_Click => new Command(TakePhotoClick);
        #endregion

        #region Constructor
        public GalleryViewModel()
        {
            this.Item1 = new Gallery() { index = 0 };
            this.Item2 = new Gallery() { index = 1 };
        }
        #endregion

        #region PublicMethods
        //As we have declared the View Binding Commamds In MainPage.Xaml,Here we are binding with ICommad function
        public async void PickPhotoClick(object productGallery)
        {

            await CrossMedia.Current.Initialize();
            if (!CrossMedia.Current.IsTakePhotoSupported || !CrossMedia.Current.IsCameraAvailable)
            {
                //await CurrentPage.DisplayAlert("Option not available", "This option is not supported / available for this device", "OK");
                return;
            }
            MediaFile _media = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions
            {
                Directory = "temp",
                SaveToAlbum = true,
                CompressionQuality = 75,
                CustomPhotoSize = 50,
                PhotoSize = PhotoSize.MaxWidthHeight,
                MaxWidthHeight = 2000,
                DefaultCamera = CameraDevice.Front
            });

            if (_media == null)
                return;

            else
            {
                var item = productGallery as Gallery;

                if (item.index == 0)
                    Item1.Path = _media.Path;
                if (item.index == 1)
                    Item2.Path = _media.Path;
            }

        }
        public async void TakePhotoClick(object picGallery)
        {
            await CrossMedia.Current.Initialize();
            if (!CrossMedia.Current.IsPickPhotoSupported)
            {
                //await CurrentPage.DisplayAlert("Option not available", "This option is not supported / available for this device", "OK");
                return;
            }
            MediaFile _media = await CrossMedia.Current.PickPhotoAsync();
            if (_media == null)
                return;

            else
            {
                var item = picGallery as Gallery;

                if (item.index == 0)
                    Item1.Path = _media.Path;
                if (item.index == 1)
                    Item2.Path = _media.Path;
            }

        }
        #endregion
    }
}

100

101

102

103

104

105

106

107

108

using Plugin.Media;

using Plugin.Media.Abstractions;

using System;

using System.Collections.Generic;

using System.Text;

using System.Windows.Input;

using Xamarin.Forms;

namespace CamandDocApp

{

public class GalleryViewModel:OnpropertyBase

{

#region PrivateMembers

#endregion

#region BindingModels

//Here we are binding the model of Gallery

//Let us consoder model Names as Item1,Item2

private Gallery _Item1;

public Gallery Item1

{

get { return _Item1; }

set { _Item1 = value;onPropertyChanged();}

}

private Gallery _Item2;

public Gallery Item2

{

get { return _Item2; }

set { _Item2 = value; onPropertyChanged(); }

}

public ICommand PickPhoto_Click => new Command(PickPhotoClick);

public ICommand TakePhoto_Click => new Command(TakePhotoClick);

#endregion

#region Constructor

public GalleryViewModel()

{

this.Item1 = new Gallery() { index = 0 };

this.Item2 = new Gallery() { index = 1 };

}

#endregion

#region PublicMethods

//As we have declared the View Binding Commamds In MainPage.Xaml,Here we are binding with ICommad function

public async void PickPhotoClick(object productGallery)

{

await CrossMedia.Current.Initialize();

if (!CrossMedia.Current.IsTakePhotoSupported || !CrossMedia.Current.IsCameraAvailable)

{

//await CurrentPage.DisplayAlert("Option not available", "This option is not supported / available for this device", "OK");

return;

}

MediaFile _media = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions

{

Directory = "temp",

SaveToAlbum = true,

CompressionQuality = 75,

CustomPhotoSize = 50,

PhotoSize = PhotoSize.MaxWidthHeight,

MaxWidthHeight = 2000,

DefaultCamera = CameraDevice.Front

});

if (_media == null)

return;

else

{

var item = productGallery as Gallery;

if (item.index == 0)

Item1.Path = _media.Path;

if (item.index == 1)

Item2.Path = _media.Path;

}

public async void TakePhotoClick(object picGallery)

{

await CrossMedia.Current.Initialize();

if (!CrossMedia.Current.IsPickPhotoSupported)

{

//await CurrentPage.DisplayAlert("Option not available", "This option is not supported / available for this device", "OK");

return;

}

MediaFile _media = await CrossMedia.Current.PickPhotoAsync();

if (_media == null)

return;

else

{

var item = picGallery as Gallery;

if (item.index == 0)

Item1.Path = _media.Path;

if (item.index == 1)

Item2.Path = _media.Path;

}

#endregion

}

Step 7: Setting up Required Permissions

Go to Project .Android RightClick Properties Select Android Manifest Required Permissions

* CAMERA

* READ_EXTERNAL_STORAGE

* READ_INPUT_STATE (Please check with below Image)

Step 8: Creating paths to save the Images.

Go to Project .Android RightClick Resources Create New Folder “xml” Create new file in xml folder “file_paths.xml”

File: file_paths.xml

<?xml version="1.0" encoding="utf-8" ?> 

<paths xmlns:android="http://schemas.android.com/apk/res/android">

  <external-path name="my_images" path="Android/data/com.companyname.CamandDocApp/files/Pictures" />

</paths>

<?xml version="1.0" encoding="utf-8" ?>

<external-path name="my_images" path="Android/data/com.companyname.CamandDocApp/files/Pictures" />

</paths>

Step 9: Setting up new resource in Android.Manifest.xml

File: Android.Manifest.xml

Add the below code in between the <manifest></manifest>

<application android:label="CamandDocApp.Android">
    <provider android:name="android.support.v4.content.FileProvider" android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true">
      <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
    </provider>
  </application>

</provider>

</application>

For the <application> open tag, setup the label with your application Name

<application android:label="<your application Name>.Android">

1	<application android:label="<your application Name>.Android">

Output:

How to add dynamic fields in Angular 6

November 16, 2018 admin847785456 4 Comments

FormArray is one of the three basic building blocks to define forms in angular along with FormGroup, FormControl.
It works similar to FormGroup, where a FormArray status depends upon all its children status. That is if any one FormControl in FormArray is invalid then the status of the entire array becomes
A FormArray can hold any instances either it can be FormGroup, FormControl (or) even other
This is mostly used for adding dynamic controls in Reactive Forms.

Step1: Create a component

File: FormComponent.ts

import { Component, OnInit} from '@angular/core';
import { FormGroup,FormBuilder, FormArray } from '@angular/forms';

@Component({
    selector: 'my-form',
    templateUrl: `./template.html`,
})
export class FormComponent implements OnInit {

    constructor(private fb: FormBuilder) { }

    sampleForm: FormGroup;
    ngOnInit() {
        this.sampleForm = this.fb.group({
            items: this.fb.array([this.fb.group({ item: '' })])
        })
    }
    get lst_items() {
        return this.sampleForm.get('items') as FormArray;
    }
    additem() {
        this.lst_items.push(this.fb.group({ item: '' }));
    }
    deleteitem(index: number) {
        this.lst_items.removeAt(index);
    }
}

import { Component, OnInit} from '@angular/core';

import { FormGroup,FormBuilder, FormArray } from '@angular/forms';

@Component({

selector: 'my-form',

templateUrl: `./template.html`,

})

export class FormComponent implements OnInit {

constructor(private fb: FormBuilder) { }

sampleForm: FormGroup;

ngOnInit() {

this.sampleForm = this.fb.group({

items: this.fb.array([this.fb.group({ item: '' })])

})

}

get lst_items() {

return this.sampleForm.get('items') as FormArray;

}

additem() {

this.lst_items.push(this.fb.group({ item: '' }));

}

deleteitem(index: number) {

this.lst_items.removeAt(index);

}

Step2: Create a template

File: template.html

<div class="container">

    <form [formGroup]="sampleForm">

        <h2>Food Menu</h2>

        <div formArrayName="items">
            <div *ngFor="let itm of lst_items.controls; let i=index" [formGroupName]="i">
                <label>
                    Item {{i+1}}: <input formControlName="item" class="form-control" />
                </label>
                <button type="button" class="btn btn-danger btn-sm" (click)="deleteitem(i)">Delete item</button>
            </div>
            <button type="button" class="btn btn-primary btn-sm" (click)="additem()">Add item</button>
        </div>
    </form>
    <br />
<pre class="col-sm-3">{{ this.sampleForm.value | json }}</pre>
</div>

<label>

Item {{i+1}}: <input formControlName="item" class="form-control" />

</label>

<button type="button" class="btn btn-danger btn-sm" (click)="deleteitem(i)">Delete item</button>

</div>

</div>

</form>

<br />

<pre class="col-sm-3">{{ this.sampleForm.value | json }}</pre>

</div>

Step3: Adding FormsComponent in AppModule

File: app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule} from '@angular/forms';

import { FormComponent } from './app.FormComponent';

@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [FormComponent],
    bootstrap: [FormComponent],
})
export class AppModule {
}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { ReactiveFormsModule} from '@angular/forms';

import { FormComponent } from './app.FormComponent';

@NgModule({

imports: [BrowserModule, ReactiveFormsModule],

declarations: [FormComponent],

bootstrap: [FormComponent],

})

export class AppModule {

}

Step4: Bootstraping AppModule

File: main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Step5: Creating Startup file. Add the required files for bootstrap in your directory.

File: index.html

<!DOCTYPE html>
<html>
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script>
        System.import('main.js').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <my-form>Loading...</my-form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

System.import('main.js').catch(function (err) { console.error(err); });

</script>

</head>

<body>

<my-form>Loading...</my-form>

</body>

</html>

Output:

Entry with Custom Border in Xamarin Forms

November 1, 2018 admin847785456 4 Comments

Introduction:

In Xamarin Forms Entry control allows a single line of text to be edited. This article demonstrates how to create a custom renderer for the Entry control, enabling developers to override the default native rendering with their own platform-specific customization.

Custom Renderer:

This sample demonstrates a custom renderer for the Entry control, “Enabling developers to override the default native rendering” with their own platform-specific customization.
Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017 à File à New à Project à Choose Cross-Platform Template à Choose MobileApp (Xamarin.Forms )à Name it as EntryLineWithanyColorà Click on OKà Chose .NetStanderdà Click OK

Step2: Creating CustomEntry.cs

Go to Project EntryLineWithanyColorà Right Click àAdd Class CustomEntry.cs

File Name: CustomEntry.cs

A custom Entry can be created by subclassing the Entry control, as shown in the following code

namespace EntryLineWithanyColor
{
//here we are taking CustomEntry as Entry type.Which means it will have same properties
    public class CustomEntry
    {
    }
}

namespace EntryLineWithanyColor

{

//here we are taking CustomEntry as Entry type.Which means it will have same properties

public class CustomEntry

{

}

The CustomEntry control is created in the .NET Standard library project and is simply ENTRY control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the CustomEntry control.

Step 3: Create a class in the Android directory and name it as CustomRenderer.cs

Go to EntryLineWithanyColor.Android à Right Click àAdd Class CustomRenderer.cs

File Name: CustomRenderer.cs

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))] 

namespace EntryLineWithanyColor.Droid
{
    public class CustomRenderer: EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {
                GradientDrawable gd = new GradientDrawable();

                Control.BackgroundTintList = ColorStateList.ValueOf(global::Android.Graphics.Color.White);

// The Above Line of Code is for making Entry Line with Any Color. Here I taken as WHITE

//You can Change According to Ur Requirement’s

                Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
                Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));

            }
        }
    }
}

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

namespace EntryLineWithanyColor.Droid

{

public class CustomRenderer: EntryRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)

{

base.OnElementChanged(e);

if (e.OldElement == null)

{

GradientDrawable gd = new GradientDrawable();

Control.BackgroundTintList = ColorStateList.ValueOf(global::Android.Graphics.Color.White);

// The Above Line of Code is for making Entry Line with Any Color. Here I taken as WHITE

//You can Change According to Ur Requirement’s

Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);

Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));

}

Brief Explanation of the above Code:

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

1	[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

Here Added the ASSEMBLY attribute it means like declarations

CustomEntry is the name of the placeholder class in your common (PCL or Shared) Forms library.
ExportRenderer is the name of the actual platform specific implementation class in your iOS/Android/WP project.

Essentially, telling Forms, “when you need to render CustomEntry on Platform X, use the class CustomRenderer.”

Create a subclass of the EntryRenderer class that renders the native control.
Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin Forms control is created.
Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

Step 4: Create UI for Border less Entry

File Name: MainPage.xaml

Here for Example I have taken Login Form for better Understand

Here we have to declare the Local Refernce nameSpace in MainPage.xaml

xmlns:local="clr-namespace:EntryLineWithanyColor"

1	xmlns:local="clr-namespace:EntryLineWithanyColor"

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:EntryLineWithanyColor"
             x:Class="EntryLineWithanyColor.MainPage" BackgroundColor="#1C70D3">

    <StackLayout VerticalOptions="CenterAndExpand" Padding="30" HorizontalOptions="CenterAndExpand">
        <StackLayout Spacing="20">
            <local:CustomEntry Placeholder="USER NAME" PlaceholderColor="White" TextColor="White" FontFamily="Roboto" HorizontalTextAlignment="Center" WidthRequest="280"/>
            <local:CustomEntry Placeholder="PASSWORD" PlaceholderColor="White" TextColor="White" FontFamily="Roboto" HorizontalTextAlignment="Center"  WidthRequest="280"/>
            <Button Text="LOGIN" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" />
        </StackLayout>

       
    </StackLayout>

</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:EntryLineWithanyColor"

x:Class="EntryLineWithanyColor.MainPage" BackgroundColor="#1C70D3">

<local:CustomEntry Placeholder="USER NAME" PlaceholderColor="White" TextColor="White" FontFamily="Roboto" HorizontalTextAlignment="Center" WidthRequest="280"/>

<local:CustomEntry Placeholder="PASSWORD" PlaceholderColor="White" TextColor="White" FontFamily="Roboto" HorizontalTextAlignment="Center" WidthRequest="280"/>

</StackLayout>

</ContentPage>

Output: Run the program Ctrl+F5

Deploy ASP.NET MVC + Angular 4 + PostgreSQL into AWS

October 27, 2018October 27, 2018 admin847785456 3 Comments

Hello guys hope you are doing good 🙂

From the past few days I was suffering to deploying my ASP.NET MVC application integrated with Angular 4 + PostgreSQL DB into AWS. After my serious deliberation I’ve goto know the procedure and wanted my friends to know about this. That might help you in future.

Step1: Create Elastic Beanstalk web application in AWS

Once you login into your account you can find the “Build a solution” section below
Choose on Build a web app

To create a new Application click on Create New Application, and fill the following required fields Application Name & Platform (.Net). And click on “Create application” button which will start creating the application

Once application is created with Environments, then you must be able to see Health – Green

Now make sure that the user which is going to be used has the following permissions.

Step2: Create RDS (Postgres) in AWS

Go to RDS service, and choose PostgreSQL from Step1

Click on Next, in Step2 choose your case Production (or) Dev / Test
Provide the required details
1. DB instance Class (1GB/ 2GB/…..)
2. DB Instance Name
3. Master Username & Password
Now make sure that your instance is publicly accessible – Yes, if not click on Modify in Details Section. And choose Public accessible – Yes. If it is not public accessible we will be not able to access this Database in PgAdmin.

Step3: Deploy the application into AWS

Firstly we need to install “AWS toolkit for Visual Studio 2017”. Once installed you can see the option “Publish to AWS Elastic Beanstalk” on right click the project.
Select “Publish to AWS Elastic Beanstalk”, it ask you to create Account Profile.
To get the Access Key Id & Secret Access Key, Go to IAM in AWS Console.
Select the user, then go to “Security Credentials”, where we can create the Access Key.

Once you create a new Access key, it gives you Access Key ID & Secret Access Key. Make sure to store your Secret Access Key in a secured place.
Now go back to VS 2017 and enter your credentials.
Now you can see the Web App we have created in AWS Console.
Now Go to View Open AWS Explorer Amazon EC2 Key Pairs Create key pair

Creating a new Key Pair, will give you a <Key Pair Name>.pem
Select “Publish to AWS Elastic Beanstalk”, after selecting profile click on Next.
In the Application Options section add the key value pair. And click Next
Now click Deploy

Step4: Check database connections

Open PgAdmin4
Get the Host Name from the AWS Console RDS Instances Copy the End Point (Host Name)
Now create New Server Enter the Credentials of RDS.
Create your tables required for the application.

Step5: Install Angular Packages in EC2 instance using Remote Desktop

Go to EC2 Service
Click on “Instances”
Find your instance and right click on it, then choose “Get Windows Password”

Now it will ask you to upload “Key Pair Path” Get the <Key Pair Name>.pem file that we have created when deploying the Web App.
Once you upload it will generate the Password, make sure to store it a secured directory.
Now you can connect to the Remote desktop using that password.
Once you have connected go to C:\\inetpub\\wwwroot.
Open command prompt for wwwroot directory.
Download Node from the https://nodejs.org/en/ .
Now in the command prompt type “npm install”, this will install the packages required for angular.

Now run the application

Round Entry in Xamarin Froms

October 8, 2018October 8, 2018 admin847785456 2 Comments

Introduction:

Custom Renderer:

This sample demonstrates a custom renderer for the Entry control, “Enabling developers to override the default native rendering” with their own platform-specific customization.
Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017 File New Project Choose Cross-Platform Template Choose MobileApp (Xamarin.Forms ) Name it as RoundEntry Click on OK Chose .NetStanderd Click OK

Step2: Creating CustomEntry.cs

Go to Project CustomEntry Right Click Add Class CustomEntry.cs

FileName:CustomEntry.cs

A custom Entry can be created by sub classing the Entry control, as shown in the following code

namespace RoundEntry
{
//here we are taking Custom Entry as Entry type which means it will have same properties
   public class CustomEntry: Entry
    {
    }
}

namespace RoundEntry

{

//here we are taking Custom Entry as Entry type which means it will have same properties

public class CustomEntry: Entry

{

}

Step2: Create a class in the Android directory and name it as CustomRenderer.cs

Go to RoundEntry.Android Right Click Add Class CustomRenderer.cs

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

namespace RoundEntry.Droid
{
   public class CustomRenderer: EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {
                var gradientDrawable = new GradientDrawable();
                //here we are making round entry with the help of "Corner Radius"
                gradientDrawable.SetCornerRadius(60f);
                gradientDrawable.SetStroke(5, Android.Graphics.Color.Gray);//here we can set the entry border color
                //gradientDrawable.SetColor()

                Android.Graphics.Color color = Xamarin.Forms.Color.FromHex("#FFFFF").ToAndroid();//here we can set the Entry Background color
                gradientDrawable.SetColor(color);

                Control.SetBackground(gradientDrawable);
                
                Control.SetPadding(50, Control.PaddingTop, Control.PaddingRight, Control.PaddingBottom);
            }
        }
    }
}

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

namespace RoundEntry.Droid

{

public class CustomRenderer: EntryRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)

{

base.OnElementChanged(e);

if (e.OldElement == null)

{

var gradientDrawable = new GradientDrawable();

//here we are making round entry with the help of "Corner Radius"

gradientDrawable.SetCornerRadius(60f);

gradientDrawable.SetStroke(5, Android.Graphics.Color.Gray);//here we can set the entry border color

//gradientDrawable.SetColor()

Android.Graphics.Color color = Xamarin.Forms.Color.FromHex("#FFFFF").ToAndroid();//here we can set the Entry Background color

gradientDrawable.SetColor(color);

Control.SetBackground(gradientDrawable);

Control.SetPadding(50, Control.PaddingTop, Control.PaddingRight, Control.PaddingBottom);

}

Brief Explanation of the above Code:

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

1	[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

Here Added the ASSEMBLY attribute it means like declarations

Custom Entry is the name of the placeholder class in your common (PCL or Shared) Forms library.
Export Renderer is the name of the actual platform specific implementation class in your iOS/Android/WP project.

Essentially, telling Forms, “when you need to render Custom Entry on Platform X, use the class CustomRenderer.”

Create a subclass of the EntryRenderer class that renders the native control.
Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin Forms control is created.
Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

Step 3: Create UI for Round Entry

File Name: MainPage.xaml

Here for Example I have taken Login Form for better Understand

Here we have to declare the Local Refernce nameSpace in MainPage.xaml

xmlns:local="clr-namespace:RoundEntry"

1	xmlns:local="clr-namespace:RoundEntry"

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RoundEntry"
             x:Class="RoundEntry.MainPage" BackgroundColor="#FFFFFF">

    <StackLayout Padding="20,60,20,0" Spacing="30">
        <Label Text=" REGISTRATION FORM" FontSize="23" FontAttributes="Bold" TextColor="Black" HorizontalTextAlignment="Center" VerticalOptions="Start"/>
        <Grid RowSpacing="15" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="0" Text="Name" TextColor="Black" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="1" Grid.Column="0" Text="First Name" TextColor="Black" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="2" Grid.Column="0" Text="Last Name" TextColor="Black" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="3" Grid.Column="0" Text="Father Name" TextColor="Black" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="4" Grid.Column="0" Text="Gmail" TextColor="Black" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="5" Grid.Column="0" Text="Mobile No" TextColor="Black" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>


            <local:CustomEntry Grid.Row="0" Grid.Column="1" Placeholder="Enter Your Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="1" Grid.Column="1" Placeholder="Enter Your First Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="2" Grid.Column="1" Placeholder="Enter Your Last Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="3" Grid.Column="1" Placeholder="Enter Your Father Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="4" Grid.Column="1" Placeholder="Enter Your Gmail" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="5" Grid.Column="1" Placeholder="Enter Your Mobile No"  FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
        </Grid>
        <Button Text="SUBMIT" TextColor="White" BackgroundColor="SkyBlue" FontSize="18" VerticalOptions="StartAndExpand"></Button>
    </StackLayout>

</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:RoundEntry"

x:Class="RoundEntry.MainPage" BackgroundColor="#FFFFFF">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<local:CustomEntry Grid.Row="0" Grid.Column="1" Placeholder="Enter Your Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="1" Grid.Column="1" Placeholder="Enter Your First Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="2" Grid.Column="1" Placeholder="Enter Your Last Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="3" Grid.Column="1" Placeholder="Enter Your Father Name" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="4" Grid.Column="1" Placeholder="Enter Your Gmail" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="5" Grid.Column="1" Placeholder="Enter Your Mobile No" FontFamily="Roboto" TextColor="Black" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

</Grid>

</StackLayout>

</ContentPage>

Output: Here we go.. Press Ctrl+F5

Border less Entry in Xamarin Forms

September 20, 2018 admin847785456 1 Comment

Introduction:

Custom Renderer:

This sample demonstrates a custom renderer for the Entry control, “Enabling developers to override the default native rendering” with their own platform-specific customization.
Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017 File New Project Choose Cross-Platform Template Choose MobileApp (Xamarin.Forms ) Name it as BorderLessEntry Click on OK Choose .NetStanderd Click OK

Step2: Creating CustomEntry.cs

Go to project BorderLessEntry Right Click Add Class CustomEntry.cs

File Name: CustomEntry.cs

A custom Entry can be created by subclassing the Entry control, as shown in the following code

namespace BorderlessEntry
{
//Here we are taking Custom Entry as Entry type. Which means it will have same properties as Entry
    class CustomEntry:Entry
    {
    }
}

namespace BorderlessEntry

{

//Here we are taking Custom Entry as Entry type. Which means it will have same properties as Entry

class CustomEntry:Entry

{

}

The CustomEntry control is created in the .NET Standard library project and is simply an Entry control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the CustomEntry control.

Step 3: Create a class in the Android directory and name it as CustomRenderer.cs

Go to BorderlessEntry.Android Right Click Add Class CustomRenderer.cs

File Name: CustomRenderer.cs

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]
namespace BorderlessEntry.Droid
{
   public class CustomRenderer: EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(global::Android.Graphics.Color.Transparent);

//The above line indicates the Entry Line for Entry

                this.Control.SetBackgroundDrawable(gd);
                this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
                Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.DarkGray));
//The above line of code indicates the Text Color for Entry form. we can change according to our requirement’s
            }
        }
    }

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

namespace BorderlessEntry.Droid

{

public class CustomRenderer: EntryRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)

{

base.OnElementChanged(e);

if (e.OldElement == null)

{

GradientDrawable gd = new GradientDrawable();

gd.SetColor(global::Android.Graphics.Color.Transparent);

//The above line indicates the Entry Line for Entry

this.Control.SetBackgroundDrawable(gd);

this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);

Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.DarkGray));

//The above line of code indicates the Text Color for Entry form. we can change according to our requirement’s

}

Brief Explanation of the above Code:

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

1	[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))]

Here Added the ASSEMBLY attribute it means like Declarations

CustomEntry is the name of the placeholder class in your common (PCL or Shared) Forms library.
ExportRenderer is the name of the actual platform specific implementation class in your iOS/Android/WP

Essentially, telling Forms, “When you need to render CustomEntry on Platform X, use the class CustomRenderer”

Create a subclass of the EntryRenderer class that renders the native control.
Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin.Forms control is created.
Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

Step 4: Create UI for Border less Entry

File Name: MainPage.xaml

I have taken example as Registration Form for better Understand

Here we have to declare the Local Reference namespace in MainPage.xaml

 xmlns:local="clr-namespace:BorderlessEntry"

1	xmlns:local="clr-namespace:BorderlessEntry"

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BorderlessEntry"
             x:Class="BorderlessEntry.MainPage" BackgroundColor="#1C70D3">
    <StackLayout Padding="20,60,20,0" Spacing="30">
        <Label Text=" REGISTRATION FORM" FontSize="23" FontAttributes="Bold" TextColor="White" HorizontalTextAlignment="Center" VerticalOptions="Start"/>
        <Grid RowSpacing="15" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="0" Text="Name" TextColor="White" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="1" Grid.Column="0" Text="First Name" TextColor="White" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="2" Grid.Column="0" Text="Last Name" TextColor="White" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="3" Grid.Column="0" Text="Father Name" TextColor="White" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="4" Grid.Column="0" Text="Gmail" TextColor="White" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>
            <Label Grid.Row="5" Grid.Column="0" Text="Mobile No" TextColor="White" FontFamily="Roboto" FontSize="18" VerticalTextAlignment="Center"/>


            <local:CustomEntry Grid.Row="0" Grid.Column="1" Placeholder="Enter Your Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="1" Grid.Column="1" Placeholder="Enter Your First Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="2" Grid.Column="1" Placeholder="Enter Your Last Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="3" Grid.Column="1" Placeholder="Enter Your Father Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="4" Grid.Column="1" Placeholder="Enter Your Gmail" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
            <local:CustomEntry Grid.Row="5" Grid.Column="1" Placeholder="Enter Your Mobile No"  FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />
        </Grid>
        <Button Text="SUBMIT" TextColor="White" BackgroundColor="SkyBlue" FontSize="18" VerticalOptions="StartAndExpand"></Button>
    </StackLayout>

</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:BorderlessEntry"

x:Class="BorderlessEntry.MainPage" BackgroundColor="#1C70D3">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<local:CustomEntry Grid.Row="0" Grid.Column="1" Placeholder="Enter Your Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="1" Grid.Column="1" Placeholder="Enter Your First Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="2" Grid.Column="1" Placeholder="Enter Your Last Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="3" Grid.Column="1" Placeholder="Enter Your Father Name" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="4" Grid.Column="1" Placeholder="Enter Your Gmail" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

<local:CustomEntry Grid.Row="5" Grid.Column="1" Placeholder="Enter Your Mobile No" FontFamily="Roboto" TextColor="Blue" BackgroundColor="White" HorizontalOptions="FillAndExpand" />

</Grid>

</StackLayout>

</ContentPage>

Output: Tadaa, here is the expected output

Pinch and Pan Image in Xamarin Forms

September 17, 2018September 17, 2018 admin847785456 5 Comments

ZoomImage (PINCH and PAN) In Xamarin Forms

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017 File New Project Choose Cross-Platform Template Choose MobileApp (Xamarin.Forms ) Name it as ZoomImageApp Click on OK Chose .NetStanderd Click OK

Step2: Creating DoubleExtension.cs

Go to PCF file In ZoomImageApp Right Click Add Class DoubleExtention.cs

File Name: DoubleExtensions.cs

namespace ZoomImageApp
{
    public static class DoubleExtensions
    {
        public static double Clamp(this double self, double min, double max)
        {
            return Math.Min(max, Math.Max(self, min));
        }
    }
}

namespace ZoomImageApp

{

public static class DoubleExtensions

{

public static double Clamp(this double self, double min, double max)

{

return Math.Min(max, Math.Max(self, min));

}

Step 3: Creating Pinch & Pan Container

Create a class in the root directory and name it as PinchAndPanContainer.cs

File Name: PinchAndPanContainer.cs

namespace ZoomImageApp
{
    public class PinchAndPanContainer : ContentView
    {
        double currentScale = 1;
        double startScale = 1;
        double xOffset = 0;
        double yOffset = 0;

   // In this class we are Initialization the Gesture Recognizers for the particular property
        public PinchAndPanContainer()
        {
            PinchGestureRecognizer pinchGesture = new PinchGestureRecognizer();
            pinchGesture.PinchUpdated += PinchGesture_PinchUpdated;
            GestureRecognizers.Add(pinchGesture);

           //Rises the OnPanUpdated Event
            var panGesture = new PanGestureRecognizer();
            panGesture.PanUpdated += OnPanUpdated;
            GestureRecognizers.Add(panGesture);
        }

        private void PinchGesture_PinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
        {
/* Storing the current Scale Factor of both Horizontal and Vertical Orientations with Anchor X an Anchor         Y This defines the Centralization of any image to the particular Orientations. */

            if (e.Status == GestureStatus.Started)
            {
                // We Store the current scale factor applied to the wrapped user interface element,
                // and zero the components for the center point of the translate transform.

                startScale = Content.Scale;
                Content.AnchorX = 0;
                Content.AnchorY = 0;
            }

            if (e.Status == GestureStatus.Running)
            {
                // Calculate the scale factor to be applied.
                currentScale += (e.Scale - 1) * startScale;
                currentScale = Math.Max(1, currentScale);

                // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
                // so get the X pixel coordinate.
                double renderedX = Content.X + xOffset;
                double deltaX = renderedX / Width;
                double deltaWidth = Width / (Content.Width * startScale);
                double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

                // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
                // so get the Y pixel coordinate.
                double renderedY = Content.Y + yOffset;
                double deltaY = renderedY / Height;
                double deltaHeight = Height / (Content.Height * startScale);
                double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;
	
//With the Above X-Pixel coordinate and Y-Pixel coordinate we can calculate the Width and Height 
                // calculate the transformed element pixel coordinates.
                double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
                double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

                // Apply translation based on the change in origin.
                Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);
                Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0);

                // Apply scale factor.
                Content.Scale = currentScale;
            }

            if (e.Status == GestureStatus.Completed)
            {
                // Store the translation delta's of the wrapped user interface element.
                xOffset = Content.TranslationX;
                yOffset = Content.TranslationY;
            }
        }

        public void OnPanUpdated(object sender, PanUpdatedEventArgs e)
        {
            if (Content.Scale == 1)
            {
                return;
            }

            switch (e.StatusType)
            {
                case GestureStatus.Running:
                    // Translate and ensure we don't pan beyond the wrapped user interface element bounds.

                    double newX = (e.TotalX * Scale) + xOffset;
                    double newY = (e.TotalY * Scale) + yOffset;

                    double width = (Content.Width * Content.Scale);
                    double height = (Content.Height * Content.Scale);

                    bool canMoveX = width > App.ScreenWidth;
                    bool canMoveY = height > App.ScreenHeight;

// In the Below Code we r Pinching  the Image for the Particular Corner with MoveX and MoveY  interface    element bounds.

                    if (canMoveX)
                    {
                        double minX = (width - (App.ScreenWidth / 2)) * -1;
                        double maxX = Math.Min(App.ScreenWidth / 2, width / 2);

                        if (newX < minX)
                        {
                            newX = minX;
                        }

                        if (newX > maxX)
                        {
                            newX = maxX;
                        }
                    }
                    else
                    {
                        newX = 0;
                    }

                    if (canMoveY)
                    {
                        double minY = (height - (App.ScreenHeight / 2)) * -1;
                        double maxY = Math.Min(App.ScreenHeight / 2, height / 2);

                        if (newY < minY)
                        {
                            newY = minY;
                        }

                        if (newY > maxY)
                        {
                            newY = maxY;
                        }
                    }
                    else
                    {
                        newY = 0;
                    }

                    Content.TranslationX = newX;
                    Content.TranslationY = newY;
                    break;
                case GestureStatus.Completed:
                    // Store the translation applied during the pan
// here we r finally panning the particular image 
                    xOffset = Content.TranslationX;
                    yOffset = Content.TranslationY;
                    break;
            }
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

namespace ZoomImageApp

{

public class PinchAndPanContainer : ContentView

{

double currentScale = 1;

double startScale = 1;

double xOffset = 0;

double yOffset = 0;

// In this class we are Initialization the Gesture Recognizers for the particular property

public PinchAndPanContainer()

{

PinchGestureRecognizer pinchGesture = new PinchGestureRecognizer();

pinchGesture.PinchUpdated += PinchGesture_PinchUpdated;

GestureRecognizers.Add(pinchGesture);

//Rises the OnPanUpdated Event

var panGesture = new PanGestureRecognizer();

panGesture.PanUpdated += OnPanUpdated;

GestureRecognizers.Add(panGesture);

}

private void PinchGesture_PinchUpdated(object sender, PinchGestureUpdatedEventArgs e)

{

/* Storing the current Scale Factor of both Horizontal and Vertical Orientations with Anchor X an Anchor Y This defines the Centralization of any image to the particular Orientations. */

if (e.Status == GestureStatus.Started)

{

// We Store the current scale factor applied to the wrapped user interface element,

// and zero the components for the center point of the translate transform.

startScale = Content.Scale;

Content.AnchorX = 0;

Content.AnchorY = 0;

}

if (e.Status == GestureStatus.Running)

{

// Calculate the scale factor to be applied.

currentScale += (e.Scale - 1) * startScale;

currentScale = Math.Max(1, currentScale);

// The ScaleOrigin is in relative coordinates to the wrapped user interface element,

// so get the X pixel coordinate.

double renderedX = Content.X + xOffset;

double deltaX = renderedX / Width;

double deltaWidth = Width / (Content.Width * startScale);

double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

// The ScaleOrigin is in relative coordinates to the wrapped user interface element,

// so get the Y pixel coordinate.

double renderedY = Content.Y + yOffset;

double deltaY = renderedY / Height;

double deltaHeight = Height / (Content.Height * startScale);

double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

//With the Above X-Pixel coordinate and Y-Pixel coordinate we can calculate the Width and Height

// calculate the transformed element pixel coordinates.

double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);

double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

// Apply translation based on the change in origin.

Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);

Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0);

// Apply scale factor.

Content.Scale = currentScale;

}

if (e.Status == GestureStatus.Completed)

{

// Store the translation delta's of the wrapped user interface element.

xOffset = Content.TranslationX;

yOffset = Content.TranslationY;

}

public void OnPanUpdated(object sender, PanUpdatedEventArgs e)

{

if (Content.Scale == 1)

{

return;

}

switch (e.StatusType)

{

case GestureStatus.Running:

// Translate and ensure we don't pan beyond the wrapped user interface element bounds.

double newX = (e.TotalX * Scale) + xOffset;

double newY = (e.TotalY * Scale) + yOffset;

double width = (Content.Width * Content.Scale);

double height = (Content.Height * Content.Scale);

bool canMoveX = width > App.ScreenWidth;

bool canMoveY = height > App.ScreenHeight;

// In the Below Code we r Pinching the Image for the Particular Corner with MoveX and MoveY interface element bounds.

if (canMoveX)

{

double minX = (width - (App.ScreenWidth / 2)) * -1;

double maxX = Math.Min(App.ScreenWidth / 2, width / 2);

if (newX < minX)

{

newX = minX;

}

if (newX > maxX)

{

newX = maxX;

}

else

{

newX = 0;

}

if (canMoveY)

{

double minY = (height - (App.ScreenHeight / 2)) * -1;

double maxY = Math.Min(App.ScreenHeight / 2, height / 2);

if (newY < minY)

{

newY = minY;

}

if (newY > maxY)

{

newY = maxY;

}

else

{

newY = 0;

}

Content.TranslationX = newX;

Content.TranslationY = newY;

break;

case GestureStatus.Completed:

// Store the translation applied during the pan

// here we r finally panning the particular image

xOffset = Content.TranslationX;

yOffset = Content.TranslationY;

break;

}

Step 5: Copy any source image to Zoom it.

Go to ZoomimageApp.Android Resources Drawable In my case I’ve taken slip.png

Step 6: Creating UI for Pinch & Pan Container

File: MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ZoomImageApp"
             x:Class="ZoomImageApp.MainPage">
    <StackLayout Padding="10,40,10,10" >
        <!--For ZOOMING the image-->
        <ScrollView>           
                <local:PinchAndPanContainer>
                    <local:PinchAndPanContainer.Content>
                        <Image Source="slip3.png" />
                    </local:PinchAndPanContainer.Content>
                </local:PinchAndPanContainer>          
        </ScrollView>
        
        <StackLayout  Orientation="Horizontal" VerticalOptions="CenterAndExpand"   Padding="15" >
            <Label Text="This Is Pinch and Pan for any image" FontSize="20" VerticalTextAlignment="Center"/>
        </StackLayout>
    </StackLayout>
</ContentPage>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:ZoomImageApp"

x:Class="ZoomImageApp.MainPage">

<local:PinchAndPanContainer>

<local:PinchAndPanContainer.Content>

</local:PinchAndPanContainer.Content>

</local:PinchAndPanContainer>

</ScrollView>

</StackLayout>

</ContentPage>

Output: Tadaaa, Run the program Ctrl+F5

XPath Selenium Selectors

August 4, 2018August 4, 2018 admin847785456 2 Comments

XPath Selenium Selectors

We can find the location of any element on a web page using XML path expressions. The basic syntax for XPath is shown below:

Syntax = //tagname[@attribute=’Value‘]

1	Syntax = //tagname[@attribute=’Value‘]

Example = //input[@id=’user-message‘]

Absolute and Relative XPath

Generally, in some test automation engineer interviews, I asked the difference between absolute and relative XPath. Actually, it is the answer is very easy.

Absolute XPath

It is a direct way to locate an element.
It is very brittle.
Starts with single slash “/” that means starting to search from the root.

Example: /html/body/div[2]/div/div[2]/div[1]/div[2]/form/div/input

Relative XPath

Starts from the middle of the HTML DOM.
Starts with a double slash “//” that means it can start to search anywhere in the DOM structure.
Shorter than Absolute XPath.
Less fragile.

Example: //div[@class=’form-group’]//input[@id=’user-message’]

Example: //*[@class=’panel-body’]//li[contains(text(),’entered in input field’)]

Writing Smart XPaths for Complex and Dynamic Elements

1) Writing XPath with Tag & Attribute & Value Trio

Syntax: //tag[@attribute=’value‘]

1	Syntax: //tag[@attribute=’value‘]

Example: //input[@id, ‘user-message’]

Examples:

Xpath = //input[@type=’send text’]
Xpath = //label[@id=’clkBtn’]
Xpath = //input[@value=’SEND’]
Xpath = //*[@class=’Google’]
        –> “*” means, search “Googlepage” class for all tags.
Xpath = //a[@href=’https://www.google.co.in/’]
Xpath = //img[@src=’cdn.medianova.com/images/img_59c4334feaa6d.png’]

Xpath = //input[@type=’send text’]

Xpath = //label[@id=’clkBtn’]

Xpath = //input[@value=’SEND’]

Xpath = //*[@class=’Google’]

–> “*” means, search “Googlepage” class for all tags.

Xpath = //a[@href=’https://www.google.co.in/’]

Xpath = //img[@src=’cdn.medianova.com/images/img_59c4334feaa6d.png’]

2) Writing XPath with contains()

It is very handy XPath Selenium locator and sometimes it saves the life of a test automation engineer. When an attribute of an element is dynamic, then you can use contains() for the constant part of the web element but also you can use contains() in any condition when you need.

Syntax: //tag[contains(@attribute, ‘value‘)]

1	Syntax: //tag[contains(@attribute, ‘value‘)]

Example: //input[contains(@id, ‘er-messa’)]

Examples:

XPath = //*[contains(@name,’btnClk’)]
–> It searches “btnClk” for all name attributes in the DOM.

XPath = //*[contains(text(),’here’)]
–> It searches the text “here” in the DOM.

XPath = //*[contains(@href,’swtestacademy.com’)]
–> It searches “swtestacademy.com” link in the DOM.

XPath = //*[contains(@name,’btnClk’)]

–> It searches “btnClk” for all name attributes in the DOM.

XPath = //*[contains(text(),’here’)]

–> It searches the text “here” in the DOM.

XPath = //*[contains(@href,’swtestacademy.com’)]

–> It searches “swtestacademy.com” link in the DOM.

3) Writing XPath with starts-with

This method checks the starting text of an attribute. It is very handy to use when the attribute value changes dynamically but also you can use this method for non-changing attribute values.

Syntax: //tag[starts-with(@attribute, ‘value‘)]

1	Syntax: //tag[starts-with(@attribute, ‘value‘)]

Example: //input[starts-with(@id, ‘user’)]

4) Writing XPath with Chained XPaths Declerations

We can chain multiple relative XPath declarations with “//” double slash to find an element location as shown below.

Example: //div[@class=’form-group’]//input[@id=’user-message’]

5) Writing XPath with “and“ Statement

In this method, we use two interrogation conditions such as A and B and return a result-set as shown below:

Syntax: //tag[XPath Statement-1 and XPath Statement-2]

1	Syntax: //tag[XPath Statement-1 and XPath Statement-2]

Example: //*[@id=’user-message’ and @class=’form-control’]

6) Writing XPath with text()

We can find an element with its exact text.

Syntax: //tag[text()=’text value‘]

1	Syntax: //tag[text()=’text value‘]

Example: .//label[text()=’Enter message’]

$emit, $broadcast, $on – Part2

July 10, 2018July 10, 2018 admin847785456 1 Comment

$emit: It dispatches an event name upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $emit was called. The event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.

$broadcast: It dispatches an event name downwards to all child scopes (and their children) and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.

$on: It listen on events of a given type. It can catch the event dispatched by $broadcast and $emit.

<body ng-app="myApp">

   <div ng-controller="parentController1" style="border:2px solid #fed844; padding:5px;">

       <p>{{parentmessage}}</p>

       <div ng-controller="parentController2" style="border:2px solid #fed844; padding:5px;">

           <p>{{parentmessage}}</p>

           <div ng-controller="myController" style="border:2px solid #000000;padding:5px;">

               <p> <button ng-click="EmitMessage()">Emit Message</button> <button ng-click="BroadcastMessage()">Broadcast Message</button></p>

               <div ng-controller="childController1" style="border:2px solid #428bca;padding:5px;">

                   <p>{{childmessage}}</p>

                   <div ng-controller="childController2" style="border:2px solid #428bca;padding:5px;">

                       <p>{{childmessage}}</p>

                   </div>

               </div>               

           </div>

       </div>

   </div>

</body>

<p>{{parentmessage}}</p>

<p>{{parentmessage}}</p>

<p> <button ng-click="EmitMessage()">Emit Message</button> <button ng-click="BroadcastMessage()">Broadcast Message</button></p>

<p>{{childmessage}}</p>

<p>{{childmessage}}</p>

</div>

</body>

And now creating the script, here myController is the controller which is going to emit/broadcast an event with some arguments.
parentController1, parentController2 will listen to event which is dispatched from myController by $broadcast.
childController1, childController2 will listen to event which is dispatched from myController by $emit.

<script>

    var app = angular.module("myApp", []);

    app.controller("parentController1", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.parentmessage = args.mymessage + " to Parent Controller-1";

        });

    }])

    app.controller("parentController2", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.parentmessage = args.mymessage + " to Parent Controller-2";

        });

    }])

    app.controller("myController", ["$scope", function ($scope) {

        $scope.EmitMessage = function () {

            $scope.$emit("myEvent", {mymessage:"Emitted message"});

        };

        $scope.BroadcastMessage = function () {

            $scope.$broadcast("myEvent", { mymessage: "Broadcasted message" });

        };

    }])

    app.controller("childController1", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.childmessage = args.mymessage+" to Child Controller-1";

        });

    }])

    app.controller("childController2", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.childmessage = args.mymessage + " to Child Controller-2";

        });

    }])

</script>

var app = angular.module("myApp", []);

app.controller("parentController1", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.parentmessage = args.mymessage + " to Parent Controller-1";

});

}])

app.controller("parentController2", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.parentmessage = args.mymessage + " to Parent Controller-2";

});

}])

app.controller("myController", ["$scope", function ($scope) {

$scope.EmitMessage = function () {

$scope.$emit("myEvent", {mymessage:"Emitted message"});

};

$scope.BroadcastMessage = function () {

$scope.$broadcast("myEvent", { mymessage: "Broadcasted message" });

};

}])

app.controller("childController1", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.childmessage = args.mymessage+" to Child Controller-1";

});

}])

app.controller("childController2", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.childmessage = args.mymessage + " to Child Controller-2";

});

}])

</script>

output

In this example we have used $scope context to $emit/$broadcast the events, and $on has listened all the events by using $scope.$on().
Now if we have used $rootscrope context to $emit/$broadcast, it will not work same as that works with $scope.
Because $rootscope is the parent scope and it doesn’t have any parent, when we emit using $rootscope.$emit(), only $rootscope.$on() can listen to that events. Whereas when we broadcast using $rootscope.$broadcast(), all the $rootscope.$on() and $scope.$on() can listen to that event.

Cancelling Events:

Canelling event is possible when event is emitted, but we cannont cancel the event when it is broadcasted.

If the event is dispatched by using $scope.$emit( ) then any of the $rootscope/$scope listeners can cacel it.
If the event is dispatched by using $rootscope.$emit() then any of the $rootscope listeners can cancel it.

$scope.$on("myEvent", function (event, args) {

            event.stopPropagation();   
        
});

$scope.$on("myEvent", function (event, args) {

event.stopPropagation();

});

$rootscope.$on("myEvent", function (event, args) {

            event.stopPropagation();   
         
});

$rootscope.$on("myEvent", function (event, args) {

event.stopPropagation();

});

$emit, $broadcast, $on – Part1

$emit, $broadcast, $on – Part1

July 6, 2018July 10, 2018 admin847785456 1 Comment

How to use $rootScope:

As we know that $rootScope is the parent for $scope, to override the $rootScope we need to re-initialize the $rootScope variable with $scope

Let us see an example

<!DOCTYPE html>

<html>

<head>

    <title>Broadcasting</title>

    <script src="/Scripts/angular.js"></script>   

</head>

<body ng-app="myApp">

    <div ng-controller="parentController">

     This is parent - {{empName}}

        <div ng-controller="childController">

         This is child - {{empName}}

        </div>

    </div>

</body>

</html>

<script>
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope, $rootScope) {

        $rootScope.empName = "John Smith";

    })

    app.controller("childController", function ($scope, $rootScope) {
      
    })
</script>

<!DOCTYPE html>

<html>

<head>

<title>Broadcasting</title>

</head>

This is parent - {{empName}}

This is child - {{empName}}

</div>

</body>

</html>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope, $rootScope) {

$rootScope.empName = "John Smith";

})

app.controller("childController", function ($scope, $rootScope) {

})

</script>

In this example we have injected $rootScope in both parent and child controllers.

As $rootScope variables will be available throughout the application we can now access the $rootScope variable anywhere in the application by just injecting the $rootScope

Output:

Now if we remove the $rootScope from Parent and initialize it in child controller, it works same.

<script>
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope, $rootScope) {

    })

    app.controller("childController", function ($scope, $rootScope) {

         $rootScope.empName = "John Smith";
    })

</script>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope, $rootScope) {

})

app.controller("childController", function ($scope, $rootScope) {

$rootScope.empName = "John Smith";

})

</script>

Output:

How to pass data from parent controller to child

To pass the data from Parent Controller to Child, we need to extract parent controller $scope variable using $parent.

Example: In this example we will use only $scope.

<!DOCTYPE html>

<html>

<head>

    <title>Broadcasting</title>

    <script src="/Scripts/angular.js"></script>  
 
</head>

<body ng-app="myApp">

<div ng-controller="parentController">

    This is parent - {{empName}}

      <div ng-controller="childController">

         This is child - {{$parent.empName}}

      </div>

 </div>

</body>

</html>

<script>  
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope) {

        $scope.empName = "John Smith";

    })
    app.controller("childController", function ($scope) {
       
    })
</script>

<!DOCTYPE html>

<html>

<head>

<title>Broadcasting</title>

</head>

This is parent - {{empName}}

This is child - {{$parent.empName}}

</div>

</body>

</html>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope) {

$scope.empName = "John Smith";

})

app.controller("childController", function ($scope) {

})

</script>

How to pass data from child controller to parent

To pass data from child to parent controllers using $scope we don’t have $child to take from child controller. But here I’ll show you one of the possible way to transfer data.

<!DOCTYPE html>

<html>

<head>

    <title>Broadcasting</title>

    <script src="/Scripts/angular.js"></script>   

</head>

<body ng-app="myApp">

    <div ng-controller="parentController">

        This is parent - {{employee.empName}}

        <div ng-controller="childController">

            This is child - {{employee.empName}}

        </div>

    </div>

</body>

</html>

<script>  
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope) {

        $scope.employee = {};

    })
    app.controller("childController", function ($scope) {

       $scope.employee.empName = "John Smith";

    })
</script>

<!DOCTYPE html>

<html>

<head>

<title>Broadcasting</title>

</head>

This is parent - {{employee.empName}}

This is child - {{employee.empName}}

</div>

</body>

</html>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope) {

$scope.employee = {};

})

app.controller("childController", function ($scope) {

$scope.employee.empName = "John Smith";

})

</script>

In child controller initialize the empName in an object as $scope.employee.empName.
In parent controller declare an empty object naming with same object as $scope.employee = {}

Output:

$emit, $broadcast, $on – Part2