Bits & Bytes

Archive for January, 2011

Declaring Variables and Constants in Actionscript with Fundamental Types

The basic format for declaring variables in actionscript looks like this:

var <variable name>:<variable type>;

We begin with var to indicate that we are declaring a variable. Then, we put a space, the variable name, a colon, the variable type, and, finally, a semi-colon to end the line. So, for example, we could declare a variable named MyNum of the type Number like this:

var dMyNum:Number;

A Number is used for floating-point or decimal numbers. We can initialize our variables in the declaration like this:

var dMyNum:Number = 3.14159;

Additionally, we can declare constants, which should be initialized, like this:

const kdMyNum:Number = 3.14159;

Actionscript has few a fundamental types to hold common data elements. These types are String, Boolean, Number, int, and uint. Strings are used to hold text. Booleans are used to hold the logical values “true” or “false”. Numbers are used to hold any number, including non-integer numbers. ints are used to hold integers only. uints are used to hold unsigned integers only. An example declaration and initialization of each of these types is shown here:

var sMyString:String = "XoaX.net"; var bMyBool:Boolean = true; var dMyNum:Number = 3.14159; var iMyInt:int = -67; var uiMyUint:uint = 34;

Our first variable declaration did not contain an initial value. Variables that are declared with no initial value assigned to them take the following default values, according to their type:

String: null Boolean: false Number: NaN or not a number int: 0 uint: 0

PHP Cookies, Domains, and Subdomains (oh my!)

Programming in PHP on the web is always interesting, and working with cookies is no exception. For instance, you can set a cookie like this:

setcookie(“a”, “123”);

where “a” is the name and “123” is the value of the cookie. Then you would probably expect it to be available wherever you go in your domain, which we’ll call http://example.com. (Note: do not expect your cookie information to be available if you go to a page on another domain, such as http://myothersite.com). However, what happens when you have a link on your page that takes you to one of your subdomains, like http://subsite.example.com? The page in the subdomain needs the cookie you set, but when you arrive at the new page, the cookie is empty. What happened?

Even though crossing from http://example.com to http://subsite.example.com may not seem like much, it is to a cookie. Cookies are not, by default, available across the subdomains of your domain.

So, when you are on http://example.com, you can set your cookie with name “a” and value “123” and expect it to be available on any page that has http://example.com as part of its URL. However, if you want your cookie to be available as well on http://subsite.example.com, or on all of your subdomains and in any of your directories on your domain, you will need to add a few parameters to the call to setcookie(), like this:

setcookie(“a”, “123”, 0, “/”, “.example.com”);

“a” is the name of the cookie
“123” is the value of the cookie
0 is the time of expiration. The default is 0, which means the cookie will expire at the end of the session, which is when the browser closes.
“/” refers to where this cookie works. Setting it to “/” will make it available over the entire domain specified in #5. Otherwise, it will be set for the directory that your script is in, which may not be desired.
“.example.com” is the domain over which this cookie remains valid. Adding the “.” to the front of “example.com” will keep the cookie valid over all subdomains of the domain. Do not put “www” in this parameter unless you want the cookie to be valid only over the domain “www.example.com”. If you do, any page with an “example.com” URL then will not have access to the cookie.

Always remember: you must set a cookie before printing any output to the browser.

This function call will return true if the cookie was successfully set, false otherwise.

The CSS Box Model

The CSS box model has four regions: the content region, the padding region, the border region, and the margin region. These regions can cause some confusion when coding CSS, so we have created some examples below for illustration. We start with the basic content region, which we can resize by setting the width and height parameter values. Then we add a border to the the content. Next, we put padding around the content area to separate it from the border. Finally, we add a margin to separate this content box from elements on the page via whitespace. Additionally, we add scroll bars to show what happens when the content does not fit within the content region.

Each web page is made elements that can exist within CSS boxes. Oftentimes the content that goes into these boxes, like images, has a set width and height. With text, we typically set the width and the height is determined by the amount of text in the box. However, we can set the width and height directly, and this will resize an image or set the bounds of the text area and so that we need to adjust scroll bars to see all of the text. When we set the width and height of the content region, we have to keep in mind the size of the overall box on the page.

width = 200 pixels
height = 100 pixels

To the left, we have a simple red box with black text that describes the width and height of the box, which we set with the style rules width: 200px; height: 100px;. The content region has no background color by default, but we set the color shown here by setting the background to red, using background-color: #FF0000. This box is simply the content region, which often holds text, like this one does, or an image. When the width and height properties are set like this, the values only apply to the content region and not the surrounding regions, as we will show. So, we have to keep that in mind when considering layout. None of the other regions are present in this example.

width = 200 pixels
height = 100 pixels

Some text that extends outside the box horizontally.

More text
More text
More text
More text

Sometimes the content extends beyond the bounds of the content region. For example, we might have more text than what will fit in the content box. When this is the case, the text will wrap at the specified width and extend outside of the box below it. Generally, we will want to keep the text inside of the content area and add scroll bars to allow the content to be viewed within the content region only. This can be accomplished by styling via an overflow rule, which can be set to always have scroll bars like this: overflow: scroll;. To the left, we have our original content region with some added content and scroll bars to allow all of the text to be read. Notice that the scroll bars are placed inside of the content region and take up some of the space there; they do not expand the width and height of the box.

width = 200 pixels
height = 100 pixels
border = 10 pixels

To give our content a more pleasing appearance, we can add a border to it. Borders can have many styles and serve as a frame for the content much as a picture frame on a picture. Border styles include: solid, dotted, dashed, and several others; we can also change the border’s color as well. To the left, we have added a dark gray border that is 10 pixels wide, using the style rule border: 10px solid #444444;. A typical border is usually much thinner than this, but we have made this one wide for greater visibility. Notice that in this case, the border does not use up content area like the scroll bars do, but it does add to the width and height of the overall box. So, the overall box width and height have the width and height of the content region plus the border: overall width = 220 pixels, overall height 120 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels

Notice that the text inside the box above touches the border. This looks cluttered and makes the content more difficult to read. To make the content more pleasant looking and provide some much needed whitespace, we can use the padding region. To the left, we have set the padding to a width of 20 pixels on each side, using the style rule padding: 20px;. This helps to empasize the content by separating it from the border in much the same way that a matte does in a picture frame. Notice that the padding region is not visible. That is, it is is the same color as the background of the content area. In fact, we can consider the background region to be made up of the content region and the padding region. Also, notice that the padding region adds to the overall width and height of the box, so now we have: overall width = 260 pixels, overall height 160 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels
margin = 30 pixels

Finally, we remark that the text outside of the box tends bump up against the border and give the layout a sloppy appearence. To fix this, we can add margins to the box to separate the border from the outside content. To the left, we have the same box as last time, except that we have added a 30 pixel margin on each side of the box, using the style rule margin: 30px. The margin region is not visible. It looks just like the surrounding area with the same backgound color. So, the margin merely serves as a spacing for the content to separate it from outside content. Again, this adds whitespace to our content box, which helps it to stand out and look less cluttered. Again, the margin adds to the size of the entire box for the element so that now we have: overall width = 320 pixels, overall height 220 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels
margin = 30 pixels

Unfortunately in the previous box, we were not able to clearly see the content region, the padding region, and the margin region. That is because they share background colors with adjacent regions. To help clarify where these regions are, we have colored the content region and the margin region. To the left, we have the margin region that is 30 pixels wide on the outside in black. Inside this region, we have the border region that is 10 pixels wide in dark gray. Just inside of the border, we have the padding region which 20 pixels wide and is red, as it was before. Finally, in the middle, we have the content region, which has been changed to light gray. Notice that we have added the scroll bars again to illustrate that they appear in the content region. This box is the same size as the previous one. It is merely colored differently for illustration.

Notice that each of our content boxes were the same size 200 pixels by 100 pixels. However, the size of the entire box has expanded as we added the padding region, the border region, and the margin region. CSS offers finer control than what we have used, and we can set the width of the padding, border, and margin regions for each side individually. Given that, we can give the formulas for the width and height of the entire box as

overall width = width + (right and left padding)

+ (right and left border)

+ (right and left margin)

overall height = height + (top and bottom padding)

+ (top and bottom border)

+ (top and bottom margin)

Categories

Recent Posts

Bits & Bytes

Archive for January, 2011

Declaring Variables and Constants in Actionscript with Fundamental Types

PHP Cookies, Domains, and Subdomains (oh my!)

The CSS Box Model