Thursday, October 11, 2007

Adobe MAX 2007 conference: visitor notes

I have to admit that these four thousand people at the conference in majority were very enthusiastic, showed a lot of interest and eager to learn and to be at the top of the technological edge. Adobe gathered a lot of companies and individuals who combined various production line ideas and tricks in attempt to create something new. And many of them succeed. No doubt there was what to see and what to do.
My prime interest was Flex and ActionScript 3.0. Accordingly I attended sessions related to these technologies. Here at glance some thoughts and ideas which caught my attention during sessions:

In Customizing the Flex Framework session:
Skinning, effects, data descriptors, collections, validators, formatters can be extended to implement our own components.
Speaker pointed the use of tag which adds a new scope of content, and if we want to access outer scope from our component, we use 'outerDocument'.
In case of bug in Flex framework impossible to find a workaround for we can "patch the framework". And here we have several options:
Option 1. Extend control as a custom component.
Option 2. Copy class to separate package.
Option 3. Edit mx.* class directly.
A mxml file, which is a main project file format in Flex, is compiled into ActionScript class. And any swf file can be “decompiled” (at least names of classes and methods can be retrieved) relatively easily, because each swf file includes ActionScript binary code (abc) within.

Concerning Best Practices for Developing with ActionScript 3.0 Flex team highly suggests use interfaces and design patterns. First patterns to consider might be Singleton and Observer patterns (from Design Patterns in ActionScript 3.0 session), and Model View controller pattern which "addresses richness of the user interface challenges to help create more flexible applications".
More recommendations include:

Follow name conventions: packagename|ClassName|varName|CONST_NAME;
Stay AWAY from global scope;
Make sure to set optimize compiler to true: (mxmlc -optimize=true);
Do not use generic objects like ClassObject;
Cast array element to particular type;
Don't use uint in loop. Use int for (var i:int=0; iUse runtime share libraries (RSL) and modules


During Flash Player Cross-Domain Security session we discussed security rules and practices. Four rules to take care of security are:
Rule 1. Give least permissions.
Rule 2. Validate input.
Rule 3. Deploy HTTPS consistently.
Rule 4. Prototype early.
Speaker also suggested do not use mix https and http protocols.

For internationalization support in application during Building Global Flex Applications session the audience was introduced to ResourceManager class, resource bundle compiler option, property files, and two ways of including locale content: either embed into one swf or keep all resources separate.

What Makes an interface Feel Intuitive session was about gap between user’s Current knowledge and Target knowledge. This gap - where design is; this is what we care about.
Intuitive means personal. To user.

During Optimizing Aptionscript 3.0 Performance we were suggested
remove listeners when we've done;
put debug code into metatags, and during compiling trip them out;
remove loops by myArray.length (change length to variable);
use != null && is Array instead of try-catch;
use bitwise operators.


We talked about styles on Building Stunning Flex Applications with Flex builder and Creative Suite 3 session. Most amazing was publishing Flash CS3 style template and importing it into Flex using "Flex Skin Design Extensions" for Flex 3 which can be downloaded here: http://labs.adobe.com/downloads/flex_sdext.html. I consider this as an efficient way of graphical skinning. In case of proper names import wizard can recognize Flex objects and create ActionScript required to assign the skin.

Using Adobe Integrated Runtime (AIR) APIs session explained the ways of saving files with:
1. Save dialog
2. Copy to clipboard
3. Drag-n-drop on desktop (which is 'visual' type of clipboard).
Also differences between synchronous (open -> writeMultiByte -> close) and asynchronous (use of events) file operations.

Integrating Flex with Ajax and the Browser session was about Flex-Ajax Bridge (FABridge) - project from Adobe Labs, which makes ActionScript classes available to JavaScript without any additional coding; presented possibilities providing the whole content of Flex application from external xml during runtime; and a “deep linking” (browser history management) mechanism.

Flex 3 browser Back button support: http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Deep_Linking

Thursday, July 26, 2007

Mainstream is Flex 2. Today.

Ok. It's been a while I have not posted here. The main reason is I am not THAT interested in DHTML these days since I joined Packeteer. I immediately started to learn and develop on Adobe Flex 2 and Apollo (which is called AIR now). For the last three months I've learned many tricks how to make actual application work, how to build web site on it, and make it dynamic.
Just want let you know I am here, not actually looking for another job, and probably will start postings about Flex, because it is really COOL.
Cheers.

Saturday, March 24, 2007

Add zero-width spaces every 10 characters

For dynamic pages sometimes you can't say in advance what exact content will be, and therefor you have no control of actual content, for example words can be very long, and not wrappable by browser. For this purposes I use special zero-width space (x200B) which exists in HTML specs. I wrote a function which you call on strings whenever you need it: yourStr.HTMLwrap()
Here it is:
/** Add zero-width spaces every 10 characters */
String.prototype.HTMLwrap = function() {
    var i = 0;
    var a = '';
    var len = this.length;
    while(len > i*10+10) {
        a += this.substr(i*10, 10) + '\u200B'
        i++;
    }
    return a + (i>0?this.substring(i*10, this.length):this);
}

Saturday, February 24, 2007

How to test javascript performance time

First, create area where results will be output. You can adjust any style property to fit your needs. Minimum what you need to change is "parentNodeId":

// Test env
function testEnv() {
 var parentNode = document.getElementById("parentNodeId");
 if (parentNode) {
  var testNode = document.createElement("div");
  testNode.id = "testEnv";
  testNode.style.height = "7em";
  testNode.style.backgroundColor = "white";
  testNode.style.overflow = "auto";
  testNode.style.border = "1px solid #778899";
  testNode.style.textAlign = "left";
  testNode.style.overflowX = "hidden";
  testNode.style.whiteSpace = "nowrap";
  parentNode.appendChild(testNode);
 }
}

Then, in the function or any piece of the code you are testing, write:
in the beginning:

var beginTime = new Date().valueOf();

and finally, at the end:

if (document.getElementById("testEnv"))
  document.getElementById("testEnv").innerHTML =
    "execution time: " +
    (new Date().valueOf()-beginTime)/1000 +
    " sec<br/>" +
    document.getElementById("testEnv").innerHTML;

Thursday, February 15, 2007

"The webpage you are viewing is trying to close this window"

In Internet Explorer 6 there is the way to close window by javascript without warning: "The webpage you are viewing is trying to close this window":


window.opener = top; window.close();

But not in IE 7 unless window was opened by your javascript from other window.

Adding event listener on the page

Suppose you have an input field and you need FilerTag function be performed each time user types a character. Below are two approaches for this.

Native browser approach:


if (a.addEventListener) {a.addEventListener("keyup", FilterTags, false)} // firefox
else if (a.attachEvent) {a.attachEvent("onpropertychange", FilterTags)} // ie

YUI approach:

YAHOO.util.Event.addListener(a, "keyup", FilterTags);