revUp - Updates and news for the LiveCode community
Issue 124 | December 9th 2011 Contact the Editor | How to Contribute

iOS Modal Pickwheel in a column, courtesy of Data Grid Helper
Use this great Marketplace addon to make your life easier - Data Grid Helper is one of our top picks available in the December Festive Gift Bundle

by Zyrip the Slug

This Lesson presents how to create a column containing an iOS Modal Pickwheel control in a datagrid, using the Data Grid Helper Plugin.

Opening Columns Builder

Opening_columns_builder_display

First, drag a datagrid onto a stack and double click on it to open the Data Grid Helper (DGH) Properties Palette.
Click the "Edit..." button to open Columns Builder.

Building Columns in the Columns Builder Preview

Building_columns_in_the_columns_builder_preview_display

Click the (+) button and add two columns.
Name the last column "Pickwheel".

Pickwheel Creation Using Custom Objects and Column Content

Pickwheel_creation_using_custom_objects_and_column_content_display

Open the Custom Objects, Columns Builder Properties topic (1)
Double click on the "Pickwheel" header (2) to open the Column Content (3)
Next, drag the iOS Modal Pickwheel image from the Column Builder Properties and drop it in the Column Content Area (4)

Update Columns Builder Preview

Update_columns_builder_preview_display

Click the Update button to refresh the Column Builder Preview content (1).
A field named "_ColumnData_" will also be automatically added in the Column Content.

Remove this field by selecting it's name in the Object List of the Column Content Area (2), after the field is selected in the Column Content, on your keyboard, press the Delete or suppr key.

Editing The Pickwheel Field

Editing_the_pickwheel_field_display

Double clicking on the Pickwheel field in the Column Content, will open the Properties Inspector.
Enter a name for this pickwheel field. Default name is "Field". Example: myFirstPickwheel.

Close the inspector, then update the columns builder preview again by clicking on the update button.

Using DGH To Build The Required Script

Using_dgh_to_build_the_required_script_display

DGH can now build the required script for managing this iOS pickwheel according to the column data.
Click the Script Editor icon and select the "Build Script" menu.

Confirm Script Updating

Confirm_script_updating_display

Click the "Update" button to update the script of the column.

Confirming the warning message

Confirming_the_warning_message_display

Click the "Erase" button to replace the column default script with the script built by DGH.

Editing The Pickwheel items in the Pickwheel's column script

Editing_the_pickwheel_items_in_the_pickwheel_s_column_script_display

Click the Script Editor icon and select the "Edit Script" menu.

Content for the pickwheel is added by DGH in the EditValue handler.

In the EditValue handler, locate this line:
put "Item 1" & cr & "Item 2" & cr & "Item 3" & cr & "item 4" into tThePickList ## Add your list here

And replace it by:
put "myFirstItem" & cr & "mySecondItem" & cr & "myThirdItem" into tThePickList ## Add your list here

Apply the script's change by clicking on the Apply button of the Script Editor.

Update Column Content Then Apply The Column Builder Preview To The DataGrid

Update_column_content_then_apply_the_column_builder_preview_t_display

After the script is built, update the DataGrid Preview, by clicking the "Update" button.
Then, click on the "Apply" button to apply the modifications to the selected DataGrid (1).

Adding some data to the datagrid

Adding_some_data_to_the_datagrid_display

Before to test the result in the Simulator, add some data in the Col1 column by using the "Contents" topic of the LiveCode's Property Inspector.
Separate data of each line by a return, then press enter to update the Datagrid's content.

Changing the Data Grid Appareance by Applying the iOS Preset

Changing_the_data_grid_appareance_by_applying_the_ios_p_1_display

In the DGH's "Table properties", click on the DataGrid Preset's Apply button to change the datagrid appareance.

Testing The Result in the Simulator

Testing_the_result_in_the_simulator_display

To test the result, open the Simulator and click on the Pickwheel column's content, then select a value in the Pickwheel

You can get a copy of Data Grid Helper here, or as part of the December Festive Gift Bundle.

Michael McCreary

About the Author

Zyrip is a long time xTalk user. By day, he is a developer in a small firm creating applications or websites for clients in languages such as Visual Basic, VB.Net, PHP and Fourth Dimension. By night, he develops with LiveCode, his favorite development environment.

 

Main Menu

What's New

A Festive Gift from LiveCode