Dotaz: JavaScript

[Sten Fil]

Ahoj,

pri click na element chci zavolat metodu

OnClick_.

Nevite jak zjednodusit ten zapis

.click (...)

Diky.

 

function Frm_Login (element)
{
    $(element).click ( function (frm) {
        return function () { frm.OnClick_(); };
    }(this));

};

Frm_Login.prototype.OnClick_ = function ()
{

     /* Nejake operace. */
};

 

 

Odpovědi

[Tarmaq]

priklad mi prijde dost neotesany, ale minimalne zjednodusit lze zbytecne zanoreni volani do dalsi funkce:

function Frm_Login (element)
{
    $(element).click ( function (frm) {
        return frm.OnClick_;
    }(this));
};

[Sten Fil]

Zkousim takovou "okenni" aplikaci, ktera by bezela v internetovych prohlizecich.

Pomoci knihovny dhtmlx vytvarim okna (formulare). Na test treba Frm_Test.

var okno1 = new Frm_Test ();

var okno2 = new Frm_Test ();

A potrebuju aby pri stisku daneho tlacitka na formulari se zavolala metoda

daneho objektu. Tak mi to prislo podobne jako v desktop aplikacich.

S JS zacinam takze mozna to je blbost. Uvidim casem.

 

Tady je cely priklad:

function Geozone_Frm_Login (ownerWS)
{
    /**
     * PRIVATE
     */
    var mThis = this;
    var mWin;
    var mCtlLogin;
    var mBtnLogin;
    var mOwnerWS = ownerWS;
   
    /**
     * PROPERTIES
     */
    this.BtnLogin = function () { return mBtnLogin; };
    this.Win = function () { return mWin; };
    this.CtlLogin = function () { return mCtlLogin; };
    this.OwnerWs = function () { return mOwnerWS; };

    /**
     * CONSTRUCTOR
     */   
    /* Vytvorime sebe. dhtmlxWindow. */
    mWin =  MV7.Dhtmlx ().CreateWindow ("FrmLogin" + MV7.UId (), 0, 0, 325, 125, 'Prihlaseni');
   
    /* Prusvitnost. */
    $(mWin).css ({'opacity' : '.90'});
   
    /* Tlacitka formu. */
    mWin.button('close').hide ();
    mWin.button('minmax1').hide ();
    mWin.button('park').hide ();

    /* Umisteni. */
    mWin.denyResize ();
    mWin.center ();
   
    /* Prvek Login */
    mCtlLogin = new Geozone_Ctl_Login ();
    mCtlLogin.Position (5, 5);

    mBtnLogin = new MV7_Widget_Button ('Prihlasit');
    mBtnLogin.Geometry (225, 70, 90, 30);

    $(mBtnLogin.Ele ()).click (function () {
        mThis.BtnLoginOnClick_ ();
    });

    /* Nahozeni prvku na form. */
    mWin.attachObject (mCtlLogin.Ele ());
    mWin.appendObject (mBtnLogin.Ele ());
};

Geozone_Frm_Login.prototype.BtnLoginOnClick_ = function ()
{
    var mThis = this;
   
    this.Win ().progressOn ();
    $(this.BtnLogin ().Ele ()).attr ('disabled', 'disabled');
   
    data = this.CtlLogin ().GetData ();
    MV7.Log ().Trace ('name: ' + data.name + '; pass: ' +data.pass);
   
    this.OwnerWs ().LoginTest (data.name, data.pass,
        function (recv) {
            mThis.LoginTestOnSuccess_ (recv);
        },
        function (obj)
        {
            return function (a, b) {obj.LoginTestOnError_ (a, b); };
        }(this)
       
        );
/*   
    function (obj)
    {
        return function (recv) { obj.LoginTestOnSuccess_ (recv); };
    }(this),
*/
};

/**
 * Volana po uspesnem zavolani WebSluzby Logintest.
 * @param recv
 * @return
 */
Geozone_Frm_Login.prototype.LoginTestOnSuccess_ = function (recv)
{
    var res;
   
    res = this.OwnerWs ().LoginTestResult (recv);
   
    MV7.Log ().Trace ('ReturnCode:' + res.ReturnCode);
};

Geozone_Frm_Login.prototype.LoginTestOnError_ = function (a, b)
{
    MV7.Log ().Info ('LoginTestOnError_' + a + b);
};
 

 

 

[Deleted [8409]]

Na okenni aplikace to chce nejaky toolkit (treba qooxdoo), tento kod vypada podle me strasne

[Sten Fil]

qooxdoo urcite vyzkousim.

Komplet strasne nebo snad jen nektere konstrukce ?

[Deleted [8409]]

Mi prijde takove neprehledne to vytvareni objektu, a ten objektovy system, ale to je tim, ze jsem zvykly na neco jineho a podle me cistejsiho. Jen se mrkni jak funguje objektovy system v qooxdoo, a uvidis, ze to ma neco do sebe (aspon do cistoty kodu urcite). Neco podobneho, ale velice lightweight jsem napsal v knihovne blite, ale jedna se jen o mini-knihovnu, ktera je vhodna jen na stranky, ne na aplikace (to byl cil).

Jinak tech frameworku je vic, ja jsem zminil qooxdoo, protoze s nim mam asi rok zkusenosti, a prijde mi to dobre navrzene;)

[Sten Fil]

No mne pripada, ze v JS jde pouzit styl modul (podobne C) i objekt (C++,C#).

Modul soubor js podobny souboru v C:

var Modul1 = function() {   
    /* Privatni promenne modulu. */
    var _xx = 0;
    var _xy = null;
    /* Verejne metody. */
    return {
        Metoda1 : function ()
        {
        },
        Metoda2 : function ()
        {
        }
    }
}();

V kodu pak volame metody

Modul1.Metoda1 ().

Tohle mi pripada dost jasne a funkcni.

 

Objekt. To je ten muj pokus. Priblizit se k objektum podobnym treba v C++ nebo C# se mi zatim nepodarilo.

Existuje spoustu knihoven, ktere to nejak implementuji, ale zatim sem tomu moc neporozumel.

Aby objekt mel sve privatni promenne a metody a verejne prommene a metody a fungovala dedicnost to

netusim jak udelat. Vzdy je tam nejake ale.

 

 

[Deleted [8409]]

No právě, tento systém je podle mě strašně nepřehledný a na větší projekt se mi to zdá šílené. Příklad vytváření objektů v qooxdoo:

qx.Class.define("myNamespace.A", {
  // Dědičnost.
  extend: qx.core.Object,

  // Konstruktor
  construct: function()
  {
    // Něco jako v jave super(), volání konstruktoru třídy, kterou rozšiřujeme (extend)
    this.base(arguments);
    
    // Něco ...
  },
  members: {
    // metody, v js je všecho jako virtual v C++:)
    tell: function()
    {
      alert("myNamespace.A.tell()");
    }
  }
});

qx.Class.define("myNamespace.B", {
  // Dědičnost.
  extend: myNamespace.A,

  // Konstruktor
  construct: function()
  {
    // Něco jako v jave super(), volání konstruktoru třídy, kterou rozšiřujeme (extend)
    this.base(arguments);
    
    // Něco ...
  },
  members: {
    // no a tady si tu metodu reimplementujeme
    tell: function()
    {
      // zavolá metodu tell z myNamespace.A
      this.base(arguments);

      // další kód...
      alert("myNamespace.B.tell()");
    }
  }
});

Viz dokumentace

Přijde mi to celkem čisté (na javascript až moc:) ). Qooxdoo umí i interfaces, mixins, properties, události, atd:)

[Tarmaq]

taky mam s qooxdoo asi dvoulete zkusenosti, neni to uplne spatne, ale jak rikas neni to uplne lightweight.. jinak kdyz jsme migrovali z 0.6.x na 0.7.3 tak to byl docela porod a ted uz je 0.8, do cehoz jsme se radsi ani nepousteli - nase aplikace ma cca 40k radku ;]

Na ukazku narychlo splacnuta trida:

qx.Class.define("b.tabview.ButtonFoo",
{
    extend : qx.ui.pageview.tabview.Button,

    construct : function(title)
    {
        this.base(arguments, title);
        this.setAppearance("tab-view-button-Foo");
        this.addEventListener('click', this.bar, this);
    },
    members :
    {
        prop1 : 'OMG',
        foo : function(blah)
        {
            return blah.roflmao();
        },
        bar : function(e)
        {
            alert(e.getTarget().getLabel());
        }
});

API

[Deleted [8409]]

Tak to já jsem něco začal v 0.7.3 a pak migroval na 0.8.0 (později SVN) a migrování proběhlo tím způsobem, že jsem mazal kód. 0.8 řada se mi zdá míň ukecanější (hlavně ty layouty jsou teď lepší, třeba udělat grid layout v 0.7.3 mi dělalo celkem problém). No bylo toho víc, i ten treeview mi teď přijde lepší, a teď nové virtual widgets se mi hodně zamlouvají.

Ale jak říkáš, qooxdoo je heavy, hodí se podle mě na admin rozhraní, webové aplikace, atd. Na normální webové stránky by to byl overkill (proto jsem napsal bLite).

[Andrej Herceg]

Pred nejakým časom som robil niečo v Ext JS. Keď som potom skúšal qooxdoo, tak mi ten kód vôbec nepripadal prehľadnejší (v porovnaní s tým Ext JS). :)

[Deleted [8409]]

Ext jsem nikdy nezkoušel kvůli licenci, takže nemůžu posoudit :)

[Tarmaq]

tak tak... ;] ale jinak co jsem koukal na nejaky ukazkovy priklad, tak mi to neprijde prilis odlisne od qooxdoo..

[Andrej Herceg]

Ext JS som používal pred zmenou licencie. :)

[Deleted [8409]]

Tak to vám nezávidím, co s tím teď :)

[mess]

Neupgradovat . Však to bude ještě chvíli držet pohromadě.

[Sten Fil]

Po precteni clanku na root zdrojak sem to upravil takhle.

function Frm_Login (element)
{

    var this_ = this;

    $(element).click ( function () {
        this_.OnClick_();
    });

};

Frm_Login.prototype.OnClick_ = function ()
{

     /* Nejake operace. */
};

[Ladicek]

Klíč je v tom, že v JavaScriptu i funkce je hodnota. Takže si s ní můžete házet jak chcete: přiřazovat do proměnné, předávat jiné funkci jako parametr a tak.

Takže i

$(element).click ( function () {
  this_.OnClick_();
});

by mělo jít ještě trochu zjednodušit, asi tak na

$(element).click ( this_.OnClick_ );

To vyplývá z toho, jak v jQuery funguje click: jako parametr dostane funkci, kterou zavolá při kliknutí na element. V původní variantě vytváříte anonymní funkci, která teprve zavolá tu, co chcete. Ale protože nic jiného se v ní nedělá, můžete funkci click předat rovnou tu funkci, kterou potřebujete zavolat.

[Sten Fil]

 

Dik za info.
Takhle mi to nejak nefunguje. Spoustim na FF 3.0 na debian.

$(element).click ( this_.OnClick_ );

Problem je v tom, ze v OnClick_ volam metody objektu viz. cely priklad nahore.
A v te metode OnClick_ je v tomto pripade this = elementu na kterem udalost nastala.

 

[Ladicek]

Máte samozřejmě pravdu, jQuery s this trochu šaškuje, jak já v tom pravidelně nepracuju a znám to jenom povrchně, tak jsem na to zapomněl. Ale na principu to nic nemění.