Designing Pages

There are a few things you can do to make editing pages with Application Designer a little easier. Note that you need a page defintion open to access these features.

Select Group

Use select group (or the big hand as I like to call it) to select multiple objects and move them together.

This is the select group toolbar icon:

select-group-toolbar-icon.png

This is the big hand cursor:

big-hand-cursor.png

Default Ordering

Use default ordering to reset your tab ordering once you have your fields in right order in your page order tab. This will make sure that when the user presses the tab key, their cursor moves correctly through the data entry fields (and doesn't jump around everywhere) - quite important from a usability standpoint.

This is the default ordering toolbar icon:

default-ordering-toolbar-icon.png

Grid Layout Settings

Change your grid settings for finer-grain movement of page objects. From the menu Layout > Grid Settings reducing the spacing from the default (width = 4px, height = 4px) to width = 2px and height = 2px. This will put the dots on your grid closer together and let you move objects with more accuracy. Note that if you reduce this to width = 1px and height = 1px the grid is not shown by default. If you do show the grid, everything goes black (because there's no gap between the dots).

page-finer-grid-layout.png

Test Mode for Tab Order

Use the Test Mode toolbar icon to test your tab order. This is what test mode is for. Click on the test mode switch then try pressing tab through the fields to make sure the cursor moves in the order you expect.

This is the test mode toolbar icon:

test-mode-toolbar-icon.png

Testing in Different Web Browsers

Configure browsers and test your page out in AS MANY browsers as possible. Use Layout > View in Browser. This is heaps faster than saving and refreshing pages, especially if the navigation to your page is not simple! Also, you can test your page layout without actually saving the page. So no more changing page layouts and saving hundreds of times (which is even more painful when using change control locking). Once you learn to use this, it will save you hours!

You should be testing in at least Internet Explorer (v6, v7), Firefox (v2,v3), Opera, Chrome and Safari. You can use Layout > View in Browser > Edit Browser List to add all browsers you have installed to start with. Yes I know things will look different, but you need to be sure that the page is at least usable in all these browsers.

When you use the view in browser feature you can also view the page source to see things like scripts and stylesheets associated with that page.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License