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.
Constant cell height example
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.
Credit Card Date Picker
Action Blocker
The Mobile Commerce Reference Store Overview describes the mechanism used to display modal content to the user. 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;
This 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;
This 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;
This 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.
Using ATGActionBlocker
Image View
The UI of CRS-IUA displays many images that are downloaded from the server. 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.