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

HTML5 and future of RIA

December 31, 2011 8 comments

When Macromedia, now Adobe started using the word RIA (Rich Internet Application), might be there are few peoples in industry who visualize the future of RIA and experience desktop type experience on web applications. Adobe created development environment for such kind of applications development and also Microsoft and Sun created their own tool Silverlight and JavaFx for it.

As we know, in coming days, adoption of cloud based solutions is increased. And this momentum will be going to increase future of RIA, with few changes like tool and technologies going to be replaced by open technologies. To be specific, it’s going to be HTML5, JavaScript and CSS3. There are lots of features HTML5 has introduced which could be very effective to develop more responsive RIA solutions. There are few treads driving this change:

Web Innovation:

Browsers and core web technologies are change rapidly. HTML, JavaScript and CSS are changing to enable running applications with great user experience in browser without dependencies.

Web Performance:

JavaScript performance has improved dramatically in last few years and application performance is most important factor to provide great end user experiences.

Mobile:

Growth of smart phones and tablets is a major factor for the treads change. Support to build robust application using HTML5, JavaScript and CSS3 and also continue to have strong support ( i.e. hardware acceleration of CSS3).

So now it’s clear, that in HTML5 will be future of Web. Adobe is committed to HTML5 and focusing in two primary areas, tooling and enabling more expressive web content. I think, in future Adobe Edge will be best tool for RIA applications. Yes for enterprise application it will take some time to get place with Adobe Flash and Flex. You will get some information from the preview video given below. So with great vision, let’s focus on JavaScript and HTML5 in the New Year.

 

You will get more information about HTML5 from here.

Enjoy RIA…. 🙂

Flash Facebook Cookbook Review

December 5, 2011 Leave a comment

Facebook is great social web. Millions of active users and new users connect on Facebook platform through devices, applications and websites (refer the Statistics). As we know there is huge demand for content on the platform, the requirement for the platform developer also grown. So I thing learning material, perfect development approach guidelines or tips related to the platforms applications are most important.

Flash Facebook Cookbook by James Ford, is one more information source for Facebook Developers. I received a copy of this book and while reading it, I would like share review of the book.

The Flash Facebook Cookbook contains integrating Flash applications with Graph API and Facebook platform. It contains lots of recipes for that and recipes start with basic explanation of Flash-Facebook integration. If you have some knowledge of Flash Builder, Flex framework or Flash platform then it’s a nice book to explore your experience with world by Facebook platform.

Enjoy RIA 🙂

Flash Professional, Adobe Edge output HTML5

November 15, 2011 Leave a comment

Adobe introduced a new web motion and interaction design tool known as Adobe Edge that allows designers to bring animated content to websites, using web standards likes HTML5, JavaScript and CSS3. I think it would be easy for Flash developers and designers to apply their Flash skills to the new output format.

Adobe Edge

You can get some exciting information from the demo:

I think Flash Professional to export animation as HTML is very exciting feature because it helps to reach mass audience across configurations and helps to migrate content from Flash into HTML. So Flash developer and designers can use their Flash skills and by exporting application into HTML, they can target more platforms.

As per my personal opinion if you are able to achieve similar results with Adobe Edge and Flash Professional then only it will be great challenge for flash platform developer and designers to learning possible outcomes with new technology (Edge) which is more compatible with more devices.

Enjoy RIA 🙂

Flash vs HTML5!!

November 14, 2011 4 comments

Recently it was announced by Adobe that they would cease further development on their flash player, which is used for animated features of web sites, video, ads and rich media applications on the mobile internet and determined it would be best to focus on HTML5 as the future for mobile interactive feature and animation, and discontinue Flash for mobile. Flash development will transition to new software and tools as they are now focusing more on HTML5, and Adobe Edge is the beginning of one of them.

Most of the stuff seen in browser is created with HTML. This language has, until fairly recently, been limited to static text and image contents. Long ago technology called Flash was developed to allow web browsers to display rich, dynamic and interactive content such as audio, video and SVG (scalable vector graphics).

Now, HTML5 could become a game changer in web application development. It poses a strategic threat to Adobe, as well as Microsoft and Java. There are many advanced features and effects that are only (currently) available in Flash. There are lots of Flash games and applications that would be difficult to do with HTML5.

There are many more comparison (including technical limitations and advantages) points for both the technologies available on web. Flash is better in some cases and HTML5 is better in others. However, HTML5 is the future of the web for simple interactivity. It includes charting, some limited 3d vector graphics, image transforms, video and audio. But the portion of the web that requires richer interaction will continue to rely on Flash and other technologies RIA technologies. I think the choices is not “all or none”. Depending on the context, the developer may use both together. I think over the long-term HTML5 may fit the bill.

Takes a look at the more informative debate Flash versus HTML5 debate and some considerations you should make if you’re deciding which one to use in your projects. The main conclusions: Flash lets you reach the widest audience with the drawback of not working on some mobile devices.

So friends, Enjoy RIA 🙂

Adobe Advances Entertainment Apps for TVs

October 4, 2011 Leave a comment

At its MAX 2011 technology conference, Adobe announced that LG and TiVo have become the latest partners to bring Adobe Flash-based applications via Adobe AIR to connected TVs and digital home devices. Content partners can now take advantage of AIR to deliver Flash-based console-quality gaming and premium video across TVs, Blu-Ray players and set-top boxes.

Adobe also announced that Flash Player 11 and AIR 3 will be available today, a milestone release that will enable the next generation of immersive application experiences across devices and platforms. As announced, dozens of new features allow developers to deliver a new class of gaming and premium video experiences, as well as sophisticated, data-driven apps with back-end systems integration across devices and platforms including Android, Apple iOS (via AIR), BlackBerry Tablet OS, Mac OS, Windows and connected TVs and others. AIR Apps available on Samsung SmartTVs, coming to Digital Home devices from LG, TiVo and others.

Demo video of Flash-based apps with 3D graphics and others running on a Samsung Smart TV and other devices:

With more than 100 unique digital home devices already certified to support Adobe Flash and AIR, including Samsung Smart TVs, Adobe expects rapid growth for Flash-based applications across connected televisions and other devices.

TVs and other connected devices in the digital living room are the next frontier for rich entertainment apps. Flash-based applications are transforming content consumption on TVs as developers embrace new opportunities to deliver beautiful HD content to increasingly powerful digital home devices connected to a big screen.

With the AIR SDK, Flash Builder and Flash Professional CS5.5 software, developers can build new applications for connected digital home devices or extend existing Flash-based experiences from desktops and mobile devices to TVs. AIR 3 brings a series of advancements to TVs including full hardware-accelerated rendering for 2D and 3D graphics to enable console-quality gaming applications. Content publishers are able to deliver HD videos with Dolby and DTS 7.1 channel surround sound for full support of home theater systems. With the new Game Input API, developers can also make a range of devices an integral part of the gaming experience on TV screens, including joysticks, smartphones and tablets.

Flash Player is supported on more than 98 percent of Internet connected PCs today and by the end of 2011, Adobe expects more than 200 million smartphones and tablets including Apple iOS devices to support Flash based applications via AIR. By the end of 2015, the number of devices that will support AIR is expected to increase to 1 billion. AIR, a superset of Flash Player, enables developers to leverage existing code to create and deliver standalone applications across devices and platforms. Thousands of Flash-based applications have already been created and made available on Android Market, iTunes App Store, Samsung SmartTV Store and BlackBerry AppWorld today.

You can get MAX keynote information from here.

Enjoy RIA ..  🙂