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… :)

HTML5 Development, Adobe Edge Animate

March 21, 2013 Leave a comment

There are lots of discussions about Flash and HTML5 and Adobe’s focus on HTML5 and Flash Player on web. But I believe that ‘HTML is the standard and Flash Player is the mechanism which is able to push beyond that standard. There isn’t any competition with between these two technologies. I would like to consider the situation like

HTML5 take some tasks from Flash Player and make it cross-platform and across operating systems.

We should target latest new trade and learn new technologies and use best one (from Flash and HTML5) for application situation. So I would like started some fun with HTML5. From this article I would like to start with Adobe Edge Animate series.

Before staring about HTML5 development and Adobe Edge Animate related discussion I would like to list some points for ‘Why we need Adobe Edge Animate when we have a tool like Flash Professional’. There are several reasons like

1. Restrictions of Flash Players with platforms like Apple iOS.
2. HTML technology development
3. Adobe’s shifting focus from Flash Player to HTML
4. Mobile applications usage and developments
5. Learn new technology and tool ( my favorite reason )

Now let’s start with, what we can achieve using Adobe Edge Animate. The tool can be used to create same types of animations and interactions that Flash Player handle on the web in late 1990s, like some basics interaction and movements of visual objects across stage. Edge Animate includes some APIs for enabling interaction through mouse, touch and time based actions. So let’s start with ‘Introduction of Adobe Edge’.

Adobe Edge Animate is a nice tool from Adobe which provides interactive experiences through HTML5, CSS3 and JavaScript. Adobe Edge relies on three technologies; HTML5, CSS3 and JavaSrcipt. The default output or document type is HTML5, for modern browsers objects operations like transformation, rotate are rendered as CSS3, and robust JavaScript library interact with HTML5 and CSS3 contents and provides interactivity. Let’s have a brief look of these three technologies.

HTML

HTML – Hyper Text Markup Language is the core of Web. With HTML5 specification (which is in draft) with additional semantic tags and new set of API which allow great user experience through JavaScript.

CSS

Cascading Style Sheet (CSS), which define how a site or interface structured or designed. Similar as HTML5, CSS3 Specification (which is in draft), can be use for some great effects of objects in Web.

JavaScript

JavaScript language is a superset of ECMAScript. There are several JavaScript frameworks use to provide interactivity and motion. Among them jQuery is most popular one. jQuery is a best JavaScript library which simplifies Web, event handling, animation. Adobe Edge Animate Runtime use jQuery for deal with motion. You will get more information about jQuery documentation from http://docs.jquery.com/

JSON – JavaScript Object Notation is a data-interchange format used to exchange data from one system to another. Edge Animate use JSON to deal with element definitions and attributes with application. You will get more information about JSON from http://www.json.org/

The set of JavaScript libraries used in Edge Animate, which is referred as Adobe Edge Animate Runtime. If you refer HTML file created using Edge Animate, then there is a small part with the head of the document.

Enjoy RIA.. :)

Optimizing Flash Performance

February 6, 2013 1 comment

With some recent experience related to application performance, I thought to share some strategies to optimize performance of applications made with Flash Professional. There are two main components that determine Flash performance:

  1. CPU/GPU usage
  2. Memory usage

In this article I will begin with discussing memory management guidelines. Several times we are using filters, loops, Timers SoundChannels etc in Flash applications which are playing an important role in application performance.

Easiest techniques for performance optimization:

  • Some objects or movie clips required just to represent some data, which doesn’t require user interaction in such cases normally we are not writing any code for that object. But still when user click on such object Flash Player checks for mouse interactions when these objects are present. You can save some CPU cycles by disabling mouse interactivity for objects that do not require mouse interactivity. Disable mouse interactivity.
  • The issue with Timers is more critical. If a Timer has not stopped (because its currentCount is less than its repeatCount or because a stop() method has not been applied to it), the Timer will not respond to garbage collection even if you remove its listener and null all references. A Timer’s listener function won’t be called again once you remove the listener, but the Timer still consumes memory. Several times we start timer to achieve function requirement, and even after completion of the functional part execution the timer running. Explicitly stop Timers for garbage collection. However, if you open, play, and then close a Flash game running on a mobile device repeatedly without ever restarting the game, you may see a noticeable problem.
  • For ENTER_FRAME event loop, (if required to use then only) use different listeners and different listener functions applied with related DisplayObjects only.
  • Avoid use filters. Keep in mind that whenever you apply a filter to a DisplayObject in Flash, its cacheAsBitmap property gets forced to true and Flash must use memory to store that bitmap. If anything changes about that DisplayObject, like its transform operations like size or rotation or a child updates visually, etc, it must regenerate the bitmap, thus using more memory. That old bitmap hangs around until gc kicks in.
  • Always use reverse for-loops. Avoid writing do-loops and while-loops.
  • Using correct type of display objects for each element
  • Use weak event listeners and remove listeners when no longer needed.
  • Strictly type variables whenever possible.
  • Explicitly disable mouse interactivity when mouse interactivity is not required.
  • Replace dispatchEvents with callback functions whenever possible.
  • Stop Sounds to enable garbage collection for Sounds and SoundChannels.
  • Use the most basic DisplayObject needed for each element.
  • Always use cacheAsBitmap and cacheAsBitmapMatrix with air apps (mobile devices).
  • Several times when we are playing with loop and require to create object for each iteration in that case. In such situation it would be great if we create one object outside the loop and reuse it repeatedly in loop.

Friends, I hope these would be helpful to optimization of application performance. Feel free to share more ideas and comments about the topic.

Enjoy RIA… :)

Introduction to Robotlegs Architecture

April 19, 2012 4 comments

Application architecture is most important part for large scale enterprise application. You will get some important ideas about architecture from a small article on Application Architecture, which cover usage of application architecture and basic overview about PureMVC framework.

Sometime might be you feel that application’s same result will achieve by using MXML file without using such architecture. While probably it’s true for the small application, but keep in mind that a large scale application with a framework, will allows us to effectively communicate concepts and understands a code base quicker than an application without any design pattern and practice. In this article we are going to discuss about Robotlegs framework. So first lets start with what is Robotlegs.

Robotlegs is a great architectural framework for developing Flash, Flex, and AIR applications. It works for both Flash and Flex projects. Robotlegs is a mechanism for wiring your objects together. Robotlegs is a set of modular utilities and interfaces that provide tools to ease these communication tasks, reduce repetitive coding tasks, and manage dependency injection within your application.

The framework provides a default implementation based on MVC meta-design pattern. Robotlegs provides a prescriptive implementation of Model, View, Controller and Services (MVCS) implementation to get you start. If you have experience with PureMVC then you will quickly recognize the use of Mediators and Commands in Robotlegs framework MVCS design pattern. Robotlegs is a set of modular utilities and interfaces that provide tools to ease these communication tasks, reduce repetitive coding tasks, and manage dependency injection mechanism within your application.

You will get more idea from the  Official Robotlegs MVCS Diagram:

Basic Structure of Robotlegs Application

A typical Robotlegs application is compose of several parts as:

1. Context
2. Views & Mediators
3. Controller & Commands
4. Model
5. Services

Context

Context is the heart of Robotlegs implementation. It’s bootstrapping mechanism that initializes dependency injection and the various core utilities that Robotlegs uses. The context provides a central event bus and takes care of its own startup and shutdown. A context defines scope. Also its possible to have several context within application.

Views & Mediators

A view is another name for a user interface. Basically anything that is an interface between your application and the user can be considered a view. They can should only read data from a model, not write directly to it.

The mediator’s job is to quite literally ‘mediate’ the view’s connection to the rest of the system. It listens to events coming from the global event dispatcher and then invokes the change on the view. It also listens to events occurring on the view itself and then alerts the rest of the system by dispatching an event on the global dispatcher.

Controller & Commands

The controller’s job is to manipulate data on the model, processing it beforehand if necessary. The controller is usually invoked by a view in response to user input. The controller never holds onto any data, it simply processes it then hands it on (usually to a model or service).

Commands are registered to a Context via that Context’s CommandMap. CommandMap is available by default in Context and Command classes. The Command class in RobotLegs contains a single execute method which is called immediately after instantiation. You use a Command class by overwriting the execute method with your own code. Commands are simple and shorted lived. Once a Command is instantiated and execute has been called its job is done. The CommandMap does not hold onto Command instances by default, they are left to the mercy of the garbage collector at this point.

Model

Model’s role is to store state information within your application. This can be thought of as a place to store data that may need to be retrieved by another part of your program. Models send event notifications when work has been performed on the data model.

Robotlegs does not enforce the use of a specific Model class; any class can be treated as a Model. However, in order to gain access to the global EventDispatcher there is an Actor class which provides a single eventDispatcher property used to dispatch events to other actors in the system.

Service

Service is use for service tier communication with external entity like Web Services, file access, or any action that takes place outside of the scope of your application for a service class. Service classes dispatch system events in response to external events.

Conceptually there are many similarities between the service and model tiers in MVCS architecture. Because of this similarity, models and services are extended from the same base Actor class.

You will get more information about Robotlegs framework from here.

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… :)

Follow

Get every new post delivered to your Inbox.

Join 101 other followers