Archive

Archive for the ‘Web Development’ Category

Model View Controller in ASP.NET MVC

May 18, 2014 Leave a comment

MVC is design pattern that splits the application based on functional responsibility. ASP.NET MVC provides separation of concerns within application like separating data access logic and business logic from UI, in other words we can say it provides a clear separation between Models, Views and Controllers. Also with the ASP.NET framework’s best part is loose coupling it provides between Models, Views and Controllers. This enables the application developer to develop more maintainable, testable effective applications. Separation of concerns is a computer science principle that promotes separating the responsibility for an application. So let’s try to define the Model, View and Controller formally.

Models:

Models are classes that contains data, in other words classes that representing domain entities. Model deal with data attributes (properties), business logic, behaviors and validation. These can be entity framework generated entities, collection, generics or even generic collections too.

Models can be break down into several different layers like:

1. Object layer

The layer contains simple and complex objects which are specify strongly typed view. These objects are used to pass data to and from between controller and view. Also objects can have specific validation rules. So basically these classes contains those properties which will display on view.

2. Data Access Layer (DAL)

This layer provide objects to access and manipulate database of application. Normally these layer made using Entity Framework.

3. Business Layer

The layer which cover business logic and validation of application. The layer directly invoked by Controller for processing and send back to view.

Controllers:

Controllers are classes that facilitate interaction between models and views. Mainly, controllers will get invoke by routers on any user interaction or action and then the action method of the controller will get called. For user’s every action there will be an action method.

HTML5 Canvas Element Guide

August 12, 2013 Leave a comment

HTML5 <canvas>

The HTML5 <canvas> element has a unique history. But we are not going to focusing on element history. The <canvas> element takes a bit of work to understand and, unlike your usual run-of-the-mill HTML elements, requires more than just static markup and styling. In this guide, will start with basic understanding of the canvas element and what kinds of things are required and expected in its associated code. This should help you to get a firm fundamental understanding of canvas in preparation for creating something interesting and powerful with this unique and other HTML5 elements.

Maybe you heard about HTML 5 Canvas API, but don’t know what it’s good for?  It’s the way to go if you want to code an HTML5 game? Or it gives you explicit control over drawing in your browser?  So what does all that mean? Just what is the HTML5 Canvas API?

Let me pull back the curtain a little and give you some insight into what the HTML5 Canvas API is all about and what it can do for you and your web apps.

The HTML5 Canvas API is a procedural drawing API for JavaScript.  It’s well supported in all major browsers including Internet Explorer (starting with version 9) and is defined by the HTML5 Canvas W3C specification.

Also from Wikipedia you will get the detailed definition of <canvas> element as:

“Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.”

Here are just some of the capabilities at a glance:

  • Defining Paths with lines, curves, arcs and more…
  • Filling and Stroking Paths
  • Clipping to a Path
  • Filling and Stroking Text
  • Affine Transformation (Translate, Scale, Rotate, Skew)
  • Fills using Gradients and Patterns
  • Pixel Manipulation
  • Offscreen Rendering
  • Rendering Blurred Shadows
  • Dashed Lines, Line End Caps and Joins
  • Exporting Canvas Rendering to a PNG or JPEG

First of all the HTML5 Canvas is a browser DOM object and can be added to your webpage either declaratively through the <canvas> tag or programmatically through the createElement method.  Once defined it contains a frame buffer bitmap at screen resolution that is the same width and height of the canvas object itself.

As the element has some complexity so will start with markup.

<canvas id=”canvasId” width=”200″ height=”200″></canvas>

Above tag in your HTML page will create a canvas object on your page, that is 200 pixels width and 200 pixels height and it will be transparent.  The DOM object associated with the canvas object doesn’t directly have any drawing methods.  In order to actually draw on the canvas, you have to obtain a drawing context object by calling the canvas’s getContext method with a string parameter of “2d”.

//Get reference of canvas object
var canvas = document.getElementById(“canvasId”);
//Get reference of canvas 2d context
var context = canvas.getContext(“2d”);
//Display filled rectangle on screen
context.fillStyle = “rgba(0, 0, 255, .5)”;
context.fillRect(25, 25, 125, 125);

Drawing Rectangles and Paths

The context object returned contains the actual drawing APIs that allow us to draw on our canvas object.  The 2D context allows for the use of a number of different drawing methods and properties, each utility syntax familiar to experienced CSS and JavaScript developers.

//Define path in the shape of triangle with the moveTo and lineTo methods
context.beginPath();
context.moveTo(400,50);
context.lineTo(50,400);
context.lineTo(400,400);
context.closePath();

// Fill the path
context.fillStyle="red";
context.fill();

You can get in details information about Colors, Styles and Shadows, Line Styles, Rectangles, Paths the drawing API information from the reference.

If the article helpful to you to understand basic idea about HTML5 canvas element than share your thoughts and take a look at the full canvas specification and experiment.

Enjoy RIA… 🙂

Application Architecture

April 5, 2012 2 comments

Like many of today’s developers. I started my IT career as a Flash Developer, and spend much of my time on learning new things from my senior friends, books and blogs about Flash Platform and get idea that there are lots of things to learn like Software Development Life Cycle (SDLC), Software Design Patterns, Coding Standards and many more. With expanding knowledge, I understand that architecture, frameworks and coding standards are important. Before starting discussion about application architecture, would like to share about preface for this post.

There are different technologies are available, we pick one technology, get knowledge for that, practice on that technology’. We live in technologies limitations or boundary and competing with other technologies. It is difficult enough to truly master a single platform. Of course many developers are experts in multiple languages, but mostly their knowledge and development practices of each language are different from each other.

For example, It you want to develop an application in two different languages (let say) Flex and Python. Your knowledge of Flex doesn’t give you any advantage for the Python application development. But I would like to say that knowledge of architecture or framework will help you here for the application development in both the languages. And that’s the reason behind the post on application architecture.

From a set of frameworks, I selected PureMVC as my framework of choice.

Before starting about PureMVC, let’s discuss about what is framework. As I understand Frameworkis a reusable set of libraries or classes for a software system, which follow some rules throughout the application. These rules are known as Design Patterns. So in other words we can say a framework is a collaborating set of design patterns. Frameworks are helpful as it give us the flexibility to implement the fastest solution to given problem.

Currently there are lots of discussions going on between Flash Platform & HTML5 features, development tools, and usage and development standards. But I think there is one topic ‘architecture‘ which is common and useful for all technologies or languages, application architecture/ framework is the heart of application standard, performance and scalability. Technology doesn’t matter for that. So  for the reference example, I have selected my favorite platform to explain application architecture. The Adobe Flash Platform is superb for developing rich experiences, including websites, games for web desktop and mobile users. From last few years lightweight, interactive run time has become the ideal choice for expressive media-centric web software. There is a major benefit of Flash Platform can experience as it has expanded to the desktop and well with Adobe AIR.

Goals of PureMVC

PureMVC is lightweight framework based upon well known Model-View-Controller design pattern. Main goals of PureMVC frameworks are:

  • To separate application’s coding into three different tiers: model (data), view  (UI) and controller (business logic)
  • For speedy implementation with scalability and maintainability
  • Reduce complexity from developer

Also one major benefit of using well known formal framework is common design patterns and way of adding development. From organizational point of view, usage of such great standard produce clean coding standard of applications and reduce dependency on developers, reduce knowledge transfer time for new developer. I think it’s a best and most attractive benefit of using standard and well known framework. Here are some reasons why I like PureMVC:

  • It is easy to learn, great documentation, samples and tutorials, easy to use and also easy to extend.
  • It facilitates loosely coupled application architecture (Publish and Subscribe- type), scalability, maintainability and portability for you application.

Developers agree that separating an application’s code into different part based on its functionality. These separations are three major areas: model, view and controller. Let’s have a quick overview of these terms: the model is for your data, the view is for user controls, user interaction, and the controller decides how model change when view is clicked and how view should updates when model updated. You can get basic idea about PureMVC framework from below conceptual diagram:

A forth singleton Façade, simplify development by providing single interface for communication throughout application. Below is the base overview of each singleton:

  • Model: manipulating the data model and retrieve data from remote services
  • View: mainly refer named mediators that adapt view component.
  • Controller: named mapping command classes, which are only created one needed.
  • Façade: initializes core singletons (model, view and controller) and provide a single interface for communications.

Will have to use Façade and other actor classes (like Mediator, Proxy/delegate and commands), to interact with singleton as shown below:

Note: In next Part, will update sample applications implemented with PureMVC framework using different programming language.

Adobe Edge Preview 5

March 15, 2012 Leave a comment

Adobe Edge Preview 5 introduces some new features and enhancements over previous releases, which play an important role for animation and application optimization. Edge is fully compatible with all modern browsers and can work in mobile browsers. Edge even works in Internet Explorer 9 and this latest version provides a down-level stage for browsers that do not support HTML5, which allows web developers to create animations and post them online without any fear.

Some of the new features in Preview 5 include:

  1. Optimizing your content for deployment on the web
  2. Down-level stage for non-HTML5 browsers by using Poster Capture feature
  3. Preloader tool such as spinning wheels, for indication of animation loading. The loading event also exposed, providing information on the size and giving more control on when it’s used.
  4. Cursor attributes, so that your cursor changes in appearance when user hovers a link or other actions.
  5. Timeline based improvements
  6. Easing functions now available on the timeline control strip, which visualizes how each of them behaves.
  7. Swap images makes it easier to design with temporary or placeholder images that can be replaced later.

You can download Adobe Edge Preview 5 from here. You will get interesting information about Adobe Edge Preview 5 from below video from ADC

Enjoy RIA… 🙂

Object-oriented JavaScript

February 14, 2012 Leave a comment

JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has great functions. It is a multi-paradigm language, supporting object-oriented, interactive and functional programming style. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. As its scripting language so it’s lightweight programming language. It’s usually embedded directly into HTML pages. And it is an interpreted language means that scripts execute without preliminary compilation.

JavaScript was formalized in the ECMAScript language standard and is primarily used in the form of client-side JavaScript, implemented as part of a Web Browser in order to provide enhanced user interfaces. This enables programmatic access to computational objects within environment. JavaScript uses syntax influenced by that of C. It also has many names and naming conventions from Java. JavaScript and Java are different language. Java is frequently used to program games, mobile phones and other devices and also for websites. JavaScript is powerful language that runs inside a web browser. Its role is to provide access to different elements of the pages so that they can be removed or updated. For example, it can send request to Web Server to get more information and update specific part of page without reload the page.

And JavaScript perform such task by accessing the Document Object Model (DOM), a model or structure similar to a family tree. JavaScript is an event-driven language. There are some events triggered automatically like load event and there are some event triggered by user interaction like click, tap on touch-sensitive screen or mouseover and mouseout.

You will get more information about JavaScript from here.

Constructor Functions

In JavaScript syntax, a constructor function represents the class that contains the template from which new object instances are created. Constructor functions create and initialize (set the default state of) properties in the new objects. The difference between a constructor function and a method function is that a constructor function uses the special this keyword to represent a reference to the new object that is being initialized. A method function typically only performs some action on a given set of an object’s data.

The following example illustrates one way to create a Rectangle constructor function that could be used to initialize the height and width of new Rectangle objects:

function Rectangle(w, h) {
this.width = w;
this.height = h;
}

You can also create a constructor function by using function literal syntax. Function literal syntax provides the same functionality as the syntax used previously and is merely an alternative way to write the constructor.

Rectangle = function(w, h) {
this.width = w;
this.height = h;
}

Instance variables

Instance variables are any variables (properties) that are defined in a constructor function and are copied into each object instance of that constructor. All object instances have their own copies of instance variables. This means that if there are five object instances of a Circle class, there are five copies of each instance variable defined in the class. Because each object instance has its own copy of an instance variable, each object instance can assign a unique value to an instance variable without modifying the values of other copies of the instance variable. You can access instance variables directly from their containing object instances.

The following example defines four instance variables—make, model, color, and speed—in a constructor function. These four instance variables are available directly from all object instances of the Car constructor:

function Car(make, model, color) {
// define a Car class
this.make = make;
this.model = model;
this.color = color;
this.speed = 0;
}

The following object instance objCar contains all four instance variables. Although a value for the instance variable speed is not passed to the Car constructor, objCar still has a speed property whose initial value is 0 because the speed variable is defined in the Car constructor.

// objCar.make = "Subaru"
// objCar.model = "Forester",
// objCar.color = "silver"
// objCar.speed = 0
var objCar = new Car("Subaru", "Forester", "silver");

Instance methods

Instance methods are any methods that are accessible using an object instance. Object instances do not have their own copies of instance methods. Instead, instance methods are first defined as functions, and then properties of the constructor function’s prototype object are set to the function values. Instance methods use the keyword this in the body of the defining constructor function to refer to the object instance they are operating on. Although a given object instance does not have a copy of an instance method, you still access instance methods directly from their associated object instances.

// increase the speed of a Car
function Car_increaseSpeed(x) {
this.speed += x;
return this.speed;
}
Car.prototype.increaseSpeed = Car_increaseSpeed;

The following example defines a function named Car_increaseSpeed(). The function name is then assigned to theincreaseSpeed property of the Car class’s prototype object:

var objCar = new Car("Subaru", "Forester", "silver");
var newSpeed = objCar.increaseSpeed(50);

You can also create an instance method by using function literal syntax. Using function literal syntax eliminates the need to define a function and the need to assign a property name to the function name. The following example uses function literal syntax to define an increaseSpeed() method that contains the same functionality as the increaseSpeed() function defined previously:

// increase the speed of a Car
Car.prototype.increaseSpeed = function(x) {
this.speed += x;
return this.speed;
}

You will get more interesting information about OOP with JavaScript from the video tutorial give below:

JavaScript tutorial

Friends, lets share your ideas 🙂

HTML5 Banner Using Adobe Edge

February 5, 2012 2 comments

Now a days, RIA developers having high expectations from the new tool introduced by Adobe with the named ‘Adobe Edge’, for RIA interactive applications. Some people even say that the new change or trend in HTML5 can compete with great RIA tool like Adobe Flash. As I understand, Flash capabilities are more powerful and more extendable then the current versions of HTML5. At the moment, I don’t see any competition between Flash and HTML5. I think both will have their own place in the market.

Adobe Edge is new promising tool that provides an environment to create HTML5 animations through a timeline (something like flash timeline) and interface using interactive methods and functionalities. It can makes HTML5 animations very easy for designers who do not have experience with coding, and allows them to create HTML5 animation without writing a single line of code.

In this post, I would like to show you how to create a simple HTML5 banner animation using Adobe Edge. Before staring the tutorial, you can download Adobe Edge latest from Adobe Labs.

Assuming that you have some basic idea about animations with Adobe’s other tools.

Step 1

Let’s start by opening Adobe Edge. Open New File from File menu. Set document width and height properties from Properties panel on left side. Here set Width to 600 px and Height to 200 px. Also you can set title of the document from the Properties panel.

AdobeEdge

Step 2

Now from the Properties panel, open the background color picker and set the background color. And set the Overflow to Hidden to hide the objects that are off screen and also you can set Autoplay options.

AdobeEdge

Step 3

Choose Import from the File menu and open Edge icon type image and place it in the banner as shown below and set the Edge icon image Width to 180 px and Height to 160 px.

AdobeEdge

Step 4

Use Text tool, type “Adobe Edge” and set dimension and font size of the text area.

Step 5

Now you will animate the Adobe Edge icon and text through the timeline. The timeline in Adobe Edge is similar to other Adobe applications, such as After Effects. When you create an object on the stage you will find that a separate layer is created for it in the timeline. Each layer has sub layer that includes the properties of each layer. In order to create the animation, we will need to create keyframes that represent the change in layers content properties like position. As shown in below screen you can change the translate X and Y position of object.

Now the time line indicator positioned at the beginning of the timeline, move the Adobe Edge icon image to top of the stage and moves the timeline indicator by a few frames and drag the Adobe Edge icon image to its final position in the stage. Apply same thing with text object. Also you will get the animation area of object by different color.

There is an interesting panel known as Elements Panel. It simultaneously servers two purpose. It exposes the document’s DOM and acts as a Library for the items or objects used in your application. The order in which elements appears in this panel is the order in which they appear in the timeline. If you move a timeline layer up or down in the layering order, that change is instantly reflected the Elements panel and vice versa.

AdobeEdge

AdobeEdge

Step 6

Save the file and you can preview it in browser by selecting “Preview in Browser” from File menu.

AdobeEdge

In this post just show how to create a simple HTML5 animation using Adobe Edge. I think the tool is very simple, it would be helpful for creating animation, especially because in HTML5, it would be more complex to create animation using manual coding.

You will get a quick overview of the output folder from below screen. It contains the Adobe Edge included JavaScript files in “edge_includes” folder, application related JavaScript files and “images” folder contains assets used in the application.

AdobeEdge

Adobe Flash Platform – Game Technology Center

December 27, 2009 2 comments

Finally, Adobe provides a centralized space to host best practices, code sample and examples around the Flash gaming space from where game developers get information and share information regarding gaming environment. There are some nice articles or information listed below related to adobe gaming technologies:

1) Adobe Flash Platform Gaming Technology Center

2) An introduction to developing games on the Adobe Flash Platform

3) Developing games for Nokia S60 Touch devices

4) Building a game with Flash Builder using Cairngorm Framework

5) Creating a Massively Multiplayer Online game with Adobe Flex 3

You can get more information from here.

Enjoy RIA… 🙂