Wednesday, March 1, 2017

KnockoutJS - Overview

What is KnockoutJS?

KnockoutJS is basically a library written in JavaScript that is based on MVVM pattern that helps developers building rich and responsive websites. This separates the application's Model (stored data), View (UI) and View Model (Javascript Representation of model).
KO is an abbreviation used for KnockoutJS.

KnockoutJS - Environment Setup

It's very easy to use KnockoutJS. Simply refer the Javascript file using <script > tag in HTML pages.
Knockout.js can be accessed in the following ways:
  • You can download production build of Knockout.js from its official website:
    A page as in the following image will be displayed. Click on download link and you will get the latest knockout.js file.

KnockoutJS Application

KnockoutJS is widely used for Single Page Applications - A web site that is created with ability to retrieve all necessary data dynamically with a single page load reducing server round trips.
KnockoutJS is a client side framework. This is a Javascript library which makes it very easy to bind HTML to domain data. It implements a pattern called "Model-View-ViewModel"(MVVM). Observables is the magic ingredient of KnockoutJS. All data remains in sync because of Observable attribute.

KnockoutJS - MVVM Framework

Model-View-ViewModel (MVVM) is an architectural design pattern for developing software applications. MVVM was developed by Microsoft Architect John Gossman in 2005. This pattern is derived from Model-View-Controller (MVC) pattern. The advantage of MVVM is that it separates application layer's graphical user interface from business logic.

KnockoutJS - Observables

KnockoutJS is build upon 3 important concepts. Those are:
  • Observables and dependency tracking between them - DOM elements are connected to ViewModel via 'data-bind'. These 2 exchange information through Observables. This automatically takes care of dependency tracking.

KnockoutJS - Computed Observables

  • Computed Observable is a function which is dependent on one or more Observables and will automatically update whenever its underlying Observables (dependencies) change.
  • Computed Observables can be chained.

KnockoutJS - Declarative Bindings

Declarative binding in KnockoutJS provides a powerful way to connect data to UI.
It is important to understand relationship between bindings and Observables. Technically these two are different. You can use normal JavaScript object as ViewModel and KnockoutJS can process View's binding correctly. Without Observable the property from UI will be processed only for the first time. In this case it cannot update automatically based on underlying data update. To achieve this, bindings must be referred to Observable properties.

KnockoutJS - Dependency Tracking

Dependency Tracking in KnockoutJS

KnockoutJs automatically tracks the dependencies when the values get updated. It has a single object called dependency tracker(ko.dependencyDetection) which acts as an intermediate between two parties for subscribing the dependencies.
The algorithm for dependency tracking can be shown as below:

KnockoutJS - Templating

Template is a set of DOM elements which can be used repetitively. Templating makes it easy to build complex applications due to its property of minimizing duplication of DOM elements.
There are 2 ways of creating templates:

KnockoutJS - Components

Components are a huge way of organizing the UI code for structuring a large application and promote code reusability.
  • It is inherited or nested from other component.
  • For loading and configuration, it defines its own conventions or logic.
  • It is packaged to reuse throughout the application or project.
  • Represents the complete sections of application or small controls/widgets.
  • Loaded or preloaded on demand.

JSF - Overview

What is JSF?

JavaServer Faces (JSF) is a MVC web framework that simplifies the construction of user interfaces (UI) for server-based applications by using reusable UI components in a page.JSF provides facility to connect UI widgets with data sources and to server-side event handlers. The JSF specification defines a set of standard UI components and provides an Application Programming Interface (API) for developing components.JSF enables the reuse and extension of the existing standard UI components.

JSF - Environment Setup

This tutorial will guide you on how to prepare a development environment to start your work with JSF Framework. This tutorial will also teach you how to setup JDK, Eclipse, Maven, and Tomcat on your machine before you setup JSF Framework:

JSF - Architecture

JSF technology is a framework for developing, building server side User Interface Components and using them in a web application.JSF technology is based on the Model View Controller (MVC) architecture for separating logic from presentation.

JSF - Life Cycle

JSF application lifecycle consist of six phases which are as follows
  • Restore view phase
  • Apply request values phase; process events
  • Process validations phase; process events
  • Update model values phase; process events
  • Invoke application phase; process events
  • Render response phase

JSF - First Application

To create a simple JSF application, we'll use maven-archetype-webapp plugin. In example below, We'll create a maven based web application project in C:\JSF folder.

JSF - Managed Beans

  • Managed Bean is a regular Java Bean class registered with JSF. In other words, Managed Beans is a java bean managed by JSF framework.
  • The managed bean contains the getter and setter methods, business logic or even a backing bean (a bean contains all the HTML form value).

JSF - Page Navigation

Navigation rules are those rules provided by JSF Framework which describe which view is to be shown when a button or link is clicked.
  • Navigation rules can be defined in JSF configuration file named faces-config.xml.
  • Navigation rules can be defined in managed beans.
  • Navigation rules can contain conditions based on which resulted view can be shown.
  • JSF 2.0 provides implicit navigation as well in which there is no need to define navigation rules as such.

JSF - Basic Tags

Basic JSF Tags

JSF provides a standard HTML tag library. These tags get rendered into corresponding html output.
For these tags you need to use the following namespaces of URI in html node.
<html 

JSF - Facelets Tags

Facelets JSF Tags

JSF provides special tags to create common layout for a web application called facelets tags. These tags gives flexibility to manage common parts of a multiple pages at one place.
For these tags you need to use the following namespaces of URI in html node.
<html 

JSF - Convertor Tags

JSF Convertor Tags

JSF provides inbuilt convertors to convert its UI component's data to object used in a managed bean and vice versa.For example, these tags can convert a text into date object and can validate the format of input as well.

JSF - Validator Tags

JSF Validator Tags

JSF provides inbuilt validators to validate its UI components. These tags can validates length of field, type of input which can be a custom object.
For these tags you need to use the following namespaces of URI in html node.

JSF - DataTable

JSF DataTable

JSF provides a rich control named DataTable to render and format html tables.
  • DataTable can iterate over collection or array of values to display data.
  • DataTable provides attributes to modify its data in easy way.

JSF - Composite Components

JSF provides developer a powerful capability to define own custom components which can be used to render custom contents.

Define Custom Component

Defining a custom component in JSF is a two step process

JSF - Ajax

Ajax: A Brief Introduction

  • AJAX stands for Asynchronous JavaScript And Xml.
  • Ajax is a technique to use HTTPXMLObject of JavaScript to send data to server and receive data from server asynchronously.
  • So using Ajax technique, javascript code exchanges data with server, updates parts of web page without reloading the whole page.

JSF - Event Handling

JSF Event Handling

  • When a user clicks a JSF button or link or changes any value in text field, JSF UI component fires event which will be handled by the the application code.
  • To handle such event, event handler are to be registered in the application code or managed bean.
  • When a UI component checks that a user event has happened, it creates an instance of the corresponding event class and adds it to an event list.

JSF - JDBC Integration

In this article, we'll demonstrate how to integrate database in JSF using JDBC
Database requirements to run this example
S.N.Software & Description
1PostgreSQL 9.1
Open Source and light weight database
2PostgreSQL JDBC4 Driver
JDBC driver for PostgreSQL 9.1 and JDK 1.5 or above
Put PostgreSQL JDBC4 Driver jar in tomcat web server's lib directory

JSF - Spring Integration

Spring provides special class DelegatingVariableResolver to integrate JSF and Spring together in seamless manner.
Following steps are required to integrate Spring Dependency Injection (IOC) feature in JSF

JSF - Expression Language

JSF provides a rich expression language. We can write normal operations using #{operation-expression} notation. Some of the advantages of JSF Expression languages are following.
  • Can reference bean properties where bean can be a object stored in request, session or application scope or is a managed bean.

JSF - Internationalization

Internationalization is a technique in which status messages, GUI component labels, currency, date are not hardcoded in the program instead they are stored outside the source code in resource bundles and retrieved dynamically. JSF provide a very convenient way to handle resource bundle.
Following steps are required to internalize a JSF application

JSF - Useful Resources

The following resources contain additional information on JSF. Please use them to get more in-depth knowledge on this topic.

Discuss JSF

JavaServer Faces (JSF) is a Java-based web application framework intended to simplify development integration of web-based user interfaces. JavaServer Faces is a standardized display technology which was formalized in a specification through the Java Community Process.
This tutorial will teach you basic JSF concepts and will also take you through various advance concepts related to JSF framework.

JqueryUI - Overview

JqueryUI is a powerful Javascript library built on top of jQuery JavaScript library. UI stands for User interface, It is a set of plug-ins for jQuery that adds new functionalities to the jQuery core library.
The set of plug-ins in JqueryUI includes interface interactions, effects, animations, widgets, and themes built on top of jQuery JavaScript Library.

JqueryUI - Environment Setup

This chapter will discuss about download and set up of JqueryUI library. We will also briefly study the directory structure and its contents. JqueryUI library can be used in two ways in your web page −

JqueryUI - Draggable

jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.

JqueryUI - Droppable

jQueryUI provides droppable() method to make any DOM element droppable at a specified target (a target for draggable elements).

Syntax

The droppable() method can be used in two forms −

JqueryUI - Resizable

jQueryUI provides resizable() method to resize any DOM element. This method simplifies the resizing of element which otherwise takes time and lot of coding in HTML. The resizable () method displays an icon in the bottom right of the item to resize.

JqueryUI - Selectable

jQueryUI provides selectable() method to select DOM element individually or in a group. With this method elements can be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by clicking or dragging while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

JqueryUI - Sortable

jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string passed as the first parameter.

Syntax

The sortable () method can be used in two forms −

JqueryUI - Accordion

Accordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. jQueryUI provides accordion() method to achieve this.

Syntax

The accordion() method can be used in two forms −

JqueryUI - Autocomplete

Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field. This feature prevents the user from having to enter an entire word or a set of words.

JqueryUI - Button

jQueryUI provides button() method to transform the HTML elements (like buttons, inputs and anchors) into themeable buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.
In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calling .buttonset().

JqueryUI - Datepicker

Datepickers in jQueryUI allow users to enter dates easily and visually. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
jQueryUI provides datepicker() method that creates a datepicker and changes the appearance of HTML elements on a page by adding new CSS classes. Transforms the <input>, <div>, and <span> elements in the wrapped set into a datepicker control.

JqueryUI - Dialog

Dialog boxes are one of the nice ways of presenting information on an HTML page. A dialog box is a floating window with a title and content area. This window can be moved, resized, and of course, closed using "X" icon by default.
jQueryUI provides dialog() method that transforms the HTML code written on the page into HTML code to display a dialog box.

JqueryUI - Menu

A menu widget usually consists of a main menu bar with pop up menus. Items in pop up menus often have sub pop up menus. A menu can be created using the markup elements as long as the parent-child relation is maintained (using <ul> or <ol>). Each menu item has an anchor element.

JqueryUI - Progressbar

Progress bars indicate the completion percentage of an operation or process. We can categorize progress bar as determinate progress bar and indeterminate progress bar.
Determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process.

JqueryUI - Slider

A slider is used whenever a numeric value within a certain range is to be obtained. The advantage of a slider over text input is that it becomes impossible for the user to enter a bad value. Any value that they can pick with the slider is valid.

JqueryUI - Spinner

Spinner widget adds a up/down arrow to the left of a input box thus allowing a user to increment/decrement a value in the input box. It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel.

JqueryUI - Tabs

Tabs are sets of logically grouped content that allow us to quickly flip between them to. Tabs allow us to save space like accordions. For tabs to work properly following set of markups needs to use −

JqueryUI - Tooltip

Tooltip widget of jQueryUI replaces the native tooltips. This widget adds new themes and allows for customization. First let us understand what tooltips are? Tooltips can be attached to any element. To display tooltips, just add title attribute to input elements and title attribute value will be used as tooltip. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element.

JqueryUI - Add Class

This chapter will discuss the addClass() method, which is one of the methods used to manage jQueryUI visual effects. addClass() method allow animating the changes to the CSS properties.
addClass() method add specified classes to the matched elements while animating all style changes.

JqueryUI - Color Animation

jQueryUI extends some core jQuery methods so that you can animate different transitions for an element. One of them being animate method. jQueryUI extends the jQuery animate method, to add support for animating colors. You can animate one of several CSS properties that define an element’s colors. Following are the CSS properties that the animate method supports.

JqueryUI - Effect

This chapter will discuss the effect() method, which is one of the methods used to manage jQueryUI visual effects. effect() method applies an animation effect to the elements without having to show or hide it.

JqueryUI - Hide

This chapter will discuss the hide() method, which is one of the methods used to manage jQueryUI visual effects. effect() method applies an animation effect to hide elements.

Syntax

The hide() method has the following syntax −
.hide( effect [, options ] [, duration ] [, complete ] )

JqueryUI - Remove Class

This chapter will discuss the removeClass() method, wh ich is one of the methods used to manage jQueryUI visual effects. removeClass() method removes the applied classes from the elements.
removeClass() method removes the specified classes to the matched elements while animating all style changes.

JqueryUI - Show

This chapter will discuss the show() method, which is one of the methods used to manage jQueryUI visual effects. show() method displays an item using the indicated effect.
show() method toggles the visibility of the wrapped elements using the specified effect.

JqueryUI - Switch Class

This chapter will discuss the switchClass() method, which is a useful new class for manipulation. switchClass() method move from one CSS one CSS class to another, animating the transition from one state to the other.

JqueryUI - Toggle

This chapter will discuss the toggle() method of jQueryUI visual effects. toggle() method toggles the show () or hide () methods depending on whether the element is hidden or not.

JqueryUI - Toggle Class

This chapter will discuss the toggleClass() method, which is a useful new class for manipulation. toggleClass() method adds or removes one or more classes from each element in the set of matched elements.

JqueryUI - Position

In this chapter we shall see one of the utility methods of jqueryUi, the position() method. The position() method allows you to position an element with respect to another element or mouse event.
jQuery UI extends the .position() method from jQuery core in a way that lets you describe how you want to position an element the same way you would naturally describe it to another person.

JqueryUI - Widget Factory

Earlier, the only way to write custom controls in jQuery was to extend the $.fn namespace. This works well for simple widgets. Suppose you build more stateful widgets, it quickly becomes cumbersome. To aid in the process of building widgets, Widget Factory was introduced in the jQuery UI, which removes most of the boilerplate that is typically associated with managing a widget.

JqueryUI - Quick Guide

JqueryUI - Overview

JqueryUI is a powerful Javascript library built on top of jQuery JavaScript library. UI stands for User interface, It is a set of plug-ins for jQuery that adds new functionalities to the jQuery core library.
The set of plug-ins in JqueryUI includes interface interactions, effects, animations, widgets, and themes built on top of jQuery JavaScript Library.

JqueryUI - Useful Resources

The following resources contain additional information on jQueryUI. Please use them to get more in-depth knowledge on this topic.

Discuss JqueryUI

JqueryUI is the most popular front end frameworks currently. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you basics of JqueryUI Framework,