| Pages in App Designer | KEVIN RESCHENBERG
11-23-2005 |
A page is one of the more complex types of objects managed by Application Designer. Today
I'd like to explore a few options available to us when we are creating or modifying pages.
Maybe you're not aware of all of these, and one of these options could save you
a little time.
Grid settings
The grid helps you to align elements on your pages. When you move objects, they
"snap" to the nearest line on the grid. It's represented visually by all the
little dots you see when you open a page object. If you've ever opened a page and seen
a dark gray, black, or striped background, that's just a result of the grid settings
used on that page. Go to Layout | Grid Settings. The smaller the number of pixels
specified in the "spacing" area, the finer the control you have on alignment. If the
grid tends to get in the way, you can turn it off here. But an easier way to turn
the grid on or off is to click
the Toggle Grid toolbar button, which looks like a square of 16 little dots.
If you have ever tried to move a page field and seen it "jump" slightly in another direction,
that's because the grid settings have changed since the page was originally created.
The field is just trying to snap to the current grid.
Alignment with grouping
The grid is a good way to line up elements, but sometimes it's still hard to see whether
elements are aligned properly on a complicated page. Another trick is to use the Select Group
toolbar button, which looks like a dotted box containing 3 bars. Click on that button and
the mouse pointer changes into a hand. Now start drawing a box. Any page elements lying
within the box or overlapping it can then be moved as a group. Sometimes, though, I just
use the group box as sort of a ruler to check the alignment on the page. You must start
at the upper left corner of the box you want to draw. When finished, either click the
Select Group button again, or just click on an empty area of the page.
Alignment with the keyboard
You can click and drag page elements, of course, but sometimes it's difficult to position
them exactly. In this case, just click once and then use the arrow (up, down, left, right)
keys to move the element.
Object inspector
Another tool is the Object Inspector. Click the Toggle Inspector button, which looks like
a page with a hand pointing at it. The Object Inspector diplays the record, field, type
and label of an item, plus positioning information. Just click once on a page element to
see this information displayed in the Object Inspector. At times this may be more convenient
than double-clicking on each item and opening the page field properties dialog.
Viewing pages
There are two toolbar buttons for "testing" pages. One is a vertical light switch and
is called Test Page. This is left over from the pre-PIA days and shows the page as it
would appear as a two-tier panel. It has limited use. The second button is a horizontal
light switch with "html" above it and is called View Page in Browser. This should display
the page in Internet Explorer or whatever you have set as the default browser. Sometimes
this works and sometimes it doesn't, and unfortunately I haven't figured out the pattern
yet. When it does work, you should see the page but without the normal header/banner frame
or the buttons along the bottom. In other words, you will see just the page object
you're working on. Dropdown lists will work but prompt lists won't. Also, PeopleCode
won't run and the page has no connection with the database. The purpose of this is to
check the appearance of the page, not its operation.
Layout | Generate HTML does something similar, but instead of displaying the page, it
simply creates the HTML and gathers the various image files needed for the page.
If you look at this HTML you will see lots of JavaScript and stylesheet code that you
normally wouldn't see on a PeopleSoft page using View Source.
Order tab
The Order tab is very important for controlling the functionality of a page. I won't
get into this large topic today, but just want to point out a couple of small items.
First, as I've previously mentioned, be careful when you are simply viewing a page. If you
go to the Order tab, double-click on a field, and then Cancel the dialog, App Designer
still thinks that you have changed the page. If you then save your project, the page
object will be stamped with your ID and the date and time. Later, you and other
developers will wonder what you changed and why! Be sure to close a page object
before saving your project if you didn't intend to change anything.
If you scroll over to the right edge of the order list and then hover the mouse
on the border just to the right of "Allow Deferred Processing," it will change into
a double-pointed arrow. Double-click there and another column will appear. Expand it
to see that it's called "Out of available." This appears to be just a sequence number for
each item on the page. What's it for? I don't know. But let me suggest a possible
use. Have you ever needed to reorder the fields on a long page, and become lost
or confused? Maybe this sequence number could be used to back out some of your changes.
But if you know what it's really for, please tell me.
Table-based layout
There are various ways of formatting HTML pages. One way is to use invisible HTML tables
and let the browser determine the actual position of each element. That's
what PeopleSoft does for the most part. Sometimes a page seems to misbehave. You
have carefully aligned everything but the resulting page shows elements thrown around
in seemingly random places. If that happens, it might help your understanding of the
situation to see the invisible tables. One quick way of doing this is to generate the
HTML as described above and then open the file in Word. The tables will show up as
gray lines. It makes no sense to change the page in Word, of course, but this might
help you find the problem.
|
