ActionTable

ActionTable running on iPad with added Accessories

ActionTable running on iPad with added Accessories

Works With

apple_logo google_android

ActionPack Business

ActionTable is available exclusively as part of the ActionPack Component Suite.


  • Includes: ActionTray, DownloadManager, NavBar & ActionViewSplitter
  • ActionViews - Low level component set
  • ActionTable - Cross platform table/list manager
  • ActionToast - Toast for iOS
  • And many more functions and features

$199

About ActionTable

ActionTable is a custom Table View Controller for iOS and custom ListView for Android that supports a range of features that allow you to create complex Table/List Views quickly, all with a minimum of code. Focus on your user interface design and not the details of implementation, ActionTable does all the heavy lifiting for you.

Easy Implementation

Tired of having to create a custom TableViewController, TableViewDataSource, and TableViewDelegate class for each table type that you wanted to implement in you mobile app? So are we, that's why we created ActionTable. By implementing the RequestData event on the ActionTable's dataSource property you can quickly populate any ActionTable without having to create custom classes.

Use UIActionTableSections to hold collections of UIActionTableItems to quickly define the structure and format of your table data. Pass this information to an ActionTable's dataSource and display complex tables with a minimum of code, all in OS specific UI.

Accessory Items

The ActionTable UIActionTableItem class defines several helper function that make attaching accessory views a snap so you can quickly add things like switches and buttons to your table items without have to code them by hand. ActionTables make easy work of implementing your mobile apps settings.

The following helper function are available:

  • AddAccessorySwitch
  • AddAccessoryStepper
  • AddAccessorySlider
  • AddAccessoryActionImageView
  • AddAccessoryButton
  • AddAccessoryTextField

Events

ActionTables support a number of events to respond to user interaction at the UIActionTableViewController, UIActionTableSection and UIactionTableItem levels. Several events such as ItemsSelected or AccessoryButtonTapped cacade so they can be handle at any point along the chain from controller to source data item.

Cross Platform

ActionTable was designed to be highly code compatible across platforms so the same code you use to populate it in iOS can be used in the Android version of your mobile app with little or no modification. Several iOS specific table features such as DisclosureButtons and DisclosureIndicators have been ported to the Android version as well (all rendered in an Android Specific way) to assist in cross platform design.

Adding Accessories is supported on Android using the same function names as the iOS version, however all of the accessories will be converted to their Andoid specific counterparts as follows:

  • AddAccessorySwitch - Will be rendered as a ToggleButton
  • AddAccessoryStepper - Will be rendered as a SeekBar
  • AddAccessorySlider - Will be rendered as a SeekBar
  • AddAccessoryTextField - Will be rendered as an EditText

Features

ActionTable includes a fully documented API with comments for every feature. ActionTable is available exclusively as part of the ActionPack Action Component Suite by Appracatappra, LLC.

iOS Example

ActionTable was designed to make adding it to a project super easy. Here is a example of creating a simple ActionTable in code:

using Appracatappra.ActionComponents.ActionTable;
...

private UIActionTableViewController _componentTable;
...

// Add the component table to the tray
_componentTable = new UIActionTableViewController (UITableViewStyle.Plain, new RectangleF (5, 3, componentTray.Frame.Width-10, componentTray.Frame.Height-40));
componentTray.AddSubview (_componentTable.TableView);
_componentTable.cellSelectionStyle = UITableViewCellSelectionStyle.None;

// Wire-up data request event
_componentTable.dataSource.RequestData += (dataSource) => {
    // Populate table with data
    var section = dataSource.AddSection("Action Components");

    // Add items to table
    section.AddItem("ActionTable","For iOS and Android",true);
    section.AddItem("ActionTray","For iOS and Android",true);
    section.AddItem("ActionView","For iOS",true);
    section.AddItem("ActionViewSplitter","For iOS",true);
    section.AddItem("DownloadManager","For iOS and Android",true);
    section.AddItem("NavBar","For iOS and Android",true);
};

// Wire-up item selection
_componentTable.ItemsSelected += (item) => {
    // Change the title of the tray
    componentTray.title = item.text;

    // Save selected component and display about document
    controller.currentComponent = item.text;
    webView.LoadFile (String.Format("Documents/{0}About.pdf",controller.currentComponent));

    // Close the tray
    componentTray.CloseTray(true);
};

// Ask the controller to populate the table
_componentTable.LoadData ();

NOTE: ActionTables can be completely created in C# code or by using .xib files.

Android Example

Here is an example of populating an ActionTable that was defined in a .axml file:

using Appracatappra.ActionComponents.ActionTable;
...

private UIActionTableViewController documentList;
...

// Access interface items
documentList = activity.FindViewById<UIActionTableViewController> (Resource.Id.documentList);

//---------------------------------------------
// Configure Component ActionTable
//---------------------------------------------
documentList.activity = activity;
documentList.allowsSelection = true;

// Wire-up data request event
documentList.dataSource.RequestData += (dataSource) => {
    // Populate table with data
    var section = dataSource.AddSection("Action Components",Resource.Drawable.book,"The ActionPack Component Suite");

    // Add items to table
    section.AddItem("ActionTable","For iOS and Android",true);
    section.AddItem("ActionTray","For iOS and Android",true);
    section.AddItem("ActionView","For iOS",true);
    section.AddItem("ActionViewSplitter","For iOS",true);
    section.AddItem("DownloadManager","For iOS and Android",true);
    section.AddItem("NavBar","For iOS and Android",true);
};

// Ask the controller to populate the table
documentList.LoadData ();

//Auto select the current component
documentList.SelectItem (currentComponent);

//Wire-up touch handler
documentList.ItemsSelected += (item) => {
    //Save new component
    currentComponent = item.text;
};

Trial Version

The Trial version of ActionTable is fully functional however the background is watermarked. The fully licensed version removes this watermark.

Some screenshots created with PlaceIt.

ActionTable Component

Getting Started with ActionTable

ActionTable is available exclusively as part of the ActionPack Action Component Suite by Appracatappra, LLC. To use an ActionTable in your mobile application include the ActionPack.iOS or ActionPack.Android component and reference the following using statement in your C# code:

using Appracatappra.ActionComponents.ActionTable;

Creating the ActionTable

In iOS, an ActionTable can either be defined in a .xib file or directly in code such as:

UIActionTableViewController actionTable;
…

// Create new ActionTable and set it's style
actionTable = new UIActionTableViewController (UITableViewStyle.Grouped, new RectangleF(0,0,360,480));
AddSubview (actionTable.TableView);
actionTable.cellSelectionStyle = UITableViewCellSelectionStyle.None;

On Android either define your ActionTable in a .axml file or again in code:

private UIActionTableViewController settingsList;
...

// Gain Access to all views and controls in our layout
settingsList = FindViewById<UIActionTableViewController> (Resource.Id.settingList);

//---------------------------------------------
// Configure the settings list
//---------------------------------------------
settingsList.activity = this;

WARNING! You must set the activity property of you ActionTable to the Activity that it is running in first, before using any other properties or methods else it may fail to run or render correctly!

Providing Data

To provide data for your ActionTable, respond to the RequestData event of the ActionTable's dataSource property. You will create a collection of one or more UIActionTableSections , each containing one or more UIActionTableItems that will define the structure and type of your table such as:

// Wire-up data request event
actionTable.dataSource.RequestData += (dataSource) => {
    // Populate table with data
    var section = dataSource.AddSection("Section One");

    // Add items to table
    section.AddItem("Item 1",true);
    section.AddItem("Item 2",true);
};

Finally, call the ActionTable's LoadData() method to display the table with all of the data that you have defined. Example:

// Display table
actionTable.LoadData ();

Adding Accessories

More complex tables such as user settings can be created by ActionTable with ease by using the helper functions of the UIActionTableItem class such as this for iOS:

// Wire-up data request event
actionTable.dataSource.RequestData += (dataSource) => {
    // Populate table with data
    var section = dataSource.AddSection("Accessory Types");

    // Add items to table
    section.AddItem("Switch",true).AddAccessorySwitch(false);
    section.AddItem("Stepper {0}",true).AddAccessoryStepper(1,10,1,1);
    section.AddItem("Slider {0:0}",true).AddAccessorySlider(1,100,50);
    section.AddItem("Image",true).AddAccessoryActionImageView("Icons/my-profile.png");
    section.AddItem("Button",true).AddAccessoryButton(UIButtonType.RoundedRect,50,"OK");
    section.AddItem("Text",true).AddAccessoryTextField(150,"<enter text>","");
};

Or this for Android:

// Wire-up data request event
settingsList.dataSource.RequestData += (dataSource) => {
    // Populate table with data
    var section = dataSource.AddSection("Accessory Types",Resource.Drawable.gear);

    // Add items to table
    section.AddItem("Switch","Maps to ToggleButton",true).AddAccessorySwitch(false);
    section.AddItem("Stepper {0:0}","Maps to SeekBar",true).AddAccessoryStepper(1,10,1,1);
    section.AddItem("Slider {0:0}","Maps to SeekBar",true).AddAccessorySlider(1,100,50);
    section.AddItem("Image",true).AddAccessoryActionImageView(Resource.Drawable.myprofile);
    section.AddItem("Button",true).AddAccessoryButton(100,"OK");
    section.AddItem("Text",true).AddAccessoryTextField(250,"<enter text>","");
    section.AddItem("More Text",true).AddAccessoryTextField(250,"<more text>","");
};

Note: Special handling exists for AddAccessoryStepper and AddAccessorySlider, if the parent UIActionTableItem's text contains "{0}" or "{0:0}" it will be replaced with the value of the accessory as the user interacts with it.

User Interaction

Handle user interaction with an ActionTable by responding to an UIActionTableViewController, UIActionTableSection or UIActionTableItem's ItemSelected event such as:

// Wire-up item selection
actionTable.ItemsSelected += (item) => {
    // Display the selected item
    Console.WriteLine("Selected {0}",item.title);
};

Examples

For full examples of using ActionTables in your mobile application please see the APTest.iOS or APText.Android example app included with this component. ActionTable is used in the APTest_iOSViewController.cs and the DocumentView.cs files on iOS and the MainActivity.cs and DocumentViewController.cs files on Android.

The APTest.iOS and APText.Android apps not only includes this documentation but it also includes the full API documentation for the entire ActionPack component suite.

See the API documentation for ActionTable for a complete list of features and their usage.

Trial Version

The Trial version of ActionTable is fully functional however the background is watermarked. The fully licensed version removes this watermark.

ActionTable for iOS

You can find the full API documentation for ActionTable iOS here:

http://appracatappra.com/api/ios/

 

ActionTable for Android

You can find the full API documentation for ActionTable Android here:

http://appracatappra.com/api/android/

At Appracatappra we take quality very seriously and always strive to provide the easiest to use and most trouble free Xamarin Studio Components available.

If you are experiencing an issue with one of our components or have a question about it's usage please either visit our support forum or fill out the request form below:

Your Name (required)

Your Email (required)

Subject

Component:

Device:

iPhone/iPod TouchiPadAndroid PhoneAndroid Tablet

OS Version:

Type:

Question/Issue

Verification:

captcha

Please enter the text above: