Message Board

CSS Tutorial #5: Cascading Order and Inheritance

steveh — Mon, 25 Aug 2008 19:52:03 GMT

Introduction
If you dont understand the concepts of Order and Inheritance, you could run into some big problems with your web design that just wont make sense. Overall, there are just 3 rules to keep in mind, which are explained below.

Cascading Order
The term cascading refers to the hierarchical order in which different style sheet types interact when conflicts arise. Style sheets cascade in this order (4 having the highest priority):

Browser Defaults

External Style Sheets (Linked or Imported)

Internal Style Sheets (Embedded)

Inline Styles

This list could be summed up into one basic rule: If two styles come into conflict, the last one used will take precedence. Does that sound a little contradictory to the cascading order list? Allow me to explain the rule:

Inline styles must be placed in the body of the HTML document, while embedded style sheets must be placed in the head of the HTML document. As a result, inline styles are always the last ones used and therefore take precedence.
The browser treats all external style sheets as occurring before internal style sheets, regardless of where the link is placed. For example, if you place your linked style sheet after your embedded style sheet, the browser would still view the linked style sheet as occurring before the embedded sheet because it is an external style sheet. Therefore, internal style sheets are always a higher priority than external because they occur later in the document (according to the browser).

For those reasons, we can sum up the cascading order list with that one rule.

What does it mean for two rules to come into conflict? It simply means that two contradicting styles are assigned to the same element. For example, lets say that a linked style sheet declares that all paragraphs have a green font, but your embedded styles declare that all paragraphs have a blue font. Which color will it be? In this case, your paragraphs will have a blue font as the embedded style sheet occurs after the linked style sheet, and therefore has a higher priority.

This will only come into play if two rules conflict with each other in the same element. For example, if your linked style sheet declares that all paragraphs are bold, and your embedded style sheet declares that all paragraphs are green, all your paragraphs will be both bold and green. These two rules do not conflict with each other, and are therefore both used.

Inheritance
Inheritance refers to the way properties flow through the page. HTML uses parent-child relationships. A child element will usually take on the characteristics of the parent element unless otherwise defined. For example, take a look at this code:

Kyle Orton will be a Pro Bowl quarterback this year.

Now, lets see what that would look like in a browser:

As you can see, since the paragraph tag (child element) is inside of the body tag (parent element), it will take on any styles assigned to the body tag even though it wasnt given any styles of its own. What if you want the paragraph to take on some rules of the body but not others? You would simply override the rules you dont want. Heres an example for you:

Kyle Orton will be a Pro Bowl quarterback this year.

Heres how it would look in a browser:

Youll notice a few things here:

The red font color of the paragraph overrides the blue font color of the body.

The paragraph still inherits the Arial font from the body, as it wasnt overridden.

The paragraph has been set as bold, but does not affect any other part of the body.

Selector Type Precedence
Rules of precedence also apply to the different selector types. Selector precedence occurs in this order (3 being the highest precedence):

Element

Class

In other words, if you had an element with a class and ID selector, and they contained conflicting styles, the ID style takes precedence. For example, lets take a look at this code:

Matt Forte is an unstoppable force. I will be surprised if he ever gets tackled.

Heres how that code would look in a browser:

Youll notice that although the Class was placed after the ID, the ID still takes precedence. That only applies if both an ID and Class are used in the same element. Lets say that they are used in two different elements, like this:

Devin Hester is probably faster than Usain Bolt.

The code would appear on a browser like this:

Even though we used both an ID and Class selector, the Class selector overrode the ID selector because it was the last to be used. An ID selector will only take precedence over a Class selector if they are both used in the same element.

The !important Rule:
The !important rule is a way make sure your most crucial CSS rules are always applied. It is a way to override the general rule of cascading order. If two styles come into conflict in the same element, and one has the !important rule assigned to it, that one will be used. For instance:

p{
font-color: black !important;
}

p{
font-color: blue;
}

Even though the blue font color is placed further down, the black will be used in a conflict because it uses the !important rule. This only applies if the conflicting styles are used in the same element. If used in different elements, the general rule of cascading order still applies. For example, look at this code.

The Bears will go 16-0 this season.

Heres how it would look in a browser:

Even though the font color red had the !important rule, it wasnt used because the styles did not conflict in the same element. Since testclass was the last style used, it takes precedence.

Conclusion:
When dealing with cascading order and inheritance, here are three rules to keep in mind:

If two rules come into conflict, the last one used will take precedence.

When used in the same element, selector precedence occurs in this order (3 being the highest precedence):
1. Element
2. Class
3. ID

If two styles come into conflict in the same element, and one has the !important rule assigned to it, that one will be used.

This concludes the basic CSS tutorials. Please respond to any of the posts if you have questions or comments.

Forum: CSS

How to: Make rollover buttons with CSS

steveh — Mon, 11 Aug 2008 19:23:12 GMT

Over the course of the last 8 posts or so, I have written a series of CSS Tutorials. If a beginner would read through these tutorials, I hope that they would understand CSS well enough to use it. Ive focused on the functionality and ease of CSS, but now Id like to take a step further, and demonstrate some of the cool things that can be done with CSS. Today, Id like to show you how to easily make rollover buttons.

Introduction
Im sure youve noticed the varying types of buttons found throughout the web. There are boring buttons, which are little more than a colored box with a link in it. Then there are flashy rollover buttons. These buttons do something when you hover over or click them. For example, roll over and click this button:

Click Me!

In the past, these were created with Javascript, or sometimes with Flash. But, did you know you can create the same thing easily with CSS?

There are a few different ways to create interactive web buttons like this with CSS, some being easier than others. The method Im about to show you is, in my opinion, the easiest way to do it. To put it simply, all we are going to do is stack three images on top of each other and then use CSS to specify which one should be visible at any given time.

Get the images
First things first, youll need 3 images with identical dimensions. For this demonstration, I will be using these three:

Make sure that all 3 of your images are the exact same size and saved to the same location.

Sidenote: These are all .jpg images. You can use either .jpg or .gif images depending on your site. The differences between the two types are:

.gif images can have transparent backgrounds, while .jpg images cannot. In this case, these rounded buttons are surrounded by a white background. If I were putting them on a website that didnt have a white background, I would have to change them to .gif formats so they wouldnt stand out and look funny.

.jpg images are higher quality. This is evident when dealing with images containing multiple colors or different shades of one color. .gif images generally look just fine when dealing with just one or two colors.

Since I plan on using these images on a white background anyway, Im going to keep them in the .jpg format so as not to lose quality.

Create the CSS
Now that we have our images, we can create the CSS. We are going to create some anchor pseudo classes in order to make these buttons interactive. Please make sure to read CSS Tutorial #3: Class & Id Selectors if you forgot how to make a pseudo class. Simply put, using anchor pseudo classes, I can define 4 different states of a link: Unvisited (default), visited, hover, and active. All I will be doing is specifying which image should be visible in each state. Heres what the CSS would look like for these buttons.

a.button1
{
text-align: center; /*Text written over the button will be centered*/
font:normal bold 12px/2.5em arial; /*12pt, bold font, 2.5em line-height*/
color: white; /*Text color is white*/
display: block; /*Treat image as a block element*/
width: 100px; /*100 px wide. Same width as image*/
height: 35px; /*35px high. Same height as image*/
background-image: url(/images/redbutton2.jpg); /*Use the red button image as default*/
margin: 0 25px; /*left and right margins are 25px*/
}

a.button1:visited
{
text-align: center;
font:normal bold 12px/1.5 arial;
line-height: 2.5em;
color: white;
display: block;
width: 100px;
height: 35px;
background-image: url(/images/redbutton2.jpg); /*Use same red button image for visited links*/
margin: 0 25px;
}

a.button1:hover
{
background-image: url(/images/bluebuttonlight2.jpg); /*Use blue button image when mouse hovers over*/
}

a.button1:active
{
background-image: url(/images/greenbuttonlight2.jpg);/*Use green button image when button is clicked*/
}

Youll notice all that I did here was instruct a different image to load with different actions. I assigned the red image to unvisited and visited, the blue image to hover, and the green image to active.

Important Note: Anchor pseudo classes must be created in this order: Unvisited, Visited, Hover, Active. They will not work properly if placed in a different order.

For this demonstration, I will create 4 rollover buttons using the same CSS class that I just created. Heres how the HTML would look:

I Want Proof

Online Lab

Case Study

Demo Site

All I did was call the class buttons1 that I defined with the CSS. Simple as that. Click the image below to see these buttons in action. Roll over them and notice how they change colors. Pretty simple isnt it?

Conclusion
Using CSS, you can create nice looking rollover buttons for your website without using any javascript whatsoever. Please respond to this post if any of my instructions were unclear or if you have any questions.

Forum: CSS

CSS Tutorial #4: DIV and SPAN Tags

steveh — Mon, 04 Aug 2008 19:38:22 GMT

Over the past few posts, weve reviewed the fundamentals of CSS. In this post, we are nearing the end of fundamentals with an overview of the DIV and SPAN tags. These elements are extremely important to web design, and are a must-know if you want to design web pages without tables.

Introduction
The DIV and SPAN elements are meaningless tags. What do I mean by that? Well, unlike other tags, such as "p" or "h1", they have no inherent properties associated with them. Any properties they have must be assigned to them by the developer, generally with the class and id attributes. Lets start out by taking a closer look at the DIV tag.

The DIV Tag
The DIV tag is a block level element. That means it will cause a line break, similar to a "p" or a "h1". Think of it as a customizable holding box for other elements. When placed inside of this box, other elements will take on its attributes. In case you forgot, take a look back at the Box model post for a better understanding of the attributes of a block level element. DIV tags have two important functions:

They are used to group sections of a page together and assign certain properties
They are used in page layout

For example, if I wanted to assign certain properties to the navigation section of a site, I would assign those properties to one DIV tag and place all navigation elements inside of it. Lets take a look at that concept in action. First, look at the code:

 DIV and Span

Home

Products

Services

About

Now, see how this code would look on a browser.

Youll notice that all the attributes from the DIV tag are inherited by any tag inside of it, unless otherwise defined. For example, if I had not defined the background color of the "h1" tag, it would gray, just like the background.

The DIV tag is also commonly used in page layout. Using CSS, you can position a DIV element and any elements inside of it anywhere you want. (For more information on positioning, please read the forum post entitled, Positioning with CSS.) Lets say that you want to make a three column layout. Using tables, this task would take a fair amount of code. Lets take a look at how easy it is using DIVs. First, look at the code:

 Three column layout

Page Title

This is cell 1

This is cell 2

This is cell 3

Now, see what the code would look like on a page:

Do you see just how much easier and cleaner that is than tables? Also, each DIV is completely adjustable. Using DIVs for page layout is not only cleaner, it is easier and more versatile as well.

Span Tags
Like the DIV tag, the span tag is used to link style sheet rules to sections of a document. However, the span tag is an inline element, meaning it will not cause a page break. Like a DIV tag, a span tag will affect everything inside of it. Span tags are generally used to format text, and will not affect the layout of a page.

For example, lets say that I want to place more emphasis on certain words throughout my page. I would create a span class, and assign it to whichever words were in need of emphasis, like this:

 Span 

The White Sox are clearly the superior Chicago baseball team, because they have
Ken Griffey, Jr..

This code would appear on the screen like this:

Important note: While you can place a SPAN tag inside of a DIV tag, you can not place a DIV inside of a SPAN. You can never nest a block level element inside of an inline element.

Conclusion
Both the DIV tag and the SPAN tag have a very important role in CSS and web design. They are used to group and structure a document, and assign properties to specific parts of your page. They are used in close conjunction with the CLASS and ID attributes. The DIV tag is also used in web layout, and can take the place of tables, while the SPAN tag is mainly used with text. Understanding how these two elements work is vital to web design with CSS.

Forum: CSS

Using functions in your servlets

JoeStangarone — Wed, 23 Jul 2008 21:44:20 GMT

One of the little known features of m-Power is the ability to call your own functions (or native database functions) through calculated fields. I'm going to show you how to do it with a pretty powerful example that takes about five minutes to build.

First, some background

Every database has its own rules regarding functions and its own native functions. This page shows some DB2 functions, and if I click on one of them, it shows the analogous function in Oracle and Sequel Server.

In addition, every database has its own rules for what languages you can use to write your own User Defined Functions (UDFs). I am going to use SQL to write a function for DB2/400.

What I am going to do is build a function that sums the product of Price * Ordered Quantity of all the detail records of a given order.

At first glance, you might think that UDFs are just a finite subset of what we can do with external objects. Here's where you are wrong. Because functions are called from the database, they can be used to do anything you might want to do in an SQL clause. This means you can display, sequence, and select records based on the results of functions. That's a lot more power with less work than what we can do in an application servlet with external objects.

This function is useful, in that it can be called in myriad numbers of reports and inquiries about our orders. What you will see in the example is that I can sequence and select records in my servlets based on the results of this function. Let's get started.

1. Build the Function:

To do this I entered SQL and typed the following code;

create function CBB2E/ORDERTOT1( ordnuminp DECIMAL(6,0) )
returns DECIMAL(11,2)
language SQL
is deterministic
reads SQL DATA
no external action
BEGIN
DECLARE ordertot DECIMAL(11,2);
select sum(QTYORD * PRICE) into ordertot from CBB2E/ORDDETAIL
where ORDNO = ordnuminp;
return ordertot;
END

It's fairly simple and straightforward. The create function statement first names it and puts it somewhere. It tells it that we will be passing it one parameter which is numeric 6,0. The function returns an 11,2 field. Lastly, I encapsulate my SQL statement between a BEGIN and END statement. If I have entered everything correctly, SQL tells me that it has created the function ordertot1 in library CBB2E.

2. Create a multi-record web 2.0 retrieval

I create this over the Order header file linking to the customer master file to get the customer name. The fields I select are Customer Number, Name, Order Number, Customer PO #, Order Date, and Ship Date. Notice, that I never touch the order detail file in my definition of this retrieval. I'll leave that to my UDF.

3. I create a calculation to call my function

First, I include the characters *SQL in the calculation field description. This tells m-Power not to edit check the calculation. That means you have to get the specification correct or you may run into compile or run time errors.

I make certain that my calculation field attributes match what the function is going to return - an 11 byte numeric field with 2 decimal places.

Lastly, I specify my function in the area for the calculation. It looks like this:

CBB2E.ordertot1(ORDNO)

The syntax is Library followed by a period followed by function name, then left parenthesis, then the fields or parms to pass to the function in a comma separated list, followed by a close parenthesis.

That's it. When I create the servlet, the result looks like this.

The right-most field is returned by the function. Notice that I can sequence and select by it. Pretty powerful since I didn't even have to join to the order detail file to get the information I needed from it. And I am doing totalling functionality through a retrieval. You just gotta like that. :)

Nice things to know

Your data-base comes with pre-defined functions. To find out what they are, just Google the name of your data-base and the words database functions.

Different data-bases let you write your own user defined functions in a variety of languages. You are not just restricted to SQL. This means you can write code in the language you know and user it through m-Power.

Our performance tests indicate that this stuff is pretty darn fast. You are taking code out at the application level, and running it at the data-base level. Of course, like any other coding, you can build things that will be inefficient, but if you do things smartly, you are going to love the way this performs.

Forum: m-Power Tips and Tricks

CSS Tutorial #3: Class & ID Selectors

steveh — Mon, 14 Jul 2008 21:38:25 GMT

This post follows up on the previous post entitled, CSS Tutorial #2: Style Sheet Syntax. This post will detail two of the more important style sheet elements: Class and ID Selectors.

Overview
In the last post, I explained style sheet syntax and how to make universal changes to HTML elements by using style sheets. However, what if you want two different styles for one element? For example, what if you want one paragraph text to be blue, and another paragraph text to be black? Thats where class and ID selectors come into play.

Class Selectors
Class selectors allow you to create different styles for the same element or the same style for different elements. They give you the liberty to assign specific names to certain features of the page. Lets say that you want the paragraphs on your page to have a blue background with red text, but the first paragraph of every page to have white text on a black background. Simply create a class, and assign styles to it that you would like to see on the first paragraph. To do this, follow the rules of CSS syntax, but add a class name immediately after the selector, and separate the selector and the class name with a flag character, like this:

p.first { color: white; background-color: black; }

The flag character for the class selector is a period, and it must be placed in between the selector and the class name ("first") to properly identify that this is a class. Now that you have created a class selector and defined its style, you must specify in the HTML code which paragraph should use this class. In order to do this, you must add a class attribute to the HTML code like this:

Paragraph text

You can assign a class to as many elements on a page as you would like. For example, if you decide to style the last paragraph in every page just like the first, you would simply add the class element to that paragraph.

Lets take a look at class selectors in action:

 Selector Demo Page

This paragraph will use the style assigned to the "first" class.

This is a regular paragraph. It will have a blue background with red text.

Class selectors can be used as often as you like. I've decided to style the last paragraph the same as the first.

Heres how the code would look on browser.

Independent Selectors
What if you want to use the same styles for a few different element types throughout the page? You can use class selectors to declare styles for an element without even specifying an html element. It would be written like this:

.footer { background-color: gray; color: black; }

This adds a lot of flexibility because theres no HTML element defined. This class selector could be used by any type of HTML element throughout the page. For example, you could do this:

Both of these elements are now using the same class, and will be styled exactly the same.

Now you may be wondering why anyone would ever need to assign an HTML element to a class selector if you dont need to. Assigning an HTML element to a class is helpful when you need to go back and alter a page. If you have identified in your style sheet which class corresponds with which element, you can make changes with ease.

Pseudo Classes
Pseudo classes denote a specific quality of an element, and are generally used with the anchor (A) element to distinguish the status of hyperlinks in a document. They are used to override default link colors and are declared with an A followed by a colon and link status. Here are the 4 types of pseudo classes for the anchor element:

a:link {color: red} --This means that all links will be red--
a:visited {color: green} --All visited links will be green--
a:hover {color: yellow} --Mouse over a link, and it will turn yellow--
a:active {color: white} --After a link is selected, it turns white--

What if you want different link styles throughout your page? Pseudo classes can work with regular classes to create different link styles, like this:

.footer a:link { color: blue; } All links within the footer class will be blue--

ID Selectors
ID selectors are very similar to class selectors. They allow you to create unique styles for certain elements on the page, but unlike class selectors, ID selectors can only be used once. You can create many different ID selectors, but each one can only be assigned to one HTML element.

The only other difference between the two is the syntax. The flag character for an ID selector is the pound sign (#) instead of a period. For example, you would write it out like this:

#first { background-color: black; color: white; }

The HTML would look like this:

This would operate exactly as if it were a class, the only difference being you couldnt use it any more than once.

Why Class and ID Selectors?
You may be wondering why ID selectors even exist if they are basically a more restricted class selector. Its a good question, and here are a few reasons:

They allow you to uniquely identify any one object on the page.

While class selectors can be used multiple times throughout the page, they should only be used once per tag. While you shouldnt assign two classes to the same element, you can assign both a class and an ID selector to the same element.

Class selectors are good for very general styles that are used in various places throughout the document. The ID tag is used to identify a very specific style.

Final Example
Using all of the concepts covered in this post, here is an example webpage. Look at the code below, and then click on this link to view the page in a browser.

 Selector Demo Page

This is a sample page to demonstrate Class and ID Selectors.

This paragraph will use the style assigned to the "first" class.

Here is a link. Notice how it changes
when you hover over or click it.

This is a regular paragraph. It will have a blue background with red text.

Class selectors can be used as often as you like. I've decided to style the last paragraph the same as the first.

Conclusion
Class and ID selectors are two very important tools you must know when using CSS. They allow you to assign different styles to the same element or the same styles to different elements. Class selectors can be used multiple times, but ID selectors can only be used once in a document. Class selectors should be used for more general styles, while ID selectors should be used for very specific styles.

The next tutorial will cover the DIV and Span elements.

Forum: CSS

CSS Tutorial #2: Style Sheet Syntax

steveh — Mon, 07 Jul 2008 19:08:43 GMT

This post follows up the previous post entitled, CSS Tutorial: Style Sheet Types. It is meant for CSS beginners who want to learn the basics of style sheet syntax, and how it interacts with HTML. If you havent read the previous post, it is important that you read it before this one.

Overview

You will find that style sheet syntax is relatively easy to learn, once you understand the basic principles. Style sheets establish rules that declare how certain elements are displayed on the webpage. Every style sheet rule has two parts: A selector and a declaration.

The Selector

The selector is connected to a particular style within the HTML. The selector defines which element will be affected by the declaration. Any element used in html can be a selector, such as p, h1, or ul.

The Declaration

The declaration applies a style to the selector and is split up into two parts: property and value. The property is the aspect of the selector that is being defined. The value lays out the exact specification of the property.

Here is an example of the different parts that make up a rule:

Basic Rules

Look at the image above and youll notice a few basic rules to follow when using style sheets:

The declaration is always wrapped in curly braces.
The property is followed by a colon.
The value is followed by a semi-colon.

Grouping Properties

More often than not, you will want to declare a few properties for the same selector. Grouping properties follows the same format as above, and can be displayed like this:

H1 { font-family: arial; color: red; font-weight: bold; }

When defining multiple properties for the same selector, make sure that every value is followed with a semicolon.

Visual Formatting

When dealing with a selector containing multiple properties as shown above, it is good practice to lay out the code in such a way that is simple to read. Obviously, placing 5 properties on the same line can look messy and be difficult to read. The key to readability is proper use of white space. When using style sheets, white space is a matter of preference. You can add as little or as much space in between properties as you like. With that in mind, it is a good practice to place multiple properties on separate lines, like this:

p {
color: red;
font-family: arial;
font-weight: bold;
background-color: blue;
}

Do you see how much easier that is to read than a linear format? Just like HTML, it is important that you write clean code with CSS.

Grouping Selectors

Lets say that you want a few different elements to have the same style. Rather than declaring each style separately, you can group similar selectors together and save space. Simply separate each selector with a comma, like this:

p, h1, th {
color: red;
font-family: arial;
background-color: blue;
}

Conclusion

Using the fundamentals laid out above, below is an example of actual CSS code and the corresponding HTML.

This is blue text on a gray background.

Click this link to see what that code would look like in a browser window.

This has been a basic overview of CSS syntax. I hope that you now have a good understanding of style sheet formatting, and how to lay out a basic style sheet. The next tutorial will detail two of the most commonly used aspects of CSS: Class and ID selectors.

Forum: CSS

CSS Tutorial: Style Sheet Types

steveh — Mon, 30 Jun 2008 22:20:15 GMT

The Purpose of this post

This post is the first in a series aimed at CSS beginners. If youve only ever used HTML and want to start using CSS, then this is for you. This post lays the foundation for using style sheets.

Why CSS?

CSS is not HTML, but rather a way to separate structure from design. For example, if you have a header (h1) in HTML, you can use a style sheet to define how it should look. This comes in handy when you have multiple HTML elements with the same design. Lets say that you are in charge of a large company website. Youve been instructed to go through the entire site and change all of the headers from blue to red. Using HTML, thats a big job. Using CSS, you would only have to make one small change. I very much recommend visiting the css zengarden website if you would like to see more practical applications to using CSS.

Before you can learn about CSS structure or code, you need to know how to integrate style sheets with HTML. The following will explain 4 different ways to do that.

Style Sheet Types

There are 4 style sheet types, or in other words, 4 ways to utilize style sheets in your HTML.

Inline
Embedded
Linked
Imported

Inline Style Sheets

When adding inline styles, you can apply them directly to the HTML tag using the style attribute. When used repeatedly, inline styles defeat the purpose of CSS, as they dont separate structure from design. Inline styles are useful only when you need to add a single instance of a particular style. Inline styles are used like this:

content

Embedded Style Sheets

This is one of the more common style types you will run into. Embedded style sheets are placed within the head section of the document and affect only that document. They must be placed in between "style" tags and be clearly defined as CSS. Here is an example of an embedded style sheet:

Linked Style Sheets

Linked style sheets provide the real power of CSS. You can link many webpages to a single CSS file. When you need to make design changes throughout the website, you only need to alter one CSS file! For example, if your company colors changed, and they need to be reflected on the website, you would only have to change one file, rather than the entire site. Pretty simple isnt it? Linked style sheets are placed in the head section of the document like this:

Imported Style Sheets

You can import one style sheet into another style sheet using the "@import command. When importing a style sheet into another, it must be the very first rule in the style sheet. Imported style sheets are useful if you want to use different style sheets for different parts of your website. They are displayed like this:

@import url(otherstyle.css)

Creating a Separate Style Sheet

You may be wondering how to set up a separate CSS file for linking or importing. Its very easy. Simply place all of your CSS code in a notepad document and save it with a .css extension. Theres no need to define head or body sections like you would in HTML. All you need to do is place the code in the file.

Whats next

Now that you understand how to integrate style sheets into your HTML code, you are ready to learn about CSS syntax. In the next tutorial, I will explain how to write basic CSS code and demonstrate how to use it with HTML.

Forum: CSS

Linking tables

fanmechanic — Fri, 27 Jun 2008 16:22:00 GMT

I can't find anything in the help documentation on defining table links. I have several files from our iSeries added to the data dictionary, but none of them link together. There are common field types, but each file gets a unique prefix so there are no common field names. Where in the online help can i find how to do this?

Forum: Dear Marcy

Positioning with CSS

steveh — Mon, 23 Jun 2008 21:56:48 GMT

Note: It is important that you read the CSS box model post before reading this post.

Still wondering why you should use CSS instead of tables? Please read our forum post entitled, Benefits of using CSS for Website Layout before proceeding.

Before CSS, web developers were pretty much stuck using tables for page layout. With the emergence of CSS, we now have two more important tools: Positioning and floats.

Positioning

The position property can be defined in one of four ways:

Static
Fixed
Absolute
Relative

Static Positioning

Static positioning is the default position for an element. You really dont need to use static, unless overriding a previously set position. A static positioned element uses this code:

position: static;

Fixed Positioning

Elements that are set in the fixed position are positioned relative to the user viewport. These elements will always be positioned in relation to the browser window, even when scrolling, which means theyre always visible in the viewport. This could be extremely helpful and replace lengthy javascript which accomplishes the same task. Dont get too excitedInternet Explorer version 5 and 6 do not support fixed positioning. It looks like were stuck with javascript until fixed positioning is universally supported. A fixed position is displayed like this:

position: fixed;

Absolute Positioning

Elements positioned with absolute positioning are taken out of the normal flow and placed exactly where you define them to be. Since they are taken out of the document flow, the rest of the document acts as if an absolute positioned element wasnt even there. While it allows for absolute control over the positioning, when using absolute positioning, be aware that it is easy to accidentally cover up other elements. Absolute positioning is displayed like this:

position: absolute;

Relative Positioning

A relative positioned element is positioned relative to itself. While that may sound confusing, its actually pretty simple. If you set a relative position, the box will be moved relative to where it was supposed to be, had you not set a position. For example, if I were to assign an element with relative positioning the value, 'left: 20px', the element will move 20px to the right from where it would have normally been placed. When using relative positioning, other elements in the document flow treat the relatively positioned element as if it were in its static, or normal position. Relative positioning is displayed like this:

position: relative;

Quick Side Note: In the example above, I set the value, 'left: 20px', which moved the element to the right. Sound confusing? Heres why that happens: When assigning a value such as 'left: 20px', Im actually indicating that 20px should be placed to the left of the element, essentially moving it right.

Relative + Absolute Positioning

Relative positioning by itself doesnt add many advantages over absolute positioning. However, the true power of relative positioning comes when you combine it with absolute positioning

If an element is relatively positioned, any elements inside of it are positioned relative to it. Therefore, if we had an absolute positioned element inside of a relative positioned element, the absolute positioned element is relative to the relative positioned element. Too confusing? Take a look at the image below:

The relative positioned red box contains the green box which is positioned absolutely as follows: 'top: 50px; left: 50px; '

As you can see, Div 1 has become the containing block for Div 2, which is now positioned relative to Div 1. If I were to reposition Div 1, say 100px to the left, Div 2 would move as well, and remain inside of Div 1.

This method becomes even more useful when we want to add columns to our layout. Heres a dual column layout using two absolutely positioned boxes inside of a relatively positioned one.

See how easy it is to create a two column layout with CSS? However, what if you want to create a 3, or even 4 column layout? The easiest way to do that is by using floats.

Floats

Floats turn block elements into inline elements. They allow two elements to appear side by side, or make an element move to the right or the left inside of another element. Also, floats are used when you would like text to wrap around an element or an image. For example, here are two relatively positioned elements without floats.

Youll notice how they are stacked vertically. This is the normal document layout. What if I want them to line up horizontally? I would add a couple floats, like this:

Here is the code used to create these floating boxes:

Relatively positioned

top: 10px;

left: 50px;

float: left;

Relatively positioned

top: 20px;

left: 75px;

float: left;

Youll notice that simply by adding a float to each element, they now line up horizontally. If I wanted, I could even add another element to the right. Keep in mind that I have turned these block level elements into inline elements with floats. If I wanted to start a new row of floats underneath the first, I would have to clear the floats, by adding this code to the first element in the second line:

Clear: both;

There is one more tool that will come in handy when positioning with CSS: Z-index. The z-index adds another dimension to a normally two dimensional page. An element with a higher z-index appears in front of an element with a lower z-index. For example, if I wanted an element to be displayed in front all the time, I would set a z-index of 99. Z-index can be set like this:

z-index: 1;

These are the layout tools that come with CSS. The more you use them, the easier layout will become, and the more options you will have when designing a page. Keep in mind that not every browser handles CSS the same way, so please read the Cross-browser CSS post in the forum.

Forum: CSS

The CSS Box Model

steveh — Mon, 23 Jun 2008 20:50:57 GMT

In order to understand positioning with CSS, you must first understand the box model, but before explaining the box model, here are a few helpful definitions that I will be referring to throughout this post:

---

The Viewport

The viewport is the area on a browser that displays the webpage. Imagine that your browser is a window, with the outer edges being frames and the area that displays the webpage (the viewport) as the glass. The viewport is separate from the page itself, so even if the page is scrolled, the viewport is always the area that you can see.

The Initial Containing Block

The entire space assigned to your document. The initial containing block is set by the web designer as the size of the web page. This includes parts of the page that users have to scroll to see.

Containing Blocks

A containing block has another element inside of it. In the example below, the div named container is the containing block for the div named element.

Normal Flow

The normal flow of the document is the order in which the elements are displayed. It is the way a document would appear with no positioning or floated elements. The content will start at the top of the page and flow downward.

Block-level elements

Elements that are formatted visually as blocks. Block elements automatically create a line break, unless given the rule, display:inline;, which will cause them to be treated as an inline element. Examples of block-level elements are:

,

Inline-level elements

Inline elements do not form blocks of content and are displayed visually in a line. They do not create line breaks. Examples of inline level elements are:

, ,

The Box Model

Take a look at the image below. I have taken it directly from the W3 site, in order to illustrate the box model, and why its important to positioning with style sheets.

For display purposes, every block-level element in a document is considered to be a rectangular box. As you can see from the diagram above, each box is comprised of 4 parts:

Content This could include text or an image.
Padding Invisible area that defines the distance from the border of the box to the content.
Border The area surrounding the content and padding.
Margin Invisible area that defines the space between the outside border of the box and other elements on the page.

It is equally important to understand how the width of the box is calculated, and why defining only width isnt enough. Here is the equation to determine the width of a box:

width = margin-left + border(left) + padding-left + content width + padding-right + border(right) + margin-right

For example, look at the code below and try to determine how wide the box will be:

.divtest {
position: relative;
width: 100px;
height: 75px;
padding: 10px;
margin: 5px;
border: solid 1px black;
}

According to the box model equation, this box would be '132px' wide, as illustrated by the image below.

Width = margin-left(5) + border-left(1) + padding-left(10) + content width(100) + padding-right(10) + border-right(1)+maring-right(5) = 132

Height

Height is calculated differently than width. In the normal flow of a document, vertical margins are collapsed. That means when a box is placed on top of another, the distance between the two is equal to the largest margin, as illustrated by the image below:

If these two boxes had been placed next to each other, the margins would be added together to create a total of 15px. However, since they are placed on top of each other, the margins are collapsed and only the largest margin is used.

It is very important that you understand the box model before moving into positioning. Whenever you place a block-level element on a page, you must be aware of the 4 attributes explained above which determine placement and size. For information on positioning with CSS, please read the next post in the forum entitled, "Positioning with CSS".

Forum: CSS

Benefits of Using CSS for Website Layout

steveh — Mon, 23 Jun 2008 20:02:52 GMT

Before you can really learn how to use CSS for positioning, you have to want to learn it. I know there are some of you who may be saying, Ive been using tables for years, have become very good at it, and positioning with CSS is too complicated. Youre not alone. When I first started using CSS, I thought it was far more difficult than using tables. As I became more familiar with CSS, I found that it was easier, faster, and more powerful than tables. Here are a few more benefits of using CSS for positioning:

They allow layout that was formerly impossible with tables. Try doing this simple CSS layout with tables:

Since CSS is fully standards compliant, your site will be more accessible to those using alternate browser types, such as a PDA or cell phone. As web surfing with cell phones becomes more prevalent, the benefits of positioning with style sheets becomes more noticeable.
Pages will load faster with CSS. Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content. CSS also reduces the amount of tags used, thus producing cleaner code, and minimizing the amount of information that needs to load.
Web sites are far easier to maintain. Besides being able to make universal changes to specific elements, you can completely redesign a site only by altering the CSS. Heres a very cool site that demonstrates this.
Your web page will be more search-engine friendly. Search spiders look at the top of a page first, and also use the first 20-30 words as a page description. Using CSS, you can place the most important content first, improving your search engine ranking. Also, because you can use external style sheets, a spider only has to crawl through the content of your site, without dealing with all the code.

Forum: CSS

Using AJAX functionality with Web 2.0 servlets to fill in parts of your page

JoeStangarone — Mon, 09 Jun 2008 20:03:05 GMT
I am going to show you how easy it is, with a little JavaScript, to overwrite parts of your Web 2.0 servlet page with new data based on whatever event you choose. It looks something like what you'll see in this application when you select a product for update, overwrite the vendor number with a 1, and arrow down through the suggestion list. It almost feels like you are locally connected to the data even though, every time you arrow up or down, a request is going back to our server to send you the new vendor information. Here is how it is done.

1. Create a single record web 2.0 retrieval application. In our case it is CBB2E.I00080s. In our example we have two presentation versions of this servlet. The first, looks like this, and is called every time we reload the page with an "import:" command.

2. Paint the output to look like an array of data in the form:

data_array=new Array("1", "Reco","1898 Yolin Road", "Chicago", "IL","90899");

This example shows an array with 7 elements (java indexes are 0 - 6). Our actual painted servlet looks like this. We have two elements, the first is not used, the second, is all the information we want to overwrite. Note: Line breaks confuse the javascript array so you must paint it without any, which can make your html somewhat difficult to read in an example like this one.

3. Create the single record or work with maintenance program that will have information replaced by the inquiry in step 1. In our case this is CBB2E.M00020.

Open the painter for your maintenance servlet to the maintenance page. Switch to source mode and add the following lines of code in the header section.

You may not have the last javascript file. If not download it here and place it in your /mrcjava/mrcclasses directory.

4. Add the bolded lines of code below to the window onload function.

window.onload = function(){
var url="MRCJAVALIB.I00080s?SGVND=";
setAjaxSource(url);
setAccessibility();
}

These tell not only what servlet to call to return information, but also the key parameter to make certain we will return the correct record. This javascript example only allows one key field to the inquiry servlet.. For more, you will need a javascript programmer to make the necessary modifications. mrc does not support javascript examples portrayed in this forum.

This javascript default is to use the "blur" event for calling the inquiry. If you wanted to change it to the "keyup" event, you would simply change the second line to.

setAjaxSource(url, "keyup");

You may trigger your AJAX calls on any javascript event. A list of javascript events can be found here.

5. If all you want to do is fire off an AJAX request (like a maintenance program for example) and not use the response in your application, you are done. If you want to use the response, like we do, you need to add the following function to the javascript section of your html page.

function afterAjax(ajaxText) {
// alert(ajaxText);
}

6.Whatever field you wish to be passed to your inquiry (in our example we pass the vendor number) needs to be assigned an id of id="ajax_src" on the input tag.

7.Whatever fields you want replaced in your form need to be assigned an id of id="ajax_updN" (on it's input statement) where N is the number of the array element being passed back from your inquiry in step 2. This allows you to fill multiple fields with data based on one look-up.

In our case, we don't fill multiple fields with data, but rather an area of the screen. We define that area with span tags and give the span tag an id of id="ajax_dspN" where N is the number of the array element being passed back from your inquiry in step 2.

That's really all there is to it. Now for a quick review:

Steps 1 through 4 above show you how to fire off an asynchronous request based on any javascript event and they give you a link to a list of all javascript events.

Steps 5 through 7 show you how to define a field that will be passed to your javascript event and how to name either the fields or the area of the screen you want the passed back data to fill.

Have fun with this. It really can give your applications a nice feel. And let me know if posts like this are helpful to you by responding to this post.

Forum: m-Power Tips and Tricks

Websphere configuration suggestions

lwluce — Fri, 06 Jun 2008 19:26:28 GMT
Good afternoon

Does anyone on this forum have experience configuring websphere to support m-Power developed applications?

Could you share that experience please.

Roy Luce
Systems Plus

Forum: Dear Marcy

Bringing Google Suggest functionality to your servlets

JoeStangarone — Mon, 02 Jun 2008 20:59:56 GMT
You've seen the "AJAX suggest" functionality built into our multi-record inquiry and work with maintenance templates. It looks something like this:

I'm going to show you how to bring this same kind of functionality to your m-Power servlets - where it's not already built in. There is some javascript involved. And, it's easier than you might think. The only thing to keep in mind is that what I am going to show you is not part of m-Power and therefore not supported by mrc. It is, probably, one of the very reasons you chose to build your web apps with m-Power: the lightweight functionality that you can add to your browser based applications. What I am going to show you works "right out of the box. I can't think of any times when you might need to change it. So, here goes.

An example of what we are going to build can be found here. Click to update any record, then erase the vendor number field and start typing with a '1'. Now don't get too excited, I'm only going to show you how to make the drop down box populated from the vendor master file appear, not how to make the photo and vendor information change. I'm saving that one for my next post. If you keep typing beyond the "1', your list will narrow as you go. If you type something that doesn't exist in the file, your list will be empty. In this example there is so little data that you can just type a 1 and use the arrow keys to select amongst the elements.

The Recipe

1. We need to build a multi-record web 2.0 inquiry to create the drop-down list. In our case, it is CBB2E.I00090s. It is written over the vendor master file. It contains only one field, the vendor number and is sequenced by that field.

2. We need to create a maintenance program where we will add the "AJAX suggest" functionality. This can be either a web 2.0 single record maintenance or a web 2.0 work with maintenance. In our case it's CBB2E.M00020s - a work with maintenance.

3. Open the painter for your maintenance servlet to the maintenance page. Switch to source mode and add the following lines of code in the header section. href="/mrcjava/mrcclasses/mrc_servlet_ajax.css" rel="stylesheet" type="text/css"/>

You may not have the last javascript file. If not download it here and place it in your /mrcjava/mrcclasses directory.

4. Add the following java function to the javascript portion of the page.
function onsubmit1(){
var ajaxSrc = $('ajax_src');
if (ajaxSrc) {
var ajaxCopy = $('ajax_copy');
if (ajaxCopy) {
ajaxCopy.value = ajaxSrc.value;
}
}
return true;
}
5. Next we have to tell the maintenance program about the Inquiry we built in step 1. To do that, find the non-italic code below and insert the italic code within it.
window.onload = function(){
var server_app='CBB2E.I00090s';
init2(server_app, "I");
setAccessibility();
}
where CBB2E is the name of your data dictionary and I00090s is the name of your servlet built in step 1.

6. We need to tell the javascript what field should call I00090s. Scan for the input field you need - in our case it is SGVND.
Add id="ajax_src" to the input field.
Change the field name on the input statement from name="XXXXX" to name="val_XXXXX" where XXXXX is your field name.
Add a hidden field for the original field name in the hidden field section of the page. It should look like: where XXXXX is your field name.
7. Lastly, we need to add onsubmit="return onsubmit1()" to the form tag on the page.

If you've done it right, you should be able to save your html source and watch the AJAX suggest functionality come to life. This implementation only allows for one AJAX suggest field per servlet. For more, find someone who can understand and modify the javascript that I have given you. I think you'll agree that for many application types, this way of doing this is slicker than an External Dropdown list or a Return Data Smartlink
Forum: m-Power Tips and Tricks

Message Board

CSS Tutorial #5: Cascading Order and Inheritance

How to: Make rollover buttons with CSS

CSS Tutorial #4: DIV and SPAN Tags

Home

Products

Services

About

Using functions in your servlets

CSS Tutorial #3: Class & ID Selectors

Header text

This is a sample page to demonstrate Class and ID Selectors.

CSS Tutorial #2: Style Sheet Syntax

CSS Tutorial: Style Sheet Types

Linking tables

Positioning with CSS

The CSS Box Model

Benefits of Using CSS for Website Layout

Using AJAX functionality with Web 2.0 servlets to fill in parts of your page

Websphere configuration suggestions

Bringing Google Suggest functionality to your servlets