JSON Drop Down Menu: Even Possible?

[GP_Animations]

After creating an app of a scrollable list of 50 buttons, all of which lead to a different screen (different Lua file), my boss asked me to create the buttons dynamically in a drop down menu and have the titles be pulled in via external JSON file. Is this even possible in Corona SDK?

So I guess it’d be a dropdown menu widget that says “Select a condition”, then you’d tap on it and 50 buttons would appear, each with a different title that it pulls from a JSON file, and each button would lead to a different screen. 

I can’t find any tutorials on this, so I’m not sure if Corona SDK can do it or not.

[Alex10]

I don’t see why it wouldn’t be possible, but I can’t think of any native/organic method to achieve it. Can you liken what you’re describing to one of the sample apps provided by Corona already?

[SegaBoy]

Don’t have much to add to this - however the pain and general messiness of UI coding has prompted me to try and create a data-driven UI Manager at the moment.

I’ve managed to get a setup that is powered by JSOn files containing layout data for each element, the UI Manager parses this file and creates the elements based on a ‘type’ property for each element in the JSOn file.

Creating custom callback functions however is problematic and I’m currently in the process of rewriting the class.

[GP_Animations]

It was suggested to me to use the new PickerWheel widget, but I’m not sure how to pull the titles in from JSON or make the app understand which title was selected and what screen to go to accordingly.

Also, using graphics 2.0, the picker wheel looks messed up when you set the width to contentWidth.

[rob]

The pickerWheel widget is really designed to be 320px wide.  It is not scalable. 

JSON is just a string of data in a particular format.  For it to be useful to you, you first have to convert it from the string to a Lua table.  This is done with the json.decode() API call

local json = require(“json”)

local myDataTable = json.decode(myJSONStringOfData)

Once you have the data table, you should be able to follow the docs for pickerWheel or the Widget Demo sample app and see how to insert records from a table into a picker wheel.

The one possible gotcha is that most of the examples for loading a pickerWheel assume you have your data in an indexed (as in by number) table.  Depending on what your json data is formatted like, it could either produce an indexed table or it could produce a key-value pair table.  Just be aware of that.

Rob

[Develephant]

Is your project using Storyboard?

[GP_Animations]

Yeah, it’s all storyboard-based.

[Develephant]

I put together a little code example, maybe it will help with your situation.

http://www.develephant.net/using-json-as-a-menu-system-with-storyboard-and-corona-sdk/

Cheers.

[rob]

Nice solution @develephant!

You could have also rendered a series of buttons, though tableView is probably the logical widget for it.

Rob

[Develephant]

Thanks @Rob Miracle. I was just using the tableView as an example. I agree a series of buttons would be more applicable to a drop-down menu. Cheers.

[Alex10]

I don’t see why it wouldn’t be possible, but I can’t think of any native/organic method to achieve it. Can you liken what you’re describing to one of the sample apps provided by Corona already?

[SegaBoy]

Don’t have much to add to this - however the pain and general messiness of UI coding has prompted me to try and create a data-driven UI Manager at the moment.

I’ve managed to get a setup that is powered by JSOn files containing layout data for each element, the UI Manager parses this file and creates the elements based on a ‘type’ property for each element in the JSOn file.

Creating custom callback functions however is problematic and I’m currently in the process of rewriting the class.

[GP_Animations]

It was suggested to me to use the new PickerWheel widget, but I’m not sure how to pull the titles in from JSON or make the app understand which title was selected and what screen to go to accordingly.

Also, using graphics 2.0, the picker wheel looks messed up when you set the width to contentWidth.

[rob]

The pickerWheel widget is really designed to be 320px wide.  It is not scalable. 

JSON is just a string of data in a particular format.  For it to be useful to you, you first have to convert it from the string to a Lua table.  This is done with the json.decode() API call

local json = require(“json”)

local myDataTable = json.decode(myJSONStringOfData)

Once you have the data table, you should be able to follow the docs for pickerWheel or the Widget Demo sample app and see how to insert records from a table into a picker wheel.

The one possible gotcha is that most of the examples for loading a pickerWheel assume you have your data in an indexed (as in by number) table.  Depending on what your json data is formatted like, it could either produce an indexed table or it could produce a key-value pair table.  Just be aware of that.

Rob

[Develephant]

Is your project using Storyboard?

[GP_Animations]

Yeah, it’s all storyboard-based.

[Develephant]

I put together a little code example, maybe it will help with your situation.

http://www.develephant.net/using-json-as-a-menu-system-with-storyboard-and-corona-sdk/

Cheers.

[rob]

Nice solution @develephant!

You could have also rendered a series of buttons, though tableView is probably the logical widget for it.

Rob

[Develephant]

Thanks @Rob Miracle. I was just using the tableView as an example. I agree a series of buttons would be more applicable to a drop-down menu. Cheers.