Windows Phone Deployment Error

Introduction

To develop your own application on windows phone, you have to get a license for windows phone development for more information visit WP Dev Center.

Windows Phone

Windows Phone Deployment Error

If you face this error

Unable to install application on windows phone. The maximum number of developer applications on this phone has been reached. Please uninstall a developer application and try again. 

Go to your applications list in your mobile and uninstall the developer applications, because you have limited developer apps on you phone..

SASS Setup & Compass in Easy Way

Introduction

SASS refer to Syntactically Awesome StyleSheets. It is a scripting language that is interpreted into CSS. For more details about sass setup you can visit their website http://sass-lang.com.


Easy SASS setup

SASS is written by Ruby, and each operating system has different way to install it:
If you are Microsoft Visual Studio.Net, its easier to install an extension named, such as the following:

  1. Go to Tools > Extension and Updates.
  2. Search for SASS.
  3. Install Mindscape Web Workbench.

Multi CSS Directions

and for manual way every operating system has its own way:

  • OS X: It is already in the system.
  • Windows: you can download it from download Ruby.

    gem install sass

  • Linux: you can install it with Linux package manager.

Compass Setup

open the command prompt window which you are writing the commands there and type the following:
Then install compass which is an open source CSS Authoring Framework, and you can download it from Compass
gem install compass



Create First Project

First browse your project location in the command prompt


C:>cd project
C:Project>
C:Project>compass create style

SASS Setup

now you created 3 folder and 1 configuration file : 1- .sass-cache, 2- sass, 3- stylesheets, so now you can create your mixins in the sass folder and it will automatically will generate in the stylesheet file. and to view the sample:
1- browse the file click here
2- view the example click here

Action On Enter Custom Binding

1- Introduction

Some time you would to press enter to run an action, such as save or delete something, or to do any action you want, this article will explain how to create custom binding using knockoutjs to do action on key enter.
custom binding action on enter

2- How to Do?

Creating ViewModel

First I have to create my viewModel in viewModel.js, and add my custom binding to it.


function viewModel(){
    var myAction = function(){
       alert('hello world');
    };
  
}

add you can add your custom binding to the viewModel.

Creating Custom Binding


  var _actionOnEnter = {
        init:function(element, valueAccessor, allBindings, viewModel, context){
            var value = valueAccessor();
            $(element).keypress(function (event) {
                var keyCode = (event.which ? event.which : event.keyCode);
                if (keyCode === 13) {//keyCode for Key Enter = 13
                    value.call(context);
                    return false;
                }
                return true;
            });
        }
    }
    ko.bindingHandlers.actionOnEnter = _actionOnEnter ;


and in HTML page you can add this custom binding to any where you want


<textarea data-bind="actionOnEnter:myAction" rows="5" cols="32">

KnockoutJs: Action On Enter

1- Introduction


Some time you would to press enter to run an action, such as save or delete something, or to do any action you want, this article will explain how to create custom binding using knockoutjs to do action on key enter.

2- How to Do?

First I have to create my viewModel in viewModel.js, and add my custom binding to it.


function viewModel(){
    var myAction = function(){
       alert('hello world');
    };
    var _actionOnEnter = {
        init:function(element, valueAccessor, allBindings, viewModel, context){
            var value = valueAccessor();
            $(element).keypress(function (event) {
                var keyCode = (event.which ? event.which : event.keyCode);
                if (keyCode === 13) {//keyCode for Key Enter = 13
                    value.call(context);
                    return false;
                }
                return true;
            });
        }
    }
    ko.bindingHandlers.actionOnEnter = _actionOnEnter ;
}

and in HTML page you can add this custom binding to any where you want


<textarea data-bind="actionOnEnter:myAction" rows="5" cols="32">

Knockout UI: Datepicker

Introduction

Knockout UI is a series of articles, I will talk about it in the next articles, and it is a combination of knockoutjs custom binding with jquery ui components. This article will show you how to do this combination.

knockout ui datepicker
Combination knockoutjs custom binding with jqueryui datepicker

Knockout UI Datepicker

In this sample I had choose jqueryui datepciker to combine it with ko custom binding. You can use ui datepicker in the same way what you used to use before, but without calling it many times.

Usage

If you have in your application many jqueryui datepickers; it’s better to do it’s implementation in one place instead repeating it many times in your project, in that case you can change the datepicker component from one place, and you can pass the same parameter what you used to pass, but without calling the widget many time.

Create the following files:

  1. viewModel.js.
  2. koDatepicker.js.
  3. index.html.

In viewModel.js do the following:


var viewModel = {
 dateOptions:{
     dateFormat:"d MM, y"
 }
}; 

In koDatepicker.js do the following


ko.bindingHandlers.koDatepicker = {
 init: function(element, valueAccessor, allBindingsAccessor) {
     var options = {
             showOtherMonths: true,
             selectOtherMonths: true
     };

     if (typeof valueAccessor() === 'object') {
             $.extend(options, valueAccessor());
     }

     $(element).datepicker(options);
 }
};

Required Files:

first of all you have to import the files in the same sequence:

  1. Jquery.js
  2. jqueryui.js
  3. jqueryui.css
  4. knockoutjs
  5. koDatepicker.js
  6. viewModel.js

 

After importing your libraries and required files; you have to calling the component in the HTML File.

In index.html add the following:

<input type="text" data-bind="datepicker: dateOptions" />

So your custom binding you can reusing it in any project, and you can pass the dateOptions from any viewModel you have.

Hint: you can add your default date options in your custom binding, and the specified options from the date options in the viewModel.

 

Demos

CSS Triangle Drawing

Introduction

Before talking about drawing CSS triangle, I will talk about css borders, the css border like picture frame to clearfiy the point look to the following figure:

css triangle
Figure-1

CSS Border

We found from the previous figure the css border like the picture frame.
Imagine if the border is wider and width or height are less; guess what we will get?

You can do many tricks by playing with the borders width, height and width, you can get many shapes for example check Firgure-3:

Figure-2

Figure-3

  • css triangle

    Figure-2
  • css image

    Figure-3

CSS Triangle

As I explain before about the elements border, width and height, how we can get many shapes by changing those properties, also the triangle we can get by make the height and width equal ZERO.

Triangle Trick Live Demo

The following sample is one of many sample where you can use the triangle trick

Generating Multi CSS Directions By SASS

Multi CSS Directions
Figure-1

Introduction

Before talking about multi css directions, I will talk about language called SASS, which is generating the CSS.
The benefits of SASS, you can use functions, if conditions, loops, define variables … etc.

It means you can you add the logic you want to generate the CSS, and I hope in the future to write tutorials describing more about it.

Usage

If you have a website and you need to publish it in “multi css directions”, to achieve that you can follow the classic way; which is by creating two separated files, the direction of the first opposite the other, and this method lake of accuracy, because its depends on the human capabilities; specially if the stylesheet is rich of selectors.

Multi CSS Directions By SASS

SASS make things easier, to solve the issues in the classes way; by defining variables and functions and generating you style files. So what will do now creating one SASS file has functions and variables, will generate multi css directions files.

How to Use SASS

There are many ways to compile the SASS files and generating it to CSS. So if you are Microsoft Visual Studio User install the following:

  1. Go to Tools > Extension and Updates.
  2. Search for SASS.
  3. Install Mindscape Web Workbench.

Multi CSS Directions

For manual way, you can read SASS Setup & Compass in Easy Way.

So first you have to create 2 files and name them for example as the following:

1- _variable-rtl.scss
2- _variable-ltr.scss

Hint: If your file start with _ means you wont compile it as a file, if you want to generate it to css, remove _.

Inside “_variable-ltr.scss” you have to define some variables as the following:

$left:left;
$right:right;
$direction:ltr;

and inside “_variable-rtl.scss” you have to change the directions so the right will be left and the left will be right:

$left:right;
$right:left;
$direction:rtl;

Now start doing your mixins, so you can add it in separated file and name it “_mixin.scss” for example:


@mixin padding($val1, $val2,$val3,$val4) {
       @if($left==left) {
          padding:$val1 $val2 $val3 $val4;
       }
       @else{
         padding:$val1 $val4 $val3 $val2;
       }
}

After creating your mixin you have to use the mixins what you did, create new file and name it for example “_stylesheet.scss”, and import the mixin, add add your styles file inside as the following:


@import "mixin";

body {
   margin:0px;
   @include padding(5px,10px,5px,30px);
}
div {
  border:1px solid silver;
  @include padding(10px,20px,10px,1px);
}

After all create new file which will generate your stylesheets, and name them for example stylesheet-ltr.scss and stylesheet-rtl.scss files and import inside them what you did till now, for “stylesheet-rtl.scss” file; import the rtl variables :


@import "variable-rtl";
@import "stylesheet";

and in the stylesheet-ltr.scss file just change the variable file


@import "variable-ltr";
@import "stylesheet";

so now you created the important files to have 2 directions stylesheets, and when you want to change a file just you can change in one place which is “_stylesheet.scss”.

Result:
stylesheet-ltr.css


body {
   margin:0px;
   padding:5px 10px 5px 30px;
}
div {
  border:1px solid silver;
  padding:10px 20px 10px 1px;
}

stylesheet-rtl.css


body {
   margin:0px;
   padding:5px 30px 5px 10px;
}
div {
  border:1px solid silver;
  padding:10px 1px 10px 20px;
}

and for more example of mixins you can visit Mixin Example