Friday, February 17, 2017

Flex - Overview

What is Flex?

  • Flex is a powerful, open source application framework which allows to build traditional applications for browser, mobile and desktop using the same programming model, tool, and codebase.
  • Flex provides FLEX SDK consisting of the Flex class library (ActionScript classes), the Flex compilers, the debugger, the MXML and ActionScript programming languages, and other utilities to build expressive and interactive rich internet applications (RIA)

Flex - Environment Setup

This tutorial will guide you on how to prepare a development environment to start your work with Adobe Flex Framework. This tutorial will also teach you how to setup JDK and Adobe Flash Builder on your machine before you setup Flex Framework:

Flex - Applications

Before we start with creating actual HelloWorld application using Flash Builder, let us see what are the actual parts of a Flex application. A Flex application consists of following four important parts out of which last part is optional but first three parts are mandatory:

Flex - Create Application

We'll use Flash Builder 4.5 to create Flex Applications. Let's start with a simple HelloWorld application:

Step 1 - Create Project

The first step is to create a simple Flex Project using Flash Builder IDE. Launch project wizard using the option File > New > Flex Project. Now name your project as HelloWorld using the wizard window as follows:

Flex - Deploy Application

This tutorial will explain you how to create an application war file and how to deploy that in Apache Tomcat Websever root. If you understood this simple example then you will also be able to deploy a complex Flex application following the same steps.

Flex - Style with CSS

Flex supports the use of CSS syntax and styles to apply styles to its UI controls in the same way as CSS to HTML components.

Way #1: Using external style sheet file

You can refer to a style sheet available in the class path of the application. For example consider Style.css file in com/tutorialspoint/client folder where HelloWorld.mxml file also lies.

Flex - Style with Skin

What is Skining?

  • Skinning in Flex, is a process of customizing look and feel of a UI Component completely.
  • A Skin can define text, image, filters , transitions and states of a compoent.
  • A Skin can be created as a seperate mxml or ActionScript component.
  • Using skin, we can control all visual aspects of a UI component.
  • The process of defining skin is same for all the UI component.

Flex - Data Binding

What is Data Binding?

Data Binding is a process in which data of one object is tied to another object. Data binding requires a source property, a destination property and a triggering event which indicates when to copy the data from source to destination.

Flex - Basic Controls

Every user interface considers the following three main aspects:
  • UI elements : These are the core visual elements the user eventually sees and interacts with. Flex provides a huge list of widely used and common elements varying from basic to complex which we will cover in this tutorial.

Flex - Form Controls

Form controls allows users to input data and provides them interaction capability with the application. Every Form UI control inherits properties from UIComponent class which in turn inherits properties from EventDispatcher and other top level classes.

Flex - Complex Controls

Complex controls provides users advanced capabilities to deal with large amount of data in an easy way and provides them interaction capability with the application. Every Complex UI control inherits properties from UIComponent class which in turn inherits properties from EventDispatcher and other top level classes.

Flex - Layout Panels

Layout panel controls provides users to organize UI controls on the page. Every Layout control inherits properties from UIComponent class which in turn inherits properties from EventDispatcher and other top level classes.

Flex - Visual Effects

We can add behaviour to flex application using concept of Effects. For example, when a text box get focus, we can make its text become bolder and make its size slight bigger.
Every Effect inherits properties from Effect class which in turn inherits properties from EventDispatcher and other top level classes.

Flex - Event Handling

Flex uses concept of event to pass data from one object to another depend upon the state or user interaction within the application.
ActionScript has a generic Event class which defines much of the functionality needed to work with events. Every time an event occurs within a Flex application, three types of objects from the Event class hierarchy are created.

Flex - Custom Controls

Flex provides two ways to create custom components.
  • Using ActionScript
  • Using MXML

Using ActionScript

You can create a component by extending existing component. To create a component using Flash Builder, Click on File > New > ActionScript Class. Enter the details as shown below.

Flex - RPC Services

Flex provides RPC services to provide server side data to client side. Flex provides a fair amount of control on to server side data.
  • Using Flex RPC services, we can define user actions to be executed on server side.
  • Flex RPC Sservices can be integrated with any server side technologies.
  • One of Flex RPC Service provide inbuilt support for compressed binary data to be transferred over the wire and is pretty fast.

Flex - FlexUnit Integration

Flash Builder 4 excellent inbuilt support for FlexUnit integration in Flex development Cycle.

Create a Test Case Class

You can create a Test Case Class using Flash Builder Create Test Class wizard. Running test cases is a breeze with Flash Builder as you will see in this article.

Flex - Debug Application

Flex provides excellent capability of debugging flex code and Flash Builder 4 has an excellent built-in debugger and debugging perspective support.
  • During debug mode, Flex Application runs on Flash Player Debugger version built in Flash Builder 4 which supports debugging capability.

Flex - Internationalization

Flex provides two ways to internationalize a Flex application, We'll demonstrate use of Compile time Internationalization being most commonly used among projects.

Flex - Printing Support

Flex provides a special class FlexPrintJob to print flex objects.
  • FlexPrintJob can be used to print one or more Flex objects, such as a Form or VBox container.
  • FlexPrintJob prints the object and all objects that it contains.
  • The objects can be all or part of the displayed interface.

Flex - Quick Guide

What is Flex?

  • Flex is a powerful, open source application framework which allows to build traditional applications for browser, mobile and desktop using the same programming model, tool, and codebase.
  • Flex provides FLEX SDK consisting of the Flex class library (ActionScript classes), the Flex compilers, the debugger, the MXML and ActionScript programming languages, and other utilities to build expressive and interactive rich internet applications (RIA)

Flex - Useful Resources

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

Discuss Flex

Flex is a powerful, open source application framework that allows you to easily build mobile applications for iOS, Android, and BlackBerry Tablet OS devices, as well as traditional applications for browser and desktop using the same programming model, tool, and codebase.

Flask – Overview

What is Web Framework?

Web Application Framework or simply Web Framework represents a collection of libraries and modules that enables a web application developer to write applications without having to bother about low-level details such as protocols, thread management etc.

Flask – Environment

Prerequisite

Python 2.6 or higher is usually required for installation of Flask. Although Flask and its dependencies work well with Python 3 (Python 3.3 onwards), many Flask extensions do not support it properly. Hence, it is recommended that Flask should be installed on Python 2.7.

Flask – Application

In order to test Flask installation, type the following code in the editor as Hello.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
   return 'Hello World’

Flask – Routing

Modern web frameworks use the routing technique to help a user remember application URLs. It is useful to access the desired page directly without having to navigate from the home page.
The route() decorator in Flask is used to bind URL to a function. For example −

Flask – Variable Rules

It is possible to build a URL dynamically, by adding variable parts to the rule parameter. This variable part is marked as <variable-name>. It is passed as a keyword argument to the function with which the rule is associated.

Flask – URL Building

The url_for() function is very useful for dynamically building a URL for a specific function. The function accepts the name of a function as first argument, and one or more keyword arguments, each corresponding to the variable part of URL.

Flask – HTTP methods

Http protocol is the foundation of data communication in world wide web. Different methods of data retrieval from specified URL are defined in this protocol.
The following table summarizes different http methods −

Flask – Templates

It is possible to return the output of a function bound to a certain URL in the form of HTML. For instance, in the following script, hello() function will render ‘Hello World’ with <h1> tag attached to it.
from flask import Flask
app = Flask(__name__)

Flask – Static Files

A web application often requires a static file such as a javascript file or a CSS file supporting the display of a web page. Usually, the web server is configured to serve them for you, but during the development, these files are served from static folder in your package or next to your module and it will be available at /static on the application.

Flask – Request Object

The data from a client’s web page is sent to the server as a global request object. In order to process the request data, it should be imported from the Flask module.
Important attributes of request object are listed below −

Flask – Sending Form Data to Template

We have already seen that the http method can be specified in URL rule. The Form data received by the triggered function can collect it in the form of a dictionary object and forward it to a template to render it on a corresponding web page.

Flask – Cookies

A cookie is stored on a client’s computer in the form of a text file. Its purpose is to remember and track data pertaining to a client’s usage for better visitor experience and site statistics.

Flask – Sessions

Unlike a Cookie, Session data is stored on server. Session is the time interval when a client logs into a server and logs out of it. The data, which is needed to be held across this session, is stored in a temporary directory on the server.

Flask – Redirect & Errors

Flask class has a redirect() function. When called, it returns a response object and redirects the user to another target location with specified status code.
Prototype of redirect() function is as below −
Flask.redirect(location, statuscode, response)
In the above function −

Flask – Message Flashing

A good GUI based application provides feedback to a user about the interaction. For example, the desktop applications use dialog or message box and JavaScript uses alerts for similar purpose.
Generating such informative messages is easy in Flask web application. Flashing system of Flask framework makes it possible to create a message in one view and render it in a view function called next.

Flask – File Uploading

Handling file upload in Flask is very easy. It needs an HTML form with its enctype attribute set to ‘multipart/form-data’, posting the file to a URL. The URL handler fetches file from request.files[] object and saves it to the desired location.

Flask – Extensions

Flask is often referred to as a micro framework, because a core functionality includes WSGI and routing based on Werkzeug and template engine based on Jinja2. In addition, Flask framework has support for cookie and sessions as well as web helpers like JSON, static files etc.

Flask – Mail

A web based application is often required to have a feature of sending mail to the users/clients. Flask-Mail extension makes it very easy to set up a simple interface with any email server.
At first, Flask-Mail extension should be installed with the help of pip utility.

Flask – WTF

One of the essential aspects of a web application is to present a user interface for the user. HTML provides a <form> tag, which is used to design an interface. A Form’s elements such as text input, radio, select etc. can be used appropriately.

Flask – SQLite

Python has an in-built support for SQlite. SQlite3 module is shipped with Python distribution. For a detailed tutorial on using SQLite database in Python, please refer to this link. In this section we shall see how a Flask application interacts with SQLite.

Flask – SQLAlchemy

Using raw SQL in Flask web applications to perform CRUD operations on database can be tedious. Instead, SQLAlchemy, a Python toolkit is a powerful OR Mapper that gives application developers the full power and flexibility of SQL. Flask-SQLAlchemy is the Flask extension that adds support for SQLAlchemy to your Flask application.

Flask – Sijax

Sijax stands for ‘Simple Ajax’ and it is a Python/jQuery library designed to help you easily bring Ajax to your application. It uses jQuery.ajax to make AJAX requests.

Flask – Deployment

Externally Visible Server

A Flask application on the development server is accessible only on the computer on which the development environment is set up. This is a default behavior, because in debugging mode, a user can execute arbitrary code on the computer.

Flask – FastCGI

FastCGI is another deployment option for Flask application on web servers like nginix, lighttpd, and Cherokee.

Configuring FastCGI

First, you need to create the FastCGI server file. Let us call it yourapplication.fcgiC.
from flup.server.fcgi import WSGIServer
from yourapplication import app

Flask - Quick Guide

What is Web Framework?

Web Application Framework or simply Web Framework represents a collection of libraries and modules that enables a web application developer to write applications without having to bother about low-level details such as protocols, thread management etc.

Flask - Useful Resources

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

Discuss Flask

Flask is a web application framework written in Python. Armin Ronacher, who leads an international group of Python enthusiasts named Pocco, develops it. Flask is based on Werkzeug WSGI toolkit and Jinja2 template engine. Both are Pocco projects.

Firebase - Overview

As per official Firebase documentation −
Firebase can power your app's backend, including data storage, user authentication, static hosting, and more. Focus on creating extraordinary user experiences. We'll take care of the rest. Build cross-platform native mobile and web apps with our Android, iOS, and JavaScript SDKs. You can also connect Firebase to your existing backend using our server-side libraries or our REST API.

Firebase - Environment Setup

In this tutorial we will show you how to add Firebase to existing app. We will need NodeJS. Check the link from the table below if you don't have it already.

Firebase - Data

The farebase data is representing JSON objects. If you open your app from Firebase dashboard, you can add data manually by clicking + sign.
We will create simple data structure. You can check the image below.

Firebase - Arrays

This short chapter will show you Firebase representation of arrays.
We will use the same data from the last chapter.

Firebase - Write Data

In this chapter we will show you how to save your data to Firebase.

Set

The set method will write or replace data on specified path. Let's create reference to players collection and set two players.
var playersRef = firebase.database().ref("players/");

Firebase - Write List Data

In our last chapter we showed you how to write data in FIrebase. Sometimes you need to have unique identifier for your data.
When you want to create unique identifiers for your data, you need to use push instead of set.

Firebase - Write Transactional Data

Transactional data is used when you need to return some data from the database, make some calculation with it and store it back.
Let's say we have one player inside our player list.

Firebase - Read Data

In this chapter we will show you how to read Firebase data.
The following image shows the data we want to read.

Firebase - Event Types

Firebase offers several different event types for reading data.

value

The first event type is value. We showed you how to use value in our last chapter. This event type will be triggered every time the data changes and it will retrieve all data including children.

Firebase - Detaching Callbacks

This simple chapter will show you how to detach callbacks in Firebase.

Detach Callback for Event Type

Let's say we want to detach callback for a function with value event type.

Firebase - Queries

Firebase offers various ways of ordering data. In this chapter we will show simple query examples.
We will use the same data from our last chapter.

Firebase - Filtering Data

Firebase offers several ways of filtering data.

Limit to First and Last

limitToFirst method returns specified number of items beginning from the first one.
limitToLast method returns specified number of items beginning from the last one.

Firebase - Best Practices

In this chapter we will go through Firebase best practices.

Avoid Nesting Data

When you fetch the data from Firebase, you will get all of the child nodes. This is why deep nesting isn't the best practice.

Firebase - Email Authentication

In this chapter we will show you how to use Firebase Email/Password authentication.

Create user

To authenticate user, we can use createUserWithEmailAndPassword(email, password) method.

Firebase - Google Authentication

In this chapter we will show you how to set up Google authentication in Firebase.

Step 1 - Enable Google Authentication

Open Firebase dashboard and click Auth in left side menu. To open list of available methods, you need to click on SIGN_IN_METHODS in tab menu.
Now you can choose Google from the list, enable it and save it.

Firebase - Facebook Authentication

In this chapter we will authenticate users with Firebase Facebook auth.

Step 1 - Enable Facebook Auth

We need to open Firebase dashboard and click Auth in side menu. Next we need to choose SIGN-IN-METHOD in tab bar. We will enable Facebook auth and leave this open since we need to add App ID and App Secret when we finish step 2.

Firebase - Twitter Authentication

In this chapter we will explain how to use Twitter authentication.

Step 1 - Create Twitter App

You can create Twitter app on this link.
Once your app is created click on Keys and Access Tokens where you can find API Key and API Secret. You will need this in step 2.

Firebase - Github Authentication

In this chapter we will show you how to authenticate users using Github API.

Step 1 - Enable Github Auth

Open Firebase dashboard and click Auth from the side menu and then SIGN-IN-METHOD in tab bar.
You need enable Github authentication and copy Callback URL. You will need this in step 2. You can leave this tab open since you will need to add Client ID and Client Secret once you finish step 2.

Firebase - Anonymous Authentication

In this chapter we will authenticate users anonymously.

Step 1 - Enable Anonymous Auth

This is the same process as in our previous chapters. You need to open Firebase dashboard, click on Auth from side menu and SIGN-IN-METHOD inside tab bar.
You need to enable anonymous authentication.

Firebase - Offline Capabilities

In this chapter we will show you how to handle Firebase connection state.

Check Connection

We can check for connection value using the following code.

Firebase - Security

Security in Firebase is handled by setting JSON like object inside security rules.
Security rules can be found when we click on Database inside side menu and then RULES in tab bar.
In this chapter we will go through couple of simple examples to show you how to secure Firebase data.

Firebase - Deploying

In this chapter we will show you how to host your app on Firebase server.
Before we begin, let's just add some text to index.html body tag. In this example we will add −
<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>

ES6 - Overview

ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. The specification is influenced by programming languages like Self, Perl, Python, Java etc. Languages like JavaScript, Jscript and ActionScript are governed by this specification.
This tutorial introduces you to ES6 implementation in JavaScript.

JavaScript

JavaScript was developed by Brendan Eich, a developer at Netscape Communications Corporation, in 1995.JavaScript started life with the name Mocha, and was briefly named LiveScript before being officially renamed to JavaScript. It is a scripting language that is executed by the browser, i.e. on the client’s end. It is used in conjunction with HTML to develop responsive webpages.

ES6 - Environment

In this chapter, we will discuss the setting up of the environment for ES6.

Local Environment Setup

JavaScript can run on any browser, any host, and any OS. You will need the following to write and test a JavaScript program standard −

ES6 - Syntax

Syntax defines the set of rules for writing programs. Every language specification defines its own syntax.
A JavaScript program can be composed of −
  • Variables − Represents a named memory block that can store values for the program.
  • Literals − Represents constant/fixed values.

ES6 - Variables

A variable, by definition, is “a named space in the memory” that stores values. In other words, it acts as a container for values in a program. Variable names are called identifiers. Following are the naming rules for an identifier−

ES6 - Operators

An expression is a special kind of statement that evaluates to a value. Every expression is composed of −
  • Operands − Represents the data.
  • Operator − Defines how the operands will be processed to produce a value.

ES6 - Decision Making

A conditional/decision-making construct evaluates a condition before the instruction/s are executed.

ES6 - Loops

At times, certain instructions require repeated execution. Loops are an ideal way to do the same. A loop represents a set of instructions that must be repeated. In a loop’s context, a repetition is termed as an iteration.

ES6 - Functions

Functions are the building blocks of readable, maintainable, and reusable code. Functions are defined using the function keyword. Following is the syntax for defining a standard function.
function function_name() { 
   // function body 
} 

ES6 - Events

JavaScript is meant to add interactivity to your pages. JavaScript does this using a mechanism using events. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events that can trigger JavaScript Code.
An event is an action or occurrence recognized by the software. It can be triggered by a user or the system. Some common examples of events include a user clicking on a button, loading the web page, clicking on a hyperlink and so on. Following are some of the common HTML events.

Event Handlers

On the occurrence of an event, the application executes a set of related tasks. The block of code that achieves this purpose is called the eventhandler. Every HTML element has a set of events associated with it. We can define how the events will be processed in JavaScript by using event handlers.

onclick Event Type

This is the most frequently used event type which occurs when a user clicks the left button of his mouse. You can put your validation, warning, etc. against this event type.

Example

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html> 
The following output is displayed on successful execution of the above code.

onsubmitEvent Type

onsubmit is an event that occurs when you try to submit a form. You can put your form validation against this event type.
The following example shows how to use onsubmit. Here we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true, the form will be submitted, otherwise it will not submit the data.

Example

<html> 
   <head> 
      <script type = "text/javascript">  
         function validation() {  
            all validation goes here  
            .........  
            return either true or false  
         }   
      </script> 
   </head> 
   
   <body> 
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> 
         .......  
         <input type = "submit" value = "Submit" /> 
      </form> 
   </body> 
</html>

onmouseover and onmouseout

These two event types will help you create nice effects with images or even with text as well. The onmouseover event triggers when you bring your mouse over any element and the onmouseout triggers when you move your mouse out from that element.

Example

<html> 
   <head> 
      <script type = "text/javascript"> 
         function over() {  
            document.write ("Mouse Over");  
         }  
         function out() {  
            document.write ("Mouse Out");  
         }  
      </script> 
   </head> 

   <body> 
      <p>Bring your mouse inside the division to see the result:</p> 
      <div onmouseover = "over()" onmouseout = "out()"> 
         <h2> This is inside the division </h2> 
      </div> 
   </body> 
</html>
The following output is displayed on successful execution of the above code.

HTML 5 Standard Events

The standard HTML 5 events are listed in the following table for your reference. The script indicates a JavaScript function to be executed against that event.
Attribute Value Description
offline script Triggers when the document goes offline
onabort script Triggers on an abort event
onafterprint script Triggers after the document is printed
onbeforeonload script Triggers before the document load
onbeforeprint script Triggers before the document is printed
onblur script Triggers when the window loses focus
oncanplay script Triggers when the media can start play, but might have to stop for buffering
oncanplaythrough script Triggers when the media can be played to the end, without stopping for buffering
onchange script Triggers when an element changes
onclick script Triggers on a mouse click
oncontextmenu script Triggers when a context menu is triggered
ondblclick script Triggers on a mouse double-click
ondrag script Triggers when an element is dragged
ondragend script Triggers at the end of a drag operation
ondragenter script Triggers when an element has been dragged to a valid drop target
ondragleave script Triggers when an element leaves a valid drop target
ondragover script Triggers when an element is being dragged over a valid drop target
ondragstart script Triggers at the start of a drag operation
ondrop script Triggers when the dragged element is being dropped
ondurationchange script Triggers when the length of the media is changed
onemptied script Triggers when a media resource element suddenly becomes empty
onended script Triggers when the media has reached the end
onerror script Triggers when an error occurs
onfocus script Triggers when the window gets focus
onformchange script Triggers when a form changes
onforminput script Triggers when a form gets user input
onhaschange script Triggers when the document has changed
oninput script Triggers when an element gets user input
oninvalid script Triggers when an element is invalid
onkeydown script Triggers when a key is pressed
onkeypress script Triggers when a key is pressed and released
onkeyup script Triggers when a key is released
onload script Triggers when the document loads
onloadeddata script Triggers when media data is loaded
onloadedmetadata script Triggers when the duration and other media data of a media element is loaded
onloadstart script Triggers when the browser starts to load the media data
onmessage script Triggers when the message is triggered
onmousedown script Triggers when a mouse button is pressed
onmousemove script Triggers when the mouse pointer moves
onmouseout script Triggers when the mouse pointer moves out of an element
onmouseover script Triggers when the mouse pointer moves over an element
onmouseup script Triggers when a mouse button is released
onmousewheel script Triggers when the mouse wheel is being rotated
onoffline script Triggers when the document goes offline
ononline script Triggers when the document comes online
onpagehide script Triggers when the window is hidden
onpageshow script Triggers when the window becomes visible
onpause script Triggers when the media data is paused
onplay script Triggers when the media data is going to start playing
onplaying script Triggers when the media data has start playing
onpopstate script Triggers when the window's history changes
onprogress script Triggers when the browser is fetching the media data
onratechange script Triggers when the media data's playing rate has changed
onreadystatechange script Triggers when the ready-state changes
onredo script Triggers when the document performs a redo
onresize script Triggers when the window is resized
onscroll script Triggers when an element's scrollbar is being scrolled
onseeked script Triggers when a media element's seeking attribute is no longer true, and the seeking has ended
onseeking script Triggers when a media element's seeking attribute is true, and the seeking has begun
onselect script Triggers when an element is selected
onstalled script Triggers when there is an error in fetching media data
onstorage script Triggers when a document loads
onsubmit script Triggers when a form is submitted
onsuspend script Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate script Triggers when the media changes its playing position
onundo script Triggers when a document performs an undo
onunload script Triggers when the user leaves the document
onvolumechange script Triggers when the media changes the volume, also when the volume is set to "mute"
onwaiting script Triggers when the media has stopped playing, but is expected to resume

ES6 - Cookies

Web Browsers and Servers use HTTP protocol to communicate. HTTP is stateless protocol, i.e., it doesn’t maintain the client’s data across multiple requests made by the client. This complete request-response cycle between the client and the server is defined as a session. Cookies are the default mechanism used by browsers to store data pertaining to a user’s session.

ES6 - Page Redirect

Redirect is a way to send both users and search engines to a different URL from the one they originally requested. Page redirection is a way to automatically redirect a web page to another web page. The redirected page is often on the same website, or it can be on a different website or a web server.

ES6 - Dialog Boxes

JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one.

ES6 - Void Keyword

void is an important keyword in JavaScript which can be used as a unary operator that appears before its single operand, which may be of any type. This operator specifies an expression to be evaluated without returning a value. The operator evaluates a given expression and then returns undefined.

ES6 - Page Printing

Many times you would like to place a button on your webpage to print the content of that web page via an actual printer. JavaScript helps you implement this functionality using the print function of the window object.
The JavaScript print function window.print() prints the current webpage when executed. You can call this function directly using the onclick event as shown in the following example.

ES6 - Objects

JavaScript supports extending data types. JavaScript objects are a great way to define custom data types.
An object is an instance which contains a set of key value pairs. Unlike primitive data types, objects can represent multiple or complex values and can change over their life time. The values can be scalar values or functions or even array of other objects.

ES6 - Number

The Number object represents numerical date, either integers or floating-point numbers. In general, you do not need to worry about Number objects because the browser automatically converts number literals to instances of the number class.

ES6 - Boolean

The Boolean object represents two values, either "true" or "false". If the value parameter is omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false.
Use the following syntax to create a boolean object.
var val = new Boolean(value);

ES6 - Strings

The String object lets you work with a series of characters; it wraps JavaScript’s string primitive data type with a number of helper methods.
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.

ES6 - New String Methods

Following is a list of methods with their description.
Sr.No Method & Description
1 String.prototype.startsWith(searchString, position = 0) Returns true if the receiver starts with searchString; the position lets you specify where the string to be checked starts.

ES6 - Arrays

The use of variables to store values poses the following limitations −
  • Variables are scalar in nature. In other words, a variable declaration can only contain a single at a time. This means that to store n values in a program, n variable declarations will be needed. Hence, the use of variables is not feasible when one needs to store a larger collection of values.

ES6 - Date

The Date object is a datatype built into the JavaScript language. Date objects are created with the new Date () as shown in the following syntax.
Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time.

ES6 - Math

The math object provides you properties and methods for mathematical constants and functions. Unlike other global objects, Math is not a constructor. All the properties and methods of Math are static and can be called by using Math as an object without creating it.

ES6 - RegExp

A regular expression is an object that describes a pattern of characters. Regular expressions are often abbreviated “regex” or “regexp”.
The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on the text.

ES6 - HTML DOM

Every web page resides inside a browser window, which can be considered as an object.
A document object represents the HTML document that is displayed in that window. The document object has various properties that refer to other objects which allow access to and modification of the document content.

ES6 - Collections

ES6 introduces two new data structures: Maps and Sets.
  • Maps − This data structure enables mapping a key to a value.
  • Sets − Sets are similar to arrays. However, sets do not encourage duplicates.

ES6 - Classes

Object Orientation is a software development paradigm that follows real-world modelling. Object Orientation, considers a program as a collection of objects that communicates with each other via mechanism called methods. ES6 supports these object-oriented components too.

ES6 - Promises

Promises are a clean way to implement async programming in JavaScript (ES6 new feature). Prior to promises, Callbacks were used to implement async programming. Let’s begin by understanding what async programming is and its implementation, using Callbacks.

ES6 - Modules

Consider a scenario where parts of JavaScript code need to be reused. ES6 comes to your rescue with the concept of Modules.
A module is nothing more than a chunk of JavaScript code written in a file. The functions or variables in a module are not available for use, unless the module file exports them.

ES6 - Error Handling

There are three types of errors in programming: Syntax Errors, Runtime Errors, and Logical Errors.

Syntax Errors

Syntax errors, also called parsing errors, occur at compile time in traditional programming languages and at interpret time in JavaScript.

ES6 - Validations

Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by the client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with the correct information.

ES6 - Animation

You can use JavaScript to create a complex animation having, but not limited to, the following elements −
  • Fireworks
  • Fade effect
  • Roll-in or Roll-out
  • Page-in or Page-out
  • Object movements

ES6 - Multimedia

The JavaScript navigator object includes a child object called plugins. This object is an array, with one entry for each plug-in installed on the browser. The navigator.plugins object is supported only by Netscape, Firefox, and Mozilla.

ES6 - Debugging

Every now and then, developers commit mistakes while coding. A mistake in a program or a script is referred to as a bug.
The process of finding and fixing bugs is called debugging and is a normal part of the development process. This chapter covers the tools and techniques that can help you with debugging tasks.

ES6 - Image Map

You can use JavaScript to create a client-side image map. Client-side image maps are enabled by the usemap attribute for the <img /> tag and defined by special <map> and <area> extension tags.
The image that is going to form the map is inserted into the page using the <img /> element as normal, except that it carries an extra attribute called usemap.

ES6 - Browsers

It is important to understand the differences between different browsers in order to handle each in the way it is expected. So it is important to know which browser your web page is running in. To get information about the browser your webpage is currently running in, use the built-in navigator object.

ES6 - Quick Guide

ES6 - Overview

ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. The specification is influenced by programming languages like Self, Perl, Python, Java etc. Languages like JavaScript, Jscript and ActionScript are governed by this specification.

ES6 - Useful Resources

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

Discuss ES6

ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. Languages like JavaScript, Jscript and ActionScript are governed by this specification. This tutorial introduces you to ES6 implementation in JavaScript.

Ext.js - Overview

What is Ext JS

Ext JS is a popular JavaScript framework which provide rich UI for building web applications with cross browser functionality. Ext JS is basically used for creating desktop applications It supports all the modern browsers as IE6+, FF, Chrome, safari 6+, opera 12+ etc. Whereas another product of sencha, sencha touch is used for mobile applications.

Ext.js - Environment Setup

Try it Option Online

We have set up ExtJS Programming environment online, so that you can compile and execute all the available examples online. It gives you confidence in what you are reading and enables you to verify the programs with different options. Feel free to modify any example and execute it online.

Ext.js - Naming Convention

Naming convention is a set of rule to be followed for identifiers.
It makes code more readable and understandable to the other programmers as well.
Naming convention in Ext JS follows the standard JavaScript convention which is not mandatory but a good practice to follow.

Ext.js - Architecture

Ext JS follows MVC/ MVVM architecture.
MVC – Model View Controller architecture (version 4)
MVVM – Model View Viewmodel (version 5)
This architecture is not mandatory for the program but it is best practice to follow this structure to make your code highly maintainable and organized.

Ext.js - First Program

This chapter list down the steps to write first Hello World program in Ext JS:

Step 1

Create index.htm page in an editor of our choice. Include the required library files in head section of html page as mentioned below:

Ext.js - Class System

Ext JS is a JavaScript framework which has functionalities of object oriented programming. Ext is the namespace which encapsulates all the classes in Ext JS.
Defining a class in Ext JS

Ext.js - Containers

Containers

Container in Ext JS is the component where we can add other container or child components. These containers can have multiple layout to arrange the components in the containers. We can add or remove components from container and from its child elements. Ext.container.Container is the base class for all the containers in Ext JS.

Ext.js - Layouts

Layout is the way the elements are arranged in a container. That could be horizontal, vertical or any other. Ext JS has different layout defined in its library but we can always write custom layouts as well.

Ext.js - Components

ExtJS UI is made up of one or many widgets called Components.Ext Js has various UI components defined which can be customised as per your requirements.

Ext.js - Drag and Drop

Description

Drag and drop feature is one of the powerful feature added for making developers task easy.A drag operation, essentially, is a click gesture on some UI element while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation.

Ext.js - Themes

Ext.js provides a number of themes to be used in your applications. You can add different theme inplace of classic theme and see the difference in output, this is done simply by replacing theme CSS file as explained below.

Ext.js - Custom Events and listeners

Events are something which get fired when something happens to the class. For example when a button is getting clicked or before/ after element is rendered.

Ext.js - Data

Data package is used for loading and saving all the data in the application.
The data package has numerous number of classes but the most important classes are:
  1. Modal
  2. Store
  3. Proxy

Ext.js - Fonts

Description

Extjs provides the facility to use different font packages. Font packages are used to add different classes for icons available in package.
1. Font-Awesome
2. Font-Pictos

Ext.js - Style

Application Styling refers to user adjustment of the look and feel of components. These adjustments may include: color, color gradients, font, margins/padding, etc. Ext JS 6 has a new way of styling the application.
It uses SCSS for styling. SCSS is the more dynamic way of writing CSS code.

Ext.js - Drawing

Drawing package in ExtJS enables you to draw general purpose graphics. This can be used to graphics that work on all browsers and mobile devices.

Ext.js - Localization

It is always best to communicate users in the language they understand and prefer. Extjs localization package supports over 40 languages like German, French, Korean, Chinese etc. It is very simple to implement the locale in ExtJs.You’ll find all of the bundled locale files in the override folder of the ext-locale package.

Ext.js - Accessibility

What is accessibility?

In general accessibility means availability, the content is accessible means the content is available.
In software terms the application is accessible means the application is available for all. Here all means the persons with disabilities, the visually impaired once or those who use screen readers, to use a computer or those who prefers all the navigation with keyboard instead of using a mouse.

Ext.js - Debugging Ext JS code

Any JavaScript code can be debug using alert() box or console.log() or with the debug pointer in a debugger.
  1. Alert box:
    place an alert box in the code where you want to check the flow or any variable value. e.g alert('message to show' + variable);

Ext.js - Methods

Below are few inbuilt functions which are used mostly in Ext JS:
Ext.is class:
This class checks the platform you are using, whether it is a phone or desktop, a mac or windows operating system. These are the following methods related to Ext.is class

Ext.js - Quick Guide

Basic Introduction

Ext JS stand for Extended JavaScript, is a JavaScript framework and product of sencha which is based on YUI (Yahoo user interface).It is basically a desktop application development platform with modern UI. This tutorial gives a complete understanding of Ext JS. This reference will take you through simple and practical approach while learning Ext JS.

Ext.js - Useful resource

Basic about Ext JS - About Ext JS
Documentation of different versions of Ext JS - Documentation
Ext JS wiki - Wiki link

Ext.js - Ext JS Discussion

New added features of advance versions of Ext JS

Ext JS 5

  1. MVVM architecture: In Ext JS 5 the controller of MVC architecture is replaced by a viewmodel which is a model specific to view. This view model is basically used for binding data between model and different views. So with the help of this multiway binding is possible in Ext JS which was one of the shortcoming of this library.

ExpressJS - Overview

A web application framework provides you with a simple API to build websites, webapps and backends. You need not worry about low level protocols, processes, etc.

ExpressJS - Environment

To get started with developing using the Express framework, you need to have Node and npm(node package manager) installed. If you don’t already have these, head over to Node setup to install node on your local system. Confirm that node and npm are installed by running the following commands in your terminal.
node --version

ExpressJS - Hello World

So we have set up the development, now it is time to start developing our first app using express. Create a new file called index.js and type the following in it.
var express = require('express');
var app = express();

ExpressJS - Routing

Web frameworks provide resources such as HTML pages, scripts, images, etc. at different routes. The following function signature is used to define routes in an express application:
app.METHOD(PATH, HANDLER)

ExpressJS - HTTP Methods

The HTTP method is supplied in the request and specifies the operation that the client has requested. The below table summarizes the most used HTTP methods:

ExpressJS - URL Building

We can now define routes, but those are static or fixed. To use dynamic routes, we need to provide different types of routes. Using dynamic routes allows us to pass parameters and process based on them. Here is an example of a dynamic route:

ExpressJS - Middleware

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. These functions are used to modify req and res objects for tasks like parsing request bodies, adding response headers, etc.
Here is a simple example of a middleware function in action:

ExpressJS - Templating

Pug is a templating engine for express. Templating engines are used to remove the cluttering of our server code with HTML, concatenating strings wildly to existing HTML templates. Pug is a very powerful templating engine which has a variety of features including filters, includes, inheritance, interpolation, etc. There is a lot of ground to cover on this.

ExpressJS - Serving static files

Static files are files that clients download as they are from the server. Create a new directory, public. Express, by default doesn't allow you to serve static files. You need to enable it using the following built-in middleware.

ExpressJS - Form data

Forms are an intergral part of the web. Almost every website we visit offers us forms that submit or fetch some information for us. To get started with forms, we will first install the body-parser(for parsing JSON and url-encoded data) and multer(for parsing multipart/form data) middleware. To install these, go to your terminal and use:

ExpressJS - Database

We are receiving the requests, but are not storing them anywhere. We need a Database to store the data. We'll use a famous NoSQL database called MongoDB. To install and read about Mongo, head over to this link.

ExpressJS - Cookies

Cookies are simple, small files/data that are sent to client with a server request and stored on the client side. Every time the user loads the website back, this cookie is sent with the request. This helps us keep track of the users actions. There are numerous uses of HTTP Cookies.

ExpressJS - Sessions

Because HTTP is stateless, in order to associate a request to any other request, you need a way to store user data between HTTP requests. Cookies and URL parameters are both suitable ways to transport data between client and server. But they are both readable and on the client side.

ExpressJS - Authentication

Authentication is a process in which the credentials provided are compared to those on file in a database of authorized users' information on a local operating system or within an authentication server. If the credentials match, the process is completed and the user is granted authorization for access.

ExpressJS - RESTFul APIs

To create mobile applications, single page applications, use AJAX calls and provide data to clients, you'll need an API. An popular architectural style of how to structure and name these APIs and the endpoints is called REST(Representational Transfer State). HTTP 1.1 was designed keeping REST principles in mind. REST was introduced by Roy Fielding in 2000 in his paper Fielding Dissertions.

ExpressJS - Scaffolding

Scaffolding allows us to easily create a skeleton for a web application. We manually created our public directory, added middleware, created separate route files, etc. A scaffolding tool sets up all these things for us so that we can directly get started with building our application.

ExpressJS - Error Handling

Error handling in Express is done using middleware. But this middleware has special properties. The error handling middleware are Defined in the same way as other middleware functions, except error-handling functions MUST have four arguments instead of three: (err, req, res, next). For example, to send a response on any error, we can use:

ExpressJS - Debugging

Express uses the Debug module to internally log information about route matching, middleware functions, application mode, etc.
To see all internal logs used in express, set the DEBUG environment variable to express:* when starting the app:
DEBUG=express:* node index.js
You'll get a colorized output like:

ExpressJS - Best Practices

Unlike Django and rails which have a defined way of doing things, file structure, etc, Express is unopinionated on this. What this means is you can structure the application however you like. But as your application grows in size, its very difficult to maintain it if it doesn't have a well defined structure.

ExpressJS - Resources

Here is a list of resources I used while learning Express as well as while preparing this tutorial.
  1. The most important link is of course to the express API docs: http://expressjs.com/en/4x/api.html
  2. The guides provided on the express website are also quite helpful:

EmberJS - Overview

What is Ember.js?

Ember.js is an open source JavaScript client-side framework for developing the web applications and uses the MVC(Model-View-Controller) architecture pattern. In Ember.js, route is used as model, handlebar template as view and controller manipulates the data in the model.

EmberJS - Environment Setup

It's easy to configure Ember.js, by including the JavaScript library files into the <script> tag in the HTML file; this can be done in two ways as follows:
  • You can download the latest version of Ember.js JavaScript library files from its official website.
  • You can include the latest version of CDN's from the official website.

EmberJS - Application

Architecture

The below figure show the architecture of an Ember.js which illustrates an interaction between routes, controllers, views, templates and models.

EmberJS - Object Model

Object oriented analysis and design technique is called as object modeling. In Ember.js, all objects are derived from the Ember.Object.

EmberJS - Template

A template is used to create a standard layout across multiple pages. When you change a template, the pages that are based on that template automatically get changed. Templates provide standardization controls.

EmberJS - Router

Introduction

This is the core feature of the EmberJs. The router is used to translate URL into the series of templates and also it represents the state of an application. The EmberJs uses the Hashchange event that helps to know change of route, this can be done by implementing HashLocation object.

EmberJS - Component

Introduction

The Ember.js components uses the W3C web component specification and these components provides true encapsulation UI widgets. It contains the three main specification as templates, shadow DOM and custom elements.

EmberJS - Model

Models

In Ember.js, every route has an associated model. The {{link-to}} or transitionTo() methods takes an argument as model which implements the route's model hook. The model helps to improve application robustness and performance. Ember.js uses the Ember Data which manipulates with the stored data in the server and also easy to work with streaming APIs like socket.io and Firebase or WebSockets.

EmberJS - Views

Introduction

A view in an Ember.js is used for to handle user events and also creates the re-usable component. The UI will be developed by using the views.
The below figure shows how event handling occurs:

EmberJS - Controller

You can make more attractive of your display logic of model by using controllers in which, the models properties are saved to the server where as the controllers properties will not save to the server.

EmberJS - Testing

Introduction

Testing is a development cycle of Ember.js framework. It provides user interactions such as login, creating post etc for writing an Ember application.
There are two types for testing the Ember application:

EmberJS - Resources

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

Discuss EmberJS

Ember.js is an open source JavaScript client-side framework for developing the web applications and uses the MVC(Model-View-Controller) architecture pattern. In Ember.js, route is used as model, handlebar template as view and controller manipulates the data in the model. This tutorial covers most of the topics required for a basic understanding of EmberJS and to get a feel of how it works.