hit tracker

UI

Home » UI

Bind File System in WPF using FileSystemWatcher in C#

in C-Sharp, Programming, UI, WPF by Balamanigandan B Comments are off

C# is one of the most popular languages today and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels. Let’s discuss how to efficiently use the AsEnumerable and AsQueryable in C# LINQ.

FileSystemWatcher Class implements to watch for changes in a specified directory. We can watch for changes in files and subdirectories of the specified directory. We can create a component to watch files on a local computer, a network drive, or a remote computer. FileSystemWatcher is perhaps the most important features in .NET used in the workplace today.

Binding File System

FileSystemViewModel.cs
MainWindow.xaml.cs
MainWindow.xaml
Preview:
C:\MyFolder\Jellyfish.jpg
C:\MyFolder\Mydata.txt
C:\MyFolder\Route.xls

The Property FilesCollection has only get access, get can only read information from that private field and return it. But set can only write information in that private field. But in our scenario, we are accessing the Window’s File System, So, we can’t know when the Folder gets update i.e., File Add / Delete / Rename. So, the above View Model fails to update the UI in dynamic.

Let us see how to overcome this problem. The .NET Framework introduces a new feature as like watchdog to monitor the File System, its called as FileSystemWatcher Class under the namespace System.IO. Let us see how to implement

FileSystemWatcher Class

FileSystemViewModel.cs

FileSystemWatcher Class has four major property, they are

  • Path
  • NotifyFilter
  • Filter
  • Event Handlers
  • Transaction Control Language

Path

It specifies the filesystem physical path to watch.

NotifyFilter

Specifies the type of changes to watch for in a file or folder. It supports the following Notification, they are

  • Attributes
  • CreationTime
  • DirectoryName
  • FileName
  • LastAccess
  • LastWrite
  • Security
  • Size

Filter

It’s used to determine what files are monitored in a directory. For example

  • *.* – All files (default). An empty string (“”) also watches all files.
  • *.txt – All files with a “txt” extension.
  • My*.txt – All files with a “txt” extension only stats with “My”.
  • M*a.txt – All files with a “txt” extension only stats with “M” and ends with “a”.
  • MyData.txt – Watches only MyData.txt
  • Jellyfish.jpg – Watches only Jellyfish.jpg

Event Handlers

It’s triggers the following events

  • OnChanged – Raises the Changed event.
  • OnCreated – Raises the Created event.
  • OnDeleted – Raises the Deleted event.
  • OnError – Raises the Error event.
  • OnRenamed – Raises the Renamed event.

EnableRaisingEvents

The component will not watch the specified directory until the Path property has been set and EnableRaisingEvents is true.

Important Notes:

Please note the following when using the FileSystemWatcher class.

  • Hidden files are not ignored.
  • In some systems, FileSystemWatcher reports changes to files using the short 8.3 file name format. For example, a change to “LongFileName.LongExtension” could be reported as “LongFil~.Lon”.
  • This class contains a link demand and an inheritance demand at the class level that applies to all members. A SecurityException is thrown when either the immediate caller or the derived class does not have full-trust permission. For details about security demands, see Link Demands.
  • The maximum size you can set for the InternalBufferSize property for monitoring a directory over the network is 64 KB.
  • Running FileSystemWatcher on Windows 98 is not supported.

 

Conclusion :

This article targets at understanding how efficiently we can Bind File System in WPF using FileSystemWatcher in C#. This article is intended for the beginner/intermediate level. I hope, this post will solve all your basic functionality implementation of FileSystemWatcher in C#. Think Big… Start Small… Do Fast…

Post HTML Embedded Interactive Blog in WordPress

in Programming, UI, Uncategorized by Balamanigandan B Comments are off

WordPress is one of the most popular tool today to publish Websites and Blogs are many reasons for this. It has many qualities that make it suitable for development for users at most all levels. Let’s discuss how efficiently publish HTML embedded Interactive Blog in WordPress

HTML tags or HTML elements, and their respective attributes are used to create HTML documents so that we can view them in browsers like Google Chrome, Internet Explorer, Firefox, etc., and other user agents.

Let us discuss how we have to create HTML Embedded Interactive Blog using WordPress Post Creation Wizard in the Admin Panel.

  1. Log in to your WordPress (Dashboard).
  2. Click the tab.
  3. Click the sub-tab.
  4. Select the ‘Text’ Editor.

The Text Editor is a powerful tool to write up code in HTML along with CSS or by plain Text.

Pragraph :

Text Alignment: Left
Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels. Let’s discuss how efficiently remove duplicate records in a SQL Server Database table. SQL Server is a Relational Database Management System (RDBMS) and the most widely used client–server model RDBMS in the current trend applications. RDBMS is perhaps the most important Database system used in the workplace today.

Text Alignment: Right
Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels. Let’s discuss how efficiently remove duplicate records in a SQL Server Database table. SQL Server is a Relational Database Management System (RDBMS) and the most widely used client–server model RDBMS in the current trend applications. RDBMS is perhaps the most important Database system used in the workplace today.

Text Alignment: Justify
Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels. Let’s discuss how efficiently remove duplicate records in a SQL Server Database table. SQL Server is a Relational Database Management System (RDBMS) and the most widely used client–server model RDBMS in the current trend applications. RDBMS is perhaps the most important Database system used in the workplace today.

Block Quote

Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text Alignment: Justify
Preview:

Structured Query Language (SQL) is one of the most popular languages today
to querying database and there are many reasons for this. It has many qualities
that make it suitable for development for users at most all levels.

Text: Bold

Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text: Emphasized

Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text: Italic

Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text: Underline

Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text: Overline

Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text: delete (or) line-through

Using HTML
Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Using CSS
Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text: Insert

Preview:

SQL Update Command is a Data Query Language Data Manipulation Language.

Text: Color

Foreground Color
Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Background Color
Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

Text: Hyper Link

Preview:

Structured Query Language (SQL) is one of the most popular languages today to querying database and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels.

List

Ordered List
Preview:
  1. Data Definition Language
  2. Data Manipulation Language
  3. Data Query Language
  4. Data Control Language
  5. Transaction Control Language
UN-Ordered List
Preview:
  • Data Definition Language
  • Data Manipulation Language
  • Data Query Language
  • Data Control Language
  • Transaction Control Language
Data List
Preview:
Types of Language
Data Definition Language
Data Manipulation Language
Data Query Language
Data Control Language
Transaction Control Language

Table

Default Table
Preview:
S.No. Database Launched License SQL
1 Oracle 1980 Proprietary Yes
2 MySQL 1995 Open source Yes
3 Microsoft SQL Server 1989 Proprietary Yes
4 PostgreSQL 1989 Open source Yes
5 MongoDB 2009 Open source Yes
Formatted Table: Border, Padding, Background Color and Text Alignment
Preview:
List of Databases
S.No. Database Launched License SQL
1 Oracle 1980 Proprietary Yes
2 MySQL 1995 Open source Yes
3 Microsoft SQL Server 1989 Proprietary Yes
4 PostgreSQL 1989 Open source Yes
5 MongoDB 2009 Open source No

Image

Preview:
IncRev Corporation

Conclusion:

This article targets at understanding how efficiently we create a Interactive HTML Embedded Blog in WordPress. This article is intended for the beginner/intermediate level. I hope, this post will solve all your basic functionality of WordPress Blog Content Formatting. Think Big… Start Small… Do Fast…

Usage of md-autocomplete in Angular Material

in AngularJS, UI by Balamanigandan B Comments are off

AngularJS is one of the most popular Client side Java Script languages today and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels. Let’s discuss how efficiently use the md-autocomplete in Angular Material.

Angular Material md-autocomplete introduces a special input component with a drop-down of all possible matches to a custom query. This component allows us to provide real-time suggestions as the user types in the input area.

md-autocomplete may get the input source via local object or from remote data source. Both are having different paradigms for consuming Suggestion data.

Core Features of md-autocomplete

Let us see the basic syntax of md-autocomplete

 

All the attributes of md-autocomplete is briefly explained in the Angular Material website https://material.angularjs.org/latest/api/directive/mdAutocomplete

 

 

Consider the Data is from Local as like below

 

Now see how the AngularJS should be for a Local Data

 

Consider the Data is from Remote from the sample URL  https://www.example.com/sample.aspx?token=one

 

Now see how the AngularJS should be for a Remote Data

 

 

In Remote Data, we should prefer .then instead of .success

  • .then() – full power of the promise API but slightly more verbose
  • .success() – doesn’t return a promise but offers slightly more convenient syntax

.then() – the $http API is based on the deferred/promise APIs exposed by the $q service, so it returns a promise for us by default.

Advance Features of md-autocomplete

Item Not Found:

 

 

How to set Minimum Length of Search Text:

 

How to set Cache Mode Enabled:

 

The Complete Source Code of HTML with AngularJS

The above Source Code is for Local Data Source, if you need a source code for a Remote Data Source kindly replace the <script> block to the specified Remote <script> block, which is briefly explained in the above.  

Conclusion: 

This article targets at understanding md-autocomplete programmatically using AngularJS especially for Remote Data Source. This article is intended for the beginner/intermediate level. I hope, this post will solve all your basic functionality implementation of md-autocomplete TextBox of Angular Material. Think Big… Start Small… Do Fast…

Floating label support for md-chips in AngularJS

in AngularJS, UI by Selva Kumar Comments are off

The Angular Material has already become popular and seems to gain a great acceptance worldwide as a general design guideline among the Web. It provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

https://material.angularjs.org/

Inconsistent UI for md-input fields & md-chips with md-autocomplete

For md-input & md-autocomplete the form fields have floating label (i.e. when the user focuses the  textbox or autocomplete the label jumps to top & provides space for entering values ) whereas the md-chips control not providing the floating label option, it just clears the label value and you can type in your values.

https://material.angularjs.org/latest/#/demo/material.components.input
angular1

angular2

https://material.angularjs.org/latest/#/demo/material.components.chips

angular3

angular4

To provide the consistent UI effect, here we are going to customize the md-chips with md-autocomplete control. In md-autocomplete control instead of placeholder property we are going to use md-floating-label property.

By using md-floating-label with md-autocomplete we will be able to get the floating label, but the problem is with selected item styles & some padding effects.
angular5

angular6

angular7



We can fix these issues by customizing the angular-material.css

angular8
Hurray!! We have done it. Hopefully this feature will be added to md-chips control in near future.

You can download the sample project from the github.

Material Design in AngularJS

in AngularJS, UI by Selva Kumar Comments are off

What is Material Design?

Material Design is Google’s new vision for how software looks. Material Design is the brainchild of Matias Duarte, vice president of design at Google. Matias Duarte says the unifying metaphor behind Google’s new design direction, is to provide a unified set of physics and rules for how software should look and act.

Google states that their new design language is based on paper and ink. Material design create a visual language for users that synthesizes the classic principles of good design with the innovation and possibilty of technology and science.Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes.It provides a new style for our app, system widgets that let us set their color palette, and default animations for touch feedback and activity transitions.

Material Design focuses on creating a logic for the virtual interface, while not exactly replicating the rules of physics in the real world.

Material Design combines two great philosophies which made out Windows Phone and iOS, to come up with a final original product. Just look at it, you can neither call it minimalistic, nor complex.
It is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.Seams and shadows provide meaning about what you can touch.”

Principles of Material Design

  1. Material is the metaphor : A material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.
  2. Surfaces are intuitive and natural : Surfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.
  3. Dimensionality affords interaction :  The fundamentals of light, surface, and movement are key to conveying how objects interact. Realistic lighting shows seams, divides space, and indicates moving parts.
  4. One adaptive design : A single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant.
  5. Content is bold, graphic, and intentional : Bold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.
  6. Color, surface, and iconography emphasize actions : User action is the essence of experience design. The primary actions are inflection points that transform the whole design. Their emphasis makes core functionality immediately apparent and provides waypoints for the user.
  7. Users initiate change : Changes in the interface derive their energy from user actions. Motion that cascades from touch respects and reinforces the user as the prime mover.
  8. Animation is choreographed on a shared stage : All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
  9. Motion provides meaning : Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

What is Angular Material?Angular Material

The Angular Material project is an implementation of Material Design in system created by Google. It provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

Angular Material depends on Angular and two angular modules: angular-animate (ngAnimate) and angular-aria (ngAria). ngAria provides accessibility support for assistive technologies, such as screen readers. It automatically sets aria attributes using the corresponding angular directives. For example, it sets the aria-hidden attribute according to the value of the ngShow attribute. Whereas ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks.

Angular Material is more suitable for bigger projects with complex User Interfaces, as it supports more than 30 useful components such as AutoComplete, Button, CheckBox, Chips, List, Menu, Switch and so on.

Angular Material also offers a wide range of features when it comes to layouts. You can specify if a layout is horizontal (default) or vertical. This is done using flexbox. You can also specify child layout alignment, for example center center or space-between center. These are extremely helpful when building complex dashboards and advanced page layouts.

Theming Approach

Themes let usapply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.

Limit your selection of colors by choosing three color hues from the primary palette and one accent color from the secondary palette. The accent color may or may not need fallback options.

Angular Material exposes $mdThemingProvider in the config part of the bootstrapping process, which allows us to set 3 main color palettes: Primary, Accent and Warn. Primary and accent colors can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. Warn defines default highlight colors/themes for warning, error or success.

Different Material Design Approaches

Conclusion

Material design is a constantly evolving designing system that is up-to-date with latest functionality and features. It is compatible with a broad range of design philosophies and practices. Classical methods of virtual designing along with the invention and excellence of modern science and technology blend harmoniously in this designing scheme made and released by Google to bring to your desk some of the wildest possibilities of virtual designing!