CRS-IUA’s UI design calls for table cells that can be expanded, that is, made taller when touched. Tables with expanding cells can be found in several areas of the UI, including the shopping cart view and the login screen.
The ATGExpandableTableView class extends UITableView to implement this expanding cell behavior as new cell selection behavior. When a delegate is passed to the ATGExpandableTableView the behavior of that delegate’s tableView:heightForRowAtIndexPath: and tableView:didSelectRowAtIndexPath: methods are updated by the ATGExpandableTableView to provide the cell expansion behavior.
Cells that should allow expansion when touched must adopt the ATGExpandableTableViewCell protocol, which defines a single, read-only property—expandedHeight —used to resize the cell when it is touched or selected. When an ATGExpandableTableViewCell is not selected, its height is defined either by the view’s delegate (through method tableView:heightForRowAtIndexPath:) or by the view itself (through the rowHeightProperty mentioned previously).
Conversely, cells that do not adopt the ATGExpandableTableViewCell protocol cannot be expanded and will have constant height regardless of their selection state.
Standard iOS Tab Bar Controller
CRS-IUA uses the standard iOS Tab Bar controller instead of relying on a custom toolbar, as in previous releases.
Credit Card Date Picker
The standard UIDatePicker offers the user the ability to select the year, month, and day of the month. The user is required to select values for all three. However, in the case of a credit card expiration date, only the month and the year should be specified. In order to allow the specification of just the month and year components of a date, ATGDatePicker—an extension of UIPickerView—was implemented. It declares itself as its own source and delegate, and renders two picker components, one for month selection and one for year selection. The following illustration shows an example of the ATGDatePicker on the edit credit card screen.
Action Blocker
In the CRS-M white paper (“Creating Mobile Web Applications with Oracle ATG Web Commerce: A Guide to the Mobile Commerce Reference Store (Web)”) the section entitled “Common Elements” describes the mechanism used to display modal content to the user. You can find the current white paper on the My Oracle Support knowledge base. This mechanism is used for several purposes, examples of which are to make the delete button modal on the shopping cart page, and to display a popup that indicates that user should go to the desktop (main) site to complete an action.
The UI of CRS-IUA is equipped with a mechanism similar to the modal content mechanism of CRS-M for the same purposes. CRS-IUA provides the ATGActionBlocker class, which allows specific screen areas to be disabled. Its shared instance can be used to block the whole application screen or a single view through the use of one of three methods:
(void) showView:(UIView*)pView withTarged:(id)pTarget andAction:(SEL)pAction;
Blocks the whole application screen, displays the specified view (pView) in a popover
When the user touches the gray background, the specified action (pAction) will be triggered on the specified target (pTarget)
(void) showBlockView:(UIView *)pView withFrame:(CGRect)pFrame withTarget:(id)pTarget andAction:(SEL)pAction forView:(UIView *)pBaseView;
Blocks only the specified view (pBaseView)
When the user touches the gray background, the specified selector (pAction) will be triggered on the specified target object (pTarget)
(void)showBlockView:(UIView *)view withFrame:(CGRect)frame actionBlock:(void (^)(void))block forView:(UIView *)baseView;
Behaves the same way as showBlockView:withFrame:withTarget:andAction:forView: but with one exception: the actionBlock should be a block of code to be executed on user touch instead of a target and selector, or action, pair in the previous method)
The following illustration shows an example of the ATGActionBlocker being used to make the “Remove” button modal.
The following illustration shows the ATGActionBlocker being used to display a popup prompting the user to go to the main site.
Image View
The UI of CRS-IUA displays many images that are downloaded from the server. In order to be able to provide a loading animation while an image is being downloaded, ATGImageView extends the standard UIImageView.
ATGImageView introduces an additional property, imageURL, which is prepended with the server hostname and port, then used to download the given image. While the download is in progress, ATGImageView displays a loading animation.
