Saturday, February 18, 2017

Description

Preloader in Framework7 is made with Scalable Vector Graphic (SVG) and animated with CSS which makes it easily resizable. Preloader is available in two colors:

the default is light background
another one is dark background

Description

The progress bars can be used to show loading of assets or progress of a task to the users. You can specify the progress bar by using the progressbar class. When user doesn't know how long the loading process will be there for the request, you can use progressbar-infinite class.

Description

List views are powerful UI components that presents data in a scrollable list of multiple rows. The Framework7 provides different types of List View to work with your application. The following table lists some of the Framework7 List View:

Description

The accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion.

Description

Cards contains organized information related a single subject like a photo, link, and text. The below table shows Framework7 card types:

Description

Chip is a small block of entity which can contain a photo, small string of title, and short information.

Chips HTML Layout

The below code shows the basic chip HTML layout used in Framework7:

<div class="chip">
    <div class="chip-media">

Description

Framework7 provides a group of ready to use buttons by just adding appropriate classes to links or input buttons.

Description

Framework7 provides floating action button for a promoted action. They appear as a floating circled icon over the UI. It has the motion behaviors that contain morphing, launching, and transferring an anchor point.

Description

Forms are used for interactiong with users and collects data from the web users using text fields, checkboxes, radio buttons etc.
Framework7 provides different types of form elements to work with the applications smoothly as specified in the table below:

Description

Tabs are sets of logically grouped content that allow us to quickly flip between them to and saves the space like accordions.

Description

The swiper slider is most powerful and modern touch slider and comes into Framework7 with lots of features.
The following HTML layout shows the swiper slider:

<!-- Container class for slider -->
<div class="swiper-container">
    <!-- Wrapper class for slider -->

Description

Photo browser is similar to iOS photo browser component to display group of images which can be zoomed and panned. To slide between images, photo browser uses Swiper Slider.
The below table shows photo browser types used in framework7:

Description

Autocomplete is a Framework7's mobile friendly and touch optimized component which can be as dropdown or in standalone way. You can create and initialize Autocomplete instance by using the JavaScript method:

myApp.autocomplete(parameters)

Where parameters are required object used to initialize the Autocomplete instance.

Description

Picker looks like iOS native picker and it is a powerful component that allows you to pick any values from list and also used to create custom overlay pickers. You can use Picker as inline component or as overlay. The overlay picker will be automatically converted to Popover on tablets (iPad).
Using below App’s method you can create and initialize JavaScript method:

Description

Calendar component allows you to handle dates easily and can be used as inline or as overlay component. The overlay calendar will be converted to popover on tablets automatically.

Description

It is a special component used to refresh (reload) the page contents by pulling it.
The following code shows how to refresh the page content:

<div class="page">

Description

It allows to load additional content and performs required actions when page is near to the bottom.
The following HTML layout shows the infinite scroll:

<div class="page">
    <div class="page-content infinite-scroll" data-distance="100">
        ...
    </div>
</div>

Description

Messages are component of Framework7 which gives visualization of comments and messaging system in the application.

Description

Framework7 provides special resizable toolbar to work with the messaging system in the application.
The following code shows message bar layout:

<div class="toolbar messagebar">
  <div class="toolbar-inner">

Description

Notifications are used to show the required messages which appear like Push (or Local) iOS notifications.
The below table demonstrates the use of notifications in details:

Description

Lazy loading delays your image loading process on a given page. Lazy loading improves scrolling performance, speeds page load and save traffic.

Lazy load elements and images must be inside of scrollable <div class="page-content"> to work properly.

Description

Framework7 provides different color themes for your applications.
A color theme provides different types of theme colors used to work with the applications smoothly as specified in the table below:

Description

Hairline is a class that adds 1px border around images by using the border class. With the release of 1.x, hairlines revised the working with :after and :before pseudo elements instead of using CSS borders.
Hairlines contains following rules:

Description

Template7 is a lightweight mobile first JavaScript engine which represents Ajax and dynamic pages, as Template7 templates with specified context and do not require any additional scripts. Template7 is associated with Framework7 as default template engine which is a lightweight template engine which works faster for the applications.

Description

In Template7 you can compile your templates automatically by specifying special attributes in a <script> tag.
The following code shows auto compilation layout:

<script type="text/template7" id="myTemplate">
    <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>

You can use below attributes for initializing the auto compilation:

Description

Template7 is a mobile-first JavaScript template engine with handlebars.js like syntax. It is ultra lightweight and blazing fast default template engine in Framework7.
First, we need to pass below parameter on app initialization that renders all Ajax and dynamic pages as Template7 template:

Description

To highlight links and buttons when you tab them, it will be done by active state in Framework7.

It behaves like a native app, not like a web app.
It has built-in Fast clicks library and it should be enabled.
The active-state class is same as CSS :active selector.
Active state is enabled by adding watch-active-state class to <html> element.

Description

Tap hold event is used to trigger (enable) after a sustained and complete the touch event so only, it is called tap hold event. The Tab Hold is a built-in Fast Clicks library.
The following parameters are use to disabled, could be enabled and configured by default:

Description

Touch Ripple is an effect that is supported only in Framework7 material theme. By default, it is enabled in material theme and you can disable it by using the materialRipple:false parameter.

What is Foundation?

Foundation is one of the advanced front-end frameworks for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins.

Foundation - Installation

In this chapter we will discuss about how to install and use Foundation on website.

Download the Foundation

When you open the link foundation.zurb.com, you will get to see a screen as below -

Foundation - Starter Projects

You can startup with your project development with some available templates which can be installed through Yeti Launch or Foundation CLI. You can start with the new project by using these templates by using Gulp build system for the processing of the Sass, JavaScript, copying files etc.

Description

It includes the Foundation elements to work with the web applications smoothly. Following table lists some of the Foundation components:

Foundation - Global Styles

In this chapter let's study about Global Styles. The global CSS of Foundation framework includes useful resets that makes sure styling is consistent across browsers.

Foundation - Sass

SASS helps to make the code more flexible and customizable in the Foundation.

Compatibility

To install SASS based version for foundation, Ruby has to be installed on Windows. Foundation can be compiled with Ruby Sass and libsass. We recommended node-sass 3.4.2+ version to compile SASS.

Foundation - JavaScript

In this chapter let's study about JavaScript. It is easy to set up JavaScript in Foundation, only thing you require is jQuery.

Installing

You can use ZIP download, package manager or CDN to get Foundation JavaScript file. In your code provide links to jQuery and Foundation using <script> tags. For more information click here.

Foundation - JavaScript Utilities

Foundation includes JavaScript utilities which are used to add common functionalities. It is very helpful and easy to use. This JavaScript utilities library can be found in the folder Your_folder_name/node_modules/foundation-sites/js

Foundation - Media Queries

Media queries are CSS3 module that include media features such as width, height, color and displays the content as per specified screen resolution.
Foundation uses following media queries to create breakdown ranges:

Description

Foundation grid system scales up to 12 columns through the page. Grid systems are used to create page layouts through a series of rows and columns that house your content.

Foundation - Flex Grid

The grid depends on the flex display property. It consist number of features that are available with the flexbox, like automatic stacking, source ordering, vertical alignment and horizontal alignment.

Foundation - Forms

In this chapter let's study about Forms. Foundation provides powerful, easy and versatile layout system for Forms, which combines form styles and grid support.
The below table list the form elements used in Foundation.

Description

Foundation uses visibility classes to show or hide elements based upon device orientation (portrait and landscape)or screen size (small, medium, large or xlarge screen).
It allows user to use elements based on the browsing environment.

Description

Typography in Foundation defines headings, paragraphs, lists and other inline elements which create attractive and simple default styles for elements.
The Following table lists different types of typography used in the Foundation:

Foundation - Typography Helpers

In this chapter let's study about Typography Helpers. Typography helpers are used to format your text in semantically relevant ways. Helper classes in Foundation let you to scaffold some typographic styles quicker.
The below table list Typography Helpers which are used in Foundation.

Foundation - Basic Controls

In this chapter let's study about basic controls. The Foundations provides basic controls such as buttons, slider and switch.
Below table list basic controls used in Foundation.

Description

Foundation provides a few different options for styling navigation elements. Many simple navigation patterns are bundled, it can be integrate in the form for robust responsive navigation solution.
The following table describes different types of navigation along with description.

Foundation - Containers

Foundation containers are used to make full width of browsers at all times for the site and wrap the site contents.
Following table lists down some of the containers used in the Foundation:

Foundation - Media

In this chapter let's study about media in Foundation. The Foundation consists of several media types like Flex Video, Label, orbit, progress bar and tooltip. The below table list all of media types.

Description

Plugin is a piece of software that provides additional functionality which was not originally completed by Foundation core functionality. Foundation Plugins can be uploaded to expand the functionality of the site. Plugins are used to make your work easier.

Foundation - Sass Functions

Foundation provides set of SASS utility functions which can be used with util, color, selector, unit, value and many more utilities.
You can import all utility files at a time by using below line of code:

@import 'util/util';

or even you can import individual utility file as shown below:

@import 'util/color';

Importing

It imports the contents of the SASS mixins which are placed under the scss/util/_mixins.scss file. You can import the SASS mixins by using below line of code:

@import 'util/mixins';

Description

Foundation provides Motion UI library for creating UI transitions and animations and used by Foundation components such as Toggler, Reveal and Orbit.

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.

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.

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.

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.

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.

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.

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

What is Web Framework?

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 - Overview

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.

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

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.

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:

Modal
Store
Proxy

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.

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.

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

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

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:

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews

Saturday, February 18, 2017

Description

Description

Description

Description

Description

Description

Chips HTML Layout

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

What is Foundation?

Download the Foundation

Description

Compatibility

Installing

Description

Description

Description

Description

Description

Importing

Description

Friday, February 17, 2017

What is Flex?

Step 1 - Create Project

Way #1: Using external style sheet file

What is Skining?

What is Data Binding?

Using ActionScript

Create a Test Case Class

What is Flex?

What is Web Framework?

Prerequisite