Built-in View Types

|| View Type || View Param || Description || | Image View | {{file=''}}hello | | | Shape View | {{shape=''}} | For this button view, each background is created by a native Corona display object and has all of their properties. The shape type can be one of {{rect}}, {{roundedRect}}, {{circle}} and {{polygon}}. This shape type is used for all of the button views. | | 9-slice | {{TBD}} | (not available, still to be created) | | frame | {{sheet='image_sheet.png'}} | (not available, still to be created) | | Text View | {{}} | If none of the other types are found, then the button will revert to text-only. Thus it will not have a background and only show the label. |

h4. Shape View

{code:language=none|title=Parameters for Rounded Rectangle View}

-- import dmc_widgets into the namespace local Widgets = require 'dmc_widgets'

local button = Widgets.newButton{ -- button info ... (as before)

-- label info
... (as before)

-- view info
view='shape',
width = 100,
height = 60,
shape='roundedRect',
corner_radius = 4,
fill_color={ 1,1,0.5,0.5},
stroke_width=4,
stroke_color={0.75,0.75,0.75,0.5},

-- handlers
... (as before)

}

{code}

{code:language=none|title=Parameters for Rectangle View}

-- import dmc_widgets into the namespace local Widgets = require 'dmc_widgets'

local button = Widgets.newButton{ -- button info ... (as before)

-- label info
... (as before)


-- view info
view='shape',
width = 100,
height = 60,
shape='rect',
fill_color={ 1,1,0.5,0.5},
stroke_width=4,
stroke_color={0.75,0.75,0.75,0.5},

-- handlers
... (as before)

}

{code}

h4. Text View

{code:language=none|title=Parameters for Text View}

-- import dmc_widgets into the namespace local Widgets = require 'dmc_widgets'

local button = Widgets.newButton{ -- button info ... (as before)

-- label info
... (as before)

-- view info
-- no 'view' param required, default is text
width = 100,
height = 60,

-- handlers
... (as before)

}

{code}

h2. Button Label Parameter

The {{label}} parameter value depends on your needs.

h3. Simple Text Label

If you just want a simple label name shown using the system defaults, set the {{label}} parameter as a string. This will be the text of your label.

{code:language=none|title=Simple Text Label}

local button = Widgets.newButton{ -- button info ... (as before)

-- label info
label = "My Label",

-- view info
... (as before)

-- handlers
... (as before)

} {code}

h3. Customized Text Label

If you want to choose the properties of the text label, like font size or color, then make the {{label}} parameter a table and include your values.

{tip} The following example lists all of the label parameters, however, it's only necessary to use the ones needed for your project. {tip}

{code:language=none|title=Customized Text Label}

local button = Widgets.newButton{ -- button info ... (as before)

-- label info
label = {
    text="My Label",
    align='right',
    margin=5,
    x_offset=-5,
    y_offset=5,
    color={ 1,0,0.5 },
    font=native.systemFontBold,
    font_size=20,
},

-- view info
... (as before)

-- handlers
... (as before)

} {code}

h2. Misc Parameters

enabled = true/false

hit_width/hit_height

h3. Button-View Names

A separate button view is created for each state in which the button can be. The names for the states are the same for all buttons. They are:

  • {{active}}
  • {{inactive}}
  • {{disabled}}

Though this uses a little more memory, this architecture ensures that:

  • each state's view can be fully customized
  • each view can have its own label
  • the internal code is simpler
  • in the future, we can apply animations to each of the buttons !

shape construction (default)

{code}

local button1 = widget.newButton { id='button-id', -- onPress = handleButtonPress, -- onRelease = handleButtonRelease, onEvent = handleButtonEvent, viewClass = myViewClass,

hit_width = 210,
hit_height = 220,

label = "My Button",
label_align = 'left',
label_margin = 5,
label_x_Offset = 10,
labelYOffset = 10,
labelColor = { default={}, pressed={} },
font = native.systemFont,
fontSize = 13,

shape='roundedRect',
width = 200,
height = 40,
cornerRadius = 2,
normal = {

}
pressed = {

}

fillColor = { default={ 1, 0, 0, 1 }, pressed={ 1, 0.1, 0.7, 0.4 }, disabled={} },
strokeColor = { default={ 1, 0.4, 0, 1 }, pressed={ 0.8, 0.8, 1, 1 }, disabled={ 1, 0.4, 0, 1 } },
strokeWidth = 4

}

button1.enabled = false button1.label = 'Changed' button1.labelAlign = 'Changed'

button1.style.normal.labelAlign = 'left' button1.style.pressed.labelAlign = 'left' button1.style.disabled.labelAlign = 'left'

button1:setFont( native.systemFont, 'pressed' ) button1:setCornerRadius( 2, 'disabled' ) button1:setCornerRadius( 2 ) button1:setStrokeWidth( 2 ) button1:setStrokeColor( {} ) button1:setFillColor( {} )

button1:setLabelAlign( 'left', 'default' ) button1:setFont( native.systemFont, 'pressed' ) button1:setCornerRadius( 2, 'disabled' ) button1:setCornerRadius( 2 ) button1:setStrokeWidth( 2 ) button1:setStrokeColor( {} ) button1:setFillColor( {} )

button1:setRadius( 2 )

button1:setFillColor( {} )

button1.style.default.fillColor( {} )

{code}

image construction:

{code}

local button1 = widget.newButton { label = "button", onEvent = handleButtonEvent,

files = { default='buttonDefault.png', pressed='buttonPressed.png' },
width = 100,
height = 50,

}

{code}

frame construction

{code}

local button1 = widget.newButton { label = "button", sheet = buttonSheet, frames = { default=1, pressed=2 }, onEvent = handleButtonEvent, }

{code}

9-slice construction

{code}

{code}