Saturday April 23, 2005
Updatable Data Table I was asked to show how a Data Table bound to local data (as described here) can be updated. Rather than try to describe it in further detail I just created a simple Creator project. If you have problems in this area, load the project and take a look.
Briefly, the project contains a single page, with a Data Table, a couple of text fields and an Add button. When you press Add, the data in the textfields is used to create a new Person object, this person is put into the master list of people (maintained in the Session bean), and the data table is updated to reflect the change.
(2005-04-23 10:52:19.0) Permalink Comments [4]Centering Components
The issue of centering components has come up several times before, but I don't think I've actually described in detail how to do it.
The problem is this:
How do you center a component in the page, such that the components appear in the dead center of the browser window, regardless of the size of the user's browser window?
Obviously, the answer is that you do this with CSS. But how? The canonical answer is to use auto margins. Set the width of the components, and set left and right margins to "auto", and the component will be centered. However, it's not -quite- that simple (for example, on IE5 you need to use text-align: center, and once you do that you need to add in other CSS to counteract that bad side effects.) Furthermore, what if you want to vertically center the components too?
A solution for this is actually pretty simple. Briefly, the trick is to use absolute positioning to compute the dead center of the page;
doing that is easy:
position: absolute; left: 50%; top: 50%;But of course that will center the top left corner of your component, not the center of your component. But you can use negative margins to achieve that!
First, you need to decide the width of your component. Let's say it's 200 pixels wide, and 80 pixels tall. In that case, position the component in the dead center, and then subtract half of the width and half of the height such that the center of the component
is centered. In our example, half of 200 is 100, and half of 80 is 40, so we add the following section to the <head> of the page:
<style>
.centerPanel {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 80px;
margin-top: -40px;
margin-left: -100px;
}
</style>
Now you just need to set your component's styleClass attribute to centerPanel (no dot) and it will
be centered.
For example, to make a Login panel centered in your login page, drop a Grid Panel. Drop an Output Text and set its text to "User Name:", drop a Text Field, drop another Output Text (set to "Password:") and drop a Secret Field. Set the Columns property to "2" (such that User Name and its Text Field are on the first line, and Password and its password field are on the second). Now either add the above styleclass definition to your stylesheet, or set the style property to the contents of the above styleclass (position: absolute; top: 50%; ...). Voila - your text should be centered in the page - even when the user resizes their browser page.
Experiment with adding additional CSS properties to set a frame for your Grid Panel to make a border; for example
border: solid 1px gray;
padding: 10px;
(2005-04-23 00:10:37.0)
Permalink
Comments [4]
Chat Transcript Available
The transcript from the recent Creator chat is now available. As you may recall, we had some technical problems with the chat software, so a couple of questions were lost and had to be reconstructed from memory...
I realize I promised to write a companion blog to the tabbed menu blogs. Sorry... it's still on my TODO list... I need to think a little bit about it. Doing a navigation menu should be extremely similar to the tabbed menu (you simply change the orientation of the Grid Panel used in the tabbed menu, and change the CSS such that rather than tab appearance each cell is simply a menu item). Therefore, I assume people who wanted a blog on this want something more advanced - perhaps popup JavaScript or something like that.
(2005-04-23 00:00:48.0) Permalink
