sfPopup használata

A minap abba a problémába ütköztem, hogy Samsung SMART TV alkalmazásban egy popup stílusú dialógus ablakot kellett készíteni. Nos a megoldás kézenfekvő, ezt meg lehet oldani jQuery segítségével és nem kell a ECMAScript stílusban megírni a kódot. A gondot viszont az jelenti, hogy a Samsung SMART TV fejlesztői API elírásai igencsak vérszegény leírások. A google keresője sem sokat segít ebben a feladatban. Ami viszont segítség, hogy a SMART TV emulátorában lehet debuggolni a Javascript kódot és a nyomkövetés közben meg lehet nézni a gyári függvényeket, illetve bele lehet "kukkantani" az sfPopup működtető kódjába. Ennek segítségével hoztam létre az alábbi működő popup ablakot.

index.html tartama:

 
  
  

  
  
  
  
   
  
        
        
  
  
  
  
  
  
  

  
  

  

 

 
   
  
  

   
  

  
Ez egy tartalom
  
 

Main.js tartalma:

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var pluginAPI = new Common.API.Plugin();
var fileSystemObj = new FileSystem();

var Main = {
 selIndex : 0,
 selListIndex : 0,
 SCROLL_UP : 1,
 SCROLL_DOWN : 2,
 use_scrollbar : false,
 scrollb_height : 0
};

Main.list = new Array();
Main.list_ex = new Array();

Main.onLoad = function() {
 // Enable key event processing
 this.enableKeys();
 widgetAPI.sendReadyEvent();
 this.list.push("A", "B", "C", "D", "É", "J", "K", "L", "M", "Q", "G", "S");
 this.init();
};

Main.onUnload = function() {

};

Main.init = function () {
 
 $("#popup").sfPopup({
  text: "",
  buttons: [], // "OK",
  title: "Gyors kereső",
  timeout: 0,
  defaultFocus: 0,
  keyhelp: {'UPDOWN':'Navigáció', 'ENTER':'Kiválaszt', 'RETURN':'Vissza'},
  //keyhelp: {'UPDOWN':'navigate', 'ENTER':'Select', 'RETURN':'Back'},
  callback: function (index) {
   
   dialogCallBack(Main.selIndex);
   
   Main.enableKeys();
  },
  onkeydown: function(keyCode) {
   
   alert("popup onkeydown event KEYDOWN : " + keyCode);
   
   if (event.defaultPrevented) {
    switch (keyCode) {

    case tvKey.KEY_ENTER:
     this.hide();
     break;
    case tvKey.KEY_UP:
     
     if (Main.selIndex == 0) {
      Main.selIndex = Main.list.length - 1;
     } else {
      Main.selIndex--;
     }
     Main.updateListSelection(Main.SCROLL_UP);
     break;
    case tvKey.KEY_DOWN:
     
     if (Main.selIndex == Main.list.length - 1) {
      Main.selIndex = 0;
     } else {
      Main.selIndex++;
     }
     Main.updateListSelection(Main.SCROLL_DOWN);
     break;
    }
   }
   sf.key.preventDefault();
   
   return true;
  }
  /*,
  actionpopup: true
  */
 });
};

function dialogCallBack(param) {
 alert("selected index: " + param);
 //$("#popup").sfPopup("hide");
 var item = Main.list[param];
 $("#text").html(param + ' érték: ' + item);
}

Main.enableKeys = function() {
 document.getElementById("anchor").focus();
};

Main.getListHtml = function () {
 var res = "";
 
 for (var i = 0; i < 5; i++) {
  if (i < this.list.length) {
   res += '
' + this.list[i] + '
';
  } else {
   res += '

';
  }
 }
 /*
 for (var i = 0; i < this.list.length; i++) {
  res += '
' + this.list[i] + '
';
 }
 */
 res = '

' + res + '





';
 
 return res;
};

Main.initScroll = function() {
 
 if (this.list.length > 5) {
  
  $("#scrollbgalls").addClass('scrollbgalls');
  $("#scrollmarkalls").addClass('scrollmarkalls');
  $("#scrollbgalls").show();
  $("#scrollmarkalls").show();
  $("#scrollbgalls").height($(".internal_list").height());
  this.use_scrollbar = true;
  this.scrollb_height = $("#scrollbgalls").height() - $("#scrollmarkalls").height(); 
 } else {
  
  $("#scrollbgalls").removeClass('scrollbgalls');
  $("#scrollmarkalls").removeClass('scrollmarkalls');
  $("#scrollbgalls").hide();
  $("#scrollmarkalls").hide();
  this.use_scrollbar = false;
 }
};

Main.updateListSelection = function(move_direction) {
 
 var len = this.list.length;
 if (len > 5) {
  len = 5;
 }
 
 if (move_direction == Main.SCROLL_DOWN) {
  
  if (this.selListIndex < 4) {
   this.selListIndex++;
  } else {
   
   if (this.selIndex == 0) {
    
    this.selListIndex = this.selIndex;
    
    // frissiteni kell a tartalmat
    for (var i = this.selIndex; i < len; i++) {
     var item = '#item_' + i;
     var li = $(item);
     if (li != undefined) {
      li.html(this.list[i]);
     }
    }
   } else {
   
    // frissiteni kell a tartalmat
    var j = 0;
    for (var i = this.selIndex - 4; i <= this.selIndex; i++) {
     var item = '#item_' + j;
     var li = $(item);
     if (li != undefined) {
      li.html(this.list[i]);
     }
     j++;
    }
   }
  }
  
 } else if (move_direction == Main.SCROLL_UP) {
  
  if (this.selListIndex == 0) {
   
   if (this.selIndex == this.list.length - 1) {
    
    var j = 0;
    for ( var i = this.selIndex - 4; i <= this.selIndex; i++) {
     var item = '#item_' + j;
     var li = $(item);
     if (li != undefined) {
      li.html(this.list[i]);
     }
     j++;
    }

    this.selListIndex = 4;
   } else {
    
    var j = 0;
    for ( var i = this.selIndex; i < this.selIndex + 5; i++) {
     var item = '#item_' + j;
     var li = $(item);
     if (li != undefined) {
      li.html(this.list[i]);
     }
     j++;
    }
   }
   
  } else {
   this.selListIndex--;
  }
 } 
 
 for (var i = 0; i < len; i++) {
  var item = '#item_' + i;
  if (i == this.selListIndex) {
   $(item).addClass('selected_item');
   $(item).blur();
  } else {
   $(item).removeClass('selected_item');
  } 
 }

 if (this.use_scrollbar) {
  
  var top = (this.scrollb_height / (this.list.length - 1)) * this.selIndex;

  $("#scrollmarkalls").css("top", top + "px");
 }
};

Main.keyDown = function() {
 var keyCode = event.keyCode;
 alert("Key pressed: " + keyCode);

 switch(keyCode)
 {
  case tvKey.KEY_RETURN:
  case tvKey.KEY_PANEL_RETURN:
   alert("RETURN");
   widgetAPI.sendReturnEvent();
   break;
  case tvKey.KEY_LEFT:
   alert("LEFT");
   break;
  case tvKey.KEY_RIGHT:
   alert("RIGHT");
   break;
  case tvKey.KEY_UP:
   alert("UP");
   //this.ShowPopup();
   break;
  case tvKey.KEY_DOWN:
   alert("DOWN");
   
   break;
  case tvKey.KEY_ENTER:
  case tvKey.KEY_PANEL_ENTER:
   alert("ENTER");
   break;
  case tvKey.KEY_RED:
   this.selIndex = 0;
   this.selListIndex = 0;
   $("#popup").sfPopup("option", "text", this.getListHtml());
   $("#popup").sfPopup("show");
   this.initScroll();
   this.updateListSelection();
   break;
  case tvKey.KEY_GREEN:
   
   break;
  default:
   alert("Unhandled key");
   break;
 }
};

Ezt a fenti kódot futtatva az alábbi kinézetű ablak fog megjelenni: