Client-Side
with Basil Goldman

JavaScript Breadcrumbs navigation

2010-01-23T19:56:00Z

In this code listing I want to demonstrate how to implement "Breadcrumbs" in JavaScript for the pages collection, where page object have a two main key's pageId and parentPageId, and create a new collection sorted by current parents.

Like this (See below...)

Listing 1:

function page(pageId, parentPageId, title) { 
    return this.constructor(pageId, parentPageId, title); }
page.prototype = {
    
    // properties
    pageId: null,
    parentPageId: null,
    title: "",
    
    setPageId: function(pageId) {
        this.pageId = pageId;
    },
    getPageId: function() {
        return this.pageId;
    },
    setParentPageId: function(parentPageId) {
        this.parentPageId = parentPageId;
    },
    getParentPageId: function() {
        return this.parentPageId;
    },
    setTitle: function(title) { 
        this.title = title; 
    },
    getTitle: function() { 
        return this.title; 
    },
    
    // default constructor
    constructor: function(pageId, parentPageId, title) {
        this.pageId = pageId;
        this.parentPageId = parentPageId;
        this.title = title;
    }
};

var dataSource = [
     [1, 0, 'Home'],
     [2, 0, 'Products'],
     [3, 0, 'Contact Us'],
     [4, 0, 'About'],
     [5, 2, 'TradeDesk'],
     [6, 2, 'MT4 - (MetaTrader)'],
     [7, 6, 'Download']
];

var pages = {
    pagesList: [],
    getByPageId: function(pageId) {
        for(var i = 0; i < this.pagesList.length; i++) {
            if(this.pagesList[i].getPageId() == pageId) 
                return this.pagesList[i];
        }
    }
};

var breadCrumbs = new function() {
    
    // fill data of the page object
    for(var i = 0; i < dataSource.length; i++) {
        
        // create new page and set properties
        var p = new page();
            p.setPageId(dataSource[i][0]);
            p.setParentPageId(dataSource[i][1]);
            p.setTitle(dataSource[i][2]);
        
        pages.pagesList[i] = p;
    }
    
    // get specific page by pageId
    var p = pages.getByPageId(7);
    
    // check if page have a parentPageId
    if(p.getParentPageId() != 0) {
        
        // fill breadCrumbs array using - recursive method
        var breadCrumbs = [];
        var pageToCheck = p;
        var maxCheck = 6;
        var checkCounter = 0;
        
        
        while(pageToCheck != null && checkCounter < maxCheck) {
            breadCrumbs.push(pageToCheck);
            pageToCheck = 
                pages.getByPageId(pageToCheck.getParentPageId());
        }
        pageToCheck = null;
        
        // reverse array
        breadCrumbs.reverse();
        
        for(var i = 0; i < breadCrumbs.length; i++) {
            // print breadCrumbs array - 
            // output will be Products - > MT4 -> Overview
            alert(breadCrumbs[i].getTitle());
        }
        
    }
    
};

Enjoy...

"Run as Administrator" - Run an application in Vista with Administrator rights using app.manifest

2008-10-13T01:33:00Z

With the new version of Microsoft's Windows Vista - you and me as a software developer confronted with the problem of "How to run the application with Administrative rights under VISTA - a decision use app.manifest file with follow configurations.

Just add new item "Application Manifest File" into your project and replace all to this one. (See below)

<?xml version="1.0" encoding="utf-8" ?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0" >
  <assemblyIdentity version="1.0.0.0"
  processorArchitecture="X86"
  name="someExecName"
  type="win32" />
  <description>Program description</description>
  <trustInfo xmlns="urn:schemas-microsoft-com:asm.v3">
    <security>
      <requestedPrivileges>
        <requestedExecutionLevel level="requireAdministrator" />
      </requestedPrivileges>
    </security>
  </trustInfo>
</assembly>

Enjoy...

Windows Hosts File Manager

2008-10-07T13:43:00Z

Hi Guy's

I'm wrote some little server component (tool) Windows Hosts File Manager for Web Developers & IT Administrators, QA and others...

This application tool for Web Developers & IT Administrators, QA and others who are time to time make some changes in the HOSTS file of the Windows OS.
Using this application you might to edit HOSTS file, add & delete some configurations in that file.

Download from MSDN Code Gallery - Windows Hosts File Manager (Setup + Open Source)

or from CodePlex.com - Open Source Community

* The last release is support Vista "Run As Administrator" - option to grant full access to the file HOSTS, and some fixes.

Thanks.

Enjoy...

Defining your own functions in jQuery

2008-09-22T06:15:00Z

Defining your own functions in jQuery.
In this post i want to present how easy define your own functions in jQuery and using them.

As you know, jQuery it's a very rich JavaScript library and it's a pity not to use all it resources.
Ok. Do you want to create your own jQuery function to work with elements look like this:

$(element).yourfunctionname()

What is your steps to define it?
At first, define "jQuery.fn" and add to this object your function name see below. (jQuery.fn is a prototype of jQuery object)

jQuery.fn.yourfunctionname = function() {
    var o = $(this[0]) // It's your element
};

Now you have your own jQuery function working with HTML elements.
Also you want to call this function and set any attributes see below.

$(elem).yourfunctionname({dataSource: [], pagingStart: 5});

jQuery.fn.yourfunctionname = function() {
    var args = arguments[0] || {}; // It's your object of arguments
    var dataSource = args.dataSource;
    var pagingStart = args.pagingStart;
};

Extend jQuery using your own functions.
Come to say... You want to create function for validation object or variable to is nullable (null).

Like this:

if( !jQuery.isNull(object) )

Do next

jQuery.extend( {
    isNull: function(o) { 
        if(o == null && o == undefined) { 
          return true; 
        } 
        return false
    }
});

Or. You want to extend someone your own jQuery function

jQuery.fn.yourfunctionname.constructor.prototype.clearData = function() {
    // TODO
};

Enjoy...

JavaScript

jQuery.create() - jQuery plugin to create HTML elements

2008-08-21T01:50:00Z

jQuery.create() - it's a featured plugin for jQuery JavaScript Library.
You can create any types of HTML elements, set attributes and context or HTML using jQuery.create().
See below the HTML example declaration.

I think it make easy and fast your programming in JavaScript.

jQuery.create = function() {
    if (arguments.length == 0) return [];
    var args = arguments[0] || {}, elem = null, elements = null;
    var siblings = null;

    // In case someone passes in a null object,
    // assume that they want an empty string.
    if (args == null) args = "";
    if (args.constructor == String) {
        if (arguments.length > 1) {
            var attributes = arguments[1];
                if (attributes.constructor == String) {
                            elem = document.createTextNode(args);
                            elements = [];
                            elements.push(elem);
                            siblings =
        jQuery.create.apply(null, Array.prototype.slice.call(arguments, 1));
                            elements = elements.concat(siblings);
                            return elements;

                    } else {
                            elem = document.createElement(args);

                            // Set element attributes.
                            var attributes = arguments[1];
                            for (var attr in attributes)
                                jQuery(elem).attr(attr, attributes[attr]);

                            // Add children of this element.
                            var children = arguments[2];
                            children = jQuery.create.apply(null, children);
                            jQuery(elem).append(children);

                            // If there are more siblings, render those too.
                            if (arguments.length > 3) {
                                    siblings =
        jQuery.create.apply(null, Array.prototype.slice.call(arguments, 3));
                                    return [elem].concat(siblings);
                            }
                            return elem;
                    }
            } else return document.createTextNode(args);
      } else {
              elements = [];
              elements.push(args);
              siblings =
        jQuery.create.apply(null, (Array.prototype.slice.call(arguments, 1)));
              elements = elements.concat(siblings);
              return elements;
      }
};

HTML example declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" 
        src="../App_Scripts/jQuery/jQuery-1.2.3.js"></script>
    <!-- Utils.js - contain jQuery.create - plug-in -->
    <script type="text/javascript" 
        src="../App_Scripts/Utils/Utils.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        // Create new element typeof DIV
        var o = $.create('div', 
                        {'id':'wrapper-header', 
                         'class':'header'}, ['Hello world!!!']);
                        
        // Append object o
        $('#wrapper').append($(o));
    });
    </script>
</head>
<body>

    <div id="wrapper"></div>

</body>
</html>

JavaScript Repeater Control (dataRepeater) - from jQuery.Presenter.1.0.8 - UIControls Library

2008-08-20T01:45:00Z

In this post, I want to present a new JavaScript Repeater Control from my latest UIControls Library jQuery.Presenter 1.0.8. This control like (ASP.NET Repeater Control) created using jQuery Library 1.2.3 and support for later versions.
It's a free open source script...

Enjoy...

/*
 * jQuery.Presenter 1.0.8
 * Author: (basil.goldman@gmail.com)
 * Description: developed and tested on jQuery 1.2.1, 
 * support and fixes for jQuery 1.2.6
 */

jQuery.fn.presenter = function() {

    if (arguments.length == 0) return [];
    var args = arguments[0] || {};

    // Global arguments
    var controlType = args.controlType;
    var dataSource = args.dataSource;
    var headerTemplate = args.headerTemplate;
    var itemTemplate = args.itemTemplate;
    var separatorTemplate = args.separatorTemplate;
    var footerTemplate = args.footerTemplate;
    
    // Global library control types
    var properties = {
        // Control types
        controlTypes:[['dataRepeater']]
    };
    
    if(!jQuery.isNull(controlType) && 
        (controlType.toLowerCase() == 
        String(properties.controlTypes[0]).toLowerCase())) {
        
        var o = $(this[0]), i = 0;
        if( jQuery.isArray( dataSource ) ) {
            var q = dataSource.length;
            // Append headerTemplate
            if( !jQuery.isNull( headerTemplate )) 
                $(o).append($(headerTemplate));
            
            for( ; i < q; i++ ) {
                if( !jQuery.isNull( itemTemplate ) ) {

                    // Replace {x} - using prototype 
                    // function String.format
                    $(o).append(
                        $(String.format(itemTemplate, dataSource[i])));

                    // Append separatorTemplate
                    if( !jQuery.isNull( separatorTemplate ) &&
                        i != (dataSource.length - 1) ) {
                        $(o).append($(separatorTemplate));
                    }
                }
            }
            // Append footerTemplate
            if( !jQuery.isNull( footerTemplate )) 
                $(o).append($(footerTemplate));
        }
    }
};

String.format = function() {
    var s = arguments[0] || {}, i = 0;
    for( ; i < arguments[1].length; i++ ) {
        var reg = new RegExp("\\{"+i+"\\}","gm");
        s = s.replace(reg, arguments[1][i]);
    }
    return s;
}

jQuery.extend({
    // Utilities
    isArray: function(v){
            return typeof(v) == 'object' && 
                v != null && 
                typeof(v.length) == 'number';
    },
    isNull: function(o) { 
        if(o == null && o == undefined) { 
            return true; 
        } 
        return false 
    }
});

HTML example for declarartion dataRepeater control

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" 
        src="../App_Scripts/jQuery/jQuery-1.2.3.js"></script>
    <script type="text/javascript" 
        src="../App_Scripts/Data/Presenter.1.0.8.js"></script>
    <script type="text/javascript">
    
    var itemTemplate = "<a href='{1}' title='{0}'>{0}</a>";
    var separatorTemplate = "<span style='color: #fff'> | </span>";
    
    var dataObject = [['Blogs', 'http://blogs.microsoft.com'],
                      ['About', 'http://about.aspx'],
                      ['Blogs', 'http://blogs.microsoft.com'],
                      ['About', 'http://about.aspx']];
                      
    $(document).ready(function(){
        
        $('#side-menu').presenter({controlType: 'dataRepeater', 
            dataSource: dataObject, 
            headerTemplate: null, 
            itemTemplate: itemTemplate, 
            separatorTemplate: separatorTemplate, 
            footerTemplate: null});
    });
    </script>
</head>
<body>
    
    <div id="side-menu"></div>
    
</body>
</html>

AnimatedTextDemo (WPF Screen Saver)

2008-06-30T13:43:00Z

Two days ago I find in Google search the great post of Josh Smith on WPF here a link http://joshsmithonwpf.wordpress.com/2007/08/13/animating-text-in-wpf/ about advanced animation (manipulation) for text using Microsoft WPF Storyboard and System.Windows.Media.TextEffect

I liked his example and was created WPF Screen Saver project for my company employs and everyone who want.

Download from MSDN Code Gallery - Screen Saver and Source Code of AnimatedTextDemo (WPF Screen Saver)

Download from Google Code - Screen Saver and Source Code of AnimatedTextDemo (WPF Screen Saver)

Thanks for Josh Smith (WPF tutorial)
Enjoy!!!

Understand prototype in JavaScript (JavaScript prototype)

2008-02-25T22:36:00Z

Understand prototype in JavaScript

Hi Guy’s

Sorry on this syntaxed post, but I think for understand syntax you will read.
Follow my comments

Hope!!!

// Namespace core
function core() { return this.constructor('1.0.0.0'); }
core.prototype = {    
    // String type
    version:'',
    constructor: function(version){ this.version = version; },
    remote:{
        // Empty
    },
    web:{
      ui:{
        controls:{
            message:{
                show: function(value){ alert(value) }
            }
        }
      } 
    }
}; 

// Declare variables
// Inherit namespace core
var system = new core();
// controls is an object contain core.web.ui.controls 
var controls = system.web.ui.controls;

// Call to core.web.ui.controls.message.show() 
// using var controls
controls.message.show('Hello World!!!'); 

// Extend new function "hide" to 
// core.web.ui.controls.message
controls.message.constructor.prototype.hide = function() {
    // TODO
    controls.message.show('Im a hide() function in core.web.ui.controls.message');
} 

// Call to new function hide() extended in
// core.web.ui.controls.message using declared
// object system
controls.message.hide(); 

// Also you can extend write() function
system.web.ui.controls.message.constructor.prototype.write = function() {
    alert('write');
} 

// Call to new function write() extended in 
// core.web.ui.controls.message using declared object system
controls.message.write(); 

// Extend new namespace access to core.remote and 
// then extend new function get
system.remote.constructor.prototype.access = {
    get: function(){ alert('ok') }
} 

// Extend new variable of Array type in core.remote
system.remote.constructor.prototype.__last = [['0','0'],['1','1']];
// New variable of String type
system.remote.constructor.prototype.username = ''; 

// Call to core.remote.access.get()
system.remote.access.get(); 

// Alert __last variable length from core.remote.__last = []
alert(system.remote.__last.length);

How to set absolutePath using CSS expression for AlphaImageLoader (IE) *.png files

2008-02-25T08:46:00Z

TIP: "Set absolutePath using CSS expression for AlphaImageLoader (IE) *.png files".
So what you can do to write absolute path in CSS files not like "HARD CODE"

Here attached below examples CSS syntax.

Before:

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ machine/app_resources/ui/images/wrapper.png',sizingMethod='image');

After:

_filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ absolutePath +"wrapper.png', sizingMethod='image')");

DESCRIPTION: The absolutePath - is javascript variable get this value "/machine/app_resources/ui/images/" and declared between HTML <head></head> block of page.
NOTE: JavaScript variable must to be declared before including CSS files see the next example.

<head>

var absolutePath = "/machine/app_resources/ui/images/";

</script>

ASP.NET 2 Custom Control for Google "UrchinTracker" as sample

2008-02-21T13:38:00Z

Simple example to create ASP.NET 2 Custom Control for Google "UrchinTracker"

1) Edit Web.config file add the next code between <system.web>

2) Create a new class file *.cs in App_Code/Render/Web/UI/CustomControls

using System;

using System.Web.UI;

using System.Text;

using System.Web.UI.WebControls;

/// <summary>

/// Summary description for UrchinTracker

/// </summary>

namespace Render.Web.UI.CustomControls {

// Inherit Control

public class UrchinTracker : Control {

#region Fields

private string userAccount;

#endregion

#region Properties

public string UserAccount {

get { return userAccount; }

set { userAccount = value; }

}

#endregion

#region Constructor

public UrchinTracker() {

// TODO: Add constructor logic here

}

#endregion

public string GetOutput() {

StringBuilder output = new StringBuilder();

if (!String.IsNullOrEmpty(UserAccount)) {

output.AppendFormat(

@"<script src="" mce_src=""http://www.google-analytics.com/urchin.js"" type=""text/javascript""></script>

_uacct = ""{0}"";

urchinTracker();

</script>

", UserAccount);

}

return output.ToString();

}

protected override void Render(HtmlTextWriter writer) {

writer.Write(GetOutput());

base.Render(writer);

}

3) Build project then add control to ASP.NET Page

<render:UrchineTracker ID="UrchineTracker1" UserAccount="1234567890" runat="server" />

Using this example you can create riched, and advanced Custom Controls for you projects.

I'm working at this time on the package of custom controls for ASP.NET 2 & WPF to make it easy our development live...
The Beta comming up... in Mar 2008

How to write JavaScript right?

2008-02-19T12:20:00Z

Ok guy's.
We are having 3 ways (Prototype, Object and Closure) to write JavaScript but I like at once strong and beautiful "Prototype".

Here attached example for Prototype way (with Namespaces, Classes and Methods as in C#).

// Namespace Core
function core() { return this.constructor('release 1.2.3'); }
core.prototype = {
    version:'',
    constructor: function(version) { this.version = version },
    remote:{
        access:{
            get:function(url, data, callback) {
                // Do
            }
        }
    },
    web:{
        ui:{
            init:function() {},
            controls:{
                message:{
                    show: function(title, context) {
                        // Do
                    }
                }
            }
        }
    },
    user:{
        info:{
            get: function(userName) {
                var property = [];
                property = this.prototype.remote.access.get('http://',{rq:userName}, function(){ });
                return property;
            }
        },
        remove: function(userName) {
            // Do
        }
    }
};

// Declare
var system = new core();
var userProperty = system.user.info.get('Administrator');
if(userProperty.length > 0) { system.web.ui.controls.message.show('Hello World!!!','Text'); }

JavaScript String.format & StringBuilder

2008-02-18T15:52:00Z

// String.Format
String.format = function() {
     var s = arguments[0];
        for (var i = 0;i<arguments.length-1;i++){       
            var reg = new RegExp("\\{"+i+"\\}","gm");             
            s = s.replace(reg,arguments[i+1]);
        }

        return s;
}

String.prototype.format = function() {     
    var s = this;
        for (var i = 0;i<arguments.length;i++){         
            var reg = new RegExp("\\{"+i+"\\}","gm");                         
            s = s.replace(reg,arguments[i]);
        }

        return s;  
}

// StringBuilder
function StringBuilder(value) {
        this.strings = new Array("");
        this.append(value);
}

// Appends the given value to the end of this instance.
StringBuilder.prototype.append = function (value) {
        if (value) { this.strings.push(value); }
}

// Clears the string buffer
StringBuilder.prototype.clear = function () {
        this.strings.length = 1;
}

// Converts this instance to a String.
StringBuilder.prototype.toString = function () {
        return this.strings.join("");
}

// Create a StringBuilder
var output = new StringBuilder();

// Append some text
output.append("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ");
output.append("sed diem nonummy nibh euismod tincidunt ut lacreet dolore ");
output.append("magna aliguam erat volutpat. ");

var content = "World!!!";

output.append(String.format("{0}{1}","Hello ",content));

// Get the full string value
document.getElementById("context").innerHTML = output.toString();

Wow... People i've really started post on blogs.microsoft.co.il

2008-02-18T10:34:00Z

Hi all.
This my first blog on the microsoft blogs.
I'm really happy... and I wana say "More thanks to Shai Raiten for help me to create this Blog".

Thanks Shai.

Client-Side with Basil Goldman

JavaScript Breadcrumbs navigation

"Run as Administrator" - Run an application in Vista with Administrator rights using app.manifest

Windows Hosts File Manager

Defining your own functions in jQuery

jQuery.create() - jQuery plugin to create HTML elements

JavaScript Repeater Control (dataRepeater) - from jQuery.Presenter.1.0.8 - UIControls Library

AnimatedTextDemo (WPF Screen Saver)

Understand prototype in JavaScript (JavaScript prototype)

How to set absolutePath using CSS expression for AlphaImageLoader (IE) *.png files

ASP.NET 2 Custom Control for Google "UrchinTracker" as sample

How to write JavaScript right?

JavaScript String.format & StringBuilder

Wow... People i've really started post on blogs.microsoft.co.il

Client-Side
with Basil Goldman