Scrollview as Tableview in Corona SDK using Lua

Introduction : Generally to display data in tabular format we use tableview, whereas the same thing can also be achieved using scrollview for mobile devices. Actually scrollview is used to display large content where we can scroll the content but it can also display data in tabular format. All we need to put our custom made rows inside it.

Description : Lets have an example where we have several row items and we need to put them in tabular format displaying with different rows for a mobile application using Corona SDK which will be scrolled vertically.

To achieve our goal, I will use widget library to render scrollview on screen and underscore library to loop row items in order to generate rows.

CODE BLOCK :
main.lua
——–

-- Initialize widget library
local widget = require( "widget" )

-- Initialize underscore library
local _ = require ('underscore');

-- Create the scrollview widget
local tblScrollView = widget.newScrollView
{
top = 0, -- top position for scrollview
left = 0, -- Set left position
width = display.contentWidth,
height = display.contentHeight,
horizontalScrollDisabled = true -- To block horizontal scroll, Default is false
}

local rowHeight = 200
local textYpos = nil
local rowView = nil
local rowText = nil

-- Function to create row
local function createRow( data )
-- Created row background
rowView = display.newRect( 0, ( rowHeight * data.rowNum ), display.contentWidth, rowHeight )
rowView.strokeWidth = 5; -- Set border width
rowView:setFillColor( 0.3 ) -- Set background color
rowView:setStrokeColor( 1, 0, 0 ) -- Set border color
rowView.anchorX, rowView.anchorY = 0, 0 -- Set reference point for row

textYpos = ( ( rowHeight * data.rowNum ) + ( rowHeight / 2 ) )

-- Define text label
rowText = display.newText( data.rowItem, 50, textYpos, native.systemFontBold, 40 )
rowText.anchorX = 0 -- Set reference point

-- Inserted row background and row text
tblScrollView:insert( rowView )
tblScrollView:insert( rowText )
end

-- Row items
local rowList = {
{ rowNum = 0, rowItem = "Row 1"},
{ rowNum = 1, rowItem = "Row 2"},
{ rowNum = 2, rowItem = "Row 3"},
{ rowNum = 3, rowItem = "Row 4"},
{ rowNum = 4, rowItem = "Row 5"},
{ rowNum = 5, rowItem = "Row 6"},
{ rowNum = 6, rowItem = "Row 7"},
{ rowNum = 7, rowItem = "Row 8"},
{ rowNum = 8, rowItem = "Row 9"},
{ rowNum = 9, rowItem = "Row 10"},
{ rowNum = 10, rowItem = "Row 11"},
{ rowNum = 11, rowItem = "Row 12"}
}

— Loop for creating rows
_.each(rowList, createRow);

On above code I have initialized a scrollview (“tblScrollView”) and then define a function which will create individual rows having a background with some border to differentiate among each other. Also added text label to display row number. Then assign an item list (“rowList”) representing each rows.
Finally called each method of underscore to call “createRow” function for each items of “rowList”. This only.
After running it on device we will have scrollview which will be looking as like as scrollview on screen.

Summary : So here we have learned the way to use scrollview as tableview in Corona SDK using lua. In my next blog I will implement click event on each row to identify them separately. So just follow me 🙂

THAT’S IT

Use of Underscore library in Lua

Introduction: As web developer very oftenly we use different javascript module to customize our code and its performance. Actually we used them most. For example jQuery which is very much favorite among us. underscore.js which is one of them which provides different utilities which actually reduces code size and apparently the performance also. Truly speaking I am a fan of it. It saves my time and effort whenever I deal with javascript.
So today when I sit to brush up my lua skill, suddenly one thing come to my mind, I wish if some library like underscore.js also there for lua, and I started googling and instantly my wish get fulfilled. I found the same “underscore.lua” here. Although it is there for long time back I found it very much useful so I thought to share it with you all folks. I wish it will be helpful for all newbies.

Description : So today I am going to explain you the easy way to use it in your code following with few examples.
Before starting let me explain what is this underscore.lua is for. It is nothing but a library which provides you few utilities, methods using which with one line you may do the job whereas without it you may need to write few more lines to perform the same job.

For example, there may two different table containing different data and you need to merge it into a single table. For that underscore provides a function called “extend” where you need to pass two different table and it will give you a single merged table. Isn’t it interesting. There are so many others functions like this which may reduce your code complexity.

To take the advantage of this library you just need to get the code for this library from here and save it to your root directory along with your “main.lua” file. This much only.

FOLDER STRUCTURE :

TestProject (Root folder)
|
|____ main.lua
|____ underscore.lua

Now its usage. Let me take a simple example to explain the same. All we know about for loop. Where we need to initialize a counter from where the loop gets started, a final count up to which loop will be move and a loop increment and decrement process. Whereas the same can be done here with “each” function which will only need the list containing data upon which loop will be done. It will automatically goes for each and every instance of the list item.

CODE BLOCK :

main.lua
——–

-- Define underscore library with requiring it
local _ = require( "underscore" )

-- Callback function which will be operated for each loop
local function printInstances( item )
-- Print item
print( "---------- : ".. item )
end

-- Now the magical function
_.each( {"JavaScript", "Lua", "ActionScript"}, printInstances )

Above code will call “printInstances” function for each item passed in “each” function and it will print them one after another.

Summary : So here we learned about a new utility library for lua and its installation process along with example. Hope it will be helpful for freshers.

THAT’S IT

Use slider as progress bar

Introduction : Progress bar generally used to display amount of work done on background, like displaying it while uplodaing or downloading any content. Titanium has Slider API which can be used to do the same for crossplatform application.

Description : Let me create a scenario where we will have a slider and a button on window. On click of that button, slider will progress, which will appear as progress bar on the screen.

//Define current window

var currentWin = Ti.UI.currentWindow;

//Define a button to strat the progress

var stratBtn = Ti.UI.createButton({

width : 200,

height : 50,

title : ‘Strat Progress’,

top : 300

});

 

//Button added to window

currentWin.add(stratBtn);

 

On above code block a window gets defined with a button added on it.

//Define a slider

var sliderAsProgressbar = Titanium.UI.createSlider({

width : 300,

min : 0, // Minimum value dispayed on the bar

max : 100 // Maximum value dispayed on the bar

});

 

//Set the thumb image with any transparent image

sliderAsProgressbar.thumbImage = ‘transparentImage.png’;

 

//Asign initial value to the bar

sliderAsProgressbar.value = 0;

//Disable slider for touch effect

sliderAsProgressbar.touchEnabled = false;

//Bar added to window

currentWin.add(sliderAsProgressbar);

Here on above a slider is added with the current window, which have a range from 0 to 100 to display.

Initially the slider value was set with 0. ( sliderAsProgressbar.value = 0; ). As we can touch the slider and change it value, we need to block this functionality to give a look and feel of progress bar. so ‘sliderAsProgressbar.touchEnabled = false;’ disable the touch over the slider.

Now lets define click event associated with the button, where onclick of this button slider will strat to increase its value and will look as progress bar.

//Event to start progress

stratBtn.addEventListener(‘click’, function(){

//Asign initial value to the bar

sliderAsProgressbar.value = 0;

var cahangedVal = 0, progressInterval;

//Check the progress interval

if (progressInterval) {

clearInterval(progressInterval);

}

//Do the progress stuff

progressInterval= setInterval(function() {

//Condition to check max value

if (val >= 101) {

//Stop the progressing

clearInterval(progressInterval);

 

//Asign initial value to the bar

sliderAsProgressbar.value = 0;

return;

}

//Change the bar value to show progress

sliderAsProgressbar.value = cahangedVal ;

cahangedVal++;

}, 1000);

});

Summarry : Here using above code block, I have described the way to use slider as progress bar. Now depending on the codition we can use it various place as progressbar implementation.

THAT’S IT

Video tutorial for counting total rows having different section with Alloy using Titanium

Introduction : Table view may contain different sections where each of those section may contain several rows.
Here I am describing the way to calculate total number of rows present in a tableview which have different section.

Code Block :

View : index.xml

Controller : Index.js

function showTotalRow(){
var allSection = $.tbl.data;
var totalRows = 0;
var count = 0;

for(count = 0; count < allsection.length; count++){
totalRows = allSection[count].rowCount;
}

alert('Total Rows : ' + totalRows);
}

Summary :
Now onwards easily we can get the total number of rows present on a table view with Alloy using Titanium.

THAT'S IT

Display red edit button on left side of rows in a table view using Alloy with Titanium

Introduction :
For IOS we can implement the row edit functionality in a table view.
Here I am describing the same with above video.

Code Block :

View : index.xml

Summary :
So here is the way I have described to display edit button along with red delete button on rows using Alloy with Titanium.

THAT’S IT

Rows drag and drop functionality in a table view using Alloy with Titanium

Introduction :
There might be a scenario where we need to re-arrange the rows with drag and drop effect. Using titanium, very easily we can achieve this.

Code Block :

View : index.xml

Summary :
Using above video I have described the way to implement drag and drop functionality on rows using Alloy with Titanium.

THAT’S IT

Video tutorial to display red delete button with Alloy using Titanium

Introduction :
Titanium provides you some APIs which are OS specific. One of the scenario is to display red delete button on swipe of row in a table view.
Using the above video, I am going to describe the way to display red delete button on swipe of rows on a table view.

Code Block :

View : index.xml

Summary :
Using above code on swipe of any row, you can display delete button on right side of row.

THAT’S IT