directive - Part 2

#undef Directive: C Program

In today’s video tutorial lets see how to use #undef preprocessor directive.

What Does #undef Do?

#undef removes or undefines a macro name which is previously created or defined using #define directive.

Syntax

#undef MACRO_NAME

Note: If a Macro template is associated with a Macro expansion, you need not mention the macro expansion to undefine the macro. You simple undefine using this syntax: #undef MACRO_NAME

Video Tutorial: #undef Preprocessor Directive: C Program

[youtube https://www.youtube.com/watch?v=1FwlFR9PQDE]

YouTube Link: https://www.youtube.com/watch?v=1FwlFR9PQDE [Watch the Video In Full Screen.]

Source Code: #undef Directive: C Program

#include<stdio.h>

#define iOS
#undef iOS

int main()
{
    #if defined(iOS)
        printf("I Love Apple Devices\n");
    #else
        printf("Macro iOS has been undefined\n");
    #endif // defined

    return 0;
}

Output:
Macro iOS has been undefined

In above source code we’re undefining the Macro iOS immediately after defining it. So defined(iOS) returns false or 0. So code inside #else block gets compiled and executed.

#include<stdio.h>

#define iOS

int main()
{
    #if defined(iOS)
        printf("I Love Apple Devices\n");
        printf("Gift me a latest iPhone!\n");
    #else
        printf("Macro iOS has been undefined\n");
    #endif // defined

    return 0;
}

Output:
I Love Apple Devices
Gift me a latest iPhone!

Here Macro iOS is defined, so defined(iOS) returns true. That’s why block of code inside #if directive gets compiled and executed.

#include<stdio.h>

#define iOS

int main()
{
    #undef iOS
    #if defined(iOS)
        printf("I Love Apple Devices\n");
    #else
        printf("Macro iOS has been undefined\n");
    #endif // defined

    return 0;
}

Output:
Macro iOS has been undefined

Even though #define iOS is defined at global level you can undefine it inside main() method.

Note: defined() is a preprocessor operator which returns true if the passed macro name is defined orelse returns false or zero if its not defined.

Instead of defined() preprocessor operator you could even use #ifdef or #ifndef to check if the Macro template or Macro name is defined or not defined.

#include<stdio.h>

#define iOS

int main()
{
    int flag = 1;

    do
    {
        #if defined(iOS)
            printf("I Love Apple Devices\n");
            printf("This displays all your iPhone Device Details\n");
        #else
            printf("I'm inside do while block.\n");
        #endif // defined

        printf("Enter your choice? (0/1)\n");
        scanf("%d", &flag);

    }while(flag);


    #undef iOS

    #if defined(iOS)
        printf("I Love Apple Devices\n");
        printf("This displays all your iPhone Device Details\n");
    #else
        printf("Macro iOS has been undefined\n");
    #endif // defined

    return 0;
}

Output:
I Love Apple Devices
This displays all your iPhone Device Details
Enter your choice? (0/1)
1
I Love Apple Devices
This displays all your iPhone Device Details
Enter your choice? (0/1)
1
I Love Apple Devices
This displays all your iPhone Device Details
Enter your choice? (0/1)
0
Macro iOS has been undefined

In above program we are defining iOS macro globally. Inside main method we use do while loop and keep executing #if #else #endif directives. Since iOS is defined, the block of code inside #if gets executed each time. Once user enters 0 as input, the control exits do while loop execution. Next it encounters #undef iOS, so defined(iOS) now returns false or 0, hence code inside #else directive gets executed.

For list of all c programming interviews / viva question and answers visit: C Programming Interview / Viva Q&A List

For full C programming language free video tutorial list visit:C Programming: Beginner To Advance To Expert

#error Preprocessor Directive: C Programming

In this video tutorial, lets see how we can make use of #error preprocessor command or directive.

Where Is It Useful?

If you’re a Software developer working with C programming language, then your project will have a lot of code and dependency source codes. While compiling, compiler will take a lot of time. In big projects usually you forget the purpose of compilation by the time it completes compilation. In such cases, make use of #error directive. If there are any errors at certain locations the compiler will stop further compilation as and when it encounters #error directive. This saves a lot of time and resources. So #error directive is usually helpful in debugging your project code.

It’s also helpful in projects with critical user inputs. Suppose user enters wrong data due to which the project itself might crash and utilize a lot of resource while trying to execute. In such cases it’s better to terminate the program execution.

Video Tutorial: #error Preprocessor Directive: C Programming

[youtube https://www.youtube.com/watch?v=_w2OBtOvzTg]

YouTube Link: https://www.youtube.com/watch?v=_w2OBtOvzTg [Watch the Video In Full Screen.]

Source Code: #error Preprocessor Directive: C Programming

#include<stdio.h>

#define iOS

#ifndef iOS
    #error First Include iOS Macro
#else
    int main()
    {
        printf("I Love Apple Devices!\n");

        return 0;
    }
#endif // iOS

Output:
I Love Apple Devices!

Here #ifndef directive checks if the macro iOS is defined. If its NOT defined it returns true or 1. If it’s defined then it returns 0 or false.

So if the macro iOS is not defined, then the code inside #ifndef gets compiled and executed, else the code inside #else block gets compiled and executed.

When Macro iOS is not defined

When Macro iOS is not defined, the code inside #ifndef gets compiled, where the compiler encounters #error directive. Now the compiler immediately stops any further compilation and displays the error message associated with #error directive.

For list of all c programming interviews / viva question and answers visit: C Programming Interview / Viva Q&A List

For full C programming language free video tutorial list visit:C Programming: Beginner To Advance To Expert

include directive in C Program

Usually you can see these “include” directive at the very top of your source code. It’s called a preprocessor directive.

All preprocessor statements in C start with a hash(#) symbol. include directive is similar to imports statement in Java.

 
#include < stdio.h >
int main()
{
    printf("Microsoft\n Apple\n Oracle\n Google\n Yahoo\n");
    return 0;
}

Output:
Microsoft
Apple
Oracle
Google
Yahoo

include Preprocessor Directive In C Program

[youtube https://www.youtube.com/watch?v=4BBml3T8WK4]

YouTube Link: https://www.youtube.com/watch?v=4BBml3T8WK4 [Watch the Video In Full Screen.]

This “include” directive causes one file to be included in another. For example, when we include stdio.h (header file) in our above program, all the content(code) gets imported or included in our program source code. This way we can make use of any function present inside stdio.h library file in our c program.

Car Program

We are writing Car simulation program in C – we write all the related code in different files by group them together and then include it in our main Car program. For example, we can separate wheels, color and display related things and then include all those things in our main Car program. This way our main Car program source code looks less clumsy and more over we need not worry about the implementation details present in those files.

Ex: When we include stdio.h file, we do not worry about the implementation details of printf() method. We simply use it for displaying content to the console. All the implementation details are present in stdio.h header file.

There are 2 ways of including header files

 
#include < stdio.h >

#include "Mylib.h"

When we use < and > to wrap around the file name, the linker looks for the files in standard library storage folder. When we wrap the file name in double quotes it looks for the file in current directory.

Usually user written, custom header files are wrapped in double quotes.

We’ll be writing our own library files in this video series. But for now it’ll get too complicated if we go any further.

Note: There are many preprocessor statements other than include directive. We’ll discuss them as and when we use it in our C programs.

ngClass Directive: Ionic 2

Today lets learn how to make use of ngClass angular directive in our Ionic 2 application.

Related Read:
ngIf, index, first, last: Ionic 2

ngClass Directive: Ionic 2

[youtube https://www.youtube.com/watch?v=r1ZRoXBcUfs]

YouTube Link: https://www.youtube.com/watch?v=r1ZRoXBcUfs [Watch the Video In Full Screen.]

Company Names: src/pages/home/home.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
items: any = [];
  constructor() {
    this.items = [
      'Microsoft',
      'Apple',
      'Oracle',
      'Google',
      'IBM',
      'Tesla',
      'Technotip'
    ];
  }
}

We have an array of company names which is being assigned to variable items.

Output
Microsoft
Apple
Oracle
Google
IBM
Tesla
Technotip

CSS Class: src/pages/home/home.scss

page-home {
    .bold{
        font-weight: bolder;
    }
    .normal{
        font-weight: normal;
    }
}

We define two CSS classes which we use to apply for alternate list items – using ngClass directive. Alternatively the list items appear in bold and in normal font weight.

ngClass Directive – using ternary operator: src/pages/home/home.html

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
< ion-list no-lines>
  < ion-item *ngFor="let item of items; let i = index;"
             [ngClass]="(i % 2 == 0) ? 'bold' : 'normal'">
    {{i+1}}. {{item}}
  < /ion-item>
< /ion-list>
< /ion-content>

Here we use ternary operator and whenever i % 2 is zero we apply bold class to that item, if not we apply normal class to that list item.

ngClass Directive: src/pages/home/home.html

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
< ion-list no-lines>
  < ion-item *ngFor="let item of items; let i = index;"
             [ngClass]="{'bold': (i % 2 == 0)}">
    {{i+1}}. {{item}}
  < /ion-item>
< /ion-list>
< /ion-content>

This is yet another way of doing the same thing which we did using ternary operator above. Here, if i % 2 is equal to zero, then bold class will be applied, if not it won’t be applied.

changing colors: src/pages/home/home.scss

page-home {
    .bold{
        font-weight: bolder;
        color: blue;
    }
    .normal{
        font-weight: normal;
        color: green;
    }
}

Alternatively the list items appear in bold and in normal font weight, along with blue and green colors respectively.

List Item Reordering: Ionic 2

Today lets learn how to implement reordering of list items in Ionic 2, using reorder directive and ionItemReorder event.

We’re using previous day code to implement reordering list items. So please go through these two small video tutorials before continuing .. (if you’re an advance user, then you can directly follow todays video tutorial).

1. Ionic Storage: Ionic 2
2. Pull To Refresh: Ionic 2

In this video tutorial lets learn
1. To build drag and rearrange interface and functionality.
2. Solve the ion-refresher component interference with the reorder directive.
3. Save rearranged data back to the database.

Reordering list items using reorder directive: Ionic 2

[youtube https://www.youtube.com/watch?v=wKq4sKk5DXU]

YouTube Link: https://www.youtube.com/watch?v=wKq4sKk5DXU [Watch the Video In Full Screen.]

reorder directive
We can implement reorder directive directly on ion-list. This way we apply reordering to the entire items present inside ion-list.

reorder on ion-list: src/pages/home/home.html

 < ion-list no-lines 
           reorder="true" 
           (ionItemReorder)="reorderItems($event);">
   < ion-item *ngFor="let item of items">
     {{item}}
   < /ion-item>
 < /ion-list>

But if we have ion-header, ion-footer and other items inside the list for which we do not want the reorder directive to be applied.
reorder on ion-item-group: src/pages/home/home.html

 < ion-list no-lines>
   < ion-list-header>Company Names
   < ion-item-group reorder="true" (ionItemReorder)="reorderItems($event);">
    < ion-item *ngFor="let item of items">
     {{item}}
    < /ion-item>
   < /ion-item-group>
 < /ion-list>

In that case we need to group those items on which we want the reordering, and then apply reorder directive on that group, as shown in above example.

reordering code: src/pages/home/home.ts

reorderItems(indexes){
 let element = this.items[indexes.from];
 this.items.splice(indexes.from, 1);
 this.items.splice(indexes.to, 0, element);
};

When the item is dragged and dropped to the new position, (ionItemReorder) event is emitted and this event also provides initial and new position index of the reordered item. Using this, we reorder the list items.

Above code snippet is a simple JavaScript code, where we first get the actual item value which is being reordered(using its index value – indexes.from) and store it in a temporary variable. Next we remove that item from the list. Finally we place that element in the new position. All these operation is done using simple JavaScript splice method.

Helper Function: src/pages/home/home.ts

import { reorderArray } from 'ionic-angular';
 
class MyComponent {
  items = [];
 
  reorderItems(indexes) {
    this.items = reorderArray(this.items, indexes);
  }
}

Ionic 2 also provides helper function called reorderArray to reorder the array of items. Here we import the helper class and then use it to reorder the array of items.

Helper Function: src/pages/home/home.html

< ion-list>
  < ion-list-header>Header< /ion-list-header>
  < ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
    < ion-item *ngFor="let item of items">{{ item }}< /ion-item>
  < /ion-item-group>
< /ion-list>

We can execute helper function inside template as well, as shown above.

Reordering ON and OFF
src/pages/home/home.html

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
    < ion-buttons end>
      < button ion-button small clear (click)="actionBtn();">
        {{btnName}}
      < /button>
    < /ion-buttons>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
 < ion-list no-lines>
   < ion-list-header>Company Names< /ion-list-header>
   < ion-item-group reorder="{{flag}}" 
                    (ionItemReorder)="reorderItems($event);">
   < ion-item *ngFor="let item of items">
     {{item}}
   < /ion-item>
   < /ion-item-group>
 < /ion-list>
< /ion-content>

Note that we have a button inside ion-header. We switch the value of btnName variable between ‘edit’ and ‘Done’ alternatively when the user clicks on it. Also we have assigned a variable(flag) to reorder directive. flag is of type Boolean and it also switches between ‘true’ and ‘false’ when the user clicks on btnName button. This way we enable and disable the visual drag and rearrange interface on the list items.

src/pages/home/home.ts

import { Component } from '@angular/core';
 
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
items: any;
btnName: any = 'edit';
flag: any = false;
  constructor(public navCtrl: NavController, public storage: Storage) {
    this.doRefresh(0);
  };
doRefresh(refresher){
    this.storage.get('myStore1').then((data) => {
      this.items = data;
 
      if(refresher != 0)
         refresher.complete();
    }); 
};
reorderItems(indexes){
 let element = this.items[indexes.from];
 this.items.splice(indexes.from, 1);
 this.items.splice(indexes.to, 0, element);
};
actionBtn(){
 if(this.btnName == 'edit')
 {
   this.btnName = 'Done';
   this.flag    = true;
 }
 else
 {
   this.btnName = 'edit';
   this.flag    = false;
   this.storage.set('myStore1', this.items);
 }
};
 
}

Here we initialize the btnName with a value of ‘edit’ and flag as ‘false’. So initially, the drag and rearrange interface will be disabled. Once the user clicks on the ‘edit’ button present inside ion-header, the visual drag and rearrange interface appears. After the rearrangement of the item is finished user needs to click on ‘Done’ button and we save the rearranged list items to our database. This way we can persist the rearranged data.

We could even save the data to database inside reorderItems() method itself, so that the data gets saved when the user drags and drops the item in its new position. Without the need for the user to click on ‘Done’ button.

actionBtn() method

actionBtn(){
 if(this.btnName == 'edit')
 {
   this.btnName = 'Done';
   this.flag    = true;
 }
 else
 {
   this.btnName = 'edit';
   this.flag    = false;
   this.storage.set('myStore1', this.items);
 }
};

Initially variable ‘btnName’ will be ‘edit’ and flag will be ‘false’. When the user clicks on ‘edit’ button, the label name changes to ‘Done’ and the flag value changes to ‘true’. By this, the drag and rearrange interface appears on the list items. Once the arrangement is done, the user needs to click on the button ‘Done’. When the user clicks on ‘Done’ button, the button label or name changes back to ‘edit’ and the visual drag and rearrange interface gets disabled and optionally we save the rearranged data back to the database.

item reordering and ion-refresher conflict

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
    < ion-buttons end>
      < button ion-button small clear (click)="actionBtn();">
        {{btnName}}
      < /button>
    < /ion-buttons>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
  < ion-refresher (ionRefresh)="doRefresh($event);">
    < ion-refresher-content 
      pullingText="Pull to refresh"
      pullingIcon="arrow-dropdown"
      refreshingSpinner="circles"
      refreshingText="..fetching">
    < /ion-refresher-content>
 < /ion-refresher>
 
 < ion-list no-lines>
   < ion-list-header>Company Names< /ion-list-header>
   < ion-item-group reorder="true" 
                    (ionItemReorder)="reorderItems($event);">
   < ion-item *ngFor="let item of items">
     {{item}}
   < /ion-item>
   < /ion-item-group>
 < /ion-list>
< /ion-content>

This code has both ion-refresher as well as reorder directive. Here when the user tries to drag an item downwards the refresher component gets invoked. To avoid that, we can simply disable ion-refresher when we enable reordering and enable ion-refresher when we disable reordering, as shown in below code.

Fixed: ion-refresher & item reorder

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
    < ion-buttons end>
      < button ion-button small clear (click)="actionBtn();">
        {{btnName}}
      < /button>
    < /ion-buttons>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
  < ion-refresher (ionRefresh)="doRefresh($event);" 
                  *ngIf="flag == false">
    < ion-refresher-content 
      pullingText="Pull to refresh"
      pullingIcon="arrow-dropdown"
      refreshingSpinner="circles"
      refreshingText="..fetching">
    < /ion-refresher-content>
 < /ion-refresher>
 
 < ion-list no-lines>
   < ion-list-header>Company Names< /ion-list-header>
   < ion-item-group reorder="{{flag}}" 
                    (ionItemReorder)="reorderItems($event);">
   < ion-item *ngFor="let item of items">
     {{item}}
   < /ion-item>
   < /ion-item-group>
 < /ion-list>
< /ion-content>

Full Free Source Code: src/pages/home/home.html

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
    < ion-buttons end>
      < button ion-button small clear (click)="actionBtn();">
        {{btnName}}
      < /button>
    < /ion-buttons>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
  < ion-refresher (ionRefresh)="doRefresh($event);" 
                  *ngIf="flag == false">
    < ion-refresher-content 
      pullingText="Pull to refresh"
      pullingIcon="arrow-dropdown"
      refreshingSpinner="circles"
      refreshingText="..fetching">
    < /ion-refresher-content>
 < /ion-refresher>
 
 < ion-list no-lines>
   < ion-list-header>Company Names< /ion-list-header>
   < ion-item-group reorder="{{flag}}" 
                    (ionItemReorder)="reorderItems($event);">
   < ion-item *ngFor="let item of items">
     {{item}}
   < /ion-item>
   < /ion-item-group>
 < /ion-list>
 
  < p>
    < ion-label fixed>Company Name< /ion-label>
    < ion-input type="text" name="company" [(ngModel)]="company">
    < /ion-input>
    < button ion-button (click)="save(company);">Add< /button>
  < /p>
< /ion-content>

Full Free Source Code: src/pages/home/home.ts

import { Component } from '@angular/core';
 
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
items: any;
btnName: any = 'edit';
flag: any = false;
  constructor(public navCtrl: NavController, public storage: Storage) {
    this.doRefresh(0);
  };
doRefresh(refresher){
    this.storage.get('myStore1').then((data) => {
      this.items = data;
 
      if(refresher != 0)
         refresher.complete();
    }); 
};
reorderItems(indexes){
 let element = this.items[indexes.from];
 this.items.splice(indexes.from, 1);
 this.items.splice(indexes.to, 0, element);
};
actionBtn(){
 if(this.btnName == 'edit')
 {
   this.btnName = 'Done';
   this.flag    = true;
 }
 else
 {
   this.btnName = 'edit';
   this.flag    = false;
   this.storage.set('myStore1', this.items);
 }
};
  save(val){
    console.log('data added '+val);
    this.storage.get('myStore1').then((data) => {
      if(data != null)
      {
        data.push(val);
        this.storage.set('myStore1', data);
      }
      else
      {
        let array = [];
        array.push(val);
        this.storage.set('myStore1', array);
      }
    });
  };
}

Example Application:
We’ve implemented the same code in one of our application ‘RSS Reader‘. Go to ‘Feed’ tab and add few blog / news sites rss feeds and the refresh the ‘Feed’ tab to see ‘list item reordering’ in action.