Windows Mobile Support

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Wednesday, 22 May 2013

JavaScript, Unit Test, Visual Studio and Build Machine Integration

Posted on 14:54 by Unknown

Today I will write a short post about JavaScript and unit testing. I heard a lot of .NET developers that they didn’t wrote code for JavaScript because is not supported by Visual Studio, is complicated to run it on the build machine or they don’t have time.
Guys, I have news for you, Visual Studio 2012 supports unit tests for JavaScript, even Visual Studio 2010. You can run them almost like a normal unit test for C# without needing to install anything. The JavaScript unit tests are so smart that are integrated in a way that you don’t need to change/install anything on your build machine – you even receive the standard message notification when a unit test fail. You don’t have time for them – I will not comment this, definition of DONE is wrong for those developers.
When I need to write unit tests for JavaScript code I usually prefer qunit. Why? Because in combination with a small NuGet package called NQunit you can make magic.
qunit give you the possibility to write and run JavaScript unit tests. This is a simple testing framework. The output of running unit tests is a XML that can be parsed, used by build machine or any other machine. More about qunit:
http://vunvulearadu.blogspot.ro/2012/10/how-to-write-unit-test-in-javascript.html
http://vunvulearadu.blogspot.ro/2012/10/new-unit-tests-features-of-visual.html
NQunit makes the integration between classic unit tests for C# and JavaScript code. Using this package you will have the possibility to run unit tests written in JavaScript like normal unit tests. I prefer it because you can use it with success in Visual Studio 2010 also, not only in Visual Studio 2012. One nice feature of this package is the way is integrated with the build machine. Because this package runs normal unit tests you don’t have to change anything on the build machine or to install something on developers’ machine.
The secret of NQunit is the way how it run the tests. He takes from the output folder of the HTML files that were added and run them in a browser. For each of them, he capture the XML that is generated after the test run. The XML that is generated by qunit contains the summary of the test result and can be used to get all the information that are needed. At the end, NQunit will close the browser.
public static IEnumerable<QUnitTest> GetTests(params string[] filesToTest)
Using this method you can specific all the files you want to test. Don’t worry, when you will start to use NQunit you will see that there is a great sample on NQUnit that is preconfigured.
Hints before you start:
   Don’t run the tests from ReSharper, ReSharper don’t run the tests as you expect – because the way how each session of tests runs and access the rest of the output build.
               If more then one unit test from JavaScript fails, you will only receive information related to that only one unit-tests – this can be fixed writing some C# code, but I can live with it.
               If you have JavaScript code then write some Unit Tests.
I started to use this NuGet package one year ago and it works great. For more information about this great package:
http://nuget.org/packages/NQUnit/
http://robdmoore.id.au/blog/2011/03/13/nqunit-javascript-testing-within-net-ci/

Read More
Posted in java script, javascript, unit test, unittest | No comments

Wednesday, 3 October 2012

How to write unit tests in JavaScript for a Windows Store Application

Posted on 21:53 by Unknown
Did you ever tried to write a Windows Store Application for Windows 8 in JavaScript? If yes than I hope that you started working on unit tests also. If no, than in this post we discover how we can write unit test for JavaScript and how we can integrate them in Test Explorer.
First of all why we need to write unit test for JavaScript? Because is like any other programming language that we used until now. When we write code in any language we need to test it. The framework and steps that are describe in this post can be used to write unit tests for JavaScript for a ASP.NET application of for any other project written in JavaScript.
To be able to write test in JavaScript we need to define our test methods that contains a collection of checks. We can write this from scratch or we can use a framework. For this purpose I recommend qunit.  This is a great framework that can be used to write unit tests. We have different version of qunit for Windows Store Application and ASP.NET. After you download this package all that you need to do is to create a project and add this project to it.
After this, all that we need to do is to start writing the unit tests. Basically we need t define a list of function and using methods like equal we can check our unit test assertion. We have a lot of assertion:
  • equal – check if two values are equal
  • notEqual – check if two values are different
  • deepEqual – check if two values are equivalent
  • notDeepEqual – check if two values are not equivalent
  • strictEqual – check if two values are strict equal (“===”)
  • notStricEqual – check if two values are not stric equal (“!==”)
  • throws – check if our code throws an exception
The “test” method gives us the ability to define our test function and set the name of our test method. We can define a lot of things but these are the based things that we need. In the following example we define two test methods:
(function () {
"use strict";

test("my first test", function () {
var v1 = 5;
var v2 = 10;
var sum = v1 + v2;
equal(15, sum, "Our custom message.");
});

test("my seccond test", function () {
var v1 = 5;
var v2 = 10;
var sum = v1 - v2;
equal(15, sum, "Our custom message.");
});
})();
In a project for Windows Store when we will run it, qunit will generate a nice UI that will contain the status of each unit test.

As you can see we have a very nice interface that was created where we can read the status of our tests.
Another thing that I like to qunit is the way of output is generated. The output of running the tests is an XML. Over this file a styling is applied for a Windows Store Application. This XML can be used very easily with MSBUILD. There are a lot of scripts that already do this thing.
As you know Visual Studio 2012 contains an improved Test Explorer. Using a plug-in named Chutzpah Test Adapter for the Visual Studio 2012 we can integrate this test in our Test Explorer. In this way we will able to run our C# and JavaScript tests in the same time.
 Using qunit in combination with this plug-in we can create and run unit tests in JavaScript for Windows Store Application without any problem.
Good luck with unit tests.
Read More
Posted in javascript, unit test, windows 8 | No comments

Tuesday, 2 October 2012

Mixing UI controllers in a Windows Store App (Metro App) for Windows 8

Posted on 01:15 by Unknown
More and more people (especially developer) are very excited about Windows 8 and the new features that come with him. As you already know we have free native languages that can be used to write Windows Store Applications (Metro Apps):
  • C++ using DirectX or XAML
  • C# using XAML
  • JavaScript using HTML5
Also we can use Visual Basic and XAML.
One interesting feature is the mixing components support. We can use components written in C# or C++ and use them in project written in JavaScript, C++ or C#. This is what WinMD and WinRT offer to us.
Because of this we can imagine a lot of scenarios developing a part of the application in C# and the UI part in JavaScript for example. Sounds great and this is possible and also recommended. We can develop great application in this way.
Also, WinRT API is not 100% available in any language. Even if JavaScript, C# and C++ are native languages and WinRT is native for all of them, there are things that can be done only from a specific language. For example if we want to write Windows events from our Windows Store App, this can be done only from C++. But this wills not a problem from us. We can very easily develop a component written in C++ that do this thing and use it from a JavaScript or C# project.
But what about mixing UI controllers and components. I can imagine a lot of scenarios where we could develop UI controller in C# and XAML and use it in JavaScript. Or to have a HTML and JavaScript component that can be used easily from XAML.
I will describe each scenario in part and see what is possible to accomplish.

UI controller written in HTML 5 and JavaScript for a C#/C++ and XAML application

Even if all the languages are native we will not be able to use the full power of a Page Control written in JavaScript from XAML. Even if we have a UI controller in XAML that can render HTML, this has some limitations. Because of this from this JavaScript files we will not able to call WinRT API and also to use the UI features that are supported in a HTML 5/CSS + JavaScript application for Windows Store.
Also, the output of a project written in JavaScript and HTML is not a WinMD component. It is a collection of files (HTML, JS and CSS). Because of this we cannot add a reference to a component written in JS - it doesn’t exist.

UI controller written in XAML and C#/C++ for a HTML 5/CSS and JavaScript application

Like in the previous case this is not possible in this moment. Even if we will have a WinMD component that contains our custom controller written in XAML and we will be able to add a reference to our HTML5/JS project to our WinMD component. The problem will be with the XAML UI libraries, that don’t exist in a HTML5/JS project. Even if the UI controllers written for HTML5 and XAML looks the same and have the same features, their implementation is not 100% the same. One need to be able to be rendered in a XAML and the other one will be displayed using Chakra and Trident. Because of this a HTML5/JS project will not contain the library that need is able to render the XAML controller.
Another problem is related to the tags. We don’t have a tag that can host and render an XAML component.

UI controller written in XAML and C++ for a XAML application written in C#

This is full supported and we will not have any kind of problems. Both projects type will generate a WinMD controller that can be reused without any kind of problems. Both of them use the same WinMD component to render the XAML.

UI controller written in XAML and C# for a C++ application written in C++ that uses DirectX support

Like the previous case this is full supported. An example that I like to use for this case is when we develop a game in C++ and use DirectX. For this case, the menu of the game can be written is XAML and C# because is more easily. Without any problem we will be able to overlap the XAML controller over our application.

As you can see we can have a lot of combination and a part of them all full supported. Before starting an application we should know exactly what UI components we would like to reuse and in what type of applications. The most important thing that we need to remember is: “We cannot use XAML controllers in a HTML5/JS project – in this moment”.
Read More
Posted in C#, javascript, Metro App, windows 8, windows store application | No comments

Wednesday, 22 August 2012

Promises and Asynchron calls in Metro Application and JavaScript

Posted on 13:41 by Unknown
After I wrote this post I realize that I should write a post about promises in general. Because of this I wrote the following post.
The new Windows brought a new type of applications that are called Metro Applications. These applications are design to use fewer resources as possible and to be used very easily on tablets. Metro Applications can be written not only in XAML and C# but also in HTML5 and JavaScript. This is something new for Microsoft world; we can develop native application in JavaScript. Now JavaScript is a first-class citizen in Metro world.
Of course we cannot talk about Metro Applications without talking about asynchrony methods. We need this type of methods as we need water. When we make a call to a service or we want to write something to the disk we need these calls to be asynchronous.
The most used patterns for asynchronous calls in JavaScript is the callback pattern, where we specify as parameter the callbacks functions that will be called when the given actions ends. This pattern is very used in jQuery worlds.
Microsoft decides to use another well know standard for asynchron calls. The guys from Common/JS propose another standard that was adopted by Microsoft. The name of this standards is Promises/A and is very similar with how asynchronous task work on .NET 4.5. Also this standard is based on fluent pattern, because of this we can read and understand any code written more easily. If you already worked with Node.js, Ruby or jQuery 1.5 maybe you already used this standard without knowing.
Basically a promise represents a value that will be fulfilled in the future. The exact moment cannot be defined. In a Metro Application written in JavaScript any promise return an object that have two methods that are very important and similar – then and done.
promise.then(onComplete, onError, onProgress)
The then method have three parameters where we can specify the functions (handlers) that will be called when:
  • onComplete - the call end with success
  • onError – is called when during the execution of a code an error appeared
  • onProgress - a function that is called when the promise reports progress.
Of course we can omit any of the 2th a 3th parameter. The only one that is mandatory is the first one. The done function has the same signature as the then, the difference is the error handling. This function will throw any error that appeared in the call execution, in comparison with then function that will only return an error state.
Using these promises we don’t need to rely on anonymous functions that are defined inline. We can define functions in our code that can be specified in the then or done. When an error is thrown is more easily to detect the original location of the exceptions.
In Metro Applications all the Windows Runtime and Windows Library for JavaScript is defined using this standard. Because of this this knowing this standard is a have to and is not a nice to have (know).
fooWebService.get("http://www.microsoft.com")
.then(function(result) {
// process result
return fooWebService.get("http://windows.azure.com/")
})
.then(function(result) {
// process result
}
We can have as many then appended one after another. The condition is to have in each onComplete function to return another promise. If we don’t do this, the onComplete of the second then will be immediately called, without waiting the response of the first call.
The WinJS.Promise object defined by the framework came with some helper methods. Besides then and done functions the most important functions are:
  • join – create a promise that permits us to specify a list of promises and only when all this promises are fulfilled the onComplete is called.
  • any – create a promise that is fulfilled when one of the promises is fullfilled
  • wrap – wrap a non-promise function into a promise. It is very useful when we have a chain of promises.
For example we can use any to wait any specified promises from the list to be fullfiled. When one of them is fullfiled the callback is automatically caled.
WinJS.Promise.any([someMethod1Async(), someMethod2Async("someParam")])
.then(function() { console.log("done");});
Promises are not only defined by the system, we can also defined promises very easily. When we create a promise we need to create and return a WinJS.Promise object. The constructor accepts a function that has three parameters (the onComplete, onError, onProgress parameters). In the next example we defined a promise that wait for 10 seconds and call the complete function (this a one of the classic examples):
   function wait10SecondsAsync() {
return new WinJS.Promise(function (onComplete, onError, onProgress) {
var seconds = 10;
var intervalId = window.setInterval(function () {
seconds--;
onProgress(seconds);
if (seconds < 1) {
window.clearInterval(intervalId);
onComplete();
}
}, 1000);
});
}
In the end some small hints when working with promises:
  • always name suffix an asynchrone method with “Async”
  • when more than one promise are bound don’t forget to return the promises on each onComplete function
  • for the last call of an asynchrone chain call is recommended to use done and not then (done throws any exceptions to the upper code)
  • use WinJS.Promise.any and WinJs.Promise.wait when you need to wait for one or more promises
In conclusion promises are very powerful when we are talking about asynchrone calls in JavaScript language. When are used clevered, promises can help us not only to write beautiful cod but the code it almost writes by himself.
Read More
Posted in asyncron, java script, javascript, Metro App, windows 8 | No comments

Friday, 17 August 2012

Windows 8 Metro App - How to debug JS that was loaded at runtime

Posted on 00:39 by Unknown
In the last period of time I had to work a lot with JavaScript and not for the UI, but for an entire Metro application on Windows 8. One of the nice features of JavaScript is the ability to access any kind of function and defining or overriding functions at runtime.
This feature is very powerful but also can create a lot of mess. In this moment if we would try to write a C# Metro Application we would not have the ability to load at runtime any kind of assembly or code. The “reflection” part on the .NET framework for Metro Application is not the one that we know from the normal .NET.
In JavaScript if we have a script like this:
(function(){
“use strict”
WinJS.Namespace.define(“MyClass”,{
doSomeAction: function(){
console.warn(“doSomeAction was called”);
}
});
})();
we could evaluate the script at runtime and call or instanced the object and functions that were defined.
The first step is to evaluate the script. Let assume that the definition of this script can be found in a string field named “source”. All we need to do to load this script is to call the “window.execScript” method.
var source = “ our code “;
window.execScript(source);
After this step we can call our classes and functions from our code like this:
MyClass.DoSomeAction();
Wow, very simple. In C# this would not be some simple, but the true is that I would never want to do something like this in C#. Maybe loading an assembly at runtime but this is all that I would like to do.
One big question for you now. How we can debug the code that is loaded dynamically?
You would say that it is not possible. We cannot put a breakpoint in the code that is loaded dynamically. In C# we have a method that stops the code and popup a message to the user to attach a debugger. In JavaScript this is possible using “debugger”. In every place where framework finds a debugger, the execution of code will stop like we would have a breakpoint.
We saw how we can load dynamic code at runtime how we can debug it. This is a powerful feature but be aware. Loading code at runtime is not the best thing do to when we talk about performance. Also a lot of security issues can appear. This can be the tool of devil :-).

Read More
Posted in debug, dynamic, java script, javascript, Metro App, reflection, windows 8 | No comments

Monday, 13 August 2012

Solution - A challenge with Promises from Java Script

Posted on 12:06 by Unknown
Some days ago I had a challenge for you about a code that had a bug.
var bingUrl = new Windows.Foundation.Uri("http://www.bing.com");
Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("myFile.txt")
.then(function (myFile) {
var backgroundDownloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
var currentDownload = backgroundDownloader.createDownload(bingUrl, myFile);
currentDownload.startAsync();
})
.then(
function (result) {
return displayOkayStatus(result);
});

...
function displayOkayStatus(result){
return "Complete" + result.toString();
}
In the following code the result parameter from displayOkayStatus is undefined all the time.
The cause of this problem is related to how we use promises. If we use a promise in another promise we should return the promise all the time. In this way we can create a chain. Without this, the JavaScript will not wait our async code to end execute and will call our callback. It is recommended to use then when we have intermediate stage of operation and done for the final call (we cannot have something like .done().done()).
To have a more readable code it is recommended to have calls to functions in a done or in a then and not a definition of a method. In this way any person will be able to read our code more easily.
var bingUrl = new Windows.Foundation.Uri("http://www.bing.com");
Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("myFile.txt")
.then(function (myFile) {
var backgroundDownloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
var currentDownload = backgroundDownloader.createDownload(bingUrl, myFile);
return currentDownload.startAsync();
})
.then(
function (result) {
return displayOkayStatus(result);
});

...
function displayOkayStatus(result){
return "Complete" + result.toString();
}
Read More
Posted in java script, javascript, Metro App, windows 8 | No comments

Thursday, 9 August 2012

A challenge with Promises from Java Script

Posted on 05:13 by Unknown
In one of my posts I tacked about promises from Java Script that Windows 8 introduce. For today I have a challenge for you.
var bingUrl = new Windows.Foundation.Uri("http://www.bing.com");
Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("myFile.txt")
.then(function (myFile) {
var backgroundDownloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
var currentDownload = backgroundDownloader.createDownload(bingUrl, myFile);
currentDownload.startAsync();
})
.then(
function (result) {
return displayOkayStatus(result);
});

...
function displayOkayStatus(result){
return "Complete" + result.toString();
}
The problem is that all the time the displayOkayStatus and result parameter is underfined. Can you identify why?
Solution
Read More
Posted in java script, javascript, Metro App, windows 8 | No comments

Wednesday, 1 August 2012

Metro App - Call a Java Script method by name and send the list of params

Posted on 14:52 by Unknown
In a Metro App that I writing in Java Script I wanted to call a function based on the method name that is send as a string. In C# we would need to use reflection but Java Script doesn’t require this think. We can very easily iterate through all the method like in an array and call our method.
obj[“”methodName ]();
obj[“”methodName ](param1, param2, …);
The above example get our method using “[…]” and after that calls our method. This is quite simple and a powerful feature.
But how we should rewrite this code if the parameters list are specified as an array. We want to be able to dynamically call any method and give a list of parameters as an array. If we try something like this:
var params = [param1 , param2];
obj[“”methodName ](params);
we will see that is not working, actually we set only the first parameter as an array, and the rest of parameters will be ‘undefined’. What should we do in this case is to use the apply method. Basically this method permits to specify the list of parameters as an array.
var params = [param1 , param2];
obj[“methodName”].apply(obj, params);
The first parameter need to be object of which the function is called. The second parameter is our array list. We can find another similar method named “call” that do the same think but without specifying the list of parameters (the function don’t have any parameter), but each parameter separately . The next 3 examples are equivalent for a function that doesn’t have any parameters:
obj[“methodName”].apply(obj);
obj[“methodName”].call(obj);
obj[“methodName”].();
or
obj[“methodName”].apply(obj, [param1]);
obj[“methodName”].call(obj, param1);
obj[“methodName”].(param1);
What we achieved? We are able to call dynamically any Java Script method based on a string name and an array of parameters.
Read More
Posted in java script, javascript, Metro App | No comments

Wednesday, 28 March 2012

How to use C# library from JavaScript in Windows 8

Posted on 01:08 by Unknown
Nu stiu daca v-ati jucat pana acuma cu Windows 8 si Visual Studio 2011, dar o sa aveti o surpriza. Aplicatiile pe care le puteti scrie pentru desktop pot sa fie XAML (impreuna cu C#) sau HTML5 (HTML, CSS, JavaScript).
WinRT (Windows Runtime) ne permite sa avem interoperabilitate intre C++, C#, JavaScript. Este asemanator cu ce era COM+ pe vechiul Windows. Prin intermediul sau putem sa comunicam intre cele trei limbaje. Din punct de vedere tehnicec, WinRT este mult mai simplu decat P/Invoke, avand o sintaxa destul de simpla. Un fisier ".winmd", o sa contina tot API pe care noi il expunem intr-un format destul de asemanator cu cel de .NET.
Metadatele dintr-un ".winmd" descriu codul care a fost scris pentru WinRT. Prin intermediul acestor informatii, putem apela atat API sistemului de operare cat si librarii scrise in alte limbaje de programare. Tot API-ul sistemului de operare pe care noi il accesam din orice limbaj se face prin intermediul WinRT.
Mai jos o sa prezint cum putem sa scriem cod C# care sa fie folosit de JavaScript si ce probleme pot sa apara.
Odata ce am creeat proiectul .NET, putem sa ii schimbam output type-ul la "WinMD". In momentul cand facem acest lucru procesul de build o sa se schimbe putin. Pentru a crea assembly-ul o sa se folosesca un tool cu numele "Windows Metadata Explorer". Odata ce am facut acest pas o sa vedem o multime de warning-uri si erori din cauza ca clasele trebuie sa respecte cateva reguli.
O clasa pe care vrem sa o expunem pentru a putea sa fie consumata de JavaScript trebuie sa fie sealed. Clasele pe care nu dorim sa poata fi consumate de JavaScript trebuie sa aibe atributul [EnableComposition]. Destul de interesant mi se s-a parut ca in cazul in care avem o clasa goala, o sa avem parte de eroare, chiar daca e sealed.
In cazul in care lucrati cu liste (input paramas sau return value), sa nu uitati sa folositi interfete. De exemplu folositi IList si nu List. Partea buna este ca nu suntem obligati sa folosim un array. In cazul in care uitati de acest lucru o sa va treziti cu o eroare de genul:
Method Ex.Foo.GetAll()' has a parameter of type 'System.Collections.Generic.List' in its signature. Although this type is not a valid Windows Runtime type, it implements interfaces which are valid Windows Runtime types. Consider changing the method signature to instead use one of the following types: 'System.Collections.Generic.IList, System.Collections.Generic.IReadOnlyList, System.Collections.Generic.IEnumerable'.
Partea buna este ca mesajul ne da destule informatii despre care este problema si o solutie la aceasta problema. As vrea sa vad mai des erori care ne indica si solutii, nu doar sa urle ca nu e in regula.
Nu incercati sa va definiti interfete generice, clase generice sau metode generice. In acest moment acest lucru nu este suportat in acest moment. Poate din cauza ca notiunea de generic nu exista sau nu are acelasi sens in toata limbajele. Acelasi lucru se intampla si cu metodele declarate virtual. Nu putem sa avem metode virtual.

public sealed Foo
{
private IList<string> _items;
public IList<string> GetAll()
{
return _items;
}
public string DefaultItem { get; set; }
}
Apelurile pe care le putem face pot sa fie atat sincrone, dar si asincrone. In cazul in care vreti sa faceti apeluri asincrone puteti sa folositi Task<...>. Daca incercati sa faceti acest lucru o sa vedeti o eroare din cauza ca Task<...> nu este inclus in WinRT. O solutie la aceasta problema este ca in loc sa returnam Task<...> sa returnam un IAsyncOperation<...>.
Prin intermediul acestuia putem sa facem un apel asincron. Trebuie abut grija deoarece de la developer preview la consumer preview lucrurile s-au schimbat putin. Inainte era folosita metoda urmatoare pentru a crea un nou IAsyncOperation
AsyncFactory.Create(() => { ... } );
Daca incercam sa folosim AsyncFactory o sa ne trezim cu urmatorul mesaj de eroare:
The name 'AsyncFactory' does not exist in the current context
Dar o sa ne trezim ca nu mai putem sa gasim aceast factory. Pentru a putea returna un IAsyncFactory putem sa facem in felul urmator:
return Task.Run<string>( async () =>
{
return "someString";
}).AsAsyncOperation();
Mai jos puteti sa gasiti codul scris in C# si JavaScript pentru a putea apela cod C# din JavaScript. Nu uitati ca in proiectul care contine JavaScript sa adaugati o referinta la proiectul vostru.
C#
public sealed class Foo()
{
public IAsyncOperation<string> GetDefault()
{
return Task.Run<string>( async () =>
{
return "Default"
}).AsAsyncOperation();
}
}
JavaScript
var foo = new MyNamespace.Foo();
foo.GetDefault().then(
function(result)
{
// Do something with result
}
)
In mare am vazut cam ce se poate face. Mi se pare un feature destul de dragut, care in cazul aplicatiilor complexe o sa ne ajute extrem de mult.
Enjoy!
Read More
Posted in C#, javascript, windows 8, WinRT | No comments

Friday, 11 February 2011

HTML: Cum sa facem disable un element din drop down.

Posted on 07:18 by Unknown
Uneori avem nevoie pe UI sa facem un element dintr-un drop-down disable. Utilizatorul sa il poata vedea, dar sa nu il poata selecta. Aceasta varianta este foarte utila cand un update la o aplicatie deja existenta, unele optiuni dispar. Pana cand toti utilizatori o sa isi faca update la configuratie( backward compatibility).
Pe fiecare optine dintr-un select avem atributul disable ce care il putem seta. Pana aici totul pare in regula:
<select name="telefon">     <option value="1">Nokia</option>     <option value="2" disabled="disabled">LG</option>     <option value="3">Samsung</option></select>
Optiunea de LG nu o sa poata fi selectata, dar utilizatorul o poate vizualiza, iar din codul de java script se poate selecta aceasta valoare.
Ar aparea ceva de genul acesta:

Singura problema este cu IE. Acesta nu suporta acest atribut. Pentru a rezolva acest neajuns putem sa folosim urmatorul cod javascript:
<script>
function AddOptionsDisabledSupport(){
var allSelectItems = document.getElementsByTagName('select');
for(var i=0; i < allSelectItems.length; i++){
allSelectItems[i].onchange= function(){
if(this.options[this.selectedIndex].disabled){
if(this.options.length<=1){
this.selectedIndex = -1;
}else
if(this.selectedIndex < this.options.length - 1){
this.selectedIndex++;
}else{
this.selectedIndex--;
}
}
}

//Change the color to gray.
for(var j=0; j < allSelectItems[i].options.length; j++){
if(allSelectItems[i].options[j].disabled){
allSelectItems[i].options[j].style.color = '#CCC';
}
}
}
}

//Run each time when page is loaded.
window.attachEvent("onload", AddOptionsDisabledSupport)
</script>
Iar de acuma acest atribut o sa poata fi folosit si pe IE.
Read More
Posted in disable, dropdown, IE, javascript, option, select | No comments
Older Posts Home
Subscribe to: Posts (Atom)

Popular Posts

  • E-Learning Vendors Attempt to Morph Mobile
    The sign should read: " Don't touch! Wet Paint !" I had a good chuckle today after receiving my latest emailed copy of the eLe...
  • Content Types - Level 6: Rich Media
    Level 6: Rich Media NOTE: This is part 7 of 7 and the conclusion of this continuing series; please see earlier posts for more background inf...
  • CDN is not the only solution to improve the page speed - Reverse Caching Proxy
    I heard more and more often think like this: “If your website is to slow, you should use a CDN.” Great, CDN is THE solution for any kind of ...
  • Publishing our CellCast Widget for iPad
    The rush has been on this week as our development team worked to design a new version of our CellCast Widget specifically for Apple's up...
  • NetCamp 2012 - Windows 8 development experience
    During this week I participate to NetCamp 2012.  This was the 6th NetCamp event and is organizing by Evensys. NetCamp is a dedicated event f...
  • SQL - UNION and UNION ALL
    I think that all of us used until now UNION in a SQLstatement. Using this operator we can combine the result of 2 queries. For example we wa...
  • Password/Token/PIN definition
    Password, Token, PIN, Passcode… every day we use this items when we need to authenticate in different systems. I observed that there are tim...
  • Shared Access Signature and URL encoding on Windows Azure
    Playing a little with Shared Access Signature was quite nice. In this moment this new functionality has a great potential. Playing a little ...
  • Content Types - Level 4: Reference
    Level 4: Reference Materials & Static Content NOTE: This is part 5 of 7 in a continuing series; please see earlier posts for more backgr...
  • Content Types - Level 5: Courseware
    Level 5: Content and Courseware NOTE: This is part 6 of 7 in a continuing series; please see earlier posts for more background information. ...

Categories

  • .NET
  • .NET nice to have
  • #if DEBUG
  • 15 iunie 2011
  • 15 octombrie 2011
  • 2011
  • abstracta
  • action
  • adaugare
  • ajax
  • Amsterdam
  • Android
  • aplicatii
  • App Fabric
  • Apple iSlate
  • array
  • as
  • ASP.NET
  • AsReadOnly
  • Assembly comun
  • async
  • Asynchronous programming
  • asyncron
  • Autofac
  • AutoMapper
  • az
  • Azure
  • Azure AppFabric Cache
  • Azure backup solution
  • Azure Storage Explorer
  • azure. cloud
  • backup
  • BCP utility
  • bing maps v7
  • BitArray
  • BlackBerry
  • blob
  • BlobContainerPublicAccessType
  • breakpoint
  • bucuresti
  • C#
  • cache
  • CallerMemberName
  • CellCast
  • Certificate
  • CES
  • change
  • ChannelFactory
  • clasa
  • classinitialize
  • clean code
  • click event
  • close
  • Cloud
  • Cluj
  • cluj-napoca
  • Code contracts
  • code retrat
  • codecamp
  • CollectionAssert
  • Compact Edition
  • compara
  • Comparer T .Default
  • CompareTo
  • comparison
  • comunitate
  • concurs
  • Conditional attribute
  • configurare
  • connection string
  • container
  • content type
  • control
  • Convert
  • convertAll
  • convertor
  • cross platform
  • CRUD
  • css
  • custom properties
  • custom request
  • DACPAC
  • Daniel Andres
  • data sync service
  • database
  • date time
  • datetime
  • debug
  • default
  • delegate
  • dependency injection
  • deploy
  • DeploymentItem
  • design patterns
  • Dev de Amsterdam
  • development stoage
  • dictionary
  • diferente
  • digging
  • director
  • Directory.Exist
  • disable
  • dispatcher
  • dispose
  • dropdown
  • dynamic
  • EF
  • email
  • encoding
  • entity framework
  • enum
  • enumerable
  • Environment.NewLine
  • error
  • error 404
  • error handling
  • eveniment
  • event
  • ews
  • excel
  • exception
  • exchange
  • exita
  • explicit
  • export
  • extension
  • field
  • File.Exist
  • finalize
  • fire and forget
  • Fluent interface pattern
  • format
  • func
  • GC.SuppressFinalize
  • generic
  • getdirectoryname
  • globalization
  • gmail
  • hackathon
  • Hadoop
  • handle
  • HTML
  • html 5
  • Html.ActionLink
  • http://www.blogger.com/img/blank.gif
  • HttpModule
  • IComparable
  • IE
  • ienumerable
  • IIS
  • image
  • implicit
  • import
  • int
  • internationalization
  • Internet Explorer
  • interop
  • Ioc
  • IP Filter
  • iPhone
  • iQuest
  • IStructuralEquatable
  • ITCamp
  • itspark
  • java script
  • javascript
  • July 2012
  • KeyedByTypeCollection
  • KeyNotFoundException
  • Kinect SDK
  • lambda expression
  • LightSwitch Microsoft Silverlight
  • linq
  • list
  • lista
  • lista servicii
  • liste
  • Live Connect
  • Live ID
  • load
  • localization
  • lock
  • m-learning
  • MAC
  • Mango
  • map
  • mapare
  • mapare propietati
  • messagequeue
  • meta properties
  • method
  • MethodImpl
  • Metro App
  • Microsoft
  • Microsoft Sync Framework
  • mlearning
  • mlearning devices
  • Mobile Apps
  • mobile in the cloud
  • mobile learning
  • mobile services
  • Mobile Web
  • mongoDb
  • monitorizare
  • msmq
  • multitasking
  • MVC
  • MVC 3
  • MVVM
  • namespace
  • nextpartitionkey
  • nextrowkey
  • Ninject
  • nivel acces
  • no result
  • normalize
  • nosql
  • null expcetion
  • null object pattern
  • NullReferenceException
  • OAuth API
  • office
  • offline
  • Open ID
  • openhackeu2011
  • operations
  • operator
  • optimization
  • option
  • outputcache
  • OutputCacheProvider
  • override
  • paginare
  • pagination
  • path
  • persistare
  • Portable Library tool
  • Post event – CodeCamp Cluj-Napoca
  • predicate
  • predictions
  • prezentare
  • process
  • proiect
  • property
  • propietati
  • query
  • ReadOnlyCollection
  • ReadOnlyDictionary
  • referinta
  • reflection
  • remote
  • reply command
  • request
  • request response
  • resouce
  • REST
  • REST Client
  • RESTSharp
  • ronua
  • rss
  • rulare
  • salvare in fisier
  • sc
  • schimbare timp
  • select
  • select nodes
  • send
  • serializare
  • serialization
  • Server.Transfer. Resposen.Redirect
  • service bus
  • ServiceBase
  • servicecontroller
  • sesiune
  • session
  • Session_End
  • Session_Start
  • setup
  • Sibiu
  • signalR
  • Silverlight
  • sincronizare
  • Single Responsibility Principle
  • SkyDrive
  • skype
  • smartphones
  • smtp
  • Snapguide
  • sniffer
  • socket
  • solid
  • spec#
  • sql
  • Sql Azure
  • SQL CE
  • sql server 2008 RC
  • SRP
  • startuptype
  • stateful
  • stateless
  • static
  • stergere
  • store
  • store procedure
  • stream
  • string
  • string.join
  • struct
  • StructuralEqualityComparer
  • submit
  • switch
  • Symbian
  • Synchronized
  • system
  • tabele
  • table
  • techEd 2012
  • tempdata
  • test
  • testcleanup
  • testinitialize
  • testmethod
  • thread
  • timer
  • ToLower
  • tool
  • tostring
  • Total Cost Calculator
  • trace ASP.NET
  • transcoding
  • tuplu
  • tutorial
  • TWmLearning
  • type
  • unit test
  • unittest
  • UrlParameter.Optional
  • Validate
  • validation
  • verificare
  • video
  • view
  • ViewBag
  • virtual
  • visual studio
  • VM role
  • Vunvulea Radu
  • wallpaper
  • WCF
  • WebBrower
  • WebRequest
  • where clause
  • Windows
  • windows 8
  • Windows Azure
  • Windows Azure Service Management CmdLets
  • windows live messenger
  • Windows Mobile
  • Windows Phone
  • windows service
  • windows store application
  • Windows Task
  • WinRT
  • word
  • workaround
  • XBox
  • xml
  • xmlns
  • XNA
  • xpath
  • YMesseger
  • Yonder
  • Zip

Blog Archive

  • ▼  2013 (139)
    • ▼  November (17)
      • Service Bus - Optimize consumers using prefetch an...
      • Extract relative Uri using MakeRelativeUri method
      • Sync Group - Let's talk about Performance
      • [PostEvent] Slides from MSSummit 2013, Bucharest
      • How to get the instance index of a web role or wor...
      • Sync Group - A good solution to synchronize SQL Da...
      • Throttling and Availability over Windows Azure Ser...
      • How to monitor clients that access your blob storage?
      • Digging through SignalR - Dependency Resolver
      • [Event] Global Day of Coderetreat in Cluj-Napoca! ...
      • Windows Azure Service Bus - What ports are used
      • Debugging in production
      • Simple load balancer for SQL Server Database
      • [PostEvent] MSSummit 2013, Bucharest
      • How to read response time when you run a performan...
      • VM and load balancer, direct server return, availa...
      • Bugs that cover each other
    • ►  October (12)
    • ►  September (10)
    • ►  August (7)
    • ►  July (8)
    • ►  June (15)
    • ►  May (12)
    • ►  April (17)
    • ►  March (16)
    • ►  February (9)
    • ►  January (16)
  • ►  2012 (251)
    • ►  December (9)
    • ►  November (19)
    • ►  October (26)
    • ►  September (13)
    • ►  August (35)
    • ►  July (28)
    • ►  June (27)
    • ►  May (24)
    • ►  April (18)
    • ►  March (17)
    • ►  February (20)
    • ►  January (15)
  • ►  2011 (127)
    • ►  December (11)
    • ►  November (20)
    • ►  October (8)
    • ►  September (8)
    • ►  August (8)
    • ►  July (10)
    • ►  June (5)
    • ►  May (8)
    • ►  April (9)
    • ►  March (14)
    • ►  February (20)
    • ►  January (6)
  • ►  2010 (26)
    • ►  December (1)
    • ►  November (1)
    • ►  October (1)
    • ►  June (2)
    • ►  May (1)
    • ►  April (4)
    • ►  March (1)
    • ►  February (1)
    • ►  January (14)
Powered by Blogger.

About Me

Unknown
View my complete profile