xxxmatko blog

Publikovanie balíčkov na NuGet server pomocou Visual Studia

xxxmatko — Tue, 26 Mar 2013 18:56:00 GMT

V mojom poslednom blogu som písal o tom, ako možno rozbehať vlastný NuGet server pomocou balíčka NuGet.Server. Dnes by som chcel v tejto téme pokračovať, a popísať spôsob, ako je možné balíčky do tohto (ale aj iného) NuGet servera publikovať prostredníctvom Visual Studia.

Nad otázkou že: "Ako tam tie balíčky vlastne posielať, tak aby to bolo čo najefektívnejšie?" som sa zamýšlal už dlhšie. Keďže zastávam názor, že je zbytočné vymýšlať niečo, čo už vymyslené je, tak som sa najprv poobzeral po už existujúcich spôsoboch riešenia.

Ako prvá možnosť ma napadla, používať nástroj NuGet Package Explorer. Je to v celku milá UI aplikáciá na prácu s NuGet balíčkami. Pomerne ľahko sa tu dajú vytvárať, editovať už existujúce balíčky a daná aplikácia poskytuje aj rozhranie na publikovanie balíčkov do NuGet servera. To klikanie a neustále otváranie a zatváranie balíčkov kvôli zmene jedného atribútu ma však prestalo baviť už asi po desiatich minútach. A keď niektoré vytvorené balíčky sa mi nenainštalovali korektne, tak som túto cestu úplne zavrhol. Nechcem tým povedať, že tento nástroj je zlý, len z môjho pohľadu publikovanie balíčkov cez tento program je skôr otrava ako zábava.

Keďže samotný balíček je v podstate zip súbor, a metainformácie sú reprezentované vo forme xml (NuGet manifest), takže ich je pomerne ľahké editovať, mohol by som balíčky vytvárať ručne cez NuGet command line a rovnako tak ich aj publikovať do NuGet servera. Napriek tomu, že by som takto mohol spustením jednoduchého batch file-u balíček vytvoriť a hneď ho aj publikovať, čo je určite pohodlnejšie ako spúšťať UI aplikáciu a klikať a klikať, stále čelím problému, že základná štruktúra balíčka je len nejaký adresár so súbormi. Takýto adresár by sa relatívne dosť ťažko udržoval a pri zakladaní nového balíčka by si to vyžadovalo značné usílie, keďže by som musel adresár niekam prekopírovať, premenovať x súborov, zeditovať ich obsah. A to už nehovorím o tom, že ak by obsahom môjho balíčka bola nejaká moja vlastná knižnica, túto by som musel vždy zbuildovať a následne (polo)manuálne skopírovať do priečinka kde mám definíciu balíčka.

Chcel by som totiž, aby moje balíčky boli previazané s projektami, ktoré sú v danom balíčku obsiahnuté, aby definície balíčkov (manifest a samotný obsah) boli pomerne ľahko manažovateľné a build a publish balíčkov bol prepojený na build samotných Visual Studio projektov. Už je asi jasné, že som začal rozmýľať nad tým, či by nebolo možné balíček reprezentovať ako Visual Studio project. Keď som objavil NuGet Packager project template, bolo mi hneď jasné, že to možné je. Žial, (snáď sa autor templatu neurazí ;-)), daný template mi vôbec nevyhovoval a tak som vyrobil jeden vlastný.

Moje požiadavky na template boli nasledovné:

predpripravená adresárová štruktúra NuGet balíčka,
previazanie na závislé Visual Studio projekty,
automatický build balíčka a jeho publish pri builde projektu v Release konfigurácii,
možnosť konfigurácie umiestnenia NuGet servera,
vynakladanie minimálneho úsilia pri zakladaní nového NuGet projektu.

Logiku templatu som postavil na jednoduchom princípe: Všetok content projektu, ktorý sa pri builde má skopírovať do výstupného adresára je contentom balíčka. Po builde v Realease konfigurácii sa v AfterBuild targete na základe manifestu (ktorý je tiež súčasťou projektu) vyrobí NuGet balíček a následne sa tento publishne do NuGet servera.

Na publikovanie balíčkov do NuGet servera som v mojom prípade potreboval dve veci:

url adresu samotného NuGet servera,
a API key.

Keďže som nechcel, aby tieto dve nastavenia boli harcoded priamo v project súbore, ale dali sa zmeniť tak, že ak už budem mať napríklad vytvorených niekoľko týchto NuGet projektov, a zmení sa mi API key alebo sa zmení umiestnenie môjho NuGet servera, bude stačiť ak upravím tieto nastavenia na jednom mieste a moje NuGet projekty budú fungovať ďalej. Preto som sa rozhodol, že tieto dve nastavenia budem uchovávať v premenných prostredia operačného systému s príznačnými názvami NUGET_SERVER a NUGET_APIKEY. Vo Visual Studio project súbore ich obsah potom môžem načítať nasledovne:

Načítanie environment premenných v project súbore
<PropertyGroup> <NuGetServer>$(NUGET_SERVER)</NuGetServer> <NuGetApiKey>$(NUGET_APIKEY)</NuGetApiKey> </PropertyGroup>

Keďže bez týchto dvoch nastavení nie je možné publikovať balíček, pridal som ešte BeforeBuild target, v ktorom skontrolujem prítomnosť týchto dvoch nastavení. Ak niektoré z nastavení chýba, tak pred samotným buildom vznikne chyba, build sa neuskutoční a užívateľ je o tejto chybe upozornený priamo vo Visual Studiu.

<Target Name="BeforeBuild" Condition="$(Configuration) == 'Release'"> <!-- Check NuGet server url configuration --> <Error Text="You have to set up 'NUGET_SERVER' environment variable." Condition="'$(NuGetServer)' == ''" /> <Message Text="NUGET_SERVER: $(NuGetServer)" Importance="high" /> <!-- Check NuGet API Key configuration --> <Error Text="You have to set up 'NUGET_APIKEY' environment variable." Condition="'$(NuGetApiKey)' == ''" /> <Message Text="NUGET_APIKEY: $(NuGetApiKey)" Importance="high" /> </Target>
Kontrola prítomnosti environment premenných pred buildom

Kontrola prítomnosti environment premenných pred buildom

Vytvorenie balíčka a jeho publikovanie sa zrealizuje v target-e AfterBuild. Manifest podľa ktorého sa vytvorí balíček (súbor *.nuspec) je súčasťou projektu ako content file a je nastavený tak, aby sa kopíroval do výstupného adresára. Pre ľahkú identifikáciu tohto súboru má názov v tvare <MSBuildProjectName>.nuspec. NuGet balíček následne vytvoríme msbuild príkazom Exec:

Príkaz na vytvorenie NuGet balíčka
<Exec Command="nuget pack $(OutputPath)\$(MSBuildProjectName).nuspec" />

Keďže referenčná cesta pre msbuild je cesta, na ktorej sa nachádza project file a nie cesta pre výstupný adresár (bin/Release), nuget balíček sa vytvorí v priečinku, v ktorom sa nachádza aj daný project file. Preto v rámci AfterBuild target-u môžeme po vytvorení balíčka zmazať celý obsah výstupnehé priečinka a následne do neho presunúť novovytvorený balíček (súbor s príponou *.nupkg).

<ItemGroup> <!-- Reference for output files --> <ReleaseFiles Include="$(OutputPath)\*\." /> <!-- Reference for package files --> <PackageFiles Include=".nupkg" /> </ItemGroup> <!-- Delete all release files from the Release folder --> <Delete Files="@(ReleaseFiles)" /> <!-- Delete content, tools and lib folders --> <RemoveDir Directories="$(OutputPath)\content;$(OutputPath)\tools;$(OutputPath)\lib" /> <!-- Move package file to the Release folder --> <Move SourceFiles="@(PackageFiles)" DestinationFiles="@(PackageFiles->'$(OutputPath)\%(RecursiveDir)%(Filename)%(Extension)')" />
Vyčistenie výstupného priečinka a presun balíčka

<ItemGroup>
    
    <ReleaseFiles Include="$(OutputPath)\**\*.*" />
    
    <PackageFiles Include="*.nupkg" />
</ItemGroup>


<Delete Files="@(ReleaseFiles)" />


<RemoveDir
    Directories="$(OutputPath)\content;$(OutputPath)\tools;$(OutputPath)\lib" />


<Move SourceFiles="@(PackageFiles)"
    DestinationFiles="@(PackageFiles->'$(OutputPath)\%(RecursiveDir)%(Filename)%(Extension)')" />

Vyčistenie výstupného priečinka a presun balíčka

Posledným krokom je už len vypublikovanie balíčka do NuGet servera:

Vypublikovanie balíčka
<!-- Get all package files in the Release folder --> <ItemGroup> <NugetPackageFiles Include="$(OutputPath)\*\.nupkg" /> </ItemGroup> <!-- Publish these files to the NuGet server --> <Exec Command="nuget push %(NugetPackageFiles.RelativeDir)%(NugetPackageFiles.Filename)%(NugetPackageFiles.Extension) -ApiKey $(NuGetApiKey) -Source $(NuGetServer)" />

Na tomto mieste by som už mohol aj skončiť. Ale. Stále som ešte nebol úplne spokojný, a vadila mi jedna vec, i keď možno maličkosť, ale predsa mi vadila. Pre NuGet balíčky možeme defnovať (okrem iného) aj url adresu pre ikonku balíčka. Táto ikonka sa potom zobrazuje aj vo Visual Studiu pri pridávaní NuGet balíčkov. Ako ale túto ikonku publikovať spolu s balíčkom? V rámci NuGet project template-u som pridal ďalší súbor typu *.png, ktorého názov je v tvare <MSBuildProjectName>.png. Tento súbor predstavuje ikonku pre NuGet balíček. Aby som ju mohol publikovať, tak do webovej aplikácie, ktorá predstavuje NuGet server som pridal jednoduchý HttpHandler, ktorý sa postará o upload ikoniek a tieto uloží do adresára Icons v rámci samotnej webovej aplikácie.

public class IconPublisher : IHttpHandler { public void ProcessRequest(HttpContext context) { string result = "OK"; try { // Handle only one icon at a time if (context.Request.Files.Count != 1) { throw new ArgumentException( "Only one icon file can be posted at a time."); } var file = context.Request.Files[0]; // Save icon on the server file.SaveAs(context.Server.MapPath("~/Icons/" + file.FileName)); } catch (Exception ex) { // Handle exceptions result = string.Format( "Unable to push icon file to the NuGet server. {0}", ex.Message); var httpEx = new HttpException(500, result); // Log exceptions Elmah.ErrorSignal.FromCurrentContext().Raise(httpEx); } finally { context.Response.Clear(); context.Response.ContentType = "text/plain"; // Notify client with the result context.Response.Write(result); context.ApplicationInstance.CompleteRequest(); } } }
Implementácia HttpHandler-a pre upload ikoniek

public class IconPublisher : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string result = "OK";

        try
        {
            // Handle only one icon at a time
            if (context.Request.Files.Count != 1)
            {
                throw new ArgumentException(
                    "Only one icon file can be posted at a time.");
            }
            var file = context.Request.Files[0];

            // Save icon on the server
            file.SaveAs(context.Server.MapPath("~/Icons/" + file.FileName));
        }
        catch (Exception ex)
        {
            // Handle exceptions
            result = string.Format(
                "Unable to push icon file to the NuGet server. {0}", ex.Message);
            var httpEx = new HttpException(500, result);
            // Log exceptions
            Elmah.ErrorSignal.FromCurrentContext().Raise(httpEx);
        }
        finally
        {
            context.Response.Clear();
            context.Response.ContentType = "text/plain";

            // Notify client with the result
            context.Response.Write(result);
            context.ApplicationInstance.CompleteRequest();
        }
    }
}

Implementácia HttpHandler-a pre upload ikoniek

Upload ikonky v msbuild-e môžeme zrealizovať cez msbuild inline task:

<UsingTask TaskName="UploadIconTask" TaskFactory="CodeTaskFactory" AssemblyFile="$(MSBuildToolsPath)\Microsoft.Build.Tasks.v4.0.dll"> <ParameterGroup> <!-- Name of the icon file --> <IconFileName ParameterType="System.String" Required="true" /> <!-- Url address of the NuGet server --> <NuGetServerUrl ParameterType="System.String" Required="true" /> <!-- Return value --> <UploadStatus ParameterType="System.String" Output="true" /> </ParameterGroup> <Task> <Using Namespace="System" /> <Using Namespace="System.Net" /> <Code Type="Fragment" Language="cs"> <![CDATA[ using (var client = new WebClient()) { byte[] response = client.UploadFile(this.NuGetServerUrl.TrimEnd('/') + "/IconPublisher.axd", this.IconFileName); this.UploadStatus = client.Encoding.GetString(response); } ]]> </Code> </Task> </UsingTask>
MSBuild inline task pre upload ikonky

MSBuild inline task pre upload ikonky

Nakoľko umiestnenie ikonky je závislé od umiestnenia NuGet servera a toto umiestne je možné konfigurovať cez environment premennú, je treba ešte zabezpečiť, aby sa prípadná zmena tohto nastavenia premietla aj do nastavenia inkonky pre nuget balíček. Preto v NuGet manifeste nastavíme url adresu k ikonke na nasledovnú hodnotu:

Nastavenie url adresy pre ikonky balíčka
<package> <metadata> ... <iconUrl>$nugetserver$/icons/$safeprojectname$.png</iconUrl> ... </metadata> </package>

V tomto nastavení sú použité dva replacement tokeny. Token $safeprojectname$ nahradí za nás Visual Studio pri použití project template-u. Výsledkom bude to, že názov súboru s ikonkou bude v tvare <názov_projektu.png>. Druhý token $nugetserver$ je token, ktorý Visual Studio nepozná, ale my ho pred vytvorením balíčka môžeme v manifeste nahradiť za nami nakonfigurovanú hodnotu uloženú v environment premennej NUGET_SERVER. Pre nahradenie tokenu použijeme nasledovný task:

<UsingTask TaskName="TokenReplaceTask" TaskFactory="CodeTaskFactory" AssemblyFile="$(MSBuildToolsPath)\Microsoft.Build.Tasks.v4.0.dll"> <ParameterGroup> <!-- Path to the file which contains token --> <Path ParameterType="System.String" Required="true" /> <!-- Token name --> <Token ParameterType="System.String" Required="true" /> <!-- Token replacement --> <Replacement ParameterType="System.String" Required="true" /> </ParameterGroup> <Task> <Code Type="Fragment" Language="cs"> <![CDATA[ string content = File.ReadAllText(this.Path); content = content.Replace(this.Token, this.Replacement); File.WriteAllText(this.Path, content); ]]> </Code> </Task> </UsingTask>
Task pre nahradenie custom tokenu

Task pre nahradenie custom tokenu

Na začiatok AfterBuild target-u treba ešte doplniť volania vyššie uvedených taskov:

<!-- Replace $nugetserver$ token --> <TokenReplaceTask Path="$(OutputPath)\$(MSBuildProjectName).nuspec" Token="$nugetserver$" Replacement="$(NuGetServer)" /> <!-- Upload icon to the NuGet server --> <UploadIconTask IconFileName="$(OutputPath)\$safeprojectname$.png" NuGetServerUrl="$(NuGetServer)"> <Output PropertyName="UploadStatusText" TaskParameter="UploadStatus"/> </UploadIconTask> <Error Text="$(UploadStatusText)" Condition="'$(UploadStatusText)' != 'OK'" /> <Message Text="ICON UPLOAD STATUS: $(UploadStatusText)" Importance="high" />
Volanie custom taskov

<TokenReplaceTask Path="$(OutputPath)\$(MSBuildProjectName).nuspec"
    Token="$nugetserver$" Replacement="$(NuGetServer)" />


<UploadIconTask IconFileName="$(OutputPath)\$safeprojectname$.png"
    NuGetServerUrl="$(NuGetServer)">
    <Output PropertyName="UploadStatusText" TaskParameter="UploadStatus"/>
</UploadIconTask>
<Error Text="$(UploadStatusText)" Condition="'$(UploadStatusText)' != 'OK'" />
<Message Text="ICON UPLOAD STATUS: $(UploadStatusText)" Importance="high" />

Volanie custom taskov

No a ako teda používať tento template? Povedzme, že máme Solution s projektom typu Class Library s názvom MyLib:

Do Solution pridáme nový NuGetPublisher projekt s názvom MyLib.NuGet. Tento názov môže byť v podstate akýkoľvek.
Pravým tlačítkom klikneme na Solution a vyberieme Properties. V ľavej časti okna v strome vyberieme možnosť Configuration a zrušíme Build v každej jednej konfigurácii pre náš .NuGet projekt. V tomto prípadne MyLib.NuGet. Nechceme totiž, aby sa balíček vytváral a publikoval pri builde Solution.
Keďže chceme aby náš balíček obsahoval aktuálnu verziu knižnice MyLib pridáme referenciu na tento projekt.
V novo vytvorenom projekte je kompletná štruktúra NuGet balíčka. Súčasťou sú aj transformácie pre App.config.transform a Web.config.transform v priečinku content, skripty init.ps1, install.ps1, uninstall.ps1 v priečinku tools a priečinok lib. Ak tieto súbory nepotrebujeme (prípadne aj celé adresáre) môžeme ich buď rovno vymazať, alebo len nastaviť aby sa nekopírovali do výstupného adresára (pre prípad, že ich neskôr budeme chcieť použiť).
Súčasťou projektu je aj súbor readme.txt - tento môžeme tiež buď ponechať, prípadne celý odstrániť.
Súbr MyLib.NuGet.png je ikonka balíčka. Ak ju chcem zmeniť stačí nahradiť tento súbor iným png súborom. Dôležité je zachovať jeho názov.
Manifest balíčka je v súbore MyLib.NuGet.nuspec. Tento môžeme upraviť podľa potreby. Nesmieme len zmeniť url adresu k ikonke - pokiaľ však nechceme explicitne zadať inú url adresu k ikone.
Potom už len stači prepnúť konfiguráciu na Release a zbuildovať NuGet projekt.

Ak by sa niekto rozhodol používať tento project template, prípadne sa chce len inšpirovať, feel free, môže si ho stiahnuť tu.

Ako vytvoriť vlastný NuGet server

xxxmatko — Fri, 11 Jan 2013 16:06:00 GMT

Pre tých čo ešte nepoznajú NuGet, prípadne ho spoznali len "včera" a rozmýšľajú nad tým, že ako by sa dal vytvoriť vlastný NuGet server som sa rozhodol spísať krátky návod ako tento server vytvoriť. Uvedený postup vychádza z postupu ktorý je uverejnený tu, s tým, že som doplnil kroky ktoré som musel absolvovať, aby dané riešenie fungovalo úplne.

Najprv si musíme nainštalovať NuGet Visual Studio extension. Spustíme Visual Studio a vytvoríme nový projekt typu ASP.NET Empty Web Application.

Vytvorenie prázdnej webovej aplikácie

Štruktúra projektu by mala vyzerať nasledovne:

Štruktúra projektu po vytvorení

Teraz treba v okne Solution Explorer kliknúť pravým tlačítkom myšky na položku References a vybrať z menu Manage NuGet Packages....

Otvorenie dialógu pre inštalovanie NuGet balíčkov

V novo otvorenom dialógu vyberieme záložku Online, do vyhľadávacieho textbox-u zadáme NuGet.Server a klikneme na tlačítko Install čím nainštalujeme nájdený NuGet balíček.

Nainštalovanie balíčka NuGet.Server

Po nainštalovaní balíčka máme vytvorenú web aplikáciu, ktorá predstavuje náš nový NuGet server.

Štruktúra NuGet server aplikácie

Pred tým ako nasadíme aplikáciu do IIS, musíme ešte upraviť pár nastavení. Jedným z týchto nastavení je cesta k úložisku NuGet balíčkov. Toto nastavenie môžeme meniť vo web.config súbore v časti appSettings ako hodnotu pre kľúč packagesPath. Defaultne je hodnota pre tento kľúč prázdna. Ak je zadaná prázdna hodnota ako cesta k úložisku balíčkov sa použíje ~/Packages, čiže adresár Packages nachádzajúci sa v rámci samotnej aplikácie. Adresár sa však nemusí nachádzať v rámci aplikácie a môžeme definovať akékoľvek umiestnene na disku. Po nakopírovaní NuGet balíčkov do tohto adresára sú tieto balíčky okamžite prístupné na inštalovanie.

Konfigurácia umiestnenia balíčkov
<appSettings> <add key="packagesPath" value="" /> </appSettings>

Ďalším dôležitým nastavením, ak chceme balíčky aj publikovať na náš NuGet server, je nastavenie apiKey. Hodnota tohto nastavenia predstavuje heslo/kľúč, ktorý oprávňuje užívateľov publikovať (prípadne mazať) balíčky na serveri. Ak však nechceme aby bolo potrebné pri publikovaní balíčkov zadávanie apiKey, môžeme nastaviť ďalší kľúč requireApiKey na hodnotu false. Samotný apiKey by sme však mali mať aj tak nastavený, pretože v originálnom návode, z ktorého som vychádzal aj ja, sa uvádza, že ak nenastavíme apiKey, tak bude pblikovanie / mazanie balíčkov zakázané.

Konfigurácia apiKey
<appSettings> <add key="requireApiKey" value="true" /> <add key="apiKey" value="999372af-8355-494b-ad02-828fa0773d1d" /> </appSettings>

V ďalšom kroku vypublikujeme webovú aplikáciu, aby sme ju mohli neskôr nasadiť do IIS. Napríklad do adresára "C:\inetpub\wwwroot\LocalNuGetServer".

Vypublikovanie web aplikácie

V ďalšom kroku vytvoríme web site pre NuGet server. Zapneme IIS, a vytvoríme nový web site, tak, že klikneme pravým tlačítkom na Add Web Site.

Pridanie novej web site

V novom okne vyberieme Physical path ako umiestnenie kde sme vypublikovali web aplikáciu NuGet servera a nastavíme Site name a port (napr. 19000). Ak sme zadali Site name automaticky sa pre nás vytvoril aj nový aplikačný pool, s rovnomenným názvom. Pre tento pool treba ešte skontrolovať či využíva správnu verziu .NET Framework-u. Mne defaultne nastavil verziu v2.0 a musel som ju prestaviť na v4.0. Na zmenu aplikačného pool-u stači kliknúť v ľavej časti okna na položku Application Pools vybrať náš pool, následne v pravej časti okna kliknúť na Advanced Settings a zmeniť verziu .NET Framework-u.

Nastavenie novej web site

Ak teraz do prehliadača zadáme adresu http://localhost:19000, v okne by sa mal objaviť nasledovný obsah:

Okno bežiacej aplikácie

Aby sme mohli inštalovať balíčky umiestnené na našom NuGet serveri, musíme ešte pridať tento server ako zdroj NuGet balíčkov cez dialógové okno nastavení NuGet manažéra vo Visual Studiu a to tak, že nastavíme názov Name a url adresu Source nášho servera a klineme na tlačítko Add. Okno s nastaveniami otvoríme tak, že klikneme na tlačítko Settings ktoré je prístupné v okne pre pridávanie referencií na NuGet balíčky (viď. pridanie Nuget.Server balička).

Pridanie referencie na vlastný NuGet server do Visual Studia

Publikovanie balíčkov na NuGet server

Ako som už v úvode spomenul, balíčky môžeme na server publikovať jednoducho tak, že ich nakopírujeme do nakonfigurovaného adresára. Na ich publikovanie však môžeme využiť aj commandline tool NuGet.exe Command Line bootstrapper prípadne nástroj NuGet Package Explorer, v ktorom môžeme samotné balíčky pohodlne vytvárať aj editovať.

Pre publikovanie balíčka pomocou NuGet Package Explorer nástroja, vyberieme z menu FILE položku Publish, nastavíme Publish Url a náš Publish key (publish key je hodnota apiKey, ktorú sme predtým nakonfigurovali) a stlačíme tlačítko Publish.

Publikovanie balíčka

Ak všetko prebehlo správne, tak vo VisualStudiu by sme mali hneď vidieť náš vypublikovaný balíček:

Zobrazenie vlastného balíčka

Mne sa na prvý krát však nepodarilo vypublikovať balíček a dostal som len hlášku (405) Method not allowed. Táto chyba súvisí s tým, že máme nainštalovaný WebDAV, ktorý defaulne spracúva PUT a DELETE http verbs a robí "zlotu". Napriek tomu, že som ho mal v IIS disablovaný pre daný web site, stále som dostával spomínanú odpoveď. Riešením je doplniť web.config o nasledovné nastavenie:

Vypnutie WebDAV modulu
<configuration> <system.webServer> <modules runAllManagedModulesForAllRequests="true"> <!-- Odstránenie WebDAV modulu --> <remove name="WebDAVModule" /> </modules> </system.webServer> </configuration>

Po aplikovaní uvedeného nastavenia sa WebDAV modul vypne. Publish však stále nešiel. Namiesto hlášky (405) som teraz dostal error hlášku (500) Internal Server Error.. Čo sa totiž neuvádza v originálnom návode, a je potrebné spraviť, je nastavenie práv pre zápis do adresára kde sa nachádzajú NuGet balíčky. Urobíme to tak, že vyberieme daný adresár a klikneme naň pravým tlačítkom myšky, a z menu vyberieme položku Edit Permissions.

Nastavenie práv zápisu

V záložke Security potom nastavíme práva zápisu pre užívateľa IIS_IUSRS.

Nastavenie práv zápisu pre IIS_IUSRS

Po aplikovaní daných dvoch nastavení už fungoval aj publish bez problémov (teda aspoň u mňa). Ak sa niekto pri inštalovaní NuGet servera stretol aj s inými problémami, prípadne má iné skúsenosti s inštaláciou, ktoré by stáli za zmienku, budem rád ak ich formou diskusie zazdiela svetu.

Ako na dojo.deferred

xxxmatko — Thu, 22 Nov 2012 13:14:00 GMT

Dnes by som chcel ukázať ako možno využiť dojo.Deferred na "synchronizáciu" viacerých asynchrónnych úloh.

Nasledovný kód simuluje tri asynchrónne operácie, pre ktoré treba určiť kedy dobehli, inak povedané je potrebné vykonať nejakú operáciu, ale až potom ako boli ukončené uvedené tri operácie.

Asynchrónne operácie
setTimeout(function() { console.log("Skoncilo volanie 1"); }, 2000); setTimeout(function() { console.log("Skoncilo volanie 2"); }, 1000); setTimeout(function() { console.log("Skoncilo volanie 3"); }, 3500);

Na synchronizáciu môžeme použiť dojo.Deferred objekt a counter pomocou ktorého budeme sledovať počet vykonaných/nevykonaných operácií.

// Vytvorime Deferred objekt var d = new dojo.Deferred(); // Pocitadlo zostavajucich uloh d.counter = 3; // Napojime callbacky pre deferred d.then( // Callback pre udalost ked je deferred objekt resolved function(result) { console.info("Ulohy ukoncene: '" + result + "'"); }, // ErrorCallback null, // Callback pre udalost zmeny progresu function(update) { // Znizime counter d.counter--; // Ak uz je counter na nule resolvujeme deferred if(d.counter === 0) { d.resolve("Ok!"); } } ); setTimeout(function() { console.log("Skoncilo volanie 1"); // Nahlasime zmenu stavu pre deferred objekt d.progress(1); }, 2000); setTimeout(function() { console.log("Skoncilo volanie 2"); // Nahlasime zmenu stavu pre deferred objekt d.progress(2); }, 1000); setTimeout(function() { console.log("Skoncilo volanie 3"); // Nahlasime zmenu stavu pre deferred objekt d.progress(3); }, 3500);
Synchronizácia pomocou dojo.Deferred

// Vytvorime Deferred objekt
var d = new dojo.Deferred();

// Pocitadlo zostavajucich uloh
d.counter = 3;

// Napojime callbacky pre deferred
d.then(
    // Callback pre udalost ked je deferred objekt resolved
    function(result) {
        console.info("Ulohy ukoncene: '" + result + "'");
    },
    // ErrorCallback
    null,
    // Callback pre udalost zmeny progresu
    function(update) {
        // Znizime counter
        d.counter--;
        // Ak uz je counter na nule resolvujeme deferred
        if(d.counter === 0) {
            d.resolve("Ok!");
        }
    }
);

setTimeout(function() {
    console.log("Skoncilo volanie 1");
    // Nahlasime zmenu stavu pre deferred objekt
    d.progress(1);
}, 2000);

setTimeout(function() {
    console.log("Skoncilo volanie 2");
    // Nahlasime zmenu stavu pre deferred objekt
    d.progress(2);
}, 1000);

setTimeout(function() {
    console.log("Skoncilo volanie 3");
    // Nahlasime zmenu stavu pre deferred objekt
    d.progress(3);
}, 3500);

Synchronizácia pomocou dojo.Deferred

Ak nechceme použiť counter premennú, tak môžeme využiť aj dojo.DeferredList.

// Vytvorime pole deferred objektov - jeden objekt pre jednu operaciu var dArray = [new dojo.Deferred(), new dojo.Deferred(), new dojo.Deferred()]; // Inicializujeme deferred list var dList = new dojo.DeferredList(dArray); // Callback pri ukonceni vsetkych deferred objektov v zozname dList.then(function(result){ console.info("Ulohy ukoncene: '" + result + "'"); }); setTimeout(function() { console.log("Skoncilo volanie 1"); // Nahlasime ukoncenie pre deferred objekt dArray[0].resolve(1); }, 2000); setTimeout(function() { console.log("Skoncilo volanie 2"); // Nahlasime ukoncenie pre deferred objekt dArray[1].resolve(2); }, 1000); setTimeout(function() { console.log("Skoncilo volanie 3"); // Nahlasime ukoncenie pre deferred objekt dArray[2].resolve(3); }, 3500);
Synchronizácia pomocou dojo.DeferredList

// Vytvorime pole deferred objektov - jeden objekt pre jednu operaciu
var dArray = [new dojo.Deferred(), new dojo.Deferred(), new dojo.Deferred()];

// Inicializujeme deferred list
var dList = new dojo.DeferredList(dArray);

// Callback pri ukonceni vsetkych deferred objektov v zozname
dList.then(function(result){
    console.info("Ulohy ukoncene: '" + result + "'");
});

setTimeout(function() {
    console.log("Skoncilo volanie 1");
    // Nahlasime ukoncenie pre deferred objekt
    dArray[0].resolve(1);
}, 2000);

setTimeout(function() {
    console.log("Skoncilo volanie 2");
    // Nahlasime ukoncenie pre deferred objekt
    dArray[1].resolve(2);
}, 1000);

setTimeout(function() {
    console.log("Skoncilo volanie 3");
    // Nahlasime ukoncenie pre deferred objekt
    dArray[2].resolve(3);
}, 3500);

Synchronizácia pomocou dojo.DeferredList

Dojo.Deferred sa používa v dojo framework-u ako návratový typ pre mnohé volania (napr. dojo AJAX volania) a aj v iných framework-och postavených na dojo (napr. Esri JsAPI). Preto dúfam, že aj táto krátka ukážka bude niekomu aspoň trochu nápomocná.

Obmedzenie zobrazenia mapovej služby podľa mierky

xxxmatko — Tue, 25 Sep 2012 07:15:00 GMT

Esri js api od verzie 3.1 prináša okrem iného aj novú funkcionalitu, ktorá umožňuje pre jednotlivé vrstvy nastaviť minimálnu a maximálnu zobrazovanú mierku. Inak povedané, ak je aktuálna mierka mimo tohto rozsahu, tak sa vrstva nezobrazuje, ale čo je dôležité, nedochádza ani k predtým zbytočnému requestu na mapovú službu, ktorá tak či tak v takomto prípade vracala prázdny obrázok. I keď táto funkčnosť tu mohla byť už dávno, nevadí, radšej neskôr ako nikdy.

Aplikácia, v ktorej som chcel túto funkčnosť použiť bola postavená na staršej verzii api. Takže, ďalší krok bol veľmi jasný - treba použiť nové api. Esri api však od verzie 3.0 interne používa dojo verziu 1.7, ktoré v zmienej verzii podporuje už aj AMD. Napriek tomu, že dojo samotné až do verzie 2.0 má podporovať súčasne AMD aj legacy (synchrónny) mód, a teda aj aplikácie postavené na starších verziách dojo frameworku by mali fungovať, v kombinácii s esri js api to tak nebolo. Začali sa objavovať "zázračné" chybové hlášky. Odstrániť ich bude možné asi iba aplikovaním prvého z dvoch odporúčaných postupov esri, pre prechod na novšiu verziu "Re-factor application code to use the loader to load custom classes" :-(. Keďže refaktorovanie by zabralo veľa času, rozhodol som sa implementovať min-max funkčnosť aj pre staršie verzie esri js api.

Každý layer v esri js api dedí zo základnej triedy esri.layers.Layer. Preto najprv rozšírime túto triedu o minScale a maxScale vlastnosti:

Rozšírenie esri.layers.Layer o minScale a maxScale vlastnosti
dojo.extend(esri.layers.Layer, { // Základná maximálna mierka je 1:1 maxScale: 1, // Základná minimálna mierka je 1:int.MAX minScale: Math.pow(2, 32) });

Ďalším krokom je pri vytváraní nejakej vrstvy (napr. ArcGISDynamicMapServiceLayer) nastaviť tieto atribúty na požadované hodnoty.

Inicializácia dynamickej vrstvy a nastavenie minScale a maxScale
// Vytvorim ArcGISDynamicMapServiceLayer vrstvu var layer = new esri.layers.ArcGISDynamicMapServiceLayer("service url", { id: "id vrstvy", imageParameters: {}, visible: true }); // Vrstva sa ma zobrazovat od mierky 1:500 000 layer.minScale = 500000; // Vrstva sa ma zobrazovat do mierky 1:100 000 layer.maxScale = 100000;

Keď už vieme ako nastaviť požadované parametre, treba ešte upraviť funkčnosť vrstvy ako takej, aby pred samotným vykonamím requestu na obrázok s mapou, skontrolovala, či aktuálna mierka mapy zodpovedá obmedzeniam pre danú vrstvu. Vrstva reaguje na rôzne udalosti v mape. Jednou z nich je aj zmena extent-u (výrezu) mapy, ktorý vrstva obsluhuje handlerom _onExtentChangeHandler. Tento handler je aj miestom, kde treba vykonať kontrolu mierky, a ak je mimo rozsah, zastaviť ďalšie spracovanie.

dojo.extend(esri.layers.DynamicMapServiceLayer, { // Uchovame si referenciu na povodny handler __onExtentChangeHandler: esri.layers.DynamicMapServiceLayer.prototype._onExtentChangeHandler, // Implementujeme vlastny handler _onExtentChangeHandler: function (extent, point, c, lod) { // Notifikujeme mapu o tom ze zacal update vrstvy this._fireUpdateStart(); // Zistime mierku var scale = -1; if (lod) { // Ak ma mapa pevne definovany zoznam LOD (Level Of Detail) // tak netreba mierku pocitat scale = lod.scale; } else { // Vypocitame mierku podla noveho extentu, velkosti mapy a // pouziteho suradnicoveho systemu scale = Math.round(esri.geometry.getScale(extent, this._map.width, extent.spatialReference.wkid)); } // Je vrstva v danej mierke viditelna? var isLayerVisible = (this.minScale >= scale) && (this.maxScale <= scale); // Ak je vrstva nezobrazovana v danej mierke tak zastavime request if (!isLayerVisible) { // Notifikujeme mapu o tom, ze skoncil update mapy this._fireUpdateEnd(); // Musime skryt aj div element s obrazkom mapy s predoslej mierky esri.hide(this._div); return; } // Vrstva je viditelna v danej mierke tak znova zobrazime div element // ktory obsahuje obrazok if (this.visible) { esri.show(this._div); } // Zavolame povodnu implementaciu handlera this.__onExtentChangeHandler.apply(this, arguments); } });
Rozšírenie triedy esri.layers.DynamicMapServiceLayer o kontrolu na povolenú mierku

dojo.extend(esri.layers.DynamicMapServiceLayer, {
    // Uchovame si referenciu na povodny handler
    __onExtentChangeHandler:
        esri.layers.DynamicMapServiceLayer.prototype._onExtentChangeHandler,

    // Implementujeme vlastny handler
    _onExtentChangeHandler: function (extent, point, c, lod) {
        // Notifikujeme mapu o tom ze zacal update vrstvy
        this._fireUpdateStart();

        // Zistime mierku
        var scale = -1;
        if (lod) {
            // Ak ma mapa pevne definovany zoznam LOD (Level Of Detail)
            // tak netreba mierku pocitat
            scale = lod.scale;
        }
        else {
            // Vypocitame mierku podla noveho extentu, velkosti mapy a
            // pouziteho suradnicoveho systemu
            scale = Math.round(esri.geometry.getScale(extent, this._map.width,
                extent.spatialReference.wkid));
        }

        // Je vrstva v danej mierke viditelna?
        var isLayerVisible = (this.minScale >= scale) && (this.maxScale <= scale);

        // Ak je vrstva nezobrazovana v danej mierke tak zastavime request
        if (!isLayerVisible) {
            // Notifikujeme mapu o tom, ze skoncil update mapy
            this._fireUpdateEnd();

            // Musime skryt aj div element s obrazkom mapy s predoslej mierky
            esri.hide(this._div);
            return;
        }

        // Vrstva je viditelna v danej mierke tak znova zobrazime div element
        // ktory obsahuje obrazok
        if (this.visible) {
            esri.show(this._div);
        }

        // Zavolame povodnu implementaciu handlera
        this.__onExtentChangeHandler.apply(this, arguments);
    }
});

Rozšírenie triedy esri.layers.DynamicMapServiceLayer o kontrolu na povolenú mierku

Povedzme, že máme mapovú aplikáciu v ktorej máme päť služieb, čo sa týka zobrazovanej mierky, zreťazených tak, že vždy je viditeľná len jedna služba. Ak použijeme minScale/maxScale funkčnosť, v konkrétnom okamihu sa namiesto piatich requestov bude vykonávať vždy len jeden, čím môžeme výrazne zrýchliť aplikáciu ako takú.

dojo masked input plugin

xxxmatko — Fri, 31 Aug 2012 08:39:00 GMT

Síce dojo framework poskytuje mnoho hotových UI komponentov, osobne mi medzi nimi chýba MaskedTextBox, tak ako ho poznám z jQuery (viď. Masked Input Plugin). Naprieč rôznymi typmi textboxov (MappedTextBox, ValidationTextBox, ...) tento typ mi tam chýba, a nenašiel som žiadnu jeho implementáciu. Tak som si jedno poobedie sadol za počítač, a "jemne" inšpirovaný spomínaným jQuery pluginom som dal dokopy veľmi podobný plugin aj pre dojo.

Samotný mask plugin na svoje správane fungovanie potrebuje ešte jeden plugin, a to caret plugin, pre pozicovanie kurzora v textboxe.

define("xDev/plugins/caret",["dojo/_base/lang", "dojo/dom"], function (lang, dom) { if (dojo.caret) { return; } lang.mixin(dojo, { caret: function (node, begin, end) { if (typeof (node) === "string") { node = dom.byId(node); } if (!node) { throw new Error("Node is undefined."); } if (typeof (begin) !== "number") { if (node.setSelectionRange) { begin = node.selectionStart; end = node.selectionEnd; } else if (document.selection && document.selection.createRange) { var range = document.selection.createRange(); begin = 0 - range.duplicate().moveStart("character", -100000); end = begin + range.text.length; } return { "begin": begin, "end": end }; } end = (typeof (end) === "number") ? end : begin; if (node.setSelectionRange) { return node.setSelectionRange(begin, end); } else { var range = node.createTextRange(); range.collapse(true); range.moveEnd("character", end); range.moveStart("character", begin); range.select(); return range; } } }); });
dojo.caret plugin

define("xDev/plugins/caret",["dojo/_base/lang", "dojo/dom"], function (lang, dom) {
    if (dojo.caret) {
        return;
    }

    lang.mixin(dojo, {
        caret: function (node, begin, end) {
            if (typeof (node) === "string") {
                node = dom.byId(node);
            }

            if (!node) {
                throw new Error("Node is undefined.");
            }

            if (typeof (begin) !== "number") {
                if (node.setSelectionRange) {
                    begin = node.selectionStart;
                    end = node.selectionEnd;
                }
                else if (document.selection && document.selection.createRange) {
                    var range = document.selection.createRange();
                    begin = 0 - range.duplicate().moveStart("character", -100000);
                    end = begin + range.text.length;
                }
                return {
                    "begin": begin,
                    "end": end
                };
            }

            end = (typeof (end) === "number") ? end : begin;
            if (node.setSelectionRange) {
                return node.setSelectionRange(begin, end);
            }
            else {
                var range = node.createTextRange();
                range.collapse(true);
                range.moveEnd("character", end);
                range.moveStart("character", begin);
                range.select();
                return range;
            }
        }
    });
});

dojo.caret plugin

Samotný mask plugin vyzerá nasledovne:

define("xDev/plugins/mask", ["dojo/_base/lang", "dojo/dom", "dojo/_base/array", "dojo/dom-attr", "dojo/on", "dojo/_base/event", "dojo/keys", "xDev/plugins/caret"], function (lang, dom, array, attr, on, event, keys) { if (dojo.mask) { return; } var masks = []; var placeholders = { "": "_" }; var definitions = { "9": "[0-9]", "a": "[A-Za-z]", "": "[A-Za-z0-9]" }; // Help methods function concatArrays(left, right) { var result = []; for (key in left) { result[key] = left[key]; } for (key in right) { result[key] = right[key]; } return result; }; function getPlaceHolder(defKey, placeholders) { return placeholders[defKey] ? placeholders[defKey] : placeholders["*"]; }; function initTests(mask, definitions) { var tests = []; array.forEach(mask.split(""), function (c, i) { if (!definitions[ c]) { tests.push(null); return; } tests.push(new RegExp(definitions[ c])); }); return tests; }; function getFirstNonMasPosition(tests) { var firstNonMaskPos = null; array.some(tests, function (t, i) { firstNonMaskPos = i; return (t != null); }); return firstNonMaskPos; }; function initBuffer(mask, definitions, placeholders) { return array.map(mask.split(""), function (c, i) { if (c != "?") { return definitions[ c] ? getPlaceHolder(c, placeholders) : c; } }); }; lang.mixin(dojo, { // Vypnutie pluginu unmask: function (node) { if (typeof (node) === "string") { node = dom.byId(node); } if (!node) { throw new Error("Node is undefined."); } var id = attr.get(node, "id"); if (!masks[id]) { return; } array.forEach(masks[id]._connections, function (con) { if (typeof (con.remove) === "function") { con.remove.apply(); } }); masks[id]._connections = null; delete masks[id]; attr.set(node, "value", ""); }, // Zapnutie pluginu mask: function (node, args) { if (typeof (node) === "string") { node = dom.byId(node); } if (!node) { throw new Error("Node is undefined."); } args = lang.mixin({}, { "placeholders": {}, "definitions": {}, "mask": "" }, args \|\| {}); if (args.mask.length === 0) { throw new Error("Mask is empty"); } var length = args.mask.length; var mask = args.mask; var tb = node; var originText = attr.get(tb, "value"); var focusText = originText; var ph = concatArrays(placeholders, args.placeholders); var defs = concatArrays(definitions, args.definitions); var tests = initTests(args.mask, defs); var firstNonMaskPos = getFirstNonMasPosition(tests); var buffer = initBuffer(args.mask, defs, ph); function getValue() { return attr.get(node, "value"); }; function setValue(value) { setTimeout(function () { attr.set(node, "value", value); }, 0); }; function getRawData() { return array.filter(buffer, function (bChar, i) { if (!tests[i]) { return false; } if (bChar == getPlaceHolder(mask.charAt(i), ph)) { return false; } return true; }); }; function seekNext(pos) { while ((++pos <= length) && !tests[pos]); return pos; }; function seekPrev(pos) { while ((--pos >= 0) && !tests[pos]); return pos; }; function clear(start, end) { if (typeof (start) !== "number") { start = 0; } if (typeof (end) !== "number") { end = length; } for (var i = start; (i < end) && (i < length); i++) { if (tests[i]) { var maskChar = mask.charAt(i); buffer[i] = getPlaceHolder(maskChar, ph); } } }; function flush() { var val = buffer.join(""); setValue(val); return val; }; function isOk() { var pos = check(); pos = seekNext(pos); return (pos - 1) === length; }; function isComplete() { var testVal = getValue(); for (var i = 0; i < length; i++) { if (!tests[i]) { continue; } var testChar = testVal.charAt(i); if (!tests[i].test(testChar)) { return false; } } return true; }; function check(valueToTest) { var testVal = valueToTest \|\| getValue(); var testValPos = -1; var i; for (i = 0; i < length; i++) { if (tests[i]) { var maskChar = mask.charAt(i); buffer[i] = getPlaceHolder(maskChar, ph); while (++testValPos < testVal.length) { var testChar = testVal.charAt(testValPos); if (tests[i].test(testChar)) { buffer[i] = testChar; break; } } if (testValPos === testVal.length) { i--; break; } } if ((testValPos + 1) === testVal.length) { break; } } return (i == -1) ? firstNonMaskPos : i; }; function shiftToLeft(from, shiftStart) { shiftStart--; for (var i = from; i < length; i++) { if (!tests[i]) { continue; } if (shiftStart >= length) { break; } while (++shiftStart < length) { if (!tests[shiftStart]) { continue; } if (buffer[shiftStart] == getPlaceHolder(mask.charAt(shiftStart), ph)) { continue; } buffer[i] = buffer[shiftStart]; buffer[shiftStart] = getPlaceHolder(mask.charAt(shiftStart), ph); break; } } }; function node_OnFocus(e) { focusText = getValue(); var pos = check(); flush(); if (pos != 0) { pos = seekNext(pos); } var moveCaret = function () { if ((pos == length) \|\| ((pos - 1) == length)) { dojo.caret(node, 0, pos); } else { dojo.caret(node, pos); } }; setTimeout(moveCaret, 0); }; function node_OnBlur(e) { var pos = check(); pos = seekNext(pos); if ((pos - 1) !== length) { clear(); attr.set(node, "value", ""); return; } if (getValue() != focusText) { on.emit(node, "change", { bubbles: true, cancelable: true }); } }; function node_OnBackspace() { var caret = dojo.caret(node); if ((caret.end - caret.begin) == 0) { if (caret.begin === 0) { return; } caret.begin = seekPrev(caret.begin); } clear(caret.begin, caret.end); flush(); if (!tests[caret.begin]) { caret.begin = seekNext(caret.begin); } setTimeout(function () { dojo.caret(node, caret.begin);}, 0); }; function node_OnDelete() { var caret = dojo.caret(node); if ((caret.end - caret.begin) == 0) { if (caret.end === length) { return; } caret.end = seekNext(caret.end); } clear(caret.begin, caret.end); shiftToLeft(caret.begin, caret.end); flush(); if (!tests[caret.begin]) { caret.begin = seekNext(caret.begin); } setTimeout(function () { dojo.caret(node, caret.begin); }, 0); }; function node_OnLeftArrow() { var caret = dojo.caret(node); if (dojo.isIE) { setTimeout(function () { dojo.caret(node, seekPrev(caret.begin)); }, 0); } else { dojo.caret(node, seekPrev(caret.begin)); } }; function node_OnRightArrow() { var caret = dojo.caret(node); if (dojo.isIE) { setTimeout(function () { dojo.caret(node, seekNext(caret.begin)); }, 0); } else { dojo.caret(node, seekNext(caret.begin)); } }; function node_OnEscape() { attr.set(node, "value", focusText); dojo.caret(node, 0, length); }; function node_OnKeypress(e) { if (e.ctrlKey \|\| e.altKey \|\| e.shiftKey \|\| e.metaKey \|\| (e.which < 32)) { return true; } event.stop(e); var caret = dojo.caret(node); if ((caret.end - caret.begin) > 0) { clear(caret.begin, caret.end); flush(); } caret.begin--; while ((++caret.begin <= length) && !tests[caret.begin]); if (caret.begin >= length) { return false; } var pos = caret.begin; var c = String.fromCharCode(e.charCode \|\| e.keyCode); if (tests[pos] && tests[pos].test(c)) { buffer[pos] = c; pos = seekNext(pos) } else { buffer[pos] = getPlaceHolder(mask.charAt(pos), ph); } flush(); setTimeout(function () { dojo.caret(node, pos); if (isComplete()) { on.emit(node, "complete", { bubbles: true, cancelable: true }); } }, 0); return false; }; function node_OnKeydown(e) { if (e.ctrlKey \|\| e.altKey \|\| e.shiftKey \|\| e.metaKey) { return true; } switch (e.keyCode) { case keys.BACKSPACE: node_OnBackspace(); event.stop(e); return false; case keys.DELETE: node_OnDelete(); event.stop(e); return false; case keys.LEFT_ARROW: node_OnLeftArrow(); event.stop(e); return false; case keys.RIGHT_ARROW: node_OnRightArrow(); event.stop(e); return false; case keys.ESCAPE: node_OnEscape(); event.stop(e); return false; case keys.END: dojo.caret(node, length); event.stop(e); return false; case keys.HOME: dojo.caret(node, 0); event.stop(e); return false; default: return true; } }; function node_OnPaste(e) { var pos = check(); flush(); if (pos != 0) { pos = seekNext(pos); } var moveCaret = function () { if ((pos == length) \|\| ((pos - 1) == length)) { dojo.caret(node, 0, pos); } else { dojo.caret(node, pos); } if (isComplete()) { on.emit(node, "complete", { bubbles: true, cancelable: true }); } }; setTimeout(moveCaret, 0); }; if (!attr.get(node, "readonly")) { var con = []; con.push(on(node, "focus", node_OnFocus)); con.push(on(node, "blur", node_OnBlur)); con.push(on(node, "keydown", node_OnKeydown)); con.push(on(node, "keypress", node_OnKeypress)); con.push(on(node, dojo.isIE ? "paste" : "input", function (e) { setTimeout(node_OnPaste, 0); })); masks[attr.get(node, "id")] = { id: attr.get(node, "id"), _connections: con }; } } }); });
dojo.mask plugin

define("xDev/plugins/mask", ["dojo/_base/lang", "dojo/dom", "dojo/_base/array",
    "dojo/dom-attr", "dojo/on", "dojo/_base/event", "dojo/keys",
    "xDev/plugins/caret"], function (lang, dom, array, attr, on, event, keys) {

    if (dojo.mask) {
        return;
    }

    var masks = [];

    var placeholders = {
        "*": "_"
    };

    var definitions = {
        "9": "[0-9]",
        "a": "[A-Za-z]",
        "*": "[A-Za-z0-9]"
    };

    // Help methods
    function concatArrays(left, right) {
        var result = [];

        for (key in left) {
            result[key] = left[key];
        }

        for (key in right) {
            result[key] = right[key];
        }
        return result;
    };

    function getPlaceHolder(defKey, placeholders) {
        return placeholders[defKey] ? placeholders[defKey] : placeholders["*"];
    };

    function initTests(mask, definitions) {
        var tests = [];
        array.forEach(mask.split(""), function (c, i) {
            if (!definitions[ c]) {
                tests.push(null);
                return;
            }
            tests.push(new RegExp(definitions[ c]));
        });
        return tests;
    };

    function getFirstNonMasPosition(tests) {
        var firstNonMaskPos = null;
        array.some(tests, function (t, i) {
            firstNonMaskPos = i;
            return (t != null);
        });
        return firstNonMaskPos;
    };

    function initBuffer(mask, definitions, placeholders) {
        return array.map(mask.split(""), function (c, i) {
            if (c != "?") {
                return definitions[ c] ? getPlaceHolder(c, placeholders) : c;
            }
        });
    };

    lang.mixin(dojo, {
        // Vypnutie pluginu
        unmask: function (node) {
            if (typeof (node) === "string") {
                node = dom.byId(node);
            }
            if (!node) {
                throw new Error("Node is undefined.");
            }
            var id = attr.get(node, "id");
            if (!masks[id]) {
                return;
            }
            array.forEach(masks[id]._connections, function (con) {
                if (typeof (con.remove) === "function") {
                    con.remove.apply();
                }
            });
            masks[id]._connections = null;
            delete masks[id];
            attr.set(node, "value", "");
        },
        // Zapnutie pluginu
        mask: function (node, args) {
            if (typeof (node) === "string") {
                node = dom.byId(node);
            }
            if (!node) {
                throw new Error("Node is undefined.");
            }
            args = lang.mixin({}, {
                "placeholders": {},
                "definitions": {},
                "mask": ""
            }, args || {});

            if (args.mask.length === 0) {
                throw new Error("Mask is empty");
            }
            var length = args.mask.length;
            var mask = args.mask;
            var tb = node;
            var originText = attr.get(tb, "value");
            var focusText = originText;
            var ph = concatArrays(placeholders, args.placeholders);
            var defs = concatArrays(definitions, args.definitions);
            var tests = initTests(args.mask, defs);
            var firstNonMaskPos = getFirstNonMasPosition(tests);
            var buffer = initBuffer(args.mask, defs, ph);

            function getValue() {
                return attr.get(node, "value");
            };

            function setValue(value) {
                setTimeout(function () {
                    attr.set(node, "value", value);
                }, 0);
            };

            function getRawData() {
                return array.filter(buffer, function (bChar, i) {
                    if (!tests[i]) {
                        return false;
                    }
                    if (bChar == getPlaceHolder(mask.charAt(i), ph)) {
                        return false;
                    }
                    return true;
                });
            };

            function seekNext(pos) {
                while ((++pos <= length) && !tests[pos]);
                return pos;
            };

            function seekPrev(pos) {
                while ((--pos >= 0) && !tests[pos]);
                return pos;
            };

            function clear(start, end) {
                if (typeof (start) !== "number") {
                    start = 0;
                }
                if (typeof (end) !== "number") {
                    end = length;
                }
                for (var i = start; (i < end) && (i < length); i++) {
                    if (tests[i]) {
                        var maskChar = mask.charAt(i);
                        buffer[i] = getPlaceHolder(maskChar, ph);
                    }
                }
            };

            function flush() {
                var val = buffer.join("");
                setValue(val);
                return val;
            };

            function isOk() {
                var pos = check();
                pos = seekNext(pos);
                return (pos - 1) === length;
            };

            function isComplete() {
                var testVal = getValue();
                for (var i = 0; i < length; i++) {
                    if (!tests[i]) {
                        continue;
                    }
                    var testChar = testVal.charAt(i);
                    if (!tests[i].test(testChar)) {
                        return false;
                    }
                }
                return true;
            };

            function check(valueToTest) {
                var testVal = valueToTest || getValue();
                var testValPos = -1;

                var i;
                for (i = 0; i < length; i++) {
                    if (tests[i]) {
                        var maskChar = mask.charAt(i);
                        buffer[i] = getPlaceHolder(maskChar, ph);

                        while (++testValPos < testVal.length) {
                            var testChar = testVal.charAt(testValPos);
                            if (tests[i].test(testChar)) {
                                buffer[i] = testChar;
                                break;
                            }
                        }
                        if (testValPos === testVal.length) {
                            i--;
                            break;
                        }
                    }
                    if ((testValPos + 1) === testVal.length) {
                        break;
                    }
                }
                return (i == -1) ? firstNonMaskPos : i;
            };

            function shiftToLeft(from, shiftStart) {
                shiftStart--;
                for (var i = from; i < length; i++) {
                    if (!tests[i]) {
                        continue;
                    }
                    if (shiftStart >= length) {
                        break;
                    }
                    while (++shiftStart < length) {
                        if (!tests[shiftStart]) {
                            continue;
                        }
                        if (buffer[shiftStart] ==
                            getPlaceHolder(mask.charAt(shiftStart), ph)) {
                            continue;
                        }
                        buffer[i] = buffer[shiftStart];
                        buffer[shiftStart] =
                            getPlaceHolder(mask.charAt(shiftStart), ph);
                        break;
                    }
                }
            };

            function node_OnFocus(e) {
                focusText = getValue();
                var pos = check();
                flush();
                if (pos != 0) {
                    pos = seekNext(pos);
                }
                var moveCaret = function () {
                    if ((pos == length) || ((pos - 1) == length)) {
                        dojo.caret(node, 0, pos);
                    }
                    else {
                        dojo.caret(node, pos);
                    }
                };
                setTimeout(moveCaret, 0);
            };

            function node_OnBlur(e) {
                var pos = check();
                pos = seekNext(pos);
                if ((pos - 1) !== length) {
                    clear();
                    attr.set(node, "value", "");
                    return;
                }
                if (getValue() != focusText) {
                    on.emit(node, "change", {
                        bubbles: true,
                        cancelable: true
                    });
                }
            };

            function node_OnBackspace() {
                var caret = dojo.caret(node);
                if ((caret.end - caret.begin) == 0) {
                    if (caret.begin === 0) {
                        return;
                    }
                    caret.begin = seekPrev(caret.begin);
                }
                clear(caret.begin, caret.end);
                flush();
                if (!tests[caret.begin]) {
                    caret.begin = seekNext(caret.begin);
                }
                setTimeout(function () { dojo.caret(node, caret.begin);}, 0);
            };

            function node_OnDelete() {
                var caret = dojo.caret(node);

                if ((caret.end - caret.begin) == 0) {
                    if (caret.end === length) {
                        return;
                    }
                    caret.end = seekNext(caret.end);
                }
                clear(caret.begin, caret.end);
                shiftToLeft(caret.begin, caret.end);
                flush();
                if (!tests[caret.begin]) {
                    caret.begin = seekNext(caret.begin);
                }
                setTimeout(function () { dojo.caret(node, caret.begin); }, 0);
            };

            function node_OnLeftArrow() {
                var caret = dojo.caret(node);

                if (dojo.isIE) {
                    setTimeout(function () {
                        dojo.caret(node, seekPrev(caret.begin));
                    }, 0);
                }
                else {
                    dojo.caret(node, seekPrev(caret.begin));
                }
            };

            function node_OnRightArrow() {
                var caret = dojo.caret(node);
                if (dojo.isIE) {
                    setTimeout(function () {
                        dojo.caret(node, seekNext(caret.begin));
                    }, 0);
                }
                else {
                    dojo.caret(node, seekNext(caret.begin));
                }
            };

            function node_OnEscape() {
                attr.set(node, "value", focusText);
                dojo.caret(node, 0, length);
            };

            function node_OnKeypress(e) {
                if (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey
                    || (e.which < 32)) {
                    return true;
                }
                event.stop(e);
                var caret = dojo.caret(node);
                if ((caret.end - caret.begin) > 0) {
                    clear(caret.begin, caret.end);
                    flush();
                }
                caret.begin--;

                while ((++caret.begin <= length) && !tests[caret.begin]);
                if (caret.begin >= length) {
                    return false;
                }
                var pos = caret.begin;
                var c = String.fromCharCode(e.charCode || e.keyCode);
                if (tests[pos] && tests[pos].test(c)) {
                    buffer[pos] = c;
                    pos = seekNext(pos)
                }
                else {
                    buffer[pos] = getPlaceHolder(mask.charAt(pos), ph);
                }
                flush();

                setTimeout(function () {
                    dojo.caret(node, pos);
                    if (isComplete()) {
                        on.emit(node, "complete", {
                            bubbles: true,
                            cancelable: true
                        });
                    }
                }, 0);
                return false;
            };

            function node_OnKeydown(e) {
                if (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) {
                    return true;
                }
                switch (e.keyCode) {
                    case keys.BACKSPACE:
                        node_OnBackspace();
                        event.stop(e);
                        return false;
                    case keys.DELETE:
                        node_OnDelete();
                        event.stop(e);
                        return false;
                    case keys.LEFT_ARROW:
                        node_OnLeftArrow();
                        event.stop(e);
                        return false;
                    case keys.RIGHT_ARROW:
                        node_OnRightArrow();
                        event.stop(e);
                        return false;
                    case keys.ESCAPE:
                        node_OnEscape();
                        event.stop(e);
                        return false;
                    case keys.END:
                        dojo.caret(node, length);
                        event.stop(e);
                        return false;
                    case keys.HOME:
                        dojo.caret(node, 0);
                        event.stop(e);
                        return false;
                    default:
                        return true;
                }
            };

            function node_OnPaste(e) {
                var pos = check();
                flush();

                if (pos != 0) {
                    pos = seekNext(pos);
                }
                var moveCaret = function () {
                    if ((pos == length) || ((pos - 1) == length)) {
                        dojo.caret(node, 0, pos);
                    }
                    else {
                        dojo.caret(node, pos);
                    }
                    if (isComplete()) {
                        on.emit(node, "complete", {
                            bubbles: true,
                            cancelable: true
                        });
                    }
                };
                setTimeout(moveCaret, 0);
            };

            if (!attr.get(node, "readonly")) {
                var con = [];
                con.push(on(node, "focus", node_OnFocus));
                con.push(on(node, "blur", node_OnBlur));
                con.push(on(node, "keydown", node_OnKeydown));
                con.push(on(node, "keypress", node_OnKeypress));
                con.push(on(node, dojo.isIE ? "paste" : "input", function (e) {
                    setTimeout(node_OnPaste, 0);
                }));
                masks[attr.get(node, "id")] = {
                    id: attr.get(node, "id"),
                    _connections: con
                };
            }
        }
    });
});

dojo.mask plugin

Ospravedlňujem sa za vynechanie komentárov - ale už aj tak je to dosť dlhé ;-). Daný plugin som testoval v FF, IE8, Safari, Chrome a v Opere. Fungoval všade. Ak by sa ho niekto odhodlal použiť a našiel by nejaký ten bug, tak budem len rád ak mi dá vedieť.

require(["xDev/plugins/mask", "dojo/domReady!"], function () { dojo.mask("tbDate", { mask: "99/99/9999" }); dojo.mask("tbDateTime", { mask: "99.99.9999 99:99:99" }); dojo.mask("tbDateTimeCustom", { mask: "dd.MM.yyyy hh:mm:ss", definitions: { "d": "[0-9]", "M": "[0-9]", "y": "[0-9]", "h": "[0-9]", "m": "[0-9]", "s": "[0-9]" }, placeholders: { "d": "d", "M": "M", "y": "y", "h": "h", "m": "m", "s": "s" } }); dojo.mask("tbEyeScript", { mask: "~9.99 ~9.99 999", definitions: { "~": "[+-]" } }); });
Použitie pluginu

require(["xDev/plugins/mask", "dojo/domReady!"], function () {
    dojo.mask("tbDate", {
        mask: "99/99/9999"
    });

    dojo.mask("tbDateTime", {
        mask: "99.99.9999 99:99:99"
    });

    dojo.mask("tbDateTimeCustom", {
        mask: "dd.MM.yyyy hh:mm:ss",
        definitions: {
            "d": "[0-9]",
            "M": "[0-9]",
            "y": "[0-9]",
            "h": "[0-9]",
            "m": "[0-9]",
            "s": "[0-9]"
        },
        placeholders: {
            "d": "d",
            "M": "M",
            "y": "y",
            "h": "h",
            "m": "m",
            "s": "s"
        }
    });

    dojo.mask("tbEyeScript", {
        mask: "~9.99 ~9.99 999",
        definitions: {
            "~": "[+-]"
        }
    });
});

Použitie pluginu

Generic GetHashCode metóda

xxxmatko — Mon, 20 Aug 2012 11:23:00 GMT

Obsahom dnešného môjho krátkeho príspevku bude metóda, na získanie hash kódu pre ľubovoľný objekt. Ak sa niekto teraz sám seba pýta, že prečo a načo, tak sa pokúsim veľmi stručne vysvetliť ako som k tejto metóde dospel.

Čo robí metóda GetHashCode predpokladám, že asi každý vie. Ak by aj náhodou nie, tak sa používa na získanie číselnej hodnoty, ktorá identifikuje objekt počas porovnávania s inými objektami, viac tu. Ja som potreboval túto metódu override-núť pre objekt z toho dôvodu, že nie všetky vlastnosti objektu mali pre mňa význam pri porovnávaní inštancií daného objektu. Keď som toto ale musel robiť v poradí už asi po tretí krát, (vždy pre iný typ objektu) povedal som si: "A dosť!".

Napadlo ma, že by bolo fajn, keby som pre metódu GetHashCode mohol definovať zoznam vlastností, ktoré má brať do úvahy pri získavaní hash kódu. Výsledkom mojej snahy je nasledovná extesion metóda:

public static class ObjectExtensions { public static int GetHashCode<T>(this T @this, params string[] properties) where T : class { // Skontrolujem ci objekt nie je null if (ReferenceEquals(@this, null)) { return 0; } // Ak neboli vymenovane vlastnosti tak pouzijem original implementaciu if ((properties == null) \|\| (properties.Length == 0)) { return @this.GetHashCode(); } // Ziskam zoznam vlastnosti objektu daneho typu var propInfos = typeof(T).GetProperties(BindingFlags.Public \| BindingFlags.Instance \| BindingFlags.NonPublic); // Tu bude vysledny hash int hash = 0; foreach (PropertyInfo pInfo in propInfos) { // Ak nie je vlasnosti v zozname vlastnosti idem na dalsiu if (Array.IndexOf(properties, pInfo.Name) == -1) { continue; } // Ziskam hodnotu vlastnosti pre instanciu objektu object value = pInfo.GetValue(@this, null); // Ak je hodnota null, tak ju nebudem uvazovat if (ReferenceEquals(value, null)) { continue; } // Ak je vlastnost typu string a ten je empty neuvazujem ani ten if ((pInfo.PropertyType == typeof(string)) && string.IsNullOrEmpty((string)value)) { continue; } // Upravim vysledny hash kod pre hodnotu aktualnej vlastnosti hash ^= value.GetHashCode(); } return hash; } }
Extension metóda GetHashCode

public static class ObjectExtensions
{
    public static int GetHashCode<T>(this T @this, params string[] properties)
        where T : class
    {
        // Skontrolujem ci objekt nie je null
        if (ReferenceEquals(@this, null))
        {
            return 0;
        }

        // Ak neboli vymenovane vlastnosti tak pouzijem original implementaciu
        if ((properties == null) || (properties.Length == 0))
        {
            return @this.GetHashCode();
        }

        // Ziskam zoznam vlastnosti objektu daneho typu
        var propInfos = typeof(T).GetProperties(BindingFlags.Public
            | BindingFlags.Instance | BindingFlags.NonPublic);

        // Tu bude vysledny hash
        int hash = 0;

        foreach (PropertyInfo pInfo in propInfos)
        {
            // Ak nie je vlasnosti v zozname vlastnosti idem na dalsiu
            if (Array.IndexOf(properties, pInfo.Name) == -1)
            {
                continue;
            }

            // Ziskam hodnotu vlastnosti pre instanciu objektu
            object value = pInfo.GetValue(@this, null);

            // Ak je hodnota null, tak ju nebudem uvazovat
            if (ReferenceEquals(value, null))
            {
                continue;
            }

            // Ak je vlastnost typu string a ten je empty neuvazujem ani ten
            if ((pInfo.PropertyType == typeof(string))
                && string.IsNullOrEmpty((string)value))
            {
                continue;
            }

            // Upravim vysledny hash kod pre hodnotu aktualnej vlastnosti
            hash ^= value.GetHashCode();
        }

        return hash;
    }
}

Extension metóda GetHashCode

S vyššie uvedenou metódou potom môžem získať hash kód nasledovne:

public class MyObject : IEquatable<MyObject> { public string Name { get;set; } public DateTime Created { get;set; } public long Id { get;set; } public string Text { get;set; } // ... public bool Equals(MyObject other) { // ... } public override int GetHashCode() { // Hash kod pre objekt len z pozadovanych vlastnosti return this.GetHashCode("Id", "Name", "Text"); } }
Použitie extension metódy GetHashCode

public class MyObject : IEquatable<MyObject>
{
    public string Name
    {
        get;set;
    }

    public DateTime Created
    {
        get;set;
    }

    public long Id
    {
        get;set;
    }

    public string Text
    {
        get;set;
    }

    // ...

    public bool Equals(MyObject other)
    {
        // ...
    }

    public override int GetHashCode()
    {
        // Hash kod pre objekt len z pozadovanych vlastnosti
        return this.GetHashCode("Id", "Name", "Text");
    }
}

Použitie extension metódy GetHashCode

Lokalizovanie výsledkov pre esri IdentifyTask

xxxmatko — Fri, 08 Jun 2012 09:35:00 GMT

Po krátkej dobe opäť niečo k esri technológii. Ako už vyplýva z nadpisu, pôjde o lokalizáciu výsledkov ktoré esri vracia pri použití IdentifyTasku. Aby som však hneď na úvod neodradil tých, ktorí s esri ešte nemali tú česť, tak krátky úvod do problematiky.

Esri ArcGIS API for JavaScript umožňuje vyvýjať veľmi výkonné a ľahko použiteľné internetové mapové aplikácie (aspoň oni to tvrdia ;-)). Jedna z mnohých funkcionalít, ktoré spomínané API poskytuje, je aj dopytovanie sa na údaje prostredníctvom publikovaných REST-ových služieb. Konkrétny dopyt sa realizuje pomocou task-u. Existuje niekoľko typov taskov. Každý sa v niečom odlišuje a jeho použitie závisi od toho, aké údaje chceme získať a hlavne ako ich chceme získať.

I keď mám v nadpise IdentifyTask, na to, aby som plynule prešiel k problému a jeho riešeniu, musím začať s QueryTask-om. QueryTask a IdentifyTask sú si dosť podobné. Oba tieto tasky umožňujú získať informácie o objektoch a to jednak atribútové informácie (hodnoty atribútov jednotlivých záznamov v geo databáze) ale aj samotnú geometriu objektov. Rozdiel je v tom, že QueryTask vykonáva dopyt tak, že sa nadefinuje SQL podmienka a táto sa vykoná pre konkrétnu vrstvu v mapovej službe - inak povedané dopyt je realizovaný nad jednou "tabuľkou" (napr. ak chcem nájsť všetky budovy vyššie ako 20 metrov). IdentifyTask identifikuje objekty nad viacerými vrstvami v mapovej službe naraz, pričom dopyt je reprezentovaný geometriou (napr. chcem identifikovať všetky budovy nachádzajúce sa na určitom území).

Výsledky, ktoré tieto dva tasky vracajú sú takmer rovnaké. Ale len takmer. Oba tasky vrátia atribúty objektu ako asociatívne pole, kde kľúčom je názov atribútu a hodnota asociovaná pre kľúč reprezentuje hodnotu atribútu. QueryTask ale vracia hdonoty tak, že "zachováva" dátové typy atribútov. Zachováva treba chápať v zmysle, že keď atribút bol string, tak sa vráti ako string, keď bol double, tak sa vráti ako double.

{ "displayFieldName" : "SCHEMA.TABULKA.OBJECTID", "fieldAliases" : { "SCHEMA.TABULKA.OBJECTID" : "Id", "SCHEMA.TABULKA.NAZOV" : "Názov", "SCHEMA.TABULKA.CISLO" : "Číslo", "SCHEMA.TABULKA.DATUM" : "Dátum" }, "fields" : [ // ... ], "features" : [{ "attributes" : { "SCHEMA.TABULKA.OBJECTID" : 123, "SCHEMA.TABULKA.NAZOV" : "Názov objektu", "SCHEMA.TABULKA.CISLO" : 102.50385, "SCHEMA.TABULKA.DATUM" : 1337040000000 } }, // ... ] }
Ukážka výsledku QueryTask-u

{ "displayFieldName" : "SCHEMA.TABULKA.OBJECTID",
  "fieldAliases" : {
    "SCHEMA.TABULKA.OBJECTID" : "Id",
    "SCHEMA.TABULKA.NAZOV" : "Názov",
    "SCHEMA.TABULKA.CISLO" : "Číslo",
    "SCHEMA.TABULKA.DATUM" : "Dátum"
  },
  "fields" : [
    // ...
  ],
  "features" : [{
      "attributes" : {
        "SCHEMA.TABULKA.OBJECTID" : 123,
        "SCHEMA.TABULKA.NAZOV" : "Názov objektu",
        "SCHEMA.TABULKA.CISLO" : 102.50385,
        "SCHEMA.TABULKA.DATUM" : 1337040000000
      }
    },
    // ...
  ]
}

Ukážka výsledku QueryTask-u

Keď chceme výsledky ďalej interpretovať a zobraziť používateľovi, je pomerne jednoduché s nimi pracovať. Vezmime do úvahy napríklad atribút s dátumom. Ten môžeme konvertovať na Date objekt a následne naň použiť ľubovolný formátovací reťazec.

Formátovanie dátumu pre QueryTask
// Hodnota atributu var dateAtt = 1337040000000; // Vytvorim date objekt var date = new Date(dateAtt); // Vlastny format pre zobrazenie var fmt = "d. M. yyyy HH:mm:ss"; // Naformatujem datum pomocou dojo var dateAttFormatted = dojo.date.locale.format(date, { selector: "date", datePattern: fmt });

Pri IdentifyTask-u však nastáva problém. Už v samotnom helpe sa niekde píše, že výsledky pre tento task, sú už prispôsobené tak, aby ich bolo možné okamžite zobraziť užívateľovi. Čo znamená že "prispôsobené" už popísané nie je, ba čo, viac nikde nie je zadokumentované ako toto "prispôsobenie" ovplyvniť.

Ukážka výsledku IdentifyTask-u
{ "results" : [{ "layerId" : 1, "layerName" : "Moj Layer", "value" : "123", "displayFieldName" : "Id", "attributes" : { "Id" : "123", "Názov" : "Názov objektu", "Číslo" : "102,50385", "Dátum" : "15. 5. 2012" } }, // ... ] }

Pri pohľade na výsledok IdentifyTask-u je jasné, že prvé prispôsobenie spočíva v tom, že ako názov atribútu nie je použitý názov stĺpca tabuľky, ale alias name, ktorý je definovaný v mapovej službe. Toto je ešte ok. Druhé prispôsobenie je už horšie. Hodnoty všetkých atribútov sú vo forme textového reťazca - "nezachovali sa" dátové typy - a pri tejto konverzii bola použitá konkrétna culture (v tomto prípade regionálne nastavenia pre Slovenskú republiku). Toto nám zabraňuje využiť zobrazovací systém ako pri QueryTasku, pretože ak zoberieme do úvahy opäť dátum, tak z hodnoty "15. 5. 2012" sa nám nepodarí vytvoriť Date objekt. Určite takmer každého, kto sa dočítal až sem, teraz napadne: "Veď ten string sa dá rozparsovať". Rozparsovať sa dá, ale naskytuje sa otázka: "Prečo sa použili práve nastavenia pre SR?", "Určite sa to dá niekde nastaviť". Pokiaľ totiž nevieme zabezpečiť, že pri konverzii výsledkov pre IdentifyTask sa použije vždy jedna a tá istá culture, nemá význam implementovať nejaké parsovanie. Nastaviť sa to dá. Zistiť ale, kde a čo treba nastaviť bol v celku pôrod, nakoľko esri help je na túto tému pomerne skúpy a rady vo fóre boli len o parsovaní a nemysleli na to, že formát sa môže meniť v závislosti od regionálnych nastavení. Po absolvovaní maratónu nastavovania regionálných nastavení všade kde to len šlo (zahrňujúc zmenu regionálnych nastavení pre "rest" aplikáciu vystavujúcu restové služby, zmenu regionálnych nastavení pre užívateľa aplikačného poolu v ktorom beží aplikácia a iné) sa s pomocou helpdesku podarilo nájsť riešenie. Formát nie len pre dátumové pole a nie len pre IdentifyTask ale aj niektoré iné operácie je závislí od regionálnych nastavení užívateľa ArcGISSOC, respektíve od užívateľa, pod ktorým beží proces ArcSOC.exe na SOC serveri. Asi trochu neštandardné ale budiš. Škoda len, že táto informácie nie je nikde spomenutá a ak aj je, tak minimálne pre mňa je doposiaľ nenájditeľná.

Esri map - vypnutie Numpad navigation

xxxmatko — Wed, 30 May 2012 09:11:00 GMT

Asi každý programátor pozná vetu "It's not a bug, it's a feature.". Väčšinou sa to berie ako vtip, ale niekedy je možné túto vetu použiť ako plne kvalifikovanú odpoveď na pripomienku zákazníka/zadávateľa úlohy.

V rámci mapovej aplikácie, postavenej na esri techonlógii a ArcGIS JS API, prišla pripomienka, že keď má užívateľ otvorený v aplikácii nejaký dialóg (napr. vyhľadávací formulár) a zadáva do textbox-u vo formulári čísla cez numpad, tak tieto sa nevkladajú do inkriminovaného textbox-u ale spôsobujú posun mapy. Aby sa čísla zadávali, musí užívateľ klinúť na plochu dialógu. No a v tomto prípade naozaj nejde o chybu aplikácie, ale o jej vlastnosť.

Esri map widget totiž odchytáva udalosti moseenter a moseleave, v rámci ktorých spúšťa alebo vypína odchytávanie udalosti stlačenia klávesy. Ak dôjde potom k stlačeniu klávesy, ktorá vykonáva posun mapy, respektíve jej priblíženie a oddialenie (numpad klávesy + a -), tak sa posunie mapa a event sa už ďalej nepropaguje. Preto aj keď užívateľ má focus na danom textbox-e, ale prešiel kurzorom myšky ponad mapu, tak pri použítí numpad-u sa mu posúva mapa a nezapisujú sa čísla do textového poľa.

Map widget umožňuje pri svojej inicializácii nastaviť parameter isKeyboardNavigation, ktorý ak je false, tak navigácia pomocou klávesnice bude vypnutá (prípadne môžeme použiť metódy enableKeyboardNavigation() a disableKeyboardNavigation()). Ak takto vypneme navigáciu, docielime síce, že pri písaní do textbox-u s použitím numpad-u sa nebude mapa posúvať a čísla sa budú zapisovať tak ako majú, ale vypneme si aj navigáciu pomocou šípok klávesnice a možnosť priblížiť a oddialiť mapu cez tlačítka + a -, čo je zas tiež nežiadúce.

Riešením by bolo mať možnosť vypnúť len navigáciu pomocou numpad-u. Esri map widget však toto neumožňuje, takže si to musíme umožniť sami ;-). Po preskúmaní map widgetu som našiel metódu _onKeyDownHandler, ktorá obsluhuje udalosť stlačenia klávesy po prechode kurzora myšky ponad mapu. Stačilo už len prepísať túto metódu nasledovne:

dojo.extend(esri.Map, { // Flag pre vypnutie a zapnutie navigacie cez numpad isNumpadNavigation: true, // Prepisanie povodného handlera _onKeyDownHandler: function(evt) { // Ak je vypnuta celkova navigacia tak nerobim nic if (!this.isKeyboardNavigation) { console.log("Keyboard navigation is disabled"); return; } // Zoznam navigacnych klaves numpad-u var numpadKeys = [dojo.keys.NUMPAD_1, dojo.keys.NUMPAD_2, dojo.keys.NUMPAD_3, dojo.keys.NUMPAD_4, dojo.keys.NUMPAD_6, dojo.keys.NUMPAD_7, dojo.keys.NUMPAD_8, dojo.keys.NUMPAD_9]; // Bola stlacena Numpad klavesa ? var isNumpad = numpadKeys.indexOf(evt.keyCode) !== -1; // Ak nie je zapnuta navigacia cez Numpad a bola stlacena // klavesanica Numpadu tak nepokracujem if (!this.isNumpadNavigation && isNumpad) { console.log("Numpad navigation is disabled"); return; } // Vyvolam original event handler; this.onKeyDown.apply(this, [evt]); } });
Prepis metódy _onKeyDownHandler

dojo.extend(esri.Map, {
    // Flag pre vypnutie a zapnutie navigacie cez numpad
    isNumpadNavigation: true,

    // Prepisanie povodného handlera
    _onKeyDownHandler: function(evt) {
        // Ak je vypnuta celkova navigacia tak nerobim nic
        if (!this.isKeyboardNavigation) {
            console.log("Keyboard navigation is disabled");
            return;
        }

        // Zoznam navigacnych klaves numpad-u
        var numpadKeys = [dojo.keys.NUMPAD_1, dojo.keys.NUMPAD_2,
            dojo.keys.NUMPAD_3, dojo.keys.NUMPAD_4, dojo.keys.NUMPAD_6,
            dojo.keys.NUMPAD_7, dojo.keys.NUMPAD_8, dojo.keys.NUMPAD_9];

        // Bola stlacena Numpad klavesa ?
        var isNumpad = numpadKeys.indexOf(evt.keyCode) !== -1;

        // Ak nie je zapnuta navigacia cez Numpad a bola stlacena
        // klavesanica Numpadu tak nepokracujem
        if (!this.isNumpadNavigation && isNumpad) {
            console.log("Numpad navigation is disabled");
            return;
        }

        // Vyvolam original event handler;
        this.onKeyDown.apply(this, [evt]);
    }
});

Prepis metódy _onKeyDownHandler

V implementácii som použil volanie dojo.extend, ktoré umožňuje rozšíriť, respektíve upraviť, definíciu dojo triedy. Možno v nasledujúcej verzii esri api budú myslieť už aj na takýto scenár použitia.

Event komunikácia medzi browser parent/child oknami

xxxmatko — Tue, 22 May 2012 12:23:00 GMT

Keď je potrebné v rámci webovej aplikácie otvoriť nové okno, po väčšine siahnem po javascript plugine simulujúcom modálne okno, jedno aký js framework používam. A určite nie som jediný. Niekedy je však výhodnejšie použiť staré dobré window.open().

Aby som bol konkrétnejší, načrtnem situáciu. V rámci webovej aplikácie máme zoznam obrázkov. Po výbere obrázka potrebujeme tento otvoriť v novom okne a umožniť užívateľovi orezať obrázok. Keďže obrázky sú veľmi veľké, z užívateľského hľadiska je nepríjemné otvárať ich v nejakom kvázi "modálnom" okne. Elegantnejšie je otvoriť obrázok v novom okne cez volanie window.open() a v tomto okne realizovať orezanie. Nastala už len otázka, ako notifikovať parent window o tom, že obrázok bol už orezaný. Samozrejme najjednoduchšie riešenie by vezeralo asi takto:

// Funckia v parent window-e pre zistenie orezania obrazka function onCropped (args) { // Spracovanie parametrom orezania } // Otvorim child okno, width a height su vopred zistene rozmery obrazku var child = window.open("Crop.aspx", "Crop", "width=" + width + ",height=" + height); // ... // V child window nastane crop tak notifikujem parent if(window.opener && (typeof(window.opener.onCropped) === "function")) { window.opener.onCropped({ // Crop args }); }
Jednoduchá komunikácia priamym volaním parent okna

// Funckia v parent window-e pre zistenie orezania obrazka
function onCropped (args) {
    // Spracovanie parametrom orezania
}

// Otvorim child okno, width a height su vopred zistene rozmery obrazku
var child = window.open("Crop.aspx", "Crop", "width=" + width + ",height="
    + height);

// ...

// V child window nastane crop tak notifikujem parent
if(window.opener && (typeof(window.opener.onCropped) === "function")) {
    window.opener.onCropped({
        // Crop args
    });
}

Jednoduchá komunikácia priamym volaním parent okna

Toto riešenie však nie je dobré, pretože dochádza k vytvoreniu priamej závislosti medzi child a parent oknom, kde child okno predpokladá že parent okno obsahuje definíciu určitej metódy. Čistejší spôsob je previazanie okien prostredníctvom event-ov. Na child okno sa totiž môžeme pozerať ako na akýkoľvek iný komponent, ktorý existuje v rámci hlavného okna a vykonáva nejakú činnosť a poskytuje možnosť zistiť zmenu svojo stavu prostredníctvom publikovaných udalostí. A teda v child okne vyrobíme vlastnú udalosť a v parent okne sa na túto udalosť napojíme.

Event komunikácia okien pomocou jQuery

Pokiaľ použijeme jQuery, tak máme k dispozícií dve metódy. Prvou je metóda .trigger(), ktorá umožňuje vyvolať udalosť na nejakom objekte. Tou druhou je metóda .on(), ktorá zaregistruje event handler pre udalosť konkrétneho objektu (prípadne môžeme použiť staršie metódy .bind(), .delegate() alebo .live()).

Pomocou vyššie uvedených metód možeme komunikáciu implementovať nasledovne:

// Otvorim child okno var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height=" + height); // Pockam na nacitanie okna $(child).on("load", function () { // Napojim sa na custom event child okna $(this).on¹("oncrop", function (evt, sender) { // Spracovanie udalosti crop }); }); // ... // V child window nastane crop tak vytvorim udalost $²(window).trigger({ type: "oncrop", cropArgs: { // Crop args } }, [window]);
Komunikácia medzi oknami s jQuery

// Otvorim child okno
var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height="
    + height);

// Pockam na nacitanie okna
$(child).on("load", function () {
    // Napojim sa na custom event child okna
    $(this).on¹("oncrop", function (evt, sender) {
        // Spracovanie udalosti crop
    });
});

// ...

// V child window nastane crop tak vytvorim udalost
$²(window).trigger({
    type: "oncrop",
    cropArgs: {
        // Crop args
    }
}, [window]);

Komunikácia medzi oknami s jQuery

Pri takejto implementácii však parent okno nezaregistruje to, že v child okne došlo ku vzniku udalosti "oncrop". Problém spočíva v tom, ako jQuery odpamätáva connect-y. Hoci sa my napojíme na udalosť "oncrop" objektu "child" (¹) (naše child okno), tento connect sa odpamätá v jQuery objekte parent okna. V child okne, ktoré má vlastný scope, existuje ďalšia inštancia jQuery objektu a my sme vyvolali udalosť "oncrop" (²) pre tento druhý jQuery objekt, a nie pre ten, ktorý existuje v scope parent okna. Preto je nutné ešte pozmeniť vyvolanie udalosti v child okne tak, aby sme referencovali jQuery inštanciu existujúcu v scope parent okna (³), a to nasledovne:

Správne vyvolanie custom udalosti v child okne pomocou jQuery
// V child window nastane crop tak vytvorim udalost window.opener.$³(window).trigger({ type: "oncrop", cropArgs: { // Crop args } }, [window]);

Ďalšou možnosťou ako zabezpečiť komunikáciu medzi oknami, je aj využitie rôznych pluginov (napr. jQuery.windowMsg). To je ale trochu zbytočné, keďže sa to dá vyriešiť aj pomocou core metód frameworku jQuery.

Event komunikácia okien pomocou dojo

Pretože okrem jQuery intenzívne využívam aj dojo, hneď som sa pozrel na to, ako by sa dala táto komunikácia zabezpečiť pomocou tohto framework-u. Opäť máme k dispozícii dve metódy. Prvou je metóda dojo.publish(), ktorá "publikuje" udalosť, všetkým odberateľom danej "témy". Pod témou, si môžeme predstaviť práve našu custom udalosť. Téma je definovaná ako string v ľubovolnom tvare. Druhou je metóda dojo.subscribe() umožňujuca zapísať sa na odber nejakej témy. Inak povedané prvou metódou vyvolám udalosť, a druhou zaregistrujem handler pre túto udalosť. Treba však myslieť na to, že tieto dve metódy operujú nad globálnym objektom, preto treba názov udalosti prefixnúť identifikátorom inštancie objektu, ktorý udalosť vyvoláva. V našom prípade týmto identifikátorom môže byť názov (name) child okna.

// Otvorim child okno var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height=" + height); // Pockam na nacitanie okna dojo.connect(child, "onload", window, function() { // Nastavim event handler pre udalost dojo.subscribe(child.name + ".onCrop", function(args) { // Spracovanie udalosti crop }); }); // ... // V child window nastane crop tak vytvorim udalost window.opener.dojo⁴.publish(window.name + ".onCrop", [{ // Crop args }]);
Komunikácia medzi oknami s dojo

// Otvorim child okno
var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height="
    + height);

// Pockam na nacitanie okna
dojo.connect(child, "onload", window, function() {
    // Nastavim event handler pre udalost
    dojo.subscribe(child.name + ".onCrop", function(args) {
        // Spracovanie udalosti crop
    });
});

// ...

// V child window nastane crop tak vytvorim udalost
window.opener.dojo⁴.publish(window.name + ".onCrop", [{
    // Crop args
}]);

Komunikácia medzi oknami s dojo

Opäť platí to, čo platilo aj pri jQuery a teda, že keď udalosť vyvolávame, musíme referencovať dojo inštanciu parent okna (⁴). Na komunikáciu tak isto, môžeme použiť nejaký ten plugin. Pokiaľ by sme vychádzali z pluginu pre jQuery, tak pre dojo by sme ho mohli implementovať nasledovne:

(function (d) { if(d._windowEvents) { return; } // Zoznam udalosti d._windowEvents = d._windowEvents \|\| []; // Prida handler pre udalost d.listen = function() { var event = undefined; var callback = undefined; var scope = undefined; // Spracovanie vstupnych parametrov d.forEach(arguments, function (a, idx) { switch (idx) { case 1: callback = a; break; case 2: scope = callback; callback = a; break; default: event = a; break; } }); // Informacie o connecte na udalost var connect = { type: event, handler: callback }; // Pripadny scope pre handler if(typeof(scope) !== "undefined") { connect.scope = scope; } d._windowEvents.push(connect); return connect; } // Vyvola udalost d.trigger = function() { var evtName = undefined; var evtArgs = undefined; var w = undefined; // Spracovanie argumentov d.forEach(arguments, function (a, idx) { switch (idx) { case 1: evtArgs = a; break; case 2: w = evtName; evtName = evtArgs; evtArgs = a; break; default: evtName = a; w = window.opener; break; } }); // Pouzitie hidden formulara pre notifikaciu var form = w.document.forms["__WINDOW_COMMUNICATION"]; if (form) { d.attr(form["__WINDOW_COMMUNICATION_EVTNAME"], "value", evtName); d.attr(form["__WINDOW_COMMUNICATION_EVTARGS"], "value", d.toJson(evtArgs)); form["__WINDOW_COMMUNICATION_SUBMIT"].click(); return true; } return false; } d.addOnLoad(function() { // Vytvorenie komunikacneho formulara if(d.byId("__WINDOW_COMMUNICATION")) { return; } var form = d.create("form", { id: "__WINDOW_COMMUNICATION", name: "__WINDOW_COMMUNICATION" }); var hdnEventName = d.create("input", { type: "hidden", name: "__WINDOW_COMMUNICATION_EVTNAME" }, form); var hdnEventArgs = d.create("input", { type: "hidden", name: "__WINDOW_COMMUNICATION_EVTARGS" }, form); var btnSubmit = d.create("input", { id: "__WINDOW_COMMUNICATION_SUBMIT", type: "button", name: "__WINDOW_COMMUNICATION_SUBMIT", value: "", style: { display: "none" } }, form); // Spracovanie klik udalosti na tlacitko v komunikacnom formulari d.connect(btnSubmit, "onclick", function() { var evtName = d.attr(hdnEventName, "value"); var evtArgs = d.attr(hdnEventArgs, "value"); // Pokusim sa najst dany event for(var i = 0; i < d._windowEvents.length; i++) { var evt = d._windowEvents[i]; if(evt.type != evtName) { continue; } // Spustim event handler [evtArgs, sedner] evt.handler.apply(null \|\| evt.scope, [d.fromJson(evtArgs)]); break; } }); d.place(form, d.body()); }); })(dojo);
Implementácia pluginu dojo.windowMessage na komunikáciu medzi oknami

Implementácia pluginu dojo.windowMessage na komunikáciu medzi oknami

S použitím vyššie uvedeného pluginu by sme komunikáciu zabezpečeili nasledovne:

// Otvorim child okno var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height=" + height); // Pockam na nacitanie okna dojo.connect(child, "onload", window, function() { // Nastavim event handler pre udalost dojo.listen("onCrop", function(args) { // Spracovanie argumentov }); }); // ... // V child window nastane crop tak vytvorim udalost dojo.trigger("onCrop", { // Crop arguments });
Komunikácia medzi oknami s dojo pluginom

// Otvorim child okno
var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height="
    + height);

// Pockam na nacitanie okna
dojo.connect(child, "onload", window, function() {
    // Nastavim event handler pre udalost
    dojo.listen("onCrop", function(args) {
        // Spracovanie argumentov
    });
});

// ...

// V child window nastane crop tak vytvorim udalost
dojo.trigger("onCrop", {
    // Crop arguments
});

Komunikácia medzi oknami s dojo pluginom

Pri porovnaní jQuery a dojo sa ako lepší framework javí jQuery. A to preto, lebo s použitím core metód umožňuje velmi jednoducho a elegantne napojiť sa na custom udalosť konkrétnej inštancie child okna. Pri dojo musíme subscribe-ovanie na udalosť konkrétnej inštancie child okna odlíšiť nejakým prefixom. Bez tohto prefixu (napr. len dojo.subscribe("onCrop", handler)), ak by sme mali otvorené naraz dve inštancie child okna, ktoré každé by robilo crop pre iný obrázok, tak by sme jedným "handlerom" handlovali, síce rovnakú, udalosť dvoch nezávislých inštancií child okna naraz. Dojo podobne ako jQuery poskytuje možnosť napojiť sa na udalosť nejakého objektu pomocou metódy dojo.connect ale táto nefunguje pre custom udalosti objektu window.

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

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

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á)

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

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

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"

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 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:

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

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

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.

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ú.