xxxmatko blog

Javascript help methods - Part 1

xxxmatko — Thu, 12 Apr 2012 09:12:00 GMT

Z času na čas, počas takého kľudného programovania, sa môže objaviť nejaký malý problém, ktorý treba vyriešiť. Ak je riešenie opakovateľne aplikovateľné a využiteľné aj pri iných podobných situáciách, u mňa realizácia skončí implementáciou tzv. helper metódy. Na tomto mieste by som sa chcel podeliť o moje riešenia týkajúce sa javascriptu. Možno niekomu pomôžu a uľahčia mu prácu, prípadne prostredníctvom konštruktívnych pripomienok budem môcť aj ja sám vylepšiť existujúce riešenia.

Vyvolanie udalosti na html elemente

V ostatnom čase sa dosť intenzívne venujem javascript-ovému framework-u dojo. V aplikácii, v ktorej sa v značnej miere využíva widget dijit.Tooltip sa tento prestal skrývať po odídení kurzora myšky z daného html prvku, ak na tento prvok bolo predtým kliknuté. Prvok si stále držal focus a tooltip ostával zobrazený. Po pátraní po internete som zistil, že nie som jediný, kto má problém so správnym skrývaním, respektíve zobrazovaním, tooltipu. Skúsil som rôzne navrhované riešenia, ktoré do istej miery znásilňovali daný widget, ale žiadne z nich nezabralo v mojom prípade. Po preskúmaní správania sa widgetu a html prvkov na ktoré bol aplikovaný, som prišiel na riešenie, ktoré zafungovalo. Bolo potrebné "násilne" vyvolať udalosť "blur" nad html elementom, pre ktorý bol tooltip vytvorený. A tu je finálna implementácia fireEvent metódy:

function fireEvent(element, event) { if (typeof (event) !== "string") { throw new TypeError("Input event name must of type string."); } if ((typeof (element) === "undefined") \|\| (element == null)) { throw new Error("Element can not be null."); } // IE if (document.createEventObject) { var evt = document.createEventObject(); return element.fireEvent("on" + event, evt); } // Ostatne prehliadace var evt = document.createEvent("HTMLEvents"); // Inicializacia eventu (Event type, bubbling, cancelable) evt.initEvent(event, true, true); return !element.dispatchEvent(evt); };
Metóda pre vyvolanie udalosti nad html elementom

Metóda pre vyvolanie udalosti nad html elementom

Distinct metóda pre polia

Na inom mieste som potreboval získať zo vstupného poľa len distinct-né prvky, a už trocha zdeformovaný zo C#-pu som hneď písal pole.distinct(). Čuduj sa svete, error ;-). Tak som nakoniec rozšíril Array objekt o metódu distinct takto:

Distinct metóda pre Array objekt
(function () { if (!Array.prototype.distinct) { Array.prototype.distinct = function () { var distinctArray = []; for (var i = 0; i < this.length; i++) { if (distinctArray.indexOf(this[i]) === -1) { distinctArray.push(this[i]); } } return distinctArray; } } })();

Synchronized Cache Provider

xxxmatko — Tue, 13 Mar 2012 11:12:00 GMT

Klasický obraz. Naša aplikácia často načítava rovnaké sady údajov z databázy, čo má za následok pomalšie reakcie aplikácie a zvýšenú záťaž na databázovy server. Prečo neuložíme načítané údaje z databázy do Cache a potom nech sa už načítavajú odtiaľ. To aplikáciu zrýchli a navyše odľahčí databázu. Ak príde potom request každú sekendu, tak za minútu ušetríme 59 ďalších dopytov do databázy. Znie to pekne, no nie na darmo sa aj tu píše: "Caching does add complexity, ... make sure you're really going to benefit from the complexity".

Nech teda príde request každú jednu sekendu. Pri spracovaní requestu sa pozrieme, či už sú údaje uložené v Cache, ak nie tak ich načítame a uložime do Cache.

Načítanie dát z databázy a uloženie do Cache (vďaka za inšpiráciu)
return Cache.Read<SomeData>("someKey", key => { SomeData result = SelectFromDb(); return Cache.Write(key, result, DateTime.UtcNow.AddSeconds(60)); });

Ak však načítanie dát z databázy bude trvať dlhšie ako jednu sekundu, napríklad rovných desať sekúnd, tak potom prvý request nestihne prijať výsledok z databázy a zapísať ho do Cache pred príchodom ďalšieho requestu, atď. Ak zoberieme do úvahy ešte nejaký ten čas potrebný na spracovanie requestu, tak až dvanásty request v poradí načíta údaje z Cache. Čiže namiesto 59 requestov do databázy ušetríme v skutočnosti "len" 49 a prvých 11 requestov bude stále trvať minimálne 10 sekúnd. Je to lepšie ako v prvom prípade, ale aj toto sa dá stále zlepšiť.

Ak synchronizujeme prístup ku Cache, docielime, že prvý request uzamkne prístup, načíta dáta z databázy a uvoľní zámok, následne ďalšie requesty už nebudú načítavať dáta z databázy ale priamo z Cache, čím sa ušetrí ďalší čas, potrebný pre spracovanie daného requestu. Dĺžka spracovania prvého requestu bude cca 10 sekúnd. Druhý príde o sekundu neskôr a bude čakať, pokiaľ prvý request neuvoľní zámku, čo nastane o 9 sekúnd, tretí bude čakať už len 8 sekúnd atď.

Aj tento spôsob má však svoje trhliny. Nech prídu naraz dva requesty. Prvý bude chcieť načítať dáta pre kľúč "someKey" a druhý pre kľúč "someOtherKey". Pre žiaden z týchto kľúčov sa zatiaľ nenachádza hodnota uložená v Cache, takže oba requesty ju budú chcieť načítať z databázy. Načítanie pre prvý kľúč nech trvá realtívne dlhý čas (napr. 10 sekúnd) a pre druhý relatívne krátky čas (napr. 1 sekundu). Ak prístup ku Cache uzamkne ako prvý request pre kľúč "someKey", tak druhý request bude musieť zbytočne čakať na zámke celý čas potrebný pre načítanie dát z databázy pre prvý request.

// Cache Manager class which uses configured Cache Provider public class Cache { #region [ Variables ] private static readonly ReaderWriterLockSlim ;_cacheLock; private static readonly object _lock; private static bool _initialized; private static bool _initializedDefaultProvider; private static Exception _initializeException; private static TimeSpan _duration; private static CacheProviderCollection _providers; private static CacheProvider _provider; #endregion #region [ Constructors ] static Cache() { _lock = new object(); _cacheLock = LocksHelper.GetLockInstance(LockRecursionPolicy.NoRecursion); _initialized = false; _initializedDefaultProvider = false; _initializeException = null; _duration = new TimeSpan(0, 20, 0); } #endregion #region [ Properties ] public static CacheProviderCollection Providers { get { Initialize(); return _providers; } } public static CacheProvider Provider { get { Initialize(); if (_provider == null) { throw new InvalidOperationException( "Defined cache provider was not found."); } return _provider; } } public static int Count { get { using (new ReadOnlyLock(_cacheLock)) { return Provider.Count; } } } public static ICollection<string> Keys { get { using (new ReadOnlyLock(_cacheLock)) { return Provider.Keys; } } } #endregion #region [ Private Methods ] // Initializes cache manager. private static void Initialize() { // ... } // Initializes cache according to the input cache config. private static bool InitializeSettings(CacheConfigSection config) { // ... } // Initializes default cache provider according to the input cache config. private static bool InitializeDefaultProvider(CacheConfigSection config) { // ... } #endregion #region [ Public Methods ] // Clears the cache. public static void Clear() { using (new WriteLock(_cacheLock)) { Provider.Clear(); } } // Checks whether the cache contains an item with the spsecified key. public static bool ContainsKey(string key) { using (new ReadOnlyLock(_cacheLock)) { return Provider.Contains(key); } } // Removes the specified item from the application's Cache object. public static object Remove(string key) { using (new ReadLock(_cacheLock)) { if (Provider.Contains(key)) { using (new WriteLock(_cacheLock)) { return Provider.Remove(key); } } return null; } } // Removes the specified item from the application's Cache object. public static T Remove<T>(string key) { return (T)Remove(key); } // Retrieves the specified item from the Cache object. public static object Read(string key) { using (new ReadOnlyLock(_cacheLock)) { return Provider.Read(key); } } // Retrieves the specified item from the Cache object and support method // for its creation if it is not presented in the cache. public static T Read<T>(string key, Func<string, T> onNull = null) { using (new ReadLock(_cacheLock)) { object value = Provider.Read(key); if ((value == null) && (onNull != null)) { value = onNull(key); } return (value != null) ? (T)value : default(T); } } // Inserts an object into the Cache with dependencies and expiration policies. public static object Write(string key, object value, DateTime? absoluteExpiration = null, TimeSpan? slidingExpiration = null) { using (new WriteLock(_cacheLock)) { if(Provider.Contains(key)) { Provider.Remove(key); } if (absoluteExpiration == null) { absoluteExpiration = DateTime.UtcNow.AddMinutes( _duration.TotalMinutes); } if(slidingExpiration == null) { slidingExpiration = TimeSpan.Zero; } Provider.Write(key, value, absoluteExpiration.Value, slidingExpiration.Value); return value; } } // Inserts an object into the Cache with dependencies and expiration policies. public static T Write<T>(string key, T value, DateTime? absoluteExpiration = null, TimeSpan? slidingExpiration = null) { using (new WriteLock(_cacheLock)) { if (Provider.Contains(key)) { Provider.Remove(key); } if (absoluteExpiration == null) { absoluteExpiration = DateTime.UtcNow.AddMinutes( _duration.TotalMinutes); } if (slidingExpiration == null) { slidingExpiration = TimeSpan.Zero; } Provider.Write(key, value, absoluteExpiration.Value, slidingExpiration.Value); return (T)value; } } #endregion }
Cache Manager pre synchronizovaný prístup ku Cache

// Cache Manager class which uses configured Cache Provider
public class Cache
{
    #region [ Variables ]

    private static readonly ReaderWriterLockSlim ;_cacheLock;
    private static readonly object _lock;

    private static bool _initialized;
    private static bool _initializedDefaultProvider;
    private static Exception _initializeException;
    private static TimeSpan _duration;
    private static CacheProviderCollection _providers;
    private static CacheProvider _provider;

    #endregion

    #region [ Constructors ]

    static Cache()
    {
        _lock = new object();
        _cacheLock = LocksHelper.GetLockInstance(LockRecursionPolicy.NoRecursion);
        _initialized = false;
        _initializedDefaultProvider = false;
        _initializeException = null;
        _duration = new TimeSpan(0, 20, 0);
    }

    #endregion

    #region [ Properties ]

    public static CacheProviderCollection Providers
    {
        get
        {
            Initialize();
            return _providers;
        }
    }

    public static CacheProvider Provider
    {
        get
        {
            Initialize();
            if (_provider == null)
            {
                throw new InvalidOperationException(
                    "Defined cache provider was not found.");
            }
            return _provider;
        }
    }

    public static int Count
    {
        get
        {
            using (new ReadOnlyLock(_cacheLock))
            {
                return Provider.Count;
            }
        }
    }

    public static ICollection<string> Keys
    {
        get
        {
            using (new ReadOnlyLock(_cacheLock))
            {
                return Provider.Keys;
            }
        }
    }

    #endregion

    #region [ Private Methods ]

    // Initializes cache manager.
    private static void Initialize()
    {
        // ...
    }

    // Initializes cache according to the input cache config.
    private static bool InitializeSettings(CacheConfigSection config)
    {
        // ...
    }

    // Initializes default cache provider according to the input cache config.
    private static bool InitializeDefaultProvider(CacheConfigSection config)
    {
        // ...
    }

    #endregion

    #region [ Public Methods ]

    // Clears the cache.
    public static void Clear()
    {
        using (new WriteLock(_cacheLock))
        {
            Provider.Clear();
        }
    }

    // Checks whether the cache contains an item with the spsecified key.
    public static bool ContainsKey(string key)
    {
        using (new ReadOnlyLock(_cacheLock))
        {
            return Provider.Contains(key);
        }
    }

    // Removes the specified item from the application's Cache object.
    public static object Remove(string key)
    {
        using (new ReadLock(_cacheLock))
        {
            if (Provider.Contains(key))
            {
                using (new WriteLock(_cacheLock))
                {
                    return Provider.Remove(key);
                }
            }
            return null;
        }
    }

    // Removes the specified item from the application's Cache object.
    public static T Remove<T>(string key)
    {
        return (T)Remove(key);
    }

    // Retrieves the specified item from the Cache object.
    public static object Read(string key)
    {
        using (new ReadOnlyLock(_cacheLock))
        {
            return Provider.Read(key);
        }
    }

    // Retrieves the specified item from the Cache object and support method
    // for its creation if it is not presented in the cache.
    public static T Read<T>(string key, Func<string, T> onNull = null)
    {
        using (new ReadLock(_cacheLock))
        {
            object value = Provider.Read(key);
            if ((value == null) && (onNull != null))
            {
                value = onNull(key);
            }
            return (value != null) ? (T)value : default(T);
        }
    }

    // Inserts an object into the Cache with dependencies and expiration policies.
    public static object Write(string key, object value,
        DateTime? absoluteExpiration = null, TimeSpan? slidingExpiration = null)
    {
        using (new WriteLock(_cacheLock))
        {
            if(Provider.Contains(key))
            {
                Provider.Remove(key);
            }

            if (absoluteExpiration == null)
            {
                absoluteExpiration = DateTime.UtcNow.AddMinutes(
                    _duration.TotalMinutes);
            }

            if(slidingExpiration == null)
            {
                slidingExpiration = TimeSpan.Zero;
            }

            Provider.Write(key, value, absoluteExpiration.Value,
                slidingExpiration.Value);
            return value;
        }
    }

    // Inserts an object into the Cache with dependencies and expiration policies.
    public static T Write<T>(string key, T value,
        DateTime? absoluteExpiration = null, TimeSpan? slidingExpiration = null)
    {
        using (new WriteLock(_cacheLock))
        {
            if (Provider.Contains(key))
            {
                Provider.Remove(key);
            }

            if (absoluteExpiration == null)
            {
                absoluteExpiration = DateTime.UtcNow.AddMinutes(
                    _duration.TotalMinutes);
            }

            if (slidingExpiration == null)
            {
                slidingExpiration = TimeSpan.Zero;
            }

            Provider.Write(key, value, absoluteExpiration.Value,
                slidingExpiration.Value);
            return (T)value;
        }
    }

    #endregion
}

Cache Manager pre synchronizovaný prístup ku Cache

Ak nechceme, aby spomínaný druhý request musel zbytočne čakať na zámke celý čas potrebný pre načítanie dát z databázy pre prvý request, môžeme na základe implementácie Cache manager-a upraviť načítavanie údajov tak, ako je to uvedené v druhom príklade. Tým sa však opäť dostávame k problému číslo jedna - viacero paralelných načítaní tých istých dát.

Načítanie dát z databázy a uloženie do Cache 2
var cacheVal = Cache.Read<SomeData>("someKey"); if(cacheVal.Equals(SomeData.Empty)) { cacheVal = SelectFromDb(); return Cache.Write("someKey", cacheVal, DateTime.UtcNow.AddSeconds(60)); }

V uvedených príkladoch sa pre načítanie údajov z Cache využíva Cache manager implementovaný na základe Provider model design pattern-u, čo umožňuje využiť na prácu s Cache ľuboľného providera. Na synchronizáciu bola použitá trieda ReaderWriterLockSlim spôsobom, ktorý je bližšie popísaný tu.

Myslím, že sa nedá jednoznačne povedať, že ak použijem Cache, tak všetko bude zrazu zázračne rýchlo fungovať. A už vôbec nechcem tvrdiť, že najlepšie je použiť synchronizovanú Cache, nakoľko tá prináša ešte väčšiu mieru komplexnosti. Najprv treba dobre zanalyzovať danú situáciu a zvážiť, aký spôsob použitia Cache, a či vôbec, bude najvýhodnejší.

Ako dekódovať parametre WebResource.axd

xxxmatko — Wed, 07 Mar 2012 09:25:00 GMT

Keď som naposledy pozeral logy z jednej webovej aplikácie, našiel som tam niekoľko zalogovaných výnimiek typu System.Web.HttpException (0x80004005): This is an invalid webresource request, no a samozrejme url adresa mala tvar 'http://localhost:52537/WebResource.axd?d=OnZ0ZKO8G-ShpiVSqxXhboYJFcDQ82xG0pBI7kczDAPkL0g3SuGYm0JoMUL8LF8trZ9NVkaa71WbfQraAN2i0CbvOUX8m4vHoP_haITnn8hPhs5H8SljR5k4llviy4QoLvzWvyDrnM7NJCsXC6W6oNGW26D73FFlOsdldHUEF8c1&t=634656035472024300'. Z toho som samozrejme na prvý pohľad nič úžasné nezistil. To ma viedlo k tomu, že by bolo lepšie, keby do logu išla aj url adresa pre webresource s dekódovanými url parametrami, pre ľahšiu identifikáciu requestu.

Pomocou dômyselných nástrojov nebolo ťažké zistiť, že na dešifrovanie parametrov AssemblyResourceLoader využíva statickú metódú DecryptString objektu System.Web.UI.Page, ktorá interne využíva metódu MachineKeySection.EncryptOrDecryptData. Táto metóda je síce označená ako internal, ale to predsa nie je problém, veď máme Reflection ;-).

public static byte[] EncryptOrDecryptData(bool encrypt, byte[] data, byte[] modifier, int start, int length) { MethodInfo encryptOrDecryptStringMethod = null; var machineKeySection = typeof(MachineKeySection); var paramTypes = new[] { typeof(bool), typeof(byte[]), typeof(byte[]), typeof(int), typeof(int) }; encryptOrDecryptStringMethod = machineKeySection.GetMethod("EncryptOrDecryptData", BindingFlags.Static \| BindingFlags.NonPublic, null, paramTypes, null); return (byte[])encryptOrDecryptStringMethod.Invoke(null, new object[] { encrypt, data, modifier, start, length }); }
Implementovanie metódy pre šifrovanie a dešifrovanie dát s využítím Reflection

public static byte[] EncryptOrDecryptData(bool encrypt, byte[] data,
    byte[] modifier, int start, int length)
{
    MethodInfo encryptOrDecryptStringMethod = null;

    var machineKeySection = typeof(MachineKeySection);
    var paramTypes = new[]
    {
        typeof(bool),
        typeof(byte[]),
        typeof(byte[]),
        typeof(int),
        typeof(int)
    };

    encryptOrDecryptStringMethod = machineKeySection.GetMethod("EncryptOrDecryptData",
        BindingFlags.Static | BindingFlags.NonPublic, null, paramTypes, null);

    return (byte[])encryptOrDecryptStringMethod.Invoke(null, new object[]
        {
            encrypt,
            data,
            modifier,
            start,
            length
        });
}

Implementovanie metódy pre šifrovanie a dešifrovanie dát s využítím Reflection

Táto implementácia má však jeden háčik. Môže sa totiž stať, že nebude môžné získať handle na danú metódu pomocou Reflection z rôznych dôvodov. Prístup kú šifrovacím metódam môžeme získať ale aj tým, že implementujeme taký kvázi MembershipProvider, v rámci ktorého môžeme využiť metódy EncryptPassword a DecryptPassword, ktoré na šifrovanie a dešifrovanie používajú tiež MachineKey a teda ich môžeme použiť na dešifrovanie url parametrov bez nutnosti použitia Reflection.

public class EmptyMembership : MembershipProvider { private static EmptyMembership _instance; private EmptyMembership() { } public static EmptyMembership Instance { get { return _instance ?? (_instance = new EmptyMembership()); } } public byte[] DecryptData(byte[] data) { return DecryptPassword(data); } public byte[] EncryptData(byte[] data) { return EncryptPassword(data); } }
Prázdny MemberShipProvider (implementácia ostatných metód a vlastností je vynechaná)

public class EmptyMembership : MembershipProvider
{
    private static EmptyMembership _instance;

    private EmptyMembership()
    {
    }

    public static EmptyMembership Instance
    {
        get
        {
            return _instance ?? (_instance = new EmptyMembership());
        }
    }

    public byte[] DecryptData(byte[] data)
    {
        return DecryptPassword(data);
    }

    public byte[] EncryptData(byte[] data)
    {
        return EncryptPassword(data);
    }
}

Prázdny MemberShipProvider (implementácia ostatných metód a vlastností je vynechaná)

Potom môžeme našu šifrovaciu metódu upraviť nasledovne:

public static byte[] EncryptOrDecryptData(bool encrypt, byte[] data, byte[] modifier, int start, int length) { MethodInfo encryptOrDecryptStringMethod = null; try { var machineKeySection = typeof (MachineKeySection); var paramTypes = new[] { typeof (bool), typeof (byte[]), typeof (byte[]), typeof (int), typeof (int) }; encryptOrDecryptStringMethod = machineKeySection.GetMethod("EncryptOrDecryptData", BindingFlags.Static \| BindingFlags.NonPublic, null, paramTypes, null); } catch (AmbiguousMatchException) { // Reflection is not allowed } if (encryptOrDecryptStringMethod != null) { try { return (byte[])encryptOrDecryptStringMethod.Invoke(null, new object[] { encrypt, data, modifier, start, length }); } catch (MethodAccessException) { return encrypt ? EmptyMembership.Instance.EncryptData(data) : EmptyMembership.Instance.DecryptData(data); } catch (TargetInvocationException) { return encrypt ? EmptyMembership.Instance.EncryptData(data) : EmptyMembership.Instance.DecryptData(data); } } return encrypt ? EmptyMembership.Instance.EncryptData(data) : EmptyMembership.Instance.DecryptData(data); }
Doplnená šifrovacia metóda

public static byte[] EncryptOrDecryptData(bool encrypt, byte[] data,
    byte[] modifier, int start, int length)
{
    MethodInfo encryptOrDecryptStringMethod = null;

    try
    {
        var machineKeySection = typeof (MachineKeySection);
        var paramTypes = new[]
                                {
                                    typeof (bool),
                                    typeof (byte[]),
                                    typeof (byte[]),
                                    typeof (int),
                                    typeof (int)
                                };

        encryptOrDecryptStringMethod =
            machineKeySection.GetMethod("EncryptOrDecryptData",
                BindingFlags.Static | BindingFlags.NonPublic, null, paramTypes,
                null);
    }
    catch (AmbiguousMatchException)
    {
        // Reflection is not allowed
    }

    if (encryptOrDecryptStringMethod != null)
    {
        try
        {
            return (byte[])encryptOrDecryptStringMethod.Invoke(null, new object[]
                {
                    encrypt, data, modifier, start, length
                });
        }
        catch (MethodAccessException)
        {
            return encrypt ? EmptyMembership.Instance.EncryptData(data) :
                             EmptyMembership.Instance.DecryptData(data);
        }
        catch (TargetInvocationException)
        {
            return encrypt ? EmptyMembership.Instance.EncryptData(data) :
                             EmptyMembership.Instance.DecryptData(data);
        }
    }

    return encrypt ? EmptyMembership.Instance.EncryptData(data) :
                     EmptyMembership.Instance.DecryptData(data);
}

Doplnená šifrovacia metóda

Už ostáva toto celé len pekne zaobaliť:

public static string DecryptString(string data, Func<string, byte[]> stringToByteArray = null, Func<byte[], string> byteArrayToString = null) { byte[] dataToDecrypt = (stringToByteArray != null) ? stringToByteArray(data) : Encoding.UTF8.GetBytes(data); byte[] decryptedData = EncryptOrDecryptData(false, dataToDecrypt, null, 0, dataToDecrypt.Length); return (byteArrayToString != null) ? byteArrayToString(decryptedData) : Encoding.UTF8.GetString(decryptedData); } public static string EncryptString(string data, Func<string, byte[]> stringToByteArray = null, Func<byte[], string> byteArrayToString = null) { byte[] dataToEncrypt = (stringToByteArray != null) ? stringToByteArray(data) : Encoding.UTF8.GetBytes(data); byte[] encryptedData = EncryptOrDecryptData(true, dataToEncrypt, null, 0, dataToEncrypt.Length); return (byteArrayToString != null) ? byteArrayToString(encryptedData) : Encoding.UTF8.GetString(encryptedData); }
Implementácia metód pre šifrovanie a dešifrovanie

public static string DecryptString(string data,
    Func<string, byte[]> stringToByteArray = null,
    Func<byte[], string> byteArrayToString = null)
{
    byte[] dataToDecrypt = (stringToByteArray != null) ? stringToByteArray(data) :
                               Encoding.UTF8.GetBytes(data);

    byte[] decryptedData = EncryptOrDecryptData(false, dataToDecrypt, null, 0,
                               dataToDecrypt.Length);

    return (byteArrayToString != null) ? byteArrayToString(decryptedData) :
        Encoding.UTF8.GetString(decryptedData);
}

public static string EncryptString(string data,
    Func<string, byte[]> stringToByteArray = null,
    Func<byte[], string> byteArrayToString = null)
{
    byte[] dataToEncrypt = (stringToByteArray != null) ? stringToByteArray(data) :
                               Encoding.UTF8.GetBytes(data);

    byte[] encryptedData = EncryptOrDecryptData(true,
                               dataToEncrypt, null, 0, dataToEncrypt.Length);

    return (byteArrayToString != null) ? byteArrayToString(encryptedData) :
        Encoding.UTF8.GetString(encryptedData);
}

Implementácia metód pre šifrovanie a dešifrovanie

Dekódovať zašifrovaný query string môžeme potom nasledovne:

Použitie dešifrovacej metódy na dešifrovanie query stringu WebResource.axd
string dQuery = @"1xskcOcQ5gDA9hwnmk1rYdW_bAWTiJFuj5Lw-Gfggz3AouwcBQyngWNkhtnlv6sDDogR6JWmjyuz5FxMjLzPzIQyRa34X1ChGd7bvzGwhOk3f_67WdDrVmpS87AY1ZuYVYpQk8-Z7b8pEGKZrWg-ucm0aFOdbb5hdb7hD15Hh5s1"; string decrypted = DecryptString(dQuery, HttpServerUtility.UrlTokenDecode);

PS: Uvítam každý návrh na vylepšenie.

dojo.require anything

xxxmatko — Wed, 29 Feb 2012 12:10:00 GMT

Ten, kto sa už niekedy stretol s javascript-ovým frameworkom dojo vie, že umožňuje vytvárať kvázi triedy pomocou metódy dojo.declare a tieto združovať do kvázi namespace-ov skrz metódu dojo.provide. Každá takáto trieda predstavuje jeden javascript-ový súbor a kvázi namespace, do ktorého je táto trieda zaradená, určuje adresárovú štruktúru, v rámci ktorej sa táto trieda nachádza. Následne potom môžeme využívať kvázi using implementovaný pomocou metódy dojo.require pre pripojenie javascript-ov do stránky namiesto pripájania jednotlivých javascript-ových súborov pomocu html elementu <script>.

Príklad jednoduchého widgetu
dojo.provide("Widgets.Parent"); dojo.require("dijit._Widget"); dojo.require("Widgets.Child1")¹; dojo.require("Widgets.Child2"); dojo.declare("Widgets.Parent"², [dijit._Widget]³, { constructor: function (args, srcNodeRef) { }, buildRendering: function () { }, postCreate: function () { } });

V ukážke je implementovaná trieda Widgets.Parent (²), ktorá dedí z triedy dijit._Widget(³) a "vyžaduje" ďalšie triedy Widgets.Child1, Widgets.Child2 (¹). Na akom princípe funguje volanie dojo.require? Na to, aby sme mohli použiť dojo framework, musíme ho na stránke referencovať. Nič prevratné. Povedzme, že ho referencujem z adresy "http://nejakaadreas.sk/dojo/dojo.js". Na základe tejto adresy sa konfiguračná property basePath objektu djConfig (základná cesta kde je umiestnené dojo core) nastaví na hodnotu "/dojo/". Volanie metódy dojo.require("Widgets.Child2") na základe uvedených konfiguračných hodnôt sa pomocou GET requestu pokúsí stiahnuť skript z adresy "http://nejakaadreas.sk/dojo/Widgets/Child2.js". Ak však nechceme, aby sa naše triedy nachádzali v tom istom priečinku ako dojo core, možeme definovať umietnenia custom tried (respektíve modulov) pomocou metódy dojo.registerModulePath("<moduleName>", "<modulePath>"), alebo ešte lepšie pomocou property paths objektu djConfig (v starších verziách dojo frameworku sa používala property modulePaths).

Nastavenie umiestnenia custom moduolov
var djConfig = { paths: { Widgets: "/custom/Widgets" } };

S vyššie uvedenou konfiguráciou volanie metódy dojo.require("Widgets.Child2") sa pomocou GET requestu pokúsí stiahnuť skript z adresy "http://nejakaadreas.sk/custom/Widgets/Child2.js". Pri definovaní cesty pre custom moduly je táto cesta relatívna k parent priečinku, v ktorom sa nachádza dojo core.

Neznamená to však, že teraz všetky naše custom moduly/triedy musia byť umiestnené v tej istej lokalite ako aj samotné dojo alebo, že musíme mať dojo umiestnené vždy v rámci samotnej webovej aplikácie. Cesta pre custom moduly môže byť reprezentovaná aj kompletnou url adresou. A konečne sa dostávame k meritu veci. Majme v webovú aplikáciu. Táto webová aplikácia referencuje knižnicu, v ktorej sú implementované server ovládacie prvky (server controls). Každý server control pozostáva zo server kódu, ktorý je zodpovedný za vyrenderovanie požadovaného html a inicializáciu dojo widgetu pre vyrenderovaný html kód. Javascript kód widgetu (tak ako je uvedený v prvej ukážke) sa nachádza ako Embedded Resource v rámci referencovanej dynamickej knižnice.

Štruktúra ukážkového projektu
Solution WebApp Custom UI WebControls Widgets Parent Parent.cs Parent.js Child1 Child1.cs Child1.js Child2 Child2.cs Child2.js

Ak by sme sa teraz pokúsili vytvoriť na stránke widget (tak ako je to uvedené v nasledovnej ukážke), tak by sme neuspeli, pretože volanie dojo.require("Widgets.Parent") zlyhá, nakoľko javascript kód widgetu "Parent" sa nenechádza na adrese "http://localhost:#####/dojo/Widgets/Parent.js", ale dá sa načítať cez handler "WebResource.axd". Jednou možnosťou, ako sa s danou situáciou vysporiadať, je to, že pred vyrenderovaním stránky vložíme do nej referencie na všetky potrebné skripty pomocu metód "RegisterClientScriptInclude" a "GetWebResourceUrl".

<html> <head> <script type="text/javascript"> var djConfig = { paths: { Widgets: "/Widgets" } }; </script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("Widgets.Parent"); dojo.addOnLoad(function() { var parent = new Widgets.Parent({ // input params }, dojo.byId("parent")); }); </script> </head> <body> <div id="parent"></div> </body> </html>
Inicializá widgetu "Parent"

<html>
    <head>
        <script type="text/javascript">
            var djConfig = {
                paths: {
                    Widgets: "/Widgets"
                }
            };
        </script>
        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("Widgets.Parent");

            dojo.addOnLoad(function() {
                var parent = new Widgets.Parent({
                    // input params
                }, dojo.byId("parent"));
            });
        </script>
    </head>
    <body>
        <div id="parent"></div>
    </body>
</html>

Inicializá widgetu "Parent"

Toto riešenie ale nie je optimálne a tak isto stráca sa funkčnosť volania dojo.require. V tomto prípade skončíme s tromi chybnými requestami typu "Not Found" pre javascriptové súbory "Parent.js" (ktorý je referencovaný na samotnej html stránke) a súbory "Child1.js", "Child2.js", ktoré sú vyžadované widgetom Parent. Iným riešením môže byť použite HttpHandlerFactory, ktorá pre spracovanie každého requestu vzniknutého volaním dojo.require použije custom HttpHandler, ktorý dokáže na základe requestu načítať resource z assembly a tento zapísať do Response, a pre každý iný request použije DefaultHttpHandler.

Konfigurácia použitia HttpHandlerFactory
<configuration> <system.web> <httpHandlers> <add verb="" path=".js" type="WebApp.DojoRequireFactory" /> </httpHandlers> </system.web> </configuration>

public class DojoRequireFactory : IHttpHandlerFactory { public IHttpHandler GetHandler(HttpContext context, string requestType, string url, string pathTranslated) { // Overime ci request koresponduje s tvarom requestu pre volania // dojo.require ak nie tak pouzijeme pre spracovanie requestu defaultny handler if (!DojoRequireHandler.Path.IsMatch(url)) { return new DefaultHttpHandler(); } // Z url adresy requestu ziskame informaciu o tom v akom nasmespace // sa resource nachadza a aky ma byt nazov skriptu var match = DojoRequireHandler.Path.Match(url); string script = match.Groups["script"].Value; List<string> scriptNamespace = new List<string>(1); var namespaces = match.Groups["namespace"].Captures; for (int i = 0; i < namespaces.Count; i++) { scriptNamespace.Add(namespaces[i].Value); } // Na spracovanie pouzijeme specialny handler return new DojoRequireHandler(script, string.Join(".", scriptNamespace)); } }
Handler Factory ktorá určí ktorý handler má spracovať request

public class DojoRequireFactory : IHttpHandlerFactory
{
    public IHttpHandler GetHandler(HttpContext context, string requestType,
        string url, string pathTranslated)
    {
        // Overime ci request koresponduje s tvarom requestu pre volania
        // dojo.require ak nie tak pouzijeme pre spracovanie requestu defaultny handler
        if (!DojoRequireHandler.Path.IsMatch(url))
        {
            return new DefaultHttpHandler();
        }

        // Z url adresy requestu ziskame informaciu o tom v akom nasmespace
        // sa resource nachadza a aky ma byt nazov skriptu
        var match = DojoRequireHandler.Path.Match(url);
        string script = match.Groups["script"].Value;
        List<string> scriptNamespace = new List<string>(1);

        var namespaces = match.Groups["namespace"].Captures;
        for (int i = 0; i < namespaces.Count; i++)
        {
            scriptNamespace.Add(namespaces[i].Value);
        }

        // Na spracovanie pouzijeme specialny handler
        return new DojoRequireHandler(script, string.Join(".", scriptNamespace));
    }
}

Handler Factory ktorá určí ktorý handler má spracovať request

public class DojoRequireHandler : IHttpHandler { // Regularny vyraz, ktory definuje v akom tvare maju vyzerat requesty vykonane cez dojo.require public static Regex Path = new Regex(@"[\w\d:/]WebResource.axd(?:/(?<namespace>\w+))/(?<script>\w+)\.js"); private string _scriptName; private string _namespaces; public DojoRequireHandler(string scriptName, string namespaces) { this._scriptName = scriptName; this._namespaces = namespaces; } public void ProcessRequest(HttpContext context) { string content = null; // Niektore assemblies chceme preskocit string [] toSkip = { "system", "microsoft"}; // Prejdem vsetky pozadovane assemblies foreach (Assembly assembly in AppDomain.CurrentDomain.GetAssemblies()) { string name = assembly.FullName.Split(',')[0].ToLower(); // Preskocime assemblies ktore nechcem spracovavat if(Array.IndexOf(toSkip, name.Split('.')[0]) != -1) { continue; } // Dynamcike assemblies nechceme spracovavat if(assembly.IsDynamic) { continue; } // Ziskame zoznam resourcov v aktualnej assembly string[] resourceNames = assembly.GetManifestResourceNames(); // Skusime najst konkretny resource foreach(string resourceName in resourceNames) { // Ak resource name nekonci nazvom skriptu a nezacina nazvom namespacu tak pokracujeme if(!resourceName.EndsWith(this._scriptName + ".js", StringComparison.InvariantCultureIgnoreCase) \|\| !resourceName.StartsWith(this._namespaces, StringComparison.InvariantCultureIgnoreCase)) { continue; } // Nacitame resource using (var resourceStream = new StreamReader(assembly.GetManifestResourceStream(resourceName))) { content = resourceStream.ReadToEnd(); } break; } // Ak bol uz nacitany resource tak dalsi nehladame if (content != null) { break; } } // Ak sa nepodarilo nacitat resource ukoncime response ako notfound if(content == null) { context.Response.StatusCode = (int)HttpStatusCode.NotFound; context.Response.Flush(); context.ApplicationInstance.CompleteRequest(); return; } // Obsah resourcu zapiseme do response context.Response.ContentType = "text/javascript"; context.Response.Write(content); context.Response.Flush(); context.ApplicationInstance.CompleteRequest(); } }
Handler pre načítanie resource z assembly

public class DojoRequireHandler : IHttpHandler
{
    // Regularny vyraz, ktory definuje v akom tvare maju vyzerat requesty vykonane cez dojo.require
    public static Regex Path = new Regex(@"[\w\d:/]*WebResource.axd(?:/(?<namespace>\w+))*/(?<script>\w+)\.js");

    private string _scriptName;
    private string _namespaces;

    public DojoRequireHandler(string scriptName, string namespaces)
    {
        this._scriptName = scriptName;
        this._namespaces = namespaces;
    }

    public void ProcessRequest(HttpContext context)
    {
        string content = null;

        // Niektore assemblies chceme preskocit
        string [] toSkip = { "system", "microsoft"};

        // Prejdem vsetky pozadovane assemblies
        foreach (Assembly assembly in AppDomain.CurrentDomain.GetAssemblies())
        {
            string name = assembly.FullName.Split(',')[0].ToLower();

            // Preskocime assemblies ktore nechcem spracovavat
            if(Array.IndexOf(toSkip, name.Split('.')[0]) != -1)
            {
                continue;
            }

            // Dynamcike assemblies nechceme spracovavat
            if(assembly.IsDynamic)
            {
                continue;
            }

            // Ziskame zoznam resourcov v aktualnej assembly
            string[] resourceNames = assembly.GetManifestResourceNames();

            // Skusime najst konkretny resource
            foreach(string resourceName in resourceNames)
            {
                // Ak resource name nekonci nazvom skriptu a nezacina nazvom namespacu tak pokracujeme
                if(!resourceName.EndsWith(this._scriptName + ".js", StringComparison.InvariantCultureIgnoreCase)
                    || !resourceName.StartsWith(this._namespaces, StringComparison.InvariantCultureIgnoreCase))
                {
                    continue;
                }

                // Nacitame resource
                using (var resourceStream = new StreamReader(assembly.GetManifestResourceStream(resourceName)))
                {
                    content = resourceStream.ReadToEnd();
                }

                break;
            }

            // Ak bol uz nacitany resource tak dalsi nehladame
            if (content != null)
            {
                break;
            }
        }

        // Ak sa nepodarilo nacitat resource ukoncime response ako notfound
        if(content == null)
        {
            context.Response.StatusCode = (int)HttpStatusCode.NotFound;
            context.Response.Flush();
            context.ApplicationInstance.CompleteRequest();
            return;
        }

        // Obsah resourcu zapiseme do response
        context.Response.ContentType = "text/javascript";
        context.Response.Write(content);
        context.Response.Flush();
        context.ApplicationInstance.CompleteRequest();
    }
}

Handler pre načítanie resource z assembly

Jediné čo ostáva ešte spraviť, je nastaviť cestu pre náš modul v djConfig tak, aby dojo.require volania boli v takom tvare, na základe ktorého HandlerFactory bude vedieť určiť, že request má spracovať custom handler a následne, aby tento handler vedel aký resource má nájsť.

Upravená djConfig konfigurácia
var djConfig = { paths: { Widgets: "http://localhost:####/WebResource.axd/Custom/Widgets" } };

S touto konfiguráciou volanie metódy dojo.require("Widgets.Parent") spustí GET request na súbor "http://localhost:####/WebResource.axd/Custom/Widgets/Parent.js, pre spracovanie ktorého DojoRequireFactory vyberie custom handler DojoRequireHandler, ktorý načíta obsah súboru z assembly a ten zapíše do Response. Takto nám bude requirovanie skriptov pomocou dojo fungovať aj pokiaľ budú tieto uložené ako resources v assembly.

Ako zistiť či je objekt html element pomocou javascriptu

xxxmatko — Fri, 03 Feb 2012 09:05:00 GMT

Jedna z vlastností, ktorá sa mi páči na javascripte je Weak Typing. Nie že by som to pokladal za nejakú super výhodu. Na otázku, či je lepší pogramovací jazyk podporujúci Strong Typing alebo Weak Typing, by som si za víťaza zvolil určite toho skôr menovaného.

Na druhej strane to, že v javascripte sa môže dátový typ premennej meniť počas behu programu umožňuje písať kód tak, ako by sme ho napríklad v C# nikdy nenapísali.

Príklad zmeny dátového typu premennej
var x; x = 1; console.info(x); console.log(typeof(x)); x = "some string"; console.info(x); console.log(typeof(x)); x = {}; console.info(x); console.log(typeof(x));

Častým takýmto prípadom využitia je metóda, ktorá na základe dátového typu vstupného parametra vykoná rôzne operácie. Ja som si takúto metódu vyrobil. Moja metóda mala jeden vstupný parameter. Ak tento bol typu string, tak to znamenalo, že parameter reprezentuje id html elementu, ale ak bol typu object, tak to bol priamo html element. A konečne sa dostávam k jadru problému. Zistiť, či je premenná typu string je jednoduché použitím operátora typeof (viď. Príklad zmeny dátového typu premennej). Ak je však premenná handle na html element, operátor typeof zahlási že je to object. No dobre, ale objekt môže byť aj niečo iné ako len html element. Po relatívne krátkej dobe, som našiel spôsob, ako overiť či premená predstavuje handle na html element. Výsledok mojej snahy je možné vidieť na nasledovnej úkážke:

var isHtmlNode = function (o) { if (typeof (Node) === "object") { return o instanceof Node; } else { return (typeof (o) === "object") && (typeof (o.nodeType) === "number") && (typeof (o.nodeName) === "string"); } }; var isHtmlElement = function (o) { if (typeof (HTMLElement) === "object") { return o instanceof HTMLElement; } else { return (typeof (o) === "object") && (o.nodeType === 1) && (typeof (o.nodeName) === "string"); } };
Metódy overujúce, či je premenná html element

Metódy overujúce, či je premenná html element

Prvá metóda overí, či je vstupný objekt inštanciou triedy Node a druhá či je vstupný objekt inštanciou triedy HTMLElement. Ich použitie môže vyzerať aj takto:

Príklad použitia metód pre detekciu objektu typu HTMLElement
var setContent = function (o) { if (isHtmlElement(content) \|\| isHtmlNode(content)) { // o is an html element } else if (typeof(o) === "string") { // o is id of an html element } else { // throw an error } };

Takto si môžeme vyrobiť aj oveľa presnejšie metódy pre detekciu konkrétnych elementov, či už to podľa atribútu tagName alebo detekciou na konkrétne triedy, ktoré dedia z triedy HTMLElement (HTMLAnchorElement, HTMLAppletElement, HTMLAreaElement, HTMLBaseElement, HTMLBaseFontElement, HTMLBlockquoteElement, HTMLBodyElement, HTMLBRElement, HTMLButtonElement, HTMLDirectoryElement, HTMLDivElement, HTMLDListElement, HTMLFieldSetElement, HTMLFontElement, HTMLFormElement, HTMLFrameElement, HTMLFrameSetElement, HTMLHeadElement, HTMLHeadingElement, HTMLHRElement, HTMLHtmlElement, HTMLIFrameElement, HTMLImageElement, HTMLInputElement, HTMLIsIndexElement, HTMLLabelElement, HTMLLayerElement, HTMLLegendElement, HTMLLIElement, HTMLLinkElement, HTMLMapElement, HTMLMenuElement, HTMLMetaElement, HTMLModElement, HTMLObjectElement, HTMLOListElement, HTMLOptGroupElement, HTMLOptionElement, HTMLParagraphElement, HTMLParamElement, HTMLPreElement, HTMLQuoteElement, HTMLScriptElement, HTMLSelectElement, HTMLStyleElement, HTMLTableCaptionElement, HTMLTableCellElement, HTMLTableColElement, HTMLTableElement, HTMLTableRowElement, HTMLTableSectionElement, HTMLTextAreaElement, HTMLTitleElement, HTMLUListElement).

Inicializovanie vlastností v dojo widgete

xxxmatko — Mon, 10 Oct 2011 08:32:00 GMT

Nedávno som narazil na problém pri nastavovaní hodnôt atribútov pre dojo widget. Na stránke som mal vytvorené dve rôzne inštancie jedného widgetu. Problém spočíval v tom, že keď som zmenil hodnotu vlastnosti vo widgete A, tak hodnota, ktorú som do tejto vlastnosti nastavil, sa nastavila aj do tej istej vlastnosti vo widgete B. Inak povedané, táto vlastnosť sa správala, ako keby bola statickou vlastnosťou a teda prístup k nej bol zdielaný všetkými inštanciami daného widgetu.

Všetky atribúty boli zadeklarované presne podľa popisu, ktorý je uvedený na stránke doja v časti deklarácia atribútov. A teda boli zadeklarované v rámci prototypu spolu s hodnotou, ktorá slúži ako default hodnota, v prípade že pri vytvorení widgetu nebola žiadna iná hodnota poskytnutá, a taktiež definuje aj dátovy typ atribútu pre dojo.

dojo.provide("Widgets.Sample"); dojo.require("dijit._Widget"); dojo.declare("Widgets.Sample", [dijit._Widget], { _label: "Some label", _duration: 100, _isDisabled: false, _startPosition: { x: 0, y: 0 }, constructor: function (args, srcNodeRef) { args = args \|\| {}; this._label = args.label \|\| "Some label"; this._duration = args.duration \|\| 100; this._isDisabled = args.isDisabled \|\| false; }, postCreate: function () { var coords = dojo.position(this.domNode); this._startPosition.x = coords.x; this._startPosition.y = coords.y; }, write: function () { console.info(dojo.toJson({ label: this._label, disabled: this._isDisabled, duration: this._duration, start: this._startPosition })); } });
Definícia ilustračného widgetu

dojo.provide("Widgets.Sample");

dojo.require("dijit._Widget");

dojo.declare("Widgets.Sample", [dijit._Widget],
{
    _label: "Some label",
    _duration: 100,
    _isDisabled: false,
    _startPosition: {
        x: 0,
        y: 0
    },

    constructor: function (args, srcNodeRef) {
        args = args || {};
        this._label = args.label || "Some label";
        this._duration = args.duration || 100;
        this._isDisabled = args.isDisabled || false;
    },

    postCreate: function () {
        var coords = dojo.position(this.domNode);
        this._startPosition.x = coords.x;
        this._startPosition.y = coords.y;
    },

    write: function () {
        console.info(dojo.toJson({
            label: this._label,
            disabled: this._isDisabled,
            duration: this._duration,
            start: this._startPosition
        }));
    }
});

Definícia ilustračného widgetu

Problém si môžeme demonštrovať na vyššie uvedenom wdigete. Pre widget boli zadeklarované štyri vlastnosti:

_label : premenná typu string,
_duration : premenná typu int,
_isDisabled : premenná typu bool,
_startPosition : premenná typu object.

Prvé tri vlastnosti boli bezproblémové a tieto sa nastavovali priamo v konštruktore widgetu. Kritickou bola posledná vlastnoť _startPosition, ktorá bola typu object. Táto sa nastavovala automaticky v metóde postCreate (ktorá sa v rámci životného cyklu widgetu volá vo chvíli, keď je widget vyrenderovaný na stránke) a slúžila na uchovanie štartovacej pozície html elementu, pre ktorý bola vytvorená inštancia widgetu. Widget obsahuje aj pomocnú metódu write, ktorá do konzoly vypíše hodnoty atribútov. Na stránku som následne pridal dva html elementy a pre ne vytvoril dve rôzne inštancie nášho pokusného widgetu.

<div id="smaple1" style="position:absolute;left:0px;top:0px;"></div> <div id="sample2" style="position:absolute;left:20px;top:20px;"></div> <script type="text/javascript"> dojo.addOnLoad(function () { window.sample1 = new Widgets.Sample({ label: "sample1", duration: 1, isDisabled: false }, dojo.byId("sample1")); window.sample2 = new Widgets.Sample({ label: "sample2", duration: 2, isDisabled: true }, dojo.byId("sample2")); }); </script>
Vytvorenie dvoch rôznych inštancií pokusného widgetu

<div id="smaple1" style="position:absolute;left:0px;top:0px;"></div>
<div id="sample2" style="position:absolute;left:20px;top:20px;"></div>

<script type="text/javascript">
    dojo.addOnLoad(function () {
        window.sample1 = new Widgets.Sample({
            label: "sample1",
            duration: 1,
            isDisabled: false
        }, dojo.byId("sample1"));

        window.sample2 = new Widgets.Sample({
            label: "sample2",
            duration: 2,
            isDisabled: true
        }, dojo.byId("sample2"));
    });
</script>

Vytvorenie dvoch rôznych inštancií pokusného widgetu

Po zavolaní metódy write som zistil, že oba widgety majú atribút _startPosition nastavený na rovnakú hodnotu reprezentujúcu štartovaciu pozíciu druhého widgetu, pričom hodnoty ostatných atribútov boli rôzne. Hodnota sa menila súčasne pre oba widgety aj pri jej nastavení pre prvý a rovnako tak aj pre druhý widget. Odpoveď na otázku: "Prečo je to tak, keď všetko bolo spravené podľa návodu?" spočíva v tom, ako dojo vytvára triedy. Keďže javascript nemá class systém ako C#, Java alebo iné OOP jazyky, dojo simuluje tento prístup prostredníctvom metódy dojo.declare, ktorej tretím vstupným argumentom je objekt, ktorý reprezentuje prototype triedy, a jeho vlastnosti sú skopírované do dynamicky vytvoreného prototypu. No a kľučovým je to "skopírovanie". Pri tzv. primitívnych dátových typoch ako sú reťazce, čísla a iné nie je problém. Pokiaľ však v objekte reprezentujúcom prototype triedy zadeklarujeme atribút ako dátový typ object, tak tento bude do každej novej inštancie widgetu predaný odkazom a teda bude zdieľaný pre každú jednu inštanciu. Inak povedané, pri nastavení atribútu _startPosition dôjde k prepísaniu hodnoty aj v druhom widgete preto, lebo oba widgety sa odkazujú na tú istú premennú v rámci toho istého scope. A keďže v javascripte je objekt a pole v podstate to isté, tento istý problém nastáva aj pri poliach. Riešením by bolo, ak by dojo pri vytváraní protypu triedy klonoval objekty a polia. To sa však nedeje, a preto pokiaľ chceme zabrániť tomuto "zdielaniu" musíme upraviť deklaráciu atribútu a jeho incializáciu vykonať až v rámci metódy constructor, ktorá reprezentuje košntruktor pre triedu.

dojo.provide("Widgets.Sample"); dojo.require("dijit._Widget"); dojo.declare("Widgets.Sample", [dijit._Widget], { _label: "Some label", _duration: 100, _isDisabled: false, _startPosition: null, constructor: function (args, srcNodeRef) { args = args \|\| {}; // Inicializacia az v kontruktore this._startPosition = { x: 0, y: 0 }; this._label = args.label \|\| "Some label"; this._duration = args.duration \|\| 100; this._isDisabled = args.isDisabled \|\| false; }, //... });
Upravená definícia ilustračného widgetu

Upravená definícia ilustračného widgetu

Týmto docielime to, že pri vytvorení nových inštancií nášho widgetu sa bude premenná _startPosition odkazovať vždy na novú premennú.

Javascript closures - vo vnútri cyklu

xxxmatko — Thu, 29 Sep 2011 07:07:00 GMT

Správne pochopenie fungovania javascript closures si vyžaduje určité zdatnosti a nie každému programátorovi webových aplikácie je jasné o čo vlastne ide a aj velké percento tých lepších programátorov, ktorí aspoň tušia o čo ide, sa mu úspešne vyhýbajú.

Využívanie closures však môže veľmi zjednodušiť niektoré programátorské úkony a kedže najlepšie sa učí na príkladoch, ukážeme si ako je možné veľmi efektívne využiť closures v rámci bežiaceho cyklu.

Majme cyklus s konečným počtom iterácií, pričom v každej iterácií spúšťame nejakú asynchrónnu úlohu. Káždá asynchróna úloha je identifikovateľná svojou url adresou. Výsledok každej úlohy spracováva jedna callback metóda, pričom v tejto metóde chceme zistiť, ku ktorej úlohe patrí aktuálne spracovávaný výsledok. Na simuláciu asynchrónnej udalosti môžeme použiť metódu setTimeout s náhodným nastavením času pre odpočet vykonania udalosti.

Metóda simulujúca vykonanie asynchrónnej udalosti
setTimeout(function () { console.log('job done'); }, parseInt(Math.random()*10000));

Táto metóda môže reprezentovať napríklad spustenie vyhľadávania objektov s použitím webovej služby. Ak máme viacero vyhľadávacích služieb, môžeme túto úlohu spustiť pre každú jednu službu v rámci cyklu a v callback handleri zapísať do konzoly, pre ktorú službu prišiel výsledok.

Spustenie asynchrónnej udalosti v tele cyklu
var urls = [ "url1", "url2", "url3", "url4" ]; for(var url in urls) { setTimeout(function () { console.log('job done for ' + urls[url]); }, parseInt(Math.random()*10000)); }

Keď však spustíme vyššie uvedený kód a počkáme si na výpis prijatých výsledkov, tak v konzole uvidíme nasledovný text:

Výsledok viacnásobného spustenia asynchrónnej udalosti
job done for url4 job done for url4 job done for url4 job done for url4

Dôvod, prečo je tomu tak, spočíva v tom, že síce sa asynchrónna udalosť spúšťa zvlášť pre každú url adresu, callback handler pre každú udalosť je vykonaný v tom istom scope-e, v rámci ktorého je hodnota indexu url rovná číslu 3 (na túto hodnotu bol index nastavený pri poslednej iterácii) a teda pre každé volanie callbacku získame url adresu pre posledný job v rade. Riešením je použitie closure a teda vytvorenie vlastného scope pre každé jedno volanie.

Použitie closure na vytvorenie nového scope
var urls = [ "url1", "url2", "url3", "url4" ]; for(var url in urls) { (function¹(u²) { setTimeout(function () { console.log('job done for ' + u); }, parseInt(Math.random()10000)); })(urls[url]*³); }

Podstata spočíva v tom, že namiesto toho, aby sme rovno spustili asynchrónnu udalosť, vytvoríme pomocnú metódu (¹), ktorá má jeden vstupný argument (²) a tento argument predáva ďalej našej asynchrónnej metóde. Následne túto metódu ihneď spustíme, pričom ako vstupný parameter použijeme url adresu služby (³). Týmto docielime to, že callback handler pre jednotlivé udalosti bude spúšťaný v rámci scop-u našej pomocnej metódy a keďže pre každé volanie našej pomocnej metódy je vytvorený nový scope, v rámci ktorého obsahuje premenná u vždy inú hodnotu url adresy služby, vieme odsledovať, ktorý job bol práve skončený.

Ako pridať Intellisense pre vlastnú config section vo web.config

xxxmatko — Wed, 13 Jul 2011 13:17:00 GMT

Každý, kto sa už niekedy stretol s nastavovaním custom config sections vo web.config-u, mi dá asi za pravdu, keď poviem, že konfigurovať takúto sekciu nemusí byť práve ľahké. Zvlášť preto, že nie vždy programátor vie, aké všetky elementy, prípadné atribúty, sú danou sekciou podporované a to už vôbec nehovorím o hodnotách atribútov. Tento problém je možné odstrániť využitím Intellisense, ktorý poskytuje Visual Studio.

Intellisense, ktorý je k dispozícii pri editácii web.config-u, je zobrazovaný na základe xsd schém, ktoré definujú štruktúru jednotlivých elementov ako aj súboru ako takého. Ak teda chceme rozšíriť Intellisense Visual Studia pri editácií web.config-u, stačí rozšíriť existujúce schémy. Jeden zo spôsobov, ako to spraviť, spočíva v tom, že si vytvoríme xsd súbor, ktorý bude definovať schému pre zvolenú config section.

<xsd:schema attributeFormDefault="unqualified" elementFormDefault="qualified" version="1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <xsd:element name="system.mapservice"> <xsd:complexType> <xsd:sequence> <xsd:element name="themes"> <xsd:complexType> <xsd:sequence> <xsd:element maxOccurs="unbounded" name="add"> <xsd:complexType> <xsd:attribute name="key" type="xsd:string" /> <xsd:attribute name="url" type="xsd:string" /> <xsd:attribute name="id" type="xsd:int" /> <xsd:attribute name="primaryField" type="xsd:string" /> <xsd:attribute name="borderWidth" use="optional"> <xsd:simpleType> <xsd:restriction base="xsd:int"> <xsd:enumeration value="1" /> <xsd:enumeration value="2" /> <xsd:enumeration value="3" /> <xsd:enumeration value="4" /> <xsd:enumeration value="5" /> <xsd:enumeration value="6" /> </xsd:restriction> </xsd:simpleType> </xsd:attribute> <xsd:attribute name="borderColor" type="xsd:string" /> <xsd:attribute name="fillColor" type="xsd:string" /> </xsd:complexType> </xsd:element> </xsd:sequence> </xsd:complexType> </xsd:element> </xsd:sequence> </xsd:complexType> </xsd:element> </xsd:schema>
Príklad xsd schémy "MapServiceConfigSection.xsd"

<xsd:schema attributeFormDefault="unqualified" elementFormDefault="qualified" version="1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <xsd:element name="system.mapservice">
    <xsd:complexType>
      <xsd:sequence>
        <xsd:element name="themes">
          <xsd:complexType>
            <xsd:sequence>
              <xsd:element maxOccurs="unbounded" name="add">
                <xsd:complexType>
                  <xsd:attribute name="key" type="xsd:string" />
                  <xsd:attribute name="url" type="xsd:string" />
                  <xsd:attribute name="id" type="xsd:int" />
                  <xsd:attribute name="primaryField" type="xsd:string" />
                  <xsd:attribute name="borderWidth" use="optional">
                    <xsd:simpleType>
                      <xsd:restriction base="xsd:int">
                        <xsd:enumeration value="1" />
                        <xsd:enumeration value="2" />
                        <xsd:enumeration value="3" />
                        <xsd:enumeration value="4" />
                        <xsd:enumeration value="5" />
                        <xsd:enumeration value="6" />
                      </xsd:restriction>
                    </xsd:simpleType>
                  </xsd:attribute>
                  <xsd:attribute name="borderColor" type="xsd:string" />
                  <xsd:attribute name="fillColor" type="xsd:string" />
                </xsd:complexType>
              </xsd:element>
            </xsd:sequence>
          </xsd:complexType>
        </xsd:element>
      </xsd:sequence>
    </xsd:complexType>
  </xsd:element>
</xsd:schema>

Príklad xsd schémy "MapServiceConfigSection.xsd"

Následne túto schému pripojíme k pôvodnému súboru príkazom include, v ktorom definujume umiestnenie našej vlastnej schémy. Súbory s originálnymi schémami, ktoré využíva Visual Studio, nájdeme v priečinku "<Visual Studio Install Folder>\Xml\Schemas\" (napr.: "c:\Program Files (x86)\Microsoft Visual Studio 10.0\Xml\Schemas"). Súbor, ktorý treba doplniť príkazom include má názov v tvare "DotNetConfig[verzia framework-u].xsd" (napr.: "DotNetConfig.xsd"). Príkaz include treba vložiť na prvé miesto root elementu schema, uložiť zmeny vykonané v súbore a je to.

<?xml version="1.0" encoding="us-ascii"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:vs="http://schemas.microsoft.com/Visual-Studio-Intellisense" elementFormDefault="qualified" attributeFormDefault="unqualified" vs:helpNamespace="http://schemas.microsoft.com/.NetConfiguration/v2.0"> <xs:include schemaLocation="MapServiceConfigSection.xsd"/> <xs:element name="configuration"> <xs:complexType> <xs:choice minOccurs="0" maxOccurs="unbounded"> <xs:any namespace="##any" processContents="lax" /> </xs:choice> <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/> </xs:complexType> </xs:element> </xs:schema>
Použitie príkazu include na zahrnutie custom xsd schémy

<?xml version="1.0" encoding="us-ascii"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:vs="http://schemas.microsoft.com/Visual-Studio-Intellisense"
    elementFormDefault="qualified"
    attributeFormDefault="unqualified"
    vs:helpNamespace="http://schemas.microsoft.com/.NetConfiguration/v2.0">

    <xs:include schemaLocation="MapServiceConfigSection.xsd"/>

    <xs:element name="configuration">
        <xs:complexType>
            <xs:choice minOccurs="0" maxOccurs="unbounded">
                <xs:any namespace="##any" processContents="lax" />
            </xs:choice>
            <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
        </xs:complexType>
    </xs:element>
</xs:schema>

Použitie príkazu include na zahrnutie custom xsd schémy

Visual Studio automaticky načíta danú schému (bez nutnosti uplatnenia metódy "vystúpiť/nastúpiť") a pri editácii web.configu ponúkne Intellisense (ale len v prípade, že v nami definovanej schéme nie je žiadna chyba ;)).

Ukážka využitia Intellisense