Transitioning from Java Classes to JavaScript Prototypes
To class or not to class, that has been a question than many developers have faced as they came from class based OO worlds into the Prototype Oriented world of JavaScript. Much pain has endured for those that try to contort it.
Peter Michaux has detailed transitioning from Java Classes to JavaScript prototypes by looking at the Observer/Observable pattern and showing various implementations in Java and JavaScript ending up with his favourite mixin-able solution:
-
-
var observablize;
-
-
(function() {
-
-
var observable = {
-
-
addObserver: function(observer) {
-
if (!this.observers) {
-
this.observers = [];
-
}
-
this.observers.push(observer);
-
},
-
-
notifyObservers: function() {
-
for (var i=0; i<this.observers.length; i++) {
-
this.observers[i].update();
-
}
-
}
-
-
};
-
-
observablize = function (subject) {
-
for (var p in observable) {
-
subject[p] = observable[p];
-
}
-
}
-
-
})();
-
-
// —————————
-
-
function WeatherModel() {}
-
-
observablize(WeatherModel.prototype);
-
-
WeatherModel.prototype.setTemperature = function(temp) {
-
this.temp = temp;
-
this.notifyObservers();
-
};
-
-
WeatherModel.prototype.getTemperature = function() {
-
return this.temp;
-
};
-
-
// —————————
-
-
function CurrentConditionsView(model) {
-
this.model = model;
-
model.addObserver(this);
-
}
-
-
CurrentConditionsView.prototype.update = function() {
-
alert(this.model.getTemperature());
-
};
-
-
// —————————
-
-
var victoriaWeather = new WeatherModel();
-
var victoriaNews = new CurrentConditionsView(victoriaWeather);
-
-
victoriaWeather.setTemperature(15.3);
-
victoriaWeather.setTemperature(17.0);
-
victoriaWeather.setTemperature(14.7);
-
(Via Ajaxian.)
Rounded Corners, Drop Shadows, and Other Inconvenient Facts of Life
One of our favorite internal discussions–right up there with the true cause of global warming and why folks can’t seem to park in one space–concerns the best way to do rounded corners, drop shadows, translucent backgrounds, and other tasty browser candy. Here are techniques from three of Yahoo!’s finest front-end engineers, Scott Schiller, Leslie Sommer, and Hedger Wang:
- Even More Rounded Corners with CSS – Scott’s work showed throughout Yahoo! Photos, and is starting to be seen here and there on Flickr. Examples here are single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency, gradients, patterns, and more.
- CSS Mojo: Adding Visual Polish To Your Pages – Leslie’s presentation for Web Design World 2007. Four examples, including rounded corners with solid background and image-free “pointy tail,” two-sided translucent drop shadows with and without translucent content areas and gradients, and four-sided “glowy shadows.” Leslie’s technique is easy on the markup, uses no Javascript, and is (mostly) semantically valid; currently it’s being used in Mash, 360, and other places.
- Single-Image Backgrounds – Hedger’s examples stretch and apply translucency to a single image, to achieve maximum flexibility with minimum markup and server load. Look for Hedger’s magic boxes in a future version of Yahoo! Groups.
If you’re feeling overwhelmed, remember that your voice counts. Ask questions, especially when a decoration-heavy design flies over the wall between design and engineering and lands on your desk. Is all that really necessary? Does it add meaning to the page, or is it just really pretty?
And if you’re tired of the wall, try a few of these suggestions:
Tearing Down the Wall between Design and Front-End Engineering
- Show up early. If possible, get to that very first meeting, when everything is still up in the air. By doing so you will make clear to your product manager, your designer, and your back-end support that front-end engineering is a discipline at least as important as any of theirs.
- Make your presence known. Contribute bright ideas, and ask hard questions. If your designer is asking for something that’s only going to make sense in Safari, be loud and clear when you point out that most of your audience is still using IE, and deserves the full experience. Understand the tools available to you; there are a ton upstairs in the Yahoo! User Interface section. (First-time visitors should pay special attention to the Grids, Reset, and Fonts sections.)
- Be a champion of the New. Prototype those sweet new approaches; make sure your designer knows you are actually interested in building the new stuff, not just thinking up reasons why the old stuff is sufficient and should not be changed. And, speaking of which:
- Release the Old. This is especially important if you had anything to do with the previous version’s design or implementation; your designer is dealing with enough stress as it is without having to worry about potential foot-dragging from you. Make a special point–yes, say it out loud, or in an e-mail–of telling the rest of your team that you are ready, willing, and able to move things along to the next level.
- Just say Yes. Remember the first rule of improvisational comedy: no suggestion, no matter how bizarre, can ever be met with resistance. This is especially true during those early brainstorming meetings; whatever it is, take it, run with it, make it even crazier, and toss it back. Designers love this; it takes away their chief source of anxiety, the possibility that they’re promising something that you can’t deliver.
Are we overstepping? Did we miss anything? Got a hot tip for rounded corners? Please leave us a comment and let us know.
Kent Brewster
Classes in JScript – Part III: Class Hierarchy and Data Encapsulation
In this post I will be discussing how one can achieve Class Hierarchy and Data Encapsulation in JScript.
I will take the same example that was used for the first and second parts and will keep updating it as and when required.
function Rectangle (ht, wt) {
this.height = ht;
this.width=wt;
}
Rectangle.prototype.area = function() {return this.height * this.width;}
var rect1 = new Rectangle(5,10);
var rect2 = new Rectangle(2,4);
var rect1Area = rect1.area(); // rect1.area() will return 50.
var rect2Area = rect2.area(); // rect2.area() will return 8.
Languages that support class based inheritance define two distinct entities: Classes and Instances. We defined Class in first part as the structure of an object. It defines exactly what fields an object contains, their types and methods to operate upon the object. A Class is an abstract thing. There can be several instances of a single Class. Each Instance has its own state.
However languages (e.g. JScript) that support prototype based inheritance do not make distinction between Class and Instances. These languages just have objects. A prototype-based language has the notion of a prototype object, which means that an object is used as a template from which one can get the initial properties for a new object. Also any object can be specified as a prototype for another object.
In Class based languages, a hierarchy of classes can be created through Class definitions. In the definition of a Class, we can specify that it is a derived class of an existing Class.
As described in part I, JScript does not support the keyword Class. It simulates Classes using Constructor and Prototype Objects. Hence implementing hierarchy of classes is achieved by using Constructor and Prototype Objects.
Let’s extend the above example – Rectangle to take co-ordinates. Ideally we would want to have all 8 co-ordinates topLeftX, topLeftY, topRight(X & Y),bottomLeft(X & Y) and bottomRight(X & Y), but for simplicity we will consider only the first two.
Earlier in this post I mentioned that “Also any object can be specified as a prototype for another object.” We use this to achieve inheritance by specifying super class object as a prototype for the child class.
Define the class PositionedRectangle:
function PositionedRectangle (topLeftX,topLeftY,height,width) {
this.topLeftX = topLeftX;
this.topLeftY = topLeftY;
}
Assign a new Rectangle object as the prototype for PositionedRectangle class.
PositionedRectangle.prototype = new Rectangle;
Create an object for the above type:
var prObj = new PositionedRectangle(2,3,4,5);
When prObj is created, it inherits the height and width properties from the Rectangle object due to the prototype set above.
On executing the below statement we can see the values assigned to topLeftX, topLeftY, height and width members.
alert(prObj.topLeftX+” “+ prObj.topLeftY+” “+ prObj.height+” “+ prObj.width); // displays 2 3 undefined undefined
Since the height and width properties of Rectangle do not get set, we see “undefined” in the output for them. This is a limitation of the above method. If we had a constructor function for Rectangle which would set default values for height and width properties, say
function Rectangle () {
this.height = 1;
this.width=1;
}
The output would be 2 3 1 1. It still wouldn’t take the values passed by us.
To overcome this, some code needs to be added to the constructor function for PositionedRectangle.
function PositionedRectangle (topLeftX,topLeftY,height,width) {
this.topLeftX = topLeftX;
this.topLeftY = topLeftY;
//One option would be:
this.height = height;
this.width=width;
//Or second option would be calling the constructor for Rectangle itself
Rectangle(height,width);
}
PositionedRectangle.prototype = new Rectangle;
var prObj = new PositionedRectangle(2,3,4,5);
alert(prObj.topLeftX+” “+ prObj.topLeftY+” “+ prObj.height+” “+ prObj.width);
The output now would be 2 3 4 5. Here we just invoke the super class constructor as a method of the child class with the correct set of arguments.
So how does this work?
1. First, the new operator creates a generic object and sets its prototype property to PositionedRectangle.prototype.
2. The new operator then passes the new object to the PositionedRectangle constructor as the value of the this keyword.
3. Next it initializes topLeftX and topLeftY.
4. Since Rectangle was called within the scope of the newly created object, its properties (height and width) are correctly set.
5. On returning from the PositionedRectangle constructor, JScript assigns the new object to prObj.
If we want to further create a subclass for PositionedRectangle class, then we need to set PositionedRectangle object as a prototype for the derived class and invoke PositionedRectangle’s constructor from the subclass constructor as a method of the subclass.
Data Encapsulation:
Data encapsulation means that an object’s data members should remain private to the object and manipulated through publicly exposed methods. Simply saying programs should not have the ability to modify the properties of objects directly.
By default the members of an object are public. No methods are required to access or modify these members.
In the above code,
rect1.height = 10; // will change the height from its old value to 10
How can we make the members private?
The answer is nested functions and not using this keyword for members. Lets add a member colour to the Rectangle class. We want colour to be private and be modified using publicly exposed methods.
function Rectangle (ht, wt) {
this.height = ht;
this.width=wt;
var colour = null; // colour now is a private member of this class.
this.setColour = setColour;
this.getColour=getColour;
//These methods will be used to access / modify colour.
function setColour (passedColour) {
colour =passedColour;
}
function getColour() {
return colour;
}
}
var rect1 = new Rectangle(5,10);
rect1.setColour (“blue”); // this will set colour to blue.
alert(rect1.getColour); // this will display blue as output.
alert(rect1.colour) // this would display undefined.
Rect1.colour =”red”; /*this will not throw any error but wouldn’t update colour member too. It will create an expando with name colour on the object.*/
alert(rect1.getColour); // this will still display blue as output.
alert(rect1.colour) // this would display red.
In this way we can define a private member and methods that manipulate it. Thus we can achieve Data Encapsulation in Jscript.
This is not everything that is there to talk about on Classes in Jscript, but this is good enough to get one started. Hope this post was helpful and fun to read!!
This completes the three parts that I had planned to write on this topic. Some more references to understand these concepts:
http://www.webdevelopersjournal.com/articles/jsintro3/js_begin3.html
http://www.crockford.com/javascript/inheritance.html
http://devedge-temp.mozilla.org/viewsource/2001/oop-javascript/
(Via JScript Blog.)
MooTools Foundations: Natives and Elements
We haven’t had this blog for very long, and talking to many users recently, I became aware of the fact that many people just don’t understand how powerful MooTools actually is. The purpose of this series of articles is to shed a little light on some of the functionality provided by MooTools that many users might be missing. I think maybe it’s time we got everyone caught up to speed. First topic… Natives and Elements!
A quick note about this article
So I know I said my next article would be about the new Element shortcuts added in 1.2, but there are so many other things we should probably talk about first! All the code examples featured in this article are intended for MooTools 1.2. Although almost all of it either works with 1.x or has a 1.x equivalent, the purpose of this article is not to teach MooTools syntax, but rather to help users understand the concepts that drive the development of MooTools.
A MooTools Native, not just a person born in the country of MooTools…
First thing I’d like to talk about is the Native in MooTools. JavaScript provides us with many native Classes like Arrays, Functions, Numbers, Strings, etc. While they are all very powerful, we’d obviously like to make them much more flexible. We can call functions on our Arrays and Strings like:
[1,2,3].join('-');
//'1-2-3'
'this is my string'.split(' ');
//['this', 'is', 'my', 'string']
But there’s absolutely no way native JavaScript could possibly provide us with all the functionality we want, right? Well not exactly. JavaScript lets us extend these native types by adding functions to their prototypes. Many of our JavaScript veterans are all too familiar with this topic. Here is an example:
//the following line will throw an error because there is no alert method for Strings
'this is my string'.alert();
//but by adding this small bit of code
String.prototype.alert = function(){ alert(this); };
//now the following line will work as intended
'this is my string'.alert();
MooTools has something called a Native which makes this process a bit more straightforward. When we make a new Native out of a JavaScript type, it gets all sorts of magical new properties. For example, with MooTools, here’s how we can add methods to Strings:
String.implement('alert', function(){ alert(this); });
Right, it’s the same amount of code, that’s not impressive. But what about when I want to add more than one function?
String.implement({
'method1': function(){ ... },
'method2': function(){ ... },
'method3': function(){ ... },
'method4': function(){ ... },
...
});
Now all my strings will have all these functions right in their prototypes.
Is this available in a generic version?
Another big thing about implementing new methods into your Natives is that full generics support is automatically added. While this may not make much sense for a function like String:alert, it is extremely useful for things like using Array generics on HTMLCollections or Hash generics on Objects.
Hash.each({'one': 'item 1', 'two': 'item 2', 'three': 'item 3'}, function(){ ... });
Array.filter(document.getElementsByTagName('div'), function(){ ... });
Element.addClass(document.getElementById('myElement'), 'className');
Array.each(arguments, function(){ ... });
Generics are even provided for native functions…
Array.join([1,2,3], '-');
//'1-2-3'
String.split('this is my string', ' ');
//['this', 'is', 'my', 'string']
Declaring a new Native also lets us do the following (among other) things….
String.type('mystring'); //true
String.type([1,2,3]); //false
$type('myString'); //'string'
$type([1,2,3]); //'array'
$type(function(){}); //'function'
Since Functions, Strings, Arrays, and the rest of the Natives all know their type, we don’t need to do any kind of convoluted test to determine it. The $type function can immediately access and return the type of any Native instance. This makes things clean and fast throughout the framework.
Awesome, now I know what a Native is… so what?
Well now we know how to extend the native JavaScript types… we’re done, right? Mmm, not even close. Why don’t we define some of our own Native types!? Awesome idea, let’s do it. Let’s add the following to the list of Native types [String, Function, Number, Array] at our disposal, all created by MooTools:
- Hash – Object implementation which allows us to extend JavaScript Objects.
- Event – Event wrapper which allows us to fix cross-browser quirks and enhance the information provided by native Events.
- Element – A Wrapper which allows us to do what was once thought to be impossible, extend the functionality of native HTMLElements.
- Elements – A powerful collection of MooTools extended Elements which combines all the functionality of an Array with all the functionality of an Element.
- TextNode – A simple native used when injecting text into Elements.
- IFrame – An awesome Element wrapper (the first of its kind) that allows you to use all the functionality of your parent document inside children documents (iframes).
- Color – A useful native which allows you to mix, match, and modify colors.
- Date – Extends the native Date type so you can add functionality and test for type on variables.
I already talked a bit about the newest Native, the Hash in a previous article. In a future article we will talk about the awesomazing IFrame (it really is so cool), but for now, there are quite a few things I’d like to tell you about Element(s).
Wait, you mean Elements are more than just little boxes on the periodic table?
Alright, by now hopefully you know what an Element is. Whenever you use the $ function in MooTools to select an element by id, or extend an existing element, it becomes a MooTools Element. This means you can do all sorts of stuff with it, no matter what browser you’re in. Here’s a few simple examples…
var element = $('myElement'); //select the element with id 'myElement'
//add the className 'active' to myElement
element.addClass('active');
//get myElement's title
element.getProperty('title');
//get myElement's color, width, and height properties
element.getStyles('color', 'width', 'height');
//set the border style of myElement
element.setStyle('border', '1px solid #f00');
//add a click event to myElement
element.addEvent('click', myClickFunction);
//...and do all this stuff
element.getNext('div').addClass('active').getParent().adopt(new Element('input', {type:'text'}));
Elements actually have so much functionality, there’s no way I could show you it all (as this article is already getting pretty long). Now on to the part that many of you may not know about. The Elements Class in MooTools is a special type of Array that contains MooTools Elements. An Element gets returned from any call to $, and Elements get returned from any call to $$. Don’t let the ’s’ at the end confuse you, here is a breakdown.
- $: takes an id or an element, returns Element – a single MooTools Element.
- $$: takes one or many CSS Selectors or elements, returns Elements – many MooTools Elements in an Array.
Here’s the amazing part… Anything you can do to an Element, you can do to a collection of Elements. If you call an Element method on Elements that returns something, (for instance, an an accessor like getStyle or getCoordinates), you will receive back an Array. This resulting Array will be the same as if you manually iterated through all the Elements by hand, calling the function on each one, and pushing the result to an Array… it’s just a lot less code. :P
//add the className 'active' to myElement
$('myElement').addClass('active');
//add the className 'active' to all the li's inside a ul that are children of a div
$$('div > ul li').addClass('active');
//add the className 'odd' to every other row in a table of data
$$('table tr:odd').addClass('odd');
//make myElement red
$('myElement').setStyle('color', '#f00');
//make all the divs with className 'info' red
$$('div.info').setStyle('color', '#f00');
//get the color of myElement
$('myElement').getStyle('color'); //returns '#f00'
//get the colors of all the divs with the className 'account'
$$('div.account').getStyle('color'); //returns ['#ff0000', '#00ff00', '#0000ff'], etc.
These are just very simple examples to demonstrate this concept, but the implementation is flexible and powerful. Similar functionality is provided by other frameworks, but in slightly different ways. In Prototype there is the Enumerable function invoke which will execute a function on every element in an Array. This is convenient, but a bit more code, and a bit less straightforward. In jQuery you always act on collections. While this is convenient most of the time, it may not be the most efficient way to manipulate single elements. With MooTools, whether you are dealing with a single Element or a collection of Elements, all the Element methods work. Methods are easy to use, easy to expand, consistent, and less ambiguous.
As the first article in this series, I hope this sheds a little light on some of the Core building blocks of MooTools. More articles will follow in this series describing other components of the Framework in better detail.
–ciao for now!
(Via MooTools – Home.)
CSS Animation
We have another cool new CSS feature to talk about: animation specified in CSS. There is a lot of ground to cover here, so we’ll start with the basics first.
The simplest kind of animation that we’ve added support for is called a transition. Normally when the value of a CSS property changes, the rendered result is instantly updated, with the element in question changing immediately from the old property value to the new property value. Transitions describe how to instead execute an animation from the old state to the new state over time.
Transitions are specified using the following properties:
transition-property – What property should animate, e.g., opacity.
transition-duration – How long the transition should last.
transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).
transition – A shorthand for all three properties.
Here is a simple example:
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
Each of these properties supports a comma separated list of values, like CSS3 multiple backgrounds, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
For example:
div {
-webkit-transition-property: opacity, left;
-webkit-transition-duration: 2s, 4s;
}
In the above style rule, opacity will animate over 2 seconds, but left will animate over 4 seconds.
Some very complex properties can actually be animated. Take, for example, the new -webkit-transform property. Here’s an example of a simple spin effect using -webkit-transform and -webkit-transition.
<div style="-webkit-transition: -webkit-transform 3s ease-in" onclick="this.style.webkitTransform='rotate(360deg)'"> This div will do a spin when clicked! </div>
Borders can also be animated. The following box has a simple border animation where the border will both grow in thickness and change color when the box is hovered.
Note with the hovering examples that the animation will reverse itself when the mouse moves out of the div. Any time the property changes value, the animation will simply start again with the current position as the from value and the new value as the destination. The transition properties of the source state are used to figure out how to animate to the new target state.
The key points to understand about transitions are:
(1) They are implicit animations. Scripts and stylesheets can be written as normal, and the animations will simply happen implicitly as the properties change values.
(2) They degrade gracefully. Browsers that do not support transitions simply won’t animate, but otherwise all code and style rules can remain the same.
Here are more detailed descriptions of the properties. All of these properties can take multiple comma-separated values.
transition-property
Values: none | all | <property>
Initial Value: none
Description: Specifies what property triggers an animation. A value of none means there is no transition (the default). A value of all means that every animatable property triggers an animation. Otherwise an animation will only trigger when the exact specified property changes value.
transition-duration
Values: <time>
Inital Value: 250ms
Description: Specifies how long the transition should take. The default is 250ms.
transition-timing-function
Values: default | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
Initial Value: default
Description: The transition-timing-function property describes how the animation will proceed over time. Keywords can be used for common functions or the control points for a cubic bezier function can be given for complete control of the transition function. To specify a cubic bezier function, you give an X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1). These 4 points are used to compute a cubic bezier curve.
The timing function keywords have the following definitions:
linear – The linear function just returns as its output the input that it received.
default – The default function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in – The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out – The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out – The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier – Specifies a cubic-bezier curve whose P0 and P3 points are (0,0) and (1,1) respectively. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2).
In future posts I’ll go into transitions in more detail and also talk about another feature we’re adding: explicit animations. We are also preparing a more detailed proposal (full of intimidating spec language) that covers our thoughts on transforms, animation and other advanced visual effects.
(Via Surfin’ Safari.)
Aptana Studio 1.0 Released!
We are very proud to release Aptana Studio 1.0 (formerly Aptana IDE). After over two years of non-stop development and over a million downloads, we have finally reached “1.0″. Along with the release of 1.0, we have also created two editions of the product: Community and Professional. The Community Edition is the keystone of the Studio product, where all core features and capabilities are developed. The Professional Edition brings additional features and services beyond the free Community edition.
Some of the new features we’ve added to Aptana Studio 1.0 Community Edition:
- CSS Preview
- HTML, CSS, and JavaScript Formatting
- Code drag and drop
- Visual ScriptDoc Explorer
- Enhanced Dynamic Help System
- Tons of User Interface Polish
Some of the extra features we’ve added to Aptana Studio 1.0 Professional:
- JSON Editor
- Internet Explorer Debugging
- Remote Project Creation
- FTPS and SFTP Support
- Reporting Engine
Besides new features, the Professional Edition also includes priority support and access to the latest nightly and prereleased features across all of our development, including RadRails, PHP, Adobe AIR, and iPhone support.
Aptana Studio isn’t the only product we’re working on, and you’ll see more from us soon. In the mean time, if you are using Aptana Studio professionally, support our efforts by ‘going Pro’. Whichever edition you chose to use, Community or Professional, we look forward to your feedback, feature requests, and comments. It is our community that helps us build a better product — a product that ultimately is for you.
Get started by visiting our home page and read all about it!
-Paul Colton, CEO
(Via Aptana :: Weblog.)
Songbird 0.3 Is Launched!
Birdwatchers,
Big news! Today Songbird shows some wing, shows some leg and leaps media players into the next era of innovation.
Today, Pioneers of the Inevitable launches Songbird 0.3 “Developer Pre-release”, also know by its codename Bowie, available here at Songbirdnest.com. So much to say. Let's get started.
Songbird Webpage API
If you've tried previous Songbird releases, you know that Songbird is a desktop media player mashed-up with the Web. Now the tables are turned: Web developers can mash-up their websites with a desktop media player. Songbird's Webpage API makes media player features accessible to the webpage author, collapsing the barrier between media player and website.
Early feedback from Webpage API implementors including indie music store Insound.com and music blog aggregator HypeMachine is that the integration is easy and that they anticipate their users will prefer a simpler, more integrated player-Web experience.
users to discover, play and buy music they love. Using the API we
were able to customize the experience and highlighted all important
aspects of our sites – music blogs content, merchant links and, of
course, the music.”
Anthony Volodkin, The Hype Machine
simplify our customers' purchase experience. With Songbird, Insound
customers can buy tracks from within their media player and the music
appears in their music library. Songbird allowed Insound to have an
iTunes-like purchase experience with just a few lines of Javascript.”
Joe Webber, Insound.com
Starting today, Songbird is open to download stores, subscription services, radio services, social networking services, recommendation services, locker services, music blogs and other digital media services a crafty Web developer may devise.
Songbird Add-on API
Songbird 0.3 also lands documented, supported APIs for add-on developers. Firefox extension and Winamp plug-in developers should check it out. Like Firefox Add-ons, Songbird Add-ons are simply mark-up and Javascript in a zip file. Like Firefox, Songbird notifies users when a fresh add-on update is available, keeping the love alive.
Update: Greasemonkey and mashTape add-ons just released for Songbird 0.3 and kick ass.
Songbird Feathers API
Songbird's Feathers have been meticulously preened, making it easier than ever for visual designers to customize Songbird's appearance and share their own feathers with other 'birders. Styling Songbird's Feathers and webpages both use CSS, so visual designers can extend their Web design expertise to Songbird Feathers.
Update: The Feathers Wizard walks visual designers through the steps of creating and sharing feathers. You'll find “Create New Feathers” under the Songbird 0.3 Tools menu if you installed the Developer Tools Add-on. Also, check out iBird. ;)
The Songbird Community is the Mozilla Community
Finally, I'd like to thank and recognize the exceptional work of the 20+ full-time Songbird product designers and developers here at Pioneers of the Inevitable and the 1,800+ Songbird community developers and QA volunteers who directly contributed to Songbird 0.3. You are rockstars.
Moreover, Songbird is built on the Mozilla platform, so we 'birders give a pterodactyl squawk to the Mozilla community. Mozilla's Chief Lizard Wrangler Mitchel Baker recently blogged that 10,000 Mozilla community developers contributed to Firefox 2 in 2006, that the Mozilla community has grown so much recently that its prepared to move “beyond sustainability.” This is extraordinary news for all Web surfers, and specifically the Mozilla community, Mozilla platform, Firefox and Songbird.
Enough for now. Please install 0.3, experiment with the Webpage API, try the Insound.com or HypeMachine integration, port your Firefox extension to Songbird or create feathers. Play the Web!
Chirps,
Rob Lord
<!–
–>
Install Leopard on a PC
Why would you want to install Leopard on a PC, when buying a Mac will work much simpler? Mostly because you can swap out the hardware and build a ridiculously fast Mac — faster than any that are out there.
Specifically, take the case of BrazilMAC, a hacker living in the UK who who a how-to guide so that it would run natively on non Cupertino-blessed Intel-based hardware. As he said in a recent interview with InfoWeek:
“You can build your system for a lot less than a real Mac and get the performance of a top-dollar Apple machine. This is fact and a lot of the real Mac users will deny, but it is fact. My machine runs a e4300 Core Duo Processor over-clocked to 3.40 GHZ. Where can you get a 3.4-GHz Mac? It will cost you a fortune. I have 1066-MHz DDR2 memory. Where can you get that on a real Mac???”
Now, even if he’s running on generic PC hardware, he’s still a convert where it counts:
“Why run OS X? Well, when you are just used to Windows, it is like living inside a house and not experimenting the whole world out there. Once you get out of it, it is just amazing. Mac is just that: You just feel like glued to the computer. Everything is just beautiful, the interface, the stability. Once you experiment it, you don’t want to go back to windows. Trust me.”
(Via MacUser.)
Classes in JScript – Part II: Instance Properties / Methods & Class Properties / Methods
In this post I will discuss more about the Instance Properties & Instance Methods and Class Properties and Class Methods.
I will take the same example that was used for the first part and will keep updating it as and when required.
function Rectangle (ht, wt) {
this.height = ht;
this.width=wt;
}
Rectangle.prototype.area = function() {return this.height * this.width;}
var rect1 = new Rectangle(5,10);
var rect2 = new Rectangle(2,4);
var rect1Area = rect1.area(); // rect1.area() will return 50.
var rect2Area = rect2.area(); // rect2.area() will return 8.
The above sample code defines a constructor function Rectangle. Rectangle has 2 properties height and width. It also has one method area added to its prototype.
In the above example every instance of Rectangle will have its own copy of width and height properties. These properties are accessed through the individual instances created. For e.g.
height property of rect1 can be accessed and assigned to height of rect2 as
rect2.height = rect1.height;
The above line of code shows that these properties can be read from or written to using the individual instances with which they are associated.
Such properties are known as Instance Properties.
So what about area method? This too is accessed using an instance of Rectangle. This would classify as an Instance Method.
An Instance Method is similar to Instance Property except for couple of differences. One of them is that it is a method rather than a data value. The other is that each instance does not have its own copy of Instance Method. The implementation of such a method uses this keyword to refer to the object or instance on which it was invoked.
Both Instance Property and Instance Method can be accessed through an object instance only.
What happens when I add the following statement to the above example?
rect1.area = function() {return ½ * this.height * this.width;}
How does this affect rect1? Would this affect all other instances of Rectangle?
To answer these questions, it is necessary to understand the fundamental difference in the way Jscript treats reading and writing of properties.
When we try to read a property (e.g. area) of an object (e.g. rect1), JScript interpreter first checks if the property queried for is defined by rect1 object.
If it is not defined by rect1, then JScript interpreter checks whether the property is defined by rect1’s constructor’s prototype object.
If it is not defined by the constructor’s prototype then the interpreter can follow the prototype chain all the way up to Object object if necessary.
When we try to write (add) a property (as in the above e.g. area to rect1), JScript creates a new property (area) for that particular object (rect1) if no property with the same name is already created on it. So rect1 now has its own property area. JScript does not look up the prototype object when adding a property.
Going by the above explanation for reading a property, whenever rect1.area() is called, always the newly defined property (one on rect1) would be invoked and not the one defined on the prototype object.
However when we call rect2.area(), since area property is not defined by rect2, it will still call the one defined by its constructor’s prototype object.
Summarizing the above – A new property defined on an object overrides the property having same name defined on its prototype object but it does so only for itself. (rect1.area overrides Rectangle.prototype.area only for rect1.) No other instances of Rectangle get affected.
In the above e.g. I want to classify a rectangle as SMALL or BIG depending on its area. Any rectangle which has area less than 10, would be of type SMALL else BIG.
So I define a property:
Rectangle.MINBIGSIZE = 10;
MINBIGSIZE is a property created on the function constructor (Class) Rectangle and not on its instances or prototype object. This is an example of Class Property.
Class Property is a property that is associated with the Class itself and not the instance of the Class.
Irrespective of the number of instances created, there will always be one copy of the Class Property. This property is accessed through the class itself.
In order to figure out whether the rectangle is SMALL or BIG, I define a method type which will determine it.
Rectangle.type = function (obj) {
var retType;
obj.area()<Rectangle.MINBIGSIZE ? retType=”SMALL” : retType=”BIG”;
return retype;
}
Just as MINBIGSIZE, type is created on the constructor function Rectangle. This is an example of Class Method. A Class Method is nothing but a function defined as a property of the Constructor. A Class Method is a method associated with the Class itself and not with an instance.
The above defined method can be called as shown below:
Rectangle.type(rect1); // would return BIG.
This completes the overview on Instance & Class properties / methods. In the next post, I will discuss data encapsulation and inheritance.
Hope this post was helpful and you enjoyed reading it!!
Thanks,
Ritesh
SDET, JScript Team.
(Via JScript Blog.)
Write your first JavaFX Script
Jim Weaver has posted a simple tutorial on writing your first JavaFX Script which discusses how you can use the JavaFX Pad to get it working.
-
-
/*
-
* HelloJFX.fx – A JavaFX Script "Hello World" style example
-
*
-
* Developed 2007 by James L. Weaver (jim.weaver at jmentor dot com)
-
*/
-
package jfx_book;
-
-
import javafx.ui.*;
-
import javafx.ui.canvas.*;
-
-
Frame {
-
title: “Hello World-style example for JavaFX Script”
-
height: 100
-
width: 400
-
content:
-
Canvas {
-
content:
-
Text {
-
font:
-
Font {
-
faceName: “Sans Serif”
-
style: BOLD
-
size: 24
-
}
-
x: 10
-
y: 10
-
content: “Hello JavaFX Script Developer!”
-
}
-
}
-
// Show the Frame on the screen
-
visible: true
-
}
-
// End of listing
-
Do you like the declarative code here?
(Via Ajaxian.)
leave a comment