Hok's Macromedia Flash Blog

macromedia flash actionscript scripting, php, remoting, webservices, c#, javascript

Ads

Search

Flair-Patter: real-world example textFieldAutoComplete

So, after wrangling around with the Flair-Patter,
i have created an Autocomplete-Flair, based on
the autocomplete-code of brandon halls and
samual wans book.
view
download




In compare with the State-Patter the Flair-Patter,
is faster to implement and the target-object did not
need to know anything about his flair. The consequence
is that the target-object must have broadcaster,
to that the Flair-Object can listen to.
If youre target-object do not have a broadcaster
mostly the State-Patter is the better choice, to implement
the behaviour of dynamic changing the class(state-change).
Where did you see the pros and cons of these two patterns?

//
// ::: namespace :::
if (TextFlair == undefined) {
   _global.TextFlair = new Object();
}
//
// ::: constructor :::
TextFlair.AutoComplete = function (pTxtTarget) {
   this.init(pTxtTarget);
}
//
// ::: flair-static-methods :::
TextFlair.AutoComplete.snapOn = function (pTxtTarget) {
   pTxtTarget.$flairAutoComplete = new this(pTxtTarget);
   //
   pTxtTarget.addListener(pTxtTarget.$flairAutoComplete);
}
//
TextFlair.AutoComplete.snapOff = function (pTxtTarget) {
   pTxtTarget.removeListener(pTxtTarget.$flairAutoComplete);
   //
   delete pTxtTarget.$flairAutoComplete;
}
//
// ::: object-methods :::
o = TextFlair.AutoComplete.prototype;
//
o.init = function (pTxtTarget) {
   this.INT_MAX_STORAGE = 10; // configure
   //
   this.txtTarget = pTxtTarget;
   this.strLastText = this.txtTarget.text;
   this.lso = null;
   this.hashAutoComplete = this.getAutoCompleteHash();
}
//
o.onChanged = function () {
   if (this.txtTarget.text == this.strLastText) {
      return;
   }
   //
   this.strLastText = this.txtTarget.text;
   //
   this.processAutoComplete();
}
//
o.processAutoComplete = function () {
   var strText = this.txtTarget.text;
   var intCaretIndex = Selection.getCaretIndex();
   //
   if (Key.getCode() == Key.BACKSPACE || Key.getCode() == Key.DELETEKEY) {
      this.txtTarget.text = strText.substr(0, intCaretIndex);
   } else {
      for (var p in this.hashAutoComplete) {
        if (p.indexOf(strText.substr(0, intCaretIndex)) == 0) {
           this.txtTarget.text = p;
           Selection.setSelection(intCaretIndex, p.length);
        }
      }
   }
}
//
o.getAutoCompleteHash = function () {
   this.lso = sharedobject.getLocal(this.txtTarget._name, _url);
   //
   if (this.lso.data.hashAutoComplete == undefined) {
      this.lso.data.hashAutoComplete = new Object();
   }
   //
   return this.lso.data.hashAutoComplete;
}
//
o.saveHints = function () {
   this.hashAutoComplete[this.txtTarget.text] = 1;
   //
   this.deleteOverFlow();
}
//
o.deleteOverFlow = function () {
   var i = 0;
   for (var p in this.hashAutoComplete) {
      i++;
      if (i > this.INT_MAX_STORAGE) {
        delete this.hashAutoComplete[p];
      }
   }
}
//
delete o;

//
// test
// add flair
TextFlair.AutoComplete.snapOn(txtName);
TextFlair.AutoComplete.snapOn(txtCountry);
// saves input-text as hints
saveHints = function () {
   txtName.$flairAutoComplete.saveHints();
   txtCountry.$flairAutoComplete.saveHints();
}
// setup the button
btnSend.setClickHandler('saveHints');

Posted by hOk at May 12, 2003 06:46 PM

Comments (4)

Nice example Holger.
If i would have to compare flair with state, i would say the state pattern has another intention than flair. It wouldn't make sense to attach more than one "state" at a time but attaching two or more flairs can be useful.

The only thing i don't like about flair is the creating of a new property in the flaired instance. We could also use a list of instances in TextFlair.AutoComplete to hold references to the flairs.

regards,
bokel

Posted by bokel at May 12, 2003 07:58 PM

Yes, good point, if state is good for simulating
different meals, so is flair good to put
different spices to your meals. But spicery can
be so strong that the client think that he is
eating a nother meal and this is realy not the
intention of using spices...;-)
I can understand that you do not like the point
of adding properties, it is rebiously, but if you
delete your subject the flair is also gone and
that is the argument why i use it and i can see
no side-effects.
regards, Holger

Posted by hOk at May 12, 2003 09:09 PM

Actually there are no sideeffects. But still this technique breaks encapsulation. I posted a slightly changed version of your code to http://www.helpqlodhelp.com/blog/archives/000027.html

Maybe its just an academic discussion, though :)

Posted by bokel at May 13, 2003 12:44 AM

Ah...gotta love design patterns. Should have thought of that when I was working on this...I came up with an autocomplete prototype, but put it directly on the textfield object...the code is available at http://www.jasonnussbaum.com/as/TFAutoComplete.as. Any feedback on this would be great...

Posted by jason at July 15, 2003 04:04 PM


Name:


Email Address:


URL:


Comments:



You can use <code>code that should be highlightned</code> to highlight code!
Optionally you can use the attribut language="php|perl|java" within the code tag, otherwise
actionscript-highlightning will be used.

New Place