On 14th November, 2015, DotNetters organized an event for the students of Northern University Bangladesh (NUB) where 4 speakers given different concepts on latest technologies and their importance on real world projects. Also students were advised on how they can start their career and what necessary technologies they need to learn to work in a professional software companies.
I mainly focused on how they can build a web application which would be rich in functionalities and user experience. Also gave them a short description about what technologies they need to learn and for their university project how then can create a rich web application.
On 6th June, 2015, DotNetters organized an event for the students of Rajshahi University of Engineering & Technology (RUET) where 7 speakers given some basic concepts on latest hot technologies and their importance on real world projects.
I talked about Single Page Applications and some key factors of developing a project using this model. My presentation also covered what kind of projects are best suited to SPA model and what basic things they need to learn to start making their first Single Page Application.
MatEffects is a jQuery plugin based on Google's Material Design guide.
With this plugin you can easily add some modern effects on your website.
Currently this plugin has four different animations. This article shows how you can add this plugin into your website. You'll get this documentation after you purchase this.
Usage
MatEffects is a jQuery plugin, meaning that it extends the jQuery
JavaScript library to include extra functionality. First, you must
include the jQuery library's source before you include the source of any
jQuery plugin. It's recomended that you use jquery ui library as well
to get easing effects. You can download latest version of jQuery library
from here and jQuery UI library from here.
Then add MatEffect's additional files like jquery.mateffects.js and
mateffects.css. There is also an image folder which is necessary as
well and you have to add it in the same folder where your mateffects.css
file is placed. Also it is my recommendation that you add this source
file in head tag.
Now you can call different MatEffect's function to generate different effects. There are 4 types of animation you can create.
Color Slider
This function will create an hover effects that is shown on this demo.
Also you can check the color-slider.html file that is provided with the
downloaded package. This is mainly an hover effect. Whenever user will
mouse hover on any element, some color will slide from any given
direction and after hovering out, it will again slide back. Here is html
of an element where we want to use this effect:
Slide From
Top
Now call below function to get Color Slider in the element with id divSliderTop:
Here ColorSlider function will create a div element inside divSliderTop.
Inside this div element it will generate another four div with the
given 4 background color. So when user will mouse over it will slide
those four color and bring the last color on the element and vice versa
when you mouse out from the element. It also have callback function for
mouseEnter and mouseLeave. Here are the options in detail:
It will take any number of color array. Make sure you give '#' when you are giving color codes.
easing
linear
Easing effect for the animation.
speed
1200
Speed of the animation which will accept integer value and in milisecond unit.
slideFrom
"right"
This indicates from where the animation will show. It accepts four value in string format: "top", "right", "bottom", "left".
mouseEnter
This is a callback function which will call after the mouse hover on the element.
mouseLeave
This is another callback function which will call after mouse out from the element.
If you want to use this same effect in multiple element then you can call the ColorSlider function using class name as well.
Over View
This function will create a popup/modal effects that is shown on this demo.
OverView is mainly a pop up or modal. It will always appear on top
layer of your website's elements and always slide from right side. The
main feature of this effect is, the modal will be devided into several
part and all the part will animate separately and also animation back
separately as well. Here is html of an element where we want to use this
effect:
Over View Demo
Sed ut perspiciatis unde ... aliquam quaerat voluptatem.
Here on the parent div you have to use ov-container class and inside
that div you have to use ov-body on the child div to help understand the
function that which one is container and which one is the body of the
plugin. This is what you must use:
Now inside the div where ov-body class is given, you must place several
number of div element which will be devided into separate element and
OverView() will animate them separately. You can place any number of div
element inside ov-body. Here is javascript part to call OverView
function:
Here first you have to initialize OverView with the div element. After
that you can use $.fn.OverView("show") and $.fn.OverView("hide") to show
and hide the over view. In the code above we have a button which id is
ancViewDemo and by clicking it we are showing the over veiw and by click
the .a-close button which is placed inside over view element, we are
sliding it back. Here are the options in detail:
Variable/Function
Default Value
Description
easingIn
linear
Easing effect while the over view appears.
easingOut
linear
Easing effect while the over view slide back.
speed
1200
Speed of the animation which will accept integer value and in milisecond unit.
$("#OverViewId"").OverView('show');
By calling this function Overview will appear.
$("#OverViewId"").OverView('hide');
By calling this function Overview will slide back.
Section Navigator
This function will create a navigation that is shown on this demo.
It's mainly a menu that will automatically generate on your website.
For example lets assume you have following section on your html file.
This is the body section of your page:
.....
.....
.....
.....
Here we have 4 sections in our webpage and we've given an unique id on
each of them. Now here is the javascript part to call SectionNavigator:
Here, as our sections are inside body tag so we are calling SectionNavigator with body. Here are the options in detail:
Variable/Function
Default Value
Description
sections
[]
This is an array of id of our sections inside body element.
navigationClasses
[]
This an array of classes that will be injected into the button of navigation. Make sure you use same number of array element that are given in sections array.
labels
[]
This is an array of name that you'll see after you hover on any button on the navigation. Again make sure you use same number of array element that are given in sections array.
prevButtonClass
""
This will take a single string of the class for previous button on the navigation. OverView will inject this class name on the previous button.
nextButtonClass
""
This will take a single string of the class for next button on the navigation. OverView will inject this class name on the next button.
easing
linear
Easing effect for the animation.
speed
700
Speed of the animation which will accept integer value and in milisecond unit.
afterNavigate
This is a callback function which will call after the window will scroll to the desired section. It will always send the index of your menu item as parameter.
This function will generate the navigation automatically. So for navigation you don't have to write any html code.
Group Slider
This function will create a slider that is shown on this demo.
The main feature of this slider is, it will slide in a group and you
can decide from where each slider will slide. There are two options,
horizontally and vertically. Here is the html part of a slider:
Welcome!
This is Group Slider. This whole slider is working as one slider. You can add time bar and navigation if you want.
Other Options!
Easing effect, sliding speed, time are configurable in this slider. More details are given in the documentation.
This is the html that is shown on the demo. The main structure that you
must follow is, there will be a parent div and inside that you can add
several div element. Now inside the child div what will you provide is
upto you. Like here some child div contains images and some contains
another div with texts. Now another thing is, you have to tell each div
whether it will slide horizontally or vertically. Use slide attribute
here and it supports two value: horizontal and vertical. Here is the
javascript part:
Speed of the animation which will accept integer value and in milisecond unit.
time
5000
Time is the time difference between each slide and it also accept integer value and in milisecond unit.
timebar
true
Timebar is the bar that that gives us an idea of after how much time the slide may rotate. It takes boolean value (true or false). For false it will not show.
control
true
Control is a set of buttons by which you can view next slide or previous slide or pause/play the slide. It also takes boolean value (true or false). For false it will not show.
Conclusion
You can change CSS attribute from mateffects.css file so that the plugin match your website's style.
Thank you very much for you interest on MatEffects. If you have any question then feel free to contact me from CodeCanyon or from my Website.
This article mainly focuses on a solution of a common problem that usually
being faced doing projects with angular and other JavaScript Frameworks.
It's
recommended that a basic knowledge of Angular data binding and directive is
required for reading this article. A demo application is also created to
help understand the solution more in detail.
Problem:
Often we need to bind different JavaScript events or
initialize Jquery plugin after ng-bind-html or ng-repeat finished binding. As most
of the time the data is retrieved from AJAX call so it's hard to estimate exact
time when the DOM will be ready to bind those events or initialize plugins
for new loaded element. One very common example would be, when we make a custom
dynamic menu where data are bound using ng-repeat and jQuery is used to make
all the animation. So the
jQuery function,
which contains the animation code, must call after data loaded successfully and
angular completed binding all the DOM elements.
Solution:
We
can solve this problem by creating a custom directive and send a callback
function to that directive. For ng-repeat the directive will check whether
scope's last object has completed binding and after that it will call the given
callback function. Now for ng-html-bind it will watch scope’s htmlElement has
any value and when it will see a value, it will call the given callback function.
So here is a generic directive that will work for both ng-repeat and
ng-html-bind:
app.directive('ngcDone', function ($timeout) {
return function (scope, element, attrs) {
scope.$watch(attrs.ngcDone, function (callback) {
if (scope.$last === undefined) {
scope.$watch('htmlElement', function () {
if (scope.htmlElement !== undefined) {
$timeout(eval(callback), 1);
}
});
}
if (scope.$last) {
eval(callback)();
}
});
}
});
Let me give a short description of what is happening here.
But before that it is important to know what is directive.
Directives are markers of DOM element which allow you to
play with that specific DOM element.
Here we have created a custom directive name ngc-done and
sending a callback function as string. The reason for sending it as string is
just to make this directive a generic one. Like here if we want call a function
which is define under scope then we can give it like ‘scope.YourFunction’.
We’ve used $watch inside the directive’s definition to track
changes of our directive. $watch is a great feature of Angular and it takes two
parameters. One is the object or property that we like to watch or track
changes and another is a listener which will be called if any change is
detected. Now we have used two $watch here. One is to track change of our
directive and another is to track change of scope’s htmlElement if $last is
undefined.
Now the $last is a
property of scope which is related to ng-repeat and it’s a Boolean type and it
will return true here if ng-repeat has finished binding the last value or
object. $last will return undefined if
there is no ng-repeat in the DOM element. If this directive is used in the same
element where ng-html-bind is used then $last will be undefined and then it
will start watching scope’s htmlElement. If htmlElement is not undefined then
directive will invoke the given callback function.
Using the Code:
It is recommended to download the source and there are three
examples showing how to use this directive. 2 examples showing how to bind dynamic jQuery menu plugin, one with ng-repeat and another with a ng-html-bind and another example shows how to
bind 2 lists and call callback function after it finished
binding. The menu plugin that we've used here is available for purchase at
CodeCanyon.
Introduction In our websites we show different alert
messages for different purposes. Some very common alert messages are “Invalid
Username or Password”, “Item inserted successfully”, “Thank you for contacting
us. We will get back to you soon” or sometimes we show exception messages as
well. These messages are usually shown in alert boxes or sometimes in different
places on the website. In big projects we have to show numerous numbers of
alert messages. Sometimes it is difficult to manage all messages and we use
different type of messages for same purpose. In this article I am going to talk
about how we can show different alert messages and manage all messages from one
place.
Let's Start First let us create a Class to
store all the messages. Right click on your project and add a new Class name Message.
Adding Message.cs file
This Class will have an Enum for type of message and another
nested Class to store all the text messages. A namespace is given so that we can
access the Class from anywhere using this namespace.
namespace Helper { public static class Message { public enum Type { success, error, info };
public static class Text { public const string START_INFO = "Click on the buttons to show different messages. This message will automatically hide after 10 seconds.";
public const string SUCCESS_SERVER = "This is a Success message from Server Side."; public const string ERROR_SERVER = "This is an Error message from Server Side."; public const string INFO_SERVER = "This is a general Info message from Server Side.";
public const string SUCCESS_CLIENT = "This is a Success message from Client Side."; public const string ERROR_CLIENT = "This is an Error message from Client Side."; public const string INFO_CLIENT = "This is an Info message from Client Side. This is used for general purpose."; } } }
Now let us take a user control to show the
messages. Again right click on your project and add a new User Control. Let’s
name it Message as well.
Adding Message.ascx file
Now our target is to create a message box with different
color which will animate from right side of the screen. The message box will
show our given text and depending on message type it will show in different color.
After certain time it will automatically animate outside our screen.
Let’s take a HTML div to create the box and another nested
div to show message.
Here we will give success, error or info class to
divMessageBody depending on which type of message we want to show. This classes
will show different color for different messages. To add this class we've created
an Enum named Type in our Message.cs class. We will send this Enum value as
string to this div as css class. Another thing is we give the message-box class’s
position fixed so that it will not break our website’s UI structure. Also this
message box supports all the modern browser including ie7 and above.
Now let us create two JavaScript function, ShowMessage
andHideMessage. ShowMessage will take
two parameter which are message and type. This function will insert message
into divMessage and add type to divMessageBody as CSS class. Here is the code
for both ShowMessage and HideMessage.
<script type="text/javascript"> var msgBoxTimeout; var timeToShow = 10000; var msgBoxRight = -320;
function ShowMessage(msg, type) { clearInterval(msgBoxTimeout); $("#divMessageBody").css("right", msgBoxRight);
var classAttr = "message-box " + type; $("#divMessage").html(msg); $("#divMessageBody").attr("class", classAttr);
function HideMessage() { $("#divMessageBody").stop().animate({ right: msgBoxRight }, 900, "easeInOutCirc");
clearInterval(msgBoxTimeout); } </script>
Here we've used jQuery animate function to animate our message
box. We also used easing effect for beautiful and smooth animation . If you want to use easing effect
make sure you've added jquery.easing.js or jqery.custom.ui.js in your webpage.
Also if you don’t want to use easing effect then remove easeInOutCirc from
jquery animate function.
Now let’s create a ShowMessage function for server side
code. This function will call the javascript ShowMessage function with a
message and type.
You can
directly use this user control in your project. Just download the file and add
the user control Message.ascx in your project. Also add required CSS from
layout.css and add Message.cs file from App_Code folder. If you want to add
more messages then add them in Message.cs file’s Text Class. Also if you want
to add new type add it in the Type Enum and create css class of that same name
in your CSS file. For example if you want to add a new type exception then
first add a new value on the Type Enum.
public enum Type { success, error, info, exception };
Conclusion
Now a
days it is very important to make user friendly environment. Most users are
attracted to the websites with beautiful user experience. So it is important to
show different alert messages in such a way so that users don’t get confused or
disturbed. I hope this article will help
you to let user know what you want to inform them. Good luck :)
Knockout is a JavaScript library which dynamically binds
data between different html contents and follow Model-View-View-Model (MVVM)
design pattern.It’s one of the core
feature is Observable, which can detect changes in the view model and updates
the model according to that change. It’s a special JavaScript object that can
detect dependencies among controls automatically. In this article we will
mostly use observable to bind controls and update data dynamically.
Problem
Consider a metro tile where each tile has a title and
description. It has a background color as well. There can be multiple tiles of
same type. Our target is to create tiles dynamically and with every tile there
would be an edit panel where user can edit its title, description and
background color. If you are confused about this scenario then I recommend you
to view demo first.
Solution
One of the main features of Knockout is, it can track each
element of UI and can update automatically. We will use this feature to bind
our metro tiles with its edit panel and when user will change in edit panel,
tiles of that panel will change automatically. Knockout will track edit panel
with its correspondent tile. For this, first we have to take a javascript
object where all the property of a metro tile is defined. Here we have title,
description and color as an observable. This observable will detect depedencies
between each tile and its edit panel and it will keep each tile object updated
automatically. Here is a how Tile object looks:
var Tile = function (title, description, color) { var self = this; self.title = ko.observable(title); self.description = ko.observable(description); self.tileColor = ko.observable(color); self.editPanel = ko.observable(false); self.expandEdit = function () { self.editPanel(true); }; self.collapseEdit = function () { self.editPanel(false); };
};
Another additional observable is taken named editPanel which
will detect visibility of its tile’s edit panel. expandEdit and collapsEdit
will make editPanel true or false on click event. Here ObservableArray is taken
to store all tiles. addTile and removeTile functions will add new tile on the
view and remove tile will delete its corresponding tile from the view and from
the observableArray as well.
var TileModel = function () {
var self = this; self.lines = ko.observableArray([
new Tile("Batman", "The Dark Night Rises", "#525252"),
new Tile("Transformer", "Revenge of the Fallen", "#DA532C")
]); self.addTile = function () { self.lines.push(new Tile("Title", "Description", RandomColor())) }; self.removeTile = function (line) {
self.lines.remove(line) }; };
ko.applyBindings(new TileModel());
Also two tiles are pushed into the array on load and
observable will bind them with the HTML control automatically. Then finally
we’ve bind the full model with Knockout with ko.applyBindings().
Now let’s take a look at HTML controls which are bind with
observable object:
Here Knockout will search for data-bind attribute to bind
data with its model. Now on clicking Add Tile button we are calling addTile
function from TileModel which adds a new object to lines. With foreach,
Knockout is generating all the tile object stored in lines with a loop. Every
time a tile is added or removed, it tracks the changes in the model and bind
tiles dynamically. Now edit panel’s <textarea> is bind with <p> of
tile element with description object. <p> is updated when
<textarea> has an input character. We are updating the description object
after key down. Title will update same way like description. So the main thing
is all the observables track dependencies among the HTML controls and it updates
automatically.
Why Knockout?
Situation like this, where we have to bind data dynamically
and need to track all the dependencies among controls, then Knockout is best
choice. We will bind observable with UI controls and observable will notify
about changes and it will update automatically. Another good feature is, it can
update data very frequently, like when we bind afterkeydown method, observable
detects change and update correspondent element at that moment.
Run Source Code
Download the zip file, extract it, open KnockoutTiles.sln
file and hit F5. It’s a Asp.Net web project written in Visual Studio 2012 and
used knockout.js version 2.2.0.
Conclusion
Knockout follows MVVM pattern where observable track dependencies
between model and view model and update view automatically. This article gives
a very basic idea on observable. I recommend to download the source file and
see for yourself how it actually works.
