Mobile App development using DroidScript App

• Download source - 1.2 KB

Introduction

With this article I want to introduce the readers of CodeProject to the DroidScript app. DroidScript is an excellent app using which one can very easily create various types of apps like database apps, messaging apps, mailing apps, etc. Also one can easily access various sensors on a mobile device like accelerometer, compass, camera, GPS & so on. The DroidScript app comes with a built-in editor to create apps within the device. It also allows you to create or edit scripts within a browser using a WiFi editor on a PC by pressing the small arrow button on the top.

This article shows the use of the DroidScript Android App to develop apps for the Android platform. This demo app is a simple database app that inserts, updates, deletes and queries data in the device's SQLite database.

Background

This app creates a sample database called empdb. Then it creates a table called emp having columns empid, empname and salary. There are six buttons, Add, Display, Display All, Edit, Delete and Delete All to perform common operations on the database table.

Using the code

The OnStart() function is automatically executed when the application starts running. The user interface of the app can be coded in the OnStart() function. The built-in app object represents the current app. The CreateLayout() function of the app object can be used to create a layout. The SetBackGradient() function can be used to create a background gradient for the app with two colors. The AddChild() function of the layout adds a control to the layout. The following code in the OnStart() function creates an interface to accept employee id in a text field:

mainLayout=app.CreateLayout("linear","Vertical,FillXY");
mainLayout.SetBackGradient("#ff0000ff","#ffff0000");
empidLayout=app.CreateLayout("linear","Horizontal");
empidLabel=app.CreateText("Emp ID: ",0.5,0.1);
empidText=app.CreateTextEdit("",0.5,0.1);
empidLayout.AddChild(empidLabel);
empidLayout.AddChild(empidText);
mainLayout.AddChild(empidLayout);

Layouts can also be nested inside one another to create complex layouts. For example, the following code creates three buttons horizontally laid out in the main layout.

btnLayout1=app.CreateLayout("linear","Horizontal");
btnAdd=app.CreateButton("Add",0.25,0.1);
btnAdd.SetOnTouch(btnAdd_OnTouch);
btnDisplay=app.CreateButton("Display",0.25,0.1);
btnDisplay.SetOnTouch(btnDisplay_OnTouch);
btnDisplayAll=app.CreateButton("Display All",0.25,0.1);
btnDisplayAll.SetOnTouch(btnDisplayAll_OnTouch);
btnLayout1.AddChild(btnAdd);
btnLayout1.AddChild(btnDisplay);
btnLayout1.AddChild(btnDisplayAll);
mainLayout.AddChild(btnLayout1);

The SetOnTouch() function of the button object specifies the event handler for the click event of the button.

After adding all controls, finally, the main layout can be added to the app by using the AddLayout() function of the app as follows:

app.AddLayout(mainLayout);

A database can be created or opened (if it already exists) by using the OpenDatabase() method of the app. The ExecuteSql() method of the database object can be used to execute any SQL command on the database. The following code creates or opens a database called empdb and creates the emp table if it does not exist.

db=app.OpenDatabase("empdb");
db.ExecuteSql("create table if not exists emp(empid integer primary key,empname text,salary integer)");

Other DML operations and queries can be performed on the table by using the ExecuteSql() function.

The following code inserts a new record taking the field values as parameters and specifying the error event handler:

function btnAdd_OnTouch()
{
    db.ExecuteSql("insert into emp values(?,?,?)",[empidText.GetText(),empnameText.GetText(),empsalaryText.GetText()],null,OnError);
    empidText.SetText("");
    empnameText.SetText("");
    empsalaryText.SetText("");
    empidText.Focus();
}

function OnError(msg)
{
    app.Alert("Error: "+msg);
}

Similarly records can be queried on the basis of the primary key as follows:

function btnDisplay_OnTouch()
{
    db.ExecuteSql("select * from emp where empid=?",[empidText.GetText()],OnResult);
}

function OnResult(result)
{
    if(result.rows.length==0)
    {
        app.Alert("Invalid Emp ID");
        empnameText.SetText("");
        empsalaryText.SetText("");
    }
    else
    {
        empnameText.SetText(result.rows.item(0).empname);
        empsalaryText.SetText(result.rows.item(0).salary);
    }
}

All records can be retrieved and displayed in an alert dialog as follows:

function btnDisplayAll_OnTouch()
{
    db.ExecuteSql("select * from emp",[],OnAllResults);
}

function OnAllResults(result)
{
    if(result.rows.length==0)
    {
        app.Alert("No records found");
    }
    else
    {
        var records="Employee Records\n";
        records+="-----------------------------------------------------\n";
        for(var ctr=0;ctr<result.rows.length;ctr++)
        {
            records+="Emp Id: "+result.rows.item(ctr).empid+"\n";
            records+="Name: "+result.rows.item(ctr).empname+"\n";
            records+="Salary: "+result.rows.item(ctr).salary+"\n";
            records+="-----------------------------------------------------\n";
        }
        app.Alert(records);
    }
}

Records can be edited as follows:

function btnEdit_OnTouch()
{
    db.ExecuteSql("select * from emp where empid=?",[empidText.GetText()],OnEditResult);
}

function OnEditResult(result)
{
    if(result.rows.length==0)
    {
        app.Alert("Invalid Emp Id");
    }
    else
    {
        db.ExecuteSql("update  emp set empname=?,salary=? where empid=?",[empnameText.GetText(),empsalaryText.GetText(),result.rows.item(0).empid]);
        app.Alert("Record edited");
        empidText.SetText("");
        empnameText.SetText("");
        empsalaryText.SetText("");
    }
}

Following code deletes the details of the employee whose id is specified:

function btnDelete_OnTouch()
{
    db.ExecuteSql("select * from emp where empid=?",[empidText.GetText()],OnDeleteResult);
}

function OnDeleteResult(result)
{
    if(result.rows.length==0)
    {
        app.Alert("Invalid Emp Id");
    }
    else
    {
        db.ExecuteSql("delete from emp where empid=?",[result.rows.item(0).empid]);
        app.Alert("Record deleted");
        empidText.SetText("");
        empnameText.SetText("");
        empsalaryText.SetText("");
    }
}

The following code can be used to delete all records after confirmation. It displays a user defined dialog box to get confirmation from the user before deleting the records.

function btnDeleteAll_OnTouch()
{
    dlgDeleteAllConf.Show();
}

function btnDeleteAllOK_OnTouch()
{
    db.ExecuteSql("delete from emp");
    empidText.SetText("");
    empnameText.SetText("");
    empsalaryText.SetText("");
    dlgDeleteAllConf.Hide();
}

function btnDeleteAllCancel_OnTouch()
{
    dlgDeleteAllConf.Hide();
}

Points of Interest

The functionality of the DroidScript app can be further enhanced by downloading and installing or purchasing several plugins from the Plugins menu in the app. For instance you can purchase the ApkBuilder plugin to build stand-alone Android Package files.