Changing to a New UI Control

You can change the way the list of Hybrid App packages and messages appear.

Hybrid Web Container uses UITableView objects to display the list of Hybrid App packages and messages. To change this behavior, you must completely rewrite some files. This procedure shows an example of a fully functional Cover Flow style view. You can use any UI library.

This customization involves rewriting one or two classes, depending on whether you want to customize the appearance of the application list or the messages list, or both. The application list view is in the HybridAppsFolderView (.m and .h) files, while the messages list view is in the MessagesFolderView (.m and .h) files. You can change the appearance of one or the other independently of one another.

This customization is not too difficult if you use the existing classes as an example. For the most part, you can (and probably should) reuse a lot of the code in the original classes. You will likely see the biggest divergence when you replace the UITableViewDelegate and UITableViewDataSource functions, as well as the code that creates cells. This code is tailored to a UITableView, but you will probably find that the UI library you are trying to replace it with will have callback functions that accomplish similar things. In many cases, you will be able to copy and paste code from the original functions into your new class with very few modifications needed. The sample code provides very rudimentary views, but you can experiment with different views.

This example uses an open source UI library called iCarousel, available under the zlib License. The source is at http://cocoacontrols.com/platforms/ios/controls/icarousel. This example replaces the UI for the applications folder, while leaving the messages folder unchanged.

Download the iCarousel source code.
Copy the iCarousel.h and iCarousel.m files to the HWC/Classes directory, then add these files to the Classes group folder in the Project Navigator in Xcode.
Do not drag and drop the files into the Classes group folder, or they will not be incorporated into the project build phase. Instead, right-click the Classes group folder, and select Add Files to HWC....
If you are viewing this guide online from the Product Documention Web site, click iOS_HWC_Customization_Supplement.zip to access the ZIP file containing new copies of HybridAppsFolderView.h and HybridAppsFolderView.m.
Drop the unzipped HybridAppsFolderView files into the HybridWebContainer/Classes directory, overwriting the original files.
You can customize the code to suit your needs, for example, you may want to design your own UIViews, or change from a cover flow to any of the other supported view types within iCarousel, or to a different UI library altogether.