Sencha Touch - Builds

Today's demand for a web application is to develope the fast application with less development efforts.
Sencha touch helps in doing so with the ease as it provide number of build libraries to choose based on development or production code along with the facility to create custom build.

Sencha Touch - Migration

Sencha touch comes with various rectification from the earlier version.
Sencha touch 2 comes with the backward compatibility build which makes the migration process easier from version 1.x to 2.x.

Sencha Touch - Core Concept

Sencha touch has various core concepts such as class system, ajax , contollers etc.
Below you can find the link for the core concepts of sencha touch.

Concept and Description Link
Class System
Components
Controllers
BlackBerry support
Use of Ajax

Sencha Touch - Data Package

Data package in Sencha touch is responsible for doing any kind of data manipulation either storing or loading the data.
Data packages are related to model, store and proxies.

Sencha Touch - Theme

Sencha touch provides a number of themes to be used in your applications. You can add different theme in place of classic theme and see the difference in output based on the device we are using for the application.This is done simply by replacing theme CSS file as explained below.

Sencha Touch - Device Profile

In today's world of technologies, we have multiple devices such as mobile, tablet, desktop, laptop with different screen sizes.
So to develop applications which are accessible from all the devices with good look and feel is must need.
As there may be possibilities that some functionalities are required and important only for some specific devices not for all.

Sencha Touch - Dependencies

There are certain ways defined in Sencha touch to declare dependencies one with in the application other inside the classes.
Here we will see different ways to define dependencies.

Sencha Touch - Environment Detection

It helps you in identifying which operating system you are using, which browser you are working on and what are the features available for your environment.
So sencha touch provides you different function to get information specific to the environment.
All the methods mentioned below can be checked in if condition as if(Ext.os.is.Windows){} and based on the condition tasks can be performed.

Sencha Touch - Events

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.

Methods of writing events:

1. Built in events using listeners
2. Attaching events later
3. Custom events

Sencha Touch - Layout

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

Sencha Touch - History Support

Sencha touch comes with the full history support and deep linking facilities.
It has simplest back button functionality which helps user to navigate between the screens without even refreshing the page or application.

Sencha Touch - XHR2

Sencha touch provides XHR2 confiuration to work with Ajax and Ajax2 development.
XHR2 is xmlHttpRequest level2 , which used to request data from server. For any web application data resides at the server and once the page is loaded the data should be accessed from server with the help of Ajax requests.

Sencha Touch - View Components

Sencha touch provides various UI components which can be customised according to requirements.

S.N.	Component
1	CarouselThis UI component is used to display Carousel.
2	ListThis UI component is used to display lists.
3	Nested List

Sencha Touch - Packaging

Sencha touch comes with the native packaging feature.
Below you can find the link for native packaging concepts of Sencha touch.

Concept and Description Link
Native iOS provisioning
Native APIs

Sencha Touch - Native iOS Provisioning

Sencha touch provides native IOS provisioning feature.
Below are the steps to create an install a native application on device running iOS for development and testing.
Step to run an application on an iOS device.

Sencha Touch - Native APIs

The best benefit of sencha touch is it provides packaging with native APIs
Ext.device API is used to provide access to different other native APIs.
It acts as a wrapper which further can be used to access different apis such as Ext.device.Camera, Ext.device.Connection etc.
Ext.device provides following APIs:

Sencha Touch - Best Practice

Basic JavaScript best practice:

It is good practice to keep all the JavaScript related code in a separate .js( external JS) file instead of writing it in the <script> tag under head section or inline JavaScript in document body.
Always do a null check before the element is getting used in the further logic.

script.aculo.us - Overview

What is script.aculo.us?

script.aculo.us is a JavaScript library built on top of the Prototype JavaScript Framework, enhancing the GUI and giving Web 2.0 experience to the web users.
script.aculo.us was developed by Thomas Fuchs and it was first released to the public in June 2005.
script.aculo.us provides dynamic visual effects and user interface elements via the Document Object Model (DOM).

script.aculo.us - Modules

script.aculo.us is divided into modules, each with its own JavaScript file. These modules are explained here −

Effects

The effects module comes with more than twenty-five visual effects and seven transition modes.

script.aculo.us - Visual Effects

The script.aculo.us effects are divided into two groups −

Core Effects

The following six core effects are the foundation of the script.aculo.us Visual Effects Java Script library.

• Effect.Opacity
• Effect.Scale
• Effect.Morph
• Effect.Move
• Effect.Highlight
• Effect.Parallel
  

script.aculo.us - Drag & Drop

The most popular feature of Web 2.0 interface is the drag and drop facility. Fortunately script.aculo.us comes with an inherent capability to support drag and drop.
To use the dragging capabilities of script.aculo.us, you'll need to load the dragdrop module, which also requires the effects module. So your minimum loading for script.aculo.us will look like this:

script.aculo.us - Sorting Elements

Many times, you need to provide the user with the ability to reorder elements (such as items in a list) by dragging them.
Without drag and drop, reordering can be a nightmare, but script.aculo.us provides extended reordering support out of the box through the Sortable class. The element to become Sortable is passed to the create() method in the Sortable namespace.

script.aculo.us - Create Sliders

Sliders are thin tracks with one or more handles on them that the user can drag along the track.
The goal of a slider is to provide an alternative input method for defining a numerical value; the slider represents a range, and sliding a handle along the track defines a value within this range.

script.aculo.us - Auto Completion

Out of the box, script.aculo.us supports two sources for auto-completion −

• Remote sources (obtained through Ajax),
• Local sources (string arrays in your web page's scripts).

script.aculo.us - In-Place Editing

In-place editing is one of the hallmarks of Web 2.0.style applications.
In-place editing is about taking non-editable content, such as a <p>, <h1>, or <div>, and letting the user edit its contents by simply clicking it.

script.aculo.us - Quick Guide

script.aculo.us - Overview

What is script.aculo.us?

script.aculo.us is a JavaScript library built on top of the Prototype JavaScript Framework, enhancing the GUI and giving Web 2.0 experience to the web users.
script.aculo.us was developed by Thomas Fuchs and it was first released to the public in June 2005.

script.aculo.us - Useful Resources

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

Discuss script.aculo.us

script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework. It provides dynamic visual effects and other functionalities via the Document Object Model (DOM). This tutorial gives you a complete understanding on how to use script.aculo.us.

Sass - Overview

What is SASS?

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of a document cleanly and structurally.

Sass - Installation

In this chapter, we will learn the step-by-step procedure to install Ruby, which is used for executing the SASS files.

System Requirements for SASS

• Operating System − Cross-platform
• Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
• Programming Language − Ruby
  

Sass - Syntax

In this chapter, we will study about SASS Syntax. SASS supports two syntaxes namely SCSS and Indented syntax.

• The SCSS (Sassy CSS) is an extension of CSS syntax. This means every valid CSS is a valid SCSS as well. SCSS makes much easier to maintain large stylesheets and can recognize vendor specific syntax, Many CSS and SCSS files use the extension .scss.
  

Using Sass

SASS is more powerful and stable that provides power to the basic language by using extension of CSS. You can use SASS in three different ways −

• As a command line tool
• As a Ruby module
• As a plugin for Rack enable framework

Sass - CSS Extensions

In this chapter, we will study about CSS Extensions. CSS Extensions can be used to enhance the functionality of the web pages. The following table lists down some of the CSS extensions used in SASS −

S. No.	CSS Extension & Description

Sass - Comments

In this chapter, we will study about Sass Comments. Comments are non-executable statements, which are placed in source code. Comments make source code easier to understand. SASS supports two types of comments.

Sass - Script

SASS uses a small set of extensions known as SassScript which can be included in the SASS documents to compute variables from property values and uses properties of variables, arithmetic, and other functions. SassScript can also be used with selectors and property names while using mixins (Mixins allows to re-use CSS styles throughout the stylesheet).

Sass - @-Rules and Directives

The following table lists all the rules and directives which you can use in SASS.

S. No.	Directives & Description
1	@import It imports the SASS or SCSS files, it directly takes the filename to import.
2	@media It sets the style rule to different media types.

Sass - Control Directives & Expressions

In this chapter, we will study about Control Directives & Expressions. Styling based on some conditions or applying the same style many times with variations can be accomplished by using control directives and expressions, which are supported by SassScript. These control directives are advanced options used mainly in mixins. They require considerable flexibility, as they are a part of Compass libraries.

Sass - Mixin Directives

Mixins allow creating a group of styles, which are reusable throughout your stylesheet without any need to recreation of non-semantic classes. In CSS, the mixins can store multiple values or parameters and call function; it helps to avoid writing repetitive codes. Mixin names can use underscores and hyphens

Sass - Function Directives

In this chapter, we will study about Function Directives. In SASS, you can create your own function and use them in your script context or can be used with any value. Functions are called by using the function name and with any parameters.

Sass - Output Style

In this chapter, we will study about SASS Output Style. The CSS file that the SASS generates consists of default CSS style, which reflects the structure of document. The default CSS styling is good but might not be suitable for all situations; on other hand, SASS supports many other styles.
It supports the following different output styles −

Extending Sass

You can extend the functionality of SASS to provide different types of features and customizations for users. To make use of these features, user should have knowledge of Ruby.

Sass - Interview Questions

Dear readers, these SASS Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of SASS. As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer −

Sass - Quick Guide

Sass - Overview

What is SASS?

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of a document cleanly and structurally.

Sass - Useful Resources

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

Discuss Sass

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally. This tutorial covers the basics of SASS.

---

Ruby on Rails - Introduction

What is Ruby?

Before we ride on Rails, let us recapitulate a few points of Ruby, which is the base of Rails.
Ruby is the successful combination of −

• Smalltalk's conceptual elegance,
• Python's ease of use and learning, and
• Perl's pragmatism.

Ruby on Rails - Installation

To develop a web application using Ruby on Rails Framework, you need to install the following software −

• Ruby
• The Rails Framework
• A Web Server
• A Database System

Ruby on Rails - Framework

A framework is a program, set of programs, and/or code library that writes most of your application for you. When you use a framework, your job is to write the parts of the application that make it do the specific things you want.
When you set out to write a Rails application, leaving aside the configuration and other housekeeping chores, you have to perform three primary tasks −

Ruby on Rails - Directory Structure

When you use the Rails helper script to create your application, it creates the entire directory structure for the application. Rails knows where to find things it needs within this structure, so you don't have to provide any input.

Ruby on Rails - Examples

In this chapter, we will create a simple but operational online library system for holding and managing the books.
This application has a basic architecture and will be built using two ActiveRecord models to describe the types of data that is stored −

Ruby on Rails - Database Setup

Before starting with this chapter, make sure your database server is up and running. Ruby on Rails recommends to create three databases - a database each for development, testing, and production environment. According to convention, their names should be −

Ruby on Rails - Active Records

Rails Active Record is the Object/Relational Mapping (ORM) layer supplied with Rails. It closely follows the standard ORM model, which is as follows −

• tables map to classes,
• rows map to objects and
• columns map to object attributes.

Ruby on Rails - Migrations

Rails Migration allows you to use Ruby to define changes to your database schema, making it possible to use a version control system to keep things synchronized with the actual code.
This has many uses, including −

Ruby on Rails - Controller

The Rails controller is the logical center of your application. It coordinates the interaction between the user, the views, and the model. The controller is also a home to a number of important ancillary services.

• It is responsible for routing external requests to internal actions. It handles people-friendly URLs extremely well.
  

Ruby on Rails - Routes

The routing module provides URL rewriting in native Ruby. It's a way to redirect incoming requests to controllers and actions. It replaces the mod_rewrite rules. Best of all, Rails' Routing works with any web server. Routes are defined in app/config/routes.rb.

Ruby on Rails - Views

A Rails View is an ERb program that shares data with controllers through mutually accessible variables.
If you look in the app/views directory of the library application, you will see one subdirectory for each of the controllers, we have created: book. Each of these subdirectories was created automatically when the same-named controller was created with the generate script.

Ruby on Rails - Layouts

A layout defines the surroundings of an HTML page. It's the place to define a common look and feel of your final output. Layout files reside in app/views/layouts.
The process involves defining a layout template and then letting the controller know that it exists and to use it. First, let's create the template.

Ruby on Rails - Scaffolding

While you're developing Rails applications, especially those which are mainly providing you with a simple interface to data in a database, it can often be useful to use the scaffold method.
Scaffolding provides more than cheap demo thrills. Here are some benefits −

Ruby on Rails - AJAX

Ajax stands for Asynchronous JavaScript and XML. Ajax is not a single technology; it is a suite of several technologies. Ajax incorporates the following −

• XHTML for the markup of web pages
• CSS for the styling
• Dynamic display and interaction using the DOM

Ruby on Rails - File Uploading

You may have a requirement in which you want your site visitors to upload a file on your server. Rails makes it very easy to handle this requirement. Now we will proceed with a simple and small Rails project.
As usual, let's start off with a new Rails application called testfile. Let's create the basic structure of the application by using simple rails command.

Ruby on Rails - Send Emails

Action Mailer is the Rails component that enables applications to send and receive emails. In this chapter, we will see how to send an email using Rails. Let’s start creating an emails project using the following command.

tp> rails new mailtest

This will create the required framework to proceed. Now, we will start with configuring the ActionMailer.

Ruby on Rails - Quick Reference Guide

Here we have listed out all the important functions, scripts, validations etc. You can bookmark this page for easy access.

• Ruby on Rails - Rake Utility
• Ruby on Rails - The Scripts
• Ruby on Rails - The Plugins
  

Ruby on Rails - Quick Guide

Ruby on Rails - Introduction

What is Ruby?

Before we ride on Rails, let us recapitulate a few points of Ruby, which is the base of Rails.
Ruby is the successful combination of −

• Smalltalk's conceptual elegance,
• Python's ease of use and learning, and
• Perl's pragmatism.

Ruby on Rails - Useful Resources

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

Discuss Ruby on Rails

Ruby on Rails is an extremely productive web application framework written in Ruby by David Heinemeier Hansson. This tutorial gives you a complete understanding on Ruby on Rails.

---