Tech Blog

Jay's Technical blog

Jay Browses the Atlas js code taking notes -- Switching gears... AtlasRuntime.js and he Sys Namespace (IArray interface, IDisposable interface, and CutltureInfo structure/class)

30 April 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

[out of date post... this deals with MS Atlas CTP... which has been change drastically and is now MS Ajax Extensions]

[I’ve decided to switch gears and look at the AtlasRuntime.js first.  AtlasRuntime is a subset of the code within the Atlas.js script file… as luck would have it there is only one change and it’s something I missed…]

Function elements I missed [BTW, createInstance is a static method not an instanced one]

  • Statics
    • createDelegate — (Params: instance, method) — Calls method.apply (??) with the instance and any additional arguments 

[New stuff starts here… line 668 in the code]

Sys.IArray interface

  • Abstract
    • get_length — when implemented will return the length of the array
    • getItem — (Params: index) gets an item at the specified index

[At this point the Array object is given implementations for the above methods and the IArray interface is added to the Array class’ _interfaces field/array]

Sys.IDisposable interface

  • Abstract
    • dispose — when implemented will clean up references within the class (??)

Sys.CultureInfo class [BTW, this is totally defined in the source code in JSON]

  • Member fields
    • Name — defaults to “en-US”
    • NumberFormat object with the following fields —
      • CurrencyDecimalDigits — defaults to 2
      • CurrencyDecimalSeparator — defaults to “.”
      • IsReadOnly — defaults to false
      • CurrencyGroupSizes — defaults to an array containing one element — 3
      • NumberGroupSizes — defaults to an array containing one element — 3
      • PercentGroupSizes — defaults to an array containing one element — 3
      • CurrencyGroupSeparator — defaults to “,”
      • CurrencySymbol — defaults to “$”
      • NaNSymbol — defaults to “NaN”
      • CurrencyNegativePattern — defaults to 0
      • NumberNegativePattern — defaults to 1
      • PercentPositivePattern — defaults to 0
      • PercentNegativePattern — defaults to 0
      • NegativeInfinitySymbol — defaults to “-Infinity”
      • NegativeSign — defaults to “-”
      • NumberDecimalDigits — defaults to 2
      • NumberDecimalSeparator — defaults to “.”
      • NumberGroupSeparator — defaults to “,”
      • CurrencyPositivePattern — defaults to 0
      • PositiveInfinitySymbol — defaults to “Infinity”
      • PositiveSign — defaults to “+”
      • PercentDecimalDigits — defaults to 2
      • PercentDecimalSeparator — defaults to “.”
      • PercentGroupSeparator — defaults to “,”
      • PercentSymbol — defaults to “%”
      • PerMilleSymbol — defaults to “” [What is this?  I guess I need to look it up]
      • NativeDigits — defaults to an array containing the following items : "0","1","2","3","4","5","6","7","8","9"
      • DigitSubstitution — defaults to 1
    • DateTimeFormat object with the following fields —
      • AMDesignator – defaults to “AM”
      • Calendar object with the following fields —
        • MinSupportedDateTime — defaults to new Date(-59011459200000) [not sure of the actual date, but I bet it matches .Net’s mindatetime)]
        • MaxSupportedDateTime — defaults to new Date(253402300799999) [not sure of the actual date, but I bet it matches .Net’s maxdatetime)]
        • AlgorithmType – defaults to 1
        • CalendarType – defaults to 1
        • Eras — defaults to an array containing the following item : 1
        • TwoDigitYearMax — defaults to 2029
        • IsReadOnly — defaults to false
      • DateSeparator — defaults to "/"
      • FirstDayOfWeek — defaults to 0
      • CalendarWeekRule — defaults to 0
      • FullDateTimePattern — defaults to "dddd, MMMM dd, yyyy h:mm:ss tt"
      • LongDatePattern — defaults to "dddd, MMMM dd, yyyy"
      • LongTimePattern — defaults to "h:mm:ss tt"
      • MonthDayPattern — defaults to "MMMM dd"
      • PMDesignator — defaults to "PM"
      • RFC1123Pattern — defaults to "ddd, dd MMM yyyy HH\':\'mm\':\'ss \'GMT\'"
      • ShortDatePattern — defaults to "M/d/yyyy"
      • ShortTimePattern — defaults to "h:mm tt"
      • SortableDateTimePattern — defaults to "yyyy\'-\'MM\'-\'dd\'T\'HH\':\'mm\':\'ss"
      • TimeSeparator — defaults to ":"
      • UniversalSortableDateTimePattern — defaults to "yyyy\'-\'MM\'-\'dd HH\':\'mm\':\'ss\'Z\'"
      • YearMonthPattern — defaults to "MMMM, yyyy"
      • AbbreviatedDayNames — defaults to an array containing the following items : "Sun","Mon","Tue","Wed","Thu","Fri","Sat"
      • ShortestDayNames — defaults to an array containing the following items : "Su","Mo","Tu","We","Th","Fr","Sa"
      • DayNames — defaults to an array containing the following items : "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday" 
      • AbbreviatedMonthNames — defaults to an array containing the following items : "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",""
      • MonthNames — defaults to an array containing the following items : "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""
      • IsReadOnly — defaults to false
      • NativeCalendarName — defaults to "Gregorian Calendar"
      • AbbreviatedMonthGenitiveNames — defaults to an array containing the following items : "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",""
      • MonthGenitiveNames — defaults to an array containing the following items : "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""

[stopping on line 693 for now]

[Tags: Atlas, Ajax, ASP.Net]


Jay Browses the Atlas js code taking notes -- Window.Type (aka Type) Object, enumerations, flags dynamic classes

29 April 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

[out of date post... this deals with MS Atlas CTP... which has been change drastically and is now MS Ajax Extensions]

[I’m at about line 559 in the debug source code… I lied in the last post (well, not intentionally)… there is more tweaking of the JS environment but mainly adding top level objects (not class modifications)]

The Sys namespace gets registered which I believe is the Javascript equivalent to System in the .Net Framework).

Type.CreateEnum — [Params: name, many{EnumName, EnumValue}] — This dynamically creates an enumeration (enum) class named name (it’s a full blown class in Atlas JS).  After the name are the enum names followed by that enum element’s value (paired arguments). 

enumerations have the following instanced members:

  • getValues method —  retrieves/populates the _values field which contains all the enum elements’ values (I really wish this were the names of the values)
  • parse method — [Params: s] — returns the enum element value for the enum element name that matches the parameter s.
  • toString method — [Params: value] — returns the enum element name for the passed value
  • getName — returns the name field
  • isEnum — Always returns true

Type.createFlags — [Params: name, additional items names] — This dynamically creates a named flags type using the name parameter.  A flag is similar to an enumeration except that flag elements do not have individual values (they are basically enums where you don’t set the value for the each enum element). 

Flags have the following instanced members:

  • parse — [Params: s] — Parameter s is a pipe delimitted string containing the flag elements to test on this flag object.  Returns true if any of the flags elements in s are found.
  •  toString — [Params: value] — returns a string containing the name of this flag value in a string followed by a pipe (so it can presumably be passed back into the parse function if need be)
  • getName — returns the name field
  • isFlags — always returns true

 [I’m going to stop here.  The next couple sections contain classes within the mock .Net framework namespaces… I’m up to about line 668 in the Atlas JS code…]

[tags: Atlas, .Net, ASP.Net]


Atlas: Returning an object from an Ajax callback...

28 April 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

[out of date post... this deals with MS Atlas CTP... which has been change drastically and is now MS Ajax Extensions]

JoeW asked me in response to my Atlas as an Ajax Callback Library if thewas a way to return an object.  Well… it turns out that you can.  This is the simple example I worked up.

First stick create the special App_Code ASP.Net folder and add the following class to it (BTW, in the real world I only put Web associated classes here… base classes for the page, etc.):

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

/// <summary>
/// Summary description for CalcInfo
/// </summary>
public class CalcInfo
{

 public CalcInfo()
 {
 }

    private int _Sum = 0;
    private int _Diff = 0;

    public int Sum
    {
        get { return _Sum; }
        set { _Sum = value; }
    }

    public int Diff
    {
        get { return _Diff; }
        set { _Diff = value; }
    }
}

[Sorry colors aren’t working over Maxivista]
This very simple class will be returned from our page.  NOTE: We don’t even have to declare it serializable.  Codebehind looks like this (BTW, this page started out as the original example <grin />):

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
   
    [WebMethod()]
    public CalcInfo Calc(int num1, int num2)
    {
        CalcInfo ci = new CalcInfo();
        ci.Sum = num1 + num2;
        ci.Diff = Math.Abs(num1 - num2);
        return ci;
    }
}

As you look the add method in the original method is now replaced with a Calc class that returns an instance of our custom CalcInfo class.  We calculate the difference and the sum of the 2 values (for some odd reason I decided to use Absolute value — but a regular subtraction should work without the abs as well).  Here’s the HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" runat="server" />

        <div>
        <input type="text" ID="tb1" /><br />
        <input type="text" ID="tb2" /><br />
        <button id="MyButton" onclick="MyButtonClick()">=</button>Sum=<span id="resultSum"></span>Diff=<span id="resultDiff"></span>
        </div>
    </form>
<script>
function MyButtonClick()
{
    PageMethods.Calc($("tb1").value, $("tb2").value, Add_Complete);
}
function Add_Complete()
{
    if(arguments.length >0)
        $("resultSum").innerText = arguments[0].Sum.toString();
        $("resultDiff").innerText = arguments[0].Diff.toString();
}
function Add_Timeout()
{
    alert("timeout");
}
function Add_Error(result, response)
{
    alert("Error");
    // response.get_statusText() gives error text
    // response.get_statusCode() gives error code
}

</script>

</body>
</html>


Go read the other post for more info… but as you can see our returned value is actually a Javascript version of our object complete with all the necessary data.  We store this additional data in the span’s we’ve set up (BTW, in a real environment you might want to hide these fields when there’s no data yet <wink />) 

Also, Scott Guthrie pointed out that you only need to push a completion event with the call to execute a PageMethods call.  I switched this example to only fire for the completion event You can actually do it either way.  Personally, I think for a good user experience you should inform the user that something went wrong.

[tags: Atlas, Ajax]


Multiple MasterPages and Atlas...

28 April 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

[out of date post... this deals with MS Atlas CTP... which has been change drastically and is now MS Ajax Extensions]

I discovered how to do something today that I want to remember (as well as to share with the world).  But before I do that I must say something… (I know it’s a repeat statement, but it’s still nice to say, and I started this post before I wrote my other one)

I love the Atlas UpdatePanel!!!!!

Ok, now that that’s off my chest.  We can delve into the mysteries of easily working with sites that have mutliple Masterpages and Atlas.  I’m currently working on a project where the application renders itself based on the url passed to it.  If the URL is localhost then you get one skin if it’s SomeOtherSite.com you get an entirely different rednering of the site.  I have a base page class that all other pages inherit from.  This BasePage contains logic to automagically place the correct MasterPage (something I’m not going to go into here).

Each Masterpage has a ScriptManager component in it (yep, that means I’m shoveling the Atlas client down on every page which may be a bit inefficient, but it should get Cached when I’m running with debug=”false”.

I decided to not expose a ScriptManager property (and yes, you can always search for the control in the MasterPage from your individual page, but I wanted something a little more elegant).  I decided to expose just the EnablePartialRendering property.  So I added the following code to my BaseMasterPage (all my MasterPage CodeBehind’s inherit from this class):

privatebool_AtlasPartialUpdates =false;

///<summary>
///Gets or sets a value indicating whether atlas uses partial updates or not.
///</summary>
///<value><c>true</c>if [atlas partial updates]; otherwise,<c>false</c>.</value>
publicboolAtlasPartialUpdates
{
  
get{return_AtlasPartialUpdates; }
  
set{ _AtlasPartialUpdates =value; }
}

[Yep, I use GhostDoc, too].  This let’s my pages access the Partial Updates.  (BTW, I set the  <% @MasterType %> on all my pages to this BaseMasterPage type, so I don’t need to cast the page’s Master property to this type).

Another thing I discovered is that You can’t change the setting of EnablePartialRendering beyond the PreInit event, so I have to make this decision early on… That’s actually easy… each page either uses Partial Rendering or it doesn’t.  So in the PreInit event of each page that needs Partial Rendering (for UpdatePanels), I simply set this property to true via the page’s Master property.  It looks like this:

protected
overridevoidPage_PreInit()
{
   Master.AtlasPartialUpdates =
true;
}

Since MasterPage PreInit happens after the Page PreInit I can do this in each master page-

protectedvoidPage_PreInit(objectsender,EventArgse)
{
   ScriptManager1.EnablePartialRendering = AtlasPartialUpdates;
}

Now I can use the UpdatePanel on any page I want.  I also have enabled Atlas functionality on my entire site (I can just use controls… well, the UpdatePanel at least).   That’s it (I hope this helps someone else)…

[tags: Atlas, Ajax, ASP.Net, MasterPages]


Jay Browses the Atlas js code taking notes -- Object, Boolean, Number, String, Array, and RegExp classes

27 April 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

[out of date post... this deals with MS Atlas CTP... which has been change drastically and is now MS Ajax Extensions]

[Continuing with my note taking on the Atlas JS Source code… it may or may not be helpful for you, but it will definitely help me understand the client libs a little better.. Again as previously mentioned the Atlas client library is enhancing existing JavaScript built in objects (yep, you can do that in Javascript)]

Object class – This class is really all about adding simple type information.

  • Statics
    • getType — [Params: instance] — if there is no type name field on the constructor function/class (of the instance), but the constructor method is a function then the Object type returns.  Otherwise the instance’s constructor object returns
    • getTypeName ––  [Params: instance] — calls the getType function and returns the results of getName() method on the return object from getType
    • _typeName –– This is a field that always returns “Object”

Boolean class

  • Statics
    • parse— [Params: value] — Uses different mechanisms to evaluate a true or false value
    • _typeName –– This is a field that always returns “Boolean”

Number class

  • Statics
    • parse— [Params: value] — Uses different mechanisms to evaluate a numeric value (null values and 0 length’d values become 0)
    • _typeName –– This is a field that always returns “Boolean”

 

String class

  • Statics
    • format — [Params: format] — Ultimately this calls ToFormattedString (which I think we have yet to cover, yet).  My guess is that the format is compliant with .Net’s formats (probably not all), because it does some crazy manipulations of the string before calling toFormattedString (or just ToString) on the resulting parsed out value.
    • localeFormat –– [Params: format] — takes output from format and returns the result of the output passed to the toLocale function
    • _typeName –– This is a field that always returns “String”
  • Instanced
    • endsWith — [Params: suffix] — Simply returns true if this String ends with the suffix string parameter
    • startsWith — [Params: prefix] — Simply returns true if this String starts with the prefix string parameter
    • lTrim — returns this String with any spaces (or special characters) at the beginning of this String removed
    • rTrim — returns this String with any spaces (or special characters) at the end of this String removed
    • trim — combines lTrim and rTrim removing all spaces (or special characters) at the beginning and end of this String

  Array class

  • Statics
    • parse — [Params: value] — Calls eval to parse the value as an array (Parens are added to the value string so that it is now a JSON value which will return an Array)
    • _typeName –– This is a field that always returns “Array”
  • Instanced
    • add — [Params: item] — Adds an item to the end of this Array
    • queue — [Params: item] — Same as add
    • addRange — [Params: items] — Adds an array of items to this Array
    • clear — Clears all elements from this Array
    • clone — Copies the all elements of this Array to a new array and returns the new array
    • contains — [Params: item] — Uses the index of function to determine if this Array contains an element that equals the item parameter
    • exists — [Params: item] —  Same as contains
    • dequeue — Calls this Arrays shift function removing/returning this Arrays first element.  This lets you use this Array as a FIFO mechanism
    • indexOf — [Params: item, startIndex] — This function is actually available in some versions of Javascript (on those implementations that don’t have indexOf, Atlas provides an implmentation).  Finds the index of the element in this Array that matches the item parameter.  Searching starts at the startIndex (or at the beginning if there is not startIndex)
    • forEach — [Params: fnCb, context] — Atlas provides an implementation of this function if it doesn’t exist (it exists in some JS implementations).  fnCb is a function to call for each element in this Array; context, the element, the index number, and the full array are passed to the fnCb function
    • insert — [Params: index, item] —  inserts a new element into this Array at a specific index within the array (relies on the splice function)
    • remove —  [Params: index] — uses the indexOf function to locate the item parameter in this Array and removes it using splice
    • removeAt — [Params: index] — Removes the item in this Array at the specified index

RegExp class

  • Statics
    • parse — [Params: value] — parses a string value containing a regular expression, and uses the parsed values to call the new RegExp function
    • _typeName –– This is a field that always returns “RegExp”

Date class

  • Statics
    • _typeName –– This is a field that always returns “Date”
Error class
  • Statics
    • createError — (Params: message, details, innerError) — Calls new Error(Message) and then appends the details parameters as a details field on the object and if the innerError parameter isn’t null, it creates an innerError field containing the innerError parameter
    • _typeName –– This is a field that always returns “Error”

This appears to end the enhancement that are made to the native Javascript objects

Some additional notes
Ok, I get it.  Basically Atlas at this point has enhanced the native JavaScript object libary.  Not only that, but it has added a few helpful items.  The window.Type field that was added in yesterday at the end of yesterday’s post gets used as “Type” in future portions of the code (remember it’s of type Function, so it can be used to create classes as well as namespaces, etc.)
The ultimate goal is to make Javascript look very .Net-like. 

[tags: Ajax, Atlas]