Rev. 2.73

dojo_exel.png

Dojo 툴킷을 사용한 Ajax 스프레드시트입니다. 용량 282kb에 10,996라인이 코딩된 하나의 자바스크립트 파일로 구성되어 있군요. 간단하게 금연 일지를 작성해 보았는데요. 메모리 랙이 심해서 순조롭게 사용할 수준은 못됩니다. 브라우저의 자바스크립트 처리능력 한계가 보이는군요. Dojo 스프레드시트의 특징은 콤보박스 툴바, 키보드 네비게이션, 셀 리사이즈, 셀 포메팅 그리고 실시간 계산식 함수를 내장하고 있습니다. 자바스크립트로 스프레드시트를 만든 것 중 현재 최고 수준인 듯 합니다. 흠, 역시, 데스크탑과 같은 API를 구현하는 데에는 Dojo가 으뜸이군요.

자바스크립트 엑셀레이터 같은 것이 나오면 좋으련만...

Comments

Password:

sthenicRuby on Rails 로 구축된 Ajax 파일공유 서비스입니다. 동적인 암호 품질 그래프와, 파일 업로드 프로그레스-바가 잘 구현되 있어서 후벼 봤습니다. 파일 업로드 프로그레스바는 완전 구라더군요. 전송량에 상관없이 무조건 100%로 달립니다. ㅡ,.ㅡ;

※ 이 페이지는 RSS리더기에서 정상으로 보이지도 않을 뿐더러 작동하지도 않습니다. :(

Comments

humanized.png

우리는 그동안 '띵~' 하면서 뜨는 대화상자(자바스크립트 Alert)를 지겹도록 보아왔다. 보다 인간다운 컴퓨터 인터페이스 디자인을 연구하는 회사인 Humanized에 따르면, 대부분의 사용자들이 팝업되는 대화상자의 메시지를 제대로 읽지 않고 닫아버린다고 한다. 이것은 무서운 결과를 초래할 수도 있다고 경고하고 있다. 그들은 메시지를 조금 더 효율적으로 전달 할 수 있도록 '투명 메시지(The transparent message)'라는 자바스크립트 라이브러리를 공개하였다. 아래의 링크를 클릭해 보자.

alert('안녕하세요!')
alert('The Web is still changing!!')

이 라이브러리는 브라우저에서 기본으로 제공하는 자바스크립트 함수인 alert을 오버라이드(override)하여 사용하기 때문에 별도의 추가작업을 하지 않아도 대화상자를 투명 메시지로 교체 할 수 있다. humanized가 공개한 자바스크립트 소스MochiKit 프레임웍을 기반으로 제작되어 있어서 PrototypeScriptaculous 프레임웍 기반으로 변환하였다. 추후 confirm과 prompt함수까지 오버라이드해 볼 생각이다.

/** 
 * Prototype base Transparent Message.
 * @copyright Humanized, Inc.
 * @license Attribution-NonCommercial-ShareAlike 2.5
 * @author1 Aza Raskin <aza@humanized.com>
 * @author2 Firejune <to@firejune.com>
 * 
 * <style>
 *   .humanized_msg{
 *    position: absolute; left: 25%; width: 50%;
 *    color: white; background-color: #8CC63F;
 *    font-size: 36pt; text-align: center; 
 *  }
 *
 *  .humanized_msg .round{
 *     border-left: solid 2px white; border-right: solid 2px white;
 *    font-size: 1px; height: 2px;
 *  }
 *
 *  .humanized_msg p{ padding: .3em; display: inline;}
 *  </style>
 */

var transMsg = Class.create();
transMsg.prototype = {
  initialize: function(options){
    this.options = Object.extend({
      opacity: 0.9,
      offset: -150,
      foramt: '<div class="round"></div><p>%s</p><div class="round"></div>',
      effect: null,
      currMsg: ""
    }, options || {});

    this.hideEvents = ['mousedown', 'keydown', 'mouseout'];
    this.mouseAction = this.hideMessage.bindAsEventListener(this);
  },
  loadEvents: function(){
    var unload = this.unloadEvents.bindAsEventListener(this);
    for(var i=0; i < this.hideEvents.length; i++){
      Event.observe(document.body, this.hideEvents[i], this.mouseAction);
    }
    Event.observe(window, 'unload', unload);
  },
  unloadEvents: function(){
    for(var i=0; i < this.hideEvents.length; i++){
      Event.stopObserving(document.body, this.hideEvents[i], this.mouseAction);
    }
    //Element.remove(this.element);
  },
  createMessage: function(){
    this.element = document.createElement('DIV');
    this.element.className = 'humanized_msg';
    Element.hide(this.element);
    if(Prototype.Browser.Gecko){
      Element.setStyle(this.element, {position:'fixed'});
    }
    document.body.appendChild(this.element);
    this.loadEvents();
  },
  hideMessage: function(){
    if (Element.getOpacity(this.element) >= this.options.opacity){
      this.options.effect = new Effect.Fade(this.element, {duration:0.5});
    }
  },
  popMessage:function(message){
    Sound.play('spsacem');
    $(this.element).innerHTML = this.options.foramt.replace("%s", message);
    
    this.options.currMsg = message;
    Element.show(this.element);
  
    var height = Element.getHeight(this.element);
    var top = Position.scrollY()+(Position.getPageSize().window.height/2)-(height/2)+this.options.offset;
    if(Prototype.Browser.Gecko){
      top = (Position.getPageSize().window.height/2)-(height/2)+this.options.offset;
    }
    Element.setStyle(this.element, {top:top+'px'});
    Element.setOpacity(this.element, this.options.opacity);
  },
  showMessage:function(message){
    if(typeof this.element != 'object'){
      this.createMessage();
    }
    this.options.effect = this.options.effect? this.options.effect : '';
    if(this.options.effect != 'null' && this.options.effect.state == "running"){
      this.options.effect.options.afterFinish = function(){
        this.popMessage(message);
      }.bind(this);
    } else {
      this.popMessage(message);
    }
  }
};

transMsg = new transMsg(); // Transparent message initialize

function alert(message) {
	transMsg.showMessage(message);
};

Comments