aCelery

Bootstrap Element Encapsulating Classes

xbLink

Creates Bootstrap link element.

Constructor xbLink(label,href,clss)

xbStringInput

Creates Bootstrap string input element

Constructor xbStringInput(label,name,clss,wclss)

Set or remove the error state of the xbStringInput.

xbNumberInput

Creates Bootstrap number input element

Constructor xbNumberInput(label,name,clss,wclss)

xbEmailInput

Creates Bootstrap email input element

Constructor xbEmailInput(label,name,clss,wclss)

xbTelInput

Creates Bootstrap telephone input element

Constructor xbTelInput(label,name,clss,wclss)

xbDateInput

Creates Bootstrap date input element

Constructor xbDateInput(label,name,clss,wclss)

xbTextAreaInput

Creates Bootstrap textarea input element

Constructor xbTextAreaInput(label,name,rows,clss,wclss)

Set or remove the error state of the xbTextAreaInput.

xbCheckBox

Creates Bootstrap checkbox input element

Constructor xbCheckBox(label,name,clss,wclss)

Set or remove the checked value of the xbCheckBox.

Sets or remove the error state of the xbCheckBox.

xbSelect

Creates Bootstrap checkbox input element

Constructor xbSelect(label,name,clss,wclss)

Adds an option to the xbSelect.

Adds options to the xbSelect

Sets the selected option of the xbSelect

Clears the selected option of the xbSelect

Sets or remove the error state of the xbSelect.

xbForm

Creates Bootstrap form element

Constructor xbForm(clss)

xbButton

Creates Bootstrap button element

Constructor xbButton(label,clss)

xbButtonIcon

Creates Bootstrap button element with a Glyphicon

Constructor xbButtonIcon(label,icon,right,clss)

xbButtonPopOver

Creates Bootstrap button with popover

Constructor xbButtonPopOver(label,title,content,clss)

xbButtonDropdown

Creates Bootstrap button with dropdown menu

Constructor xbButtonDropdown(label,clss)

Adds an item to the dropdown menu.

xbButtonDropdownItem

Creates object representing an option of the dropdown menu of an xbButtonDropdown

Constructor xbButtonDropdownItem(label,f)

xbButtonGroup

Creates a Bootstrap button group that will contain xbButton

Constructor xbButtonGroup(clss)

Adds a button to the xbButtonGroup

xbButtonGroupVertical

Creates a Bootstrap vertical button group that will contain xbButton

Constructor xbButtonGroupVertical(clss)

xbImage

Creates a Bootstrap image element

Constructor xbImage(src,alt,clss)

xbTextBox

Creates a Bootstrap Text Box

Constructor xbTextBox(text, clss)

xbPara

Creates a Bootstrap Paragraph

Constructor xbPara(text, clss)

xbAlert

Creates a Bootstrap Alert element

Constructor xbAlert(clss)

xbJumbotron

Creates a Bootstrap Jumbotron element

Constructor xbJumbotron()

xbLayout

Creates a Layout

Constructor xbLayout(rows,cols,widths,clss)

xbPanel

Creates a Bootstrap panel

Constructor xbPanel(clss)

xbTitlePanel

Creates a Bootstrap panel with title

Constructor xbTitlePanel(title, clss)

xbTable

Creates a Bootstrap table

Constructor xbTable(clss)

xbElementsTable

Creates a Bootstrap table in which cells contain xElements

Constructor xbElementsTable(clss)

xbTabs

Creates a Bootstrap tabed navigation element.

Constructor xbTabs(clss)

Adds a pane to the xbTab

Removes a pane from the xbTab

Activates a pane at the specified index.

xbTabPane

Creates a Bootstrap pane element for inclusion in an xbTab.

Constructor xbTabPane(clss)

xbNavBar

Creates a Bootstrap Nav Bar element.

Constructor xbNavBar(title,clss)

Adds a dropdown menu to the xbNavBar.

Adds an item to the xbNavBar.

Retrieves an item from the xbNavBar at the specified index.

xbNavBarDropdown

Creates a Bootstrap Nav Bar dropdown element for inclusion in an xbNavBar.

Constructor xbNavBarDropdown(title,clss)

Adds an item to the xbNavBarDropdown at the specified index.

Adds a divider to the xbNavBarDropdown.

Adds a wrapper element for the xbNavBarDropdown title.

Sets or removes the disabled state of the xbNavDropdown.

xbNavBarItem

Creates a Bootstrap Nav Bar item element for inclusion in an xbNavBar.

Constructor xbNavBarItem(label,clss)

Sets or removes the disabled state of the xbNavBarItem.

xbModal

Creates a Bootstrap Modal Dialog.

Constructor xbModal(title,clss,dlg_clss)

Adds an element to the xbModal footer.

Adds an element to the xbModal body.

Adds a close xbButton to the xbModal.

Sets the autoremove mode, in which the xbModal is removed from the DOM when closed.

xbModalOpenButton

Creates a Bootstrap xbButton which opens a linked xbModal.

Constructor xbModalOpenButton(label,modal,clss)

xbModalOpenLink

Creates an xLink element which opens a linked xbModal.

Constructor xbModalOpenLink(label,modal,clss)

xbListGroup

Creates a Bootstrap list-group element.

Constructor xbListGroup(clss)

Adds an item to the xbListGroup.

xbListGroup

Creates a Bootstrap list-group item element.

Constructor xbListGroupItem(label,clss)

xbTheme

Creates a xbSelect with options for Bootstrap themes. The theme of the app is changed on selection. If not inserted as an UI element it can also be used to change the theme programmatically.

Constructor xbTheme(label,currentTheme)

Selects a Bootstrap theme.

CRUD (Create, Read, Update, Delete) Classes

xbValidator

Abstract class for field validators.

Constructor xbValidator()

Validate value

xbNotEmptyValidator

Creates a not empty field validator.

Constructor xbNotEmptyValidator()

xbEmailValidator

Creates a validator for email fields.

Constructor xbEmailValidator()

xbTelValidator

Creates a validator for telephone fields.

Constructor xbTelValidator()

xbNotZeroValidator

Creates a not zero validator.

Constructor xbNotZeroValidator()

xbField

Basic CRUD field.

Constructor xbField(type,title,name,inList,inSearch)

Returns the title of the field.

Returns the name of the field.

Sets the readonly attribute of the field.

Formats the value according to the field type.

Sets the value of the field.

Clears the field.

Returns the xbInput object corresponding to the field.

Returns the current value of the field.

Adds a validator to the field.

Validate the field. Returns true if the value of the field is validated by all validators.

xbTextAreaField

Text Area field.

Constructor xbTextAreaField(title,name,rows,inList,inSearch)

xbCheckboxField

Checkbox field.

Constructor xbCheckboxField(title,name,onval,offval,inl,ins)

xbListField

List field.

Constructor xbListField(type,title,name,inList,inSearch)

Add an option to the List Field with the specified label and value.

Add options to the List Field.

xbTableListField

List field where options are obtained from a database table.

Constructor xbTableListField(database,title,name,table,field,inList,inSearch)

xbTableMaint

Object that performs all CRUD operations on a single table or on a main table and other linked tables.

Constructor xbTableMaint(database,title,table)

Add a field to the xbTableMaint.

Clears the search restriction.

Generates the list view.

Generates the record view for the specified id.

Generates the search panel.

Generates a list view with a search result.

Generates an empty form panel for a new record.

Reads the values of all fields in a form panel.

Validates all fields and return the result.

Inserts a new record into the database and presents a record view of the inserted record.

Presents an edit view for the record with specified id.

Saves in the database the edited record with specified id.

Deletes (after user confirmation) from the database the record with specified id.

Sets the parameters for the xbTableMaint when functioning as a linked table.

Starts processing CRUD operations by presenting an initial list view.

Redefinable method in inherited class, called to validate the form, must return a true or false value. Current values to use for validation are accessible in this.record.

Redefinable method in inherited class, called before generating the insert query, data in this.record.

Redefinable method in inherited class, called after sql insert, id is new id assigned on insert.

Redefinable method in inherited class, called before generating update query, data in this.record.

Redefinable method in inherited class, called after sql update.

Redefinable method in inherited class, called before generating delete query.

Redefinable method in inherited class, called after sql delete.

Redefinable method in inherited class, used to present the user with a menu of special actions in the record view. Must return an array of objects {label: "mylabel", bind: function(){}}.

Android Interface Classes

xInterface

Abstract class, base for other Android Interface classes.

Constructor xInterface()

Performs an Ajax GET request with the specified query that returns JSON data.

Performs an Ajax GET request with the specified query that returns raw data.

Performs an Ajax POST request with the specified query and data that returns raw data.

Performs an Ajax POST request with the specified query and data that returns JSON data.

xSQL

SQLite Interface object class.

Constructor xSQL()

Opens and creates if it does not exist a SQLite database.

Executes an SQL statement that is not a select or insert.

Execute an insert SQL query. Returns the rowid of the inserted row, -1 if en error occurred.

Execute a select SQL query. Returns the cursor handle. -1 if an error occurred.

Returns the number of rows selected after an sqlSelect call

Go to the last row of the current cursor.

Retrieves the next row in the cursor as a Javascript object, false if past the end of the cursor.

Retrieves the previous row in the cursor as a Javascript object, false if before the start of the cursor.

Closes the current cursor.

Closes the current Data Base.

Deletes a database.

xFile

File IO Interface object class.

Constructor xFile()

Opens a file.

Lists files, returns an array of objects with attributes: path, fname, directory, lastmodified, length. or false.

Creates a directory.

Gets the absolute path of External Storage in the Android system.

Closes the current file.

Delete the current file

Reads the contents of the current file and returs them as a string.

Writes to the current file.

xExportFile

File Export Interface object class.

Constructor xExportFile()

Creates a file to be exported.

Gets the created file for download.

xHTTP

HTTP interface object class. This interface allows us to circumvent the same origin policy which prevents us form getting data from an arbitrary server using regular javascript Ajax calls.

Constructor xHTTP()

Gets data from a server at the specified url.

Gets data from a server at the specified url issuing a POST request.

Example App

var db, topLayout, myModal;

function initDB(){
   // Initialize SQLite database

   db = new xSQL();
   db.openDB("xtest.db");
   db.sqlExec("create table if not exists person (mname string, email string, grp string)");
   db.sqlExec("create table if not exists person_tel (person integer, tel string, type string)");

}

function tabsTest(){
   // Example tabs with 3 panes

   var myTabs = new xbTabs();
   var pane1 = new xbTabPane();
   var pane2 = new xbTabPane();
   var pane3 = new xbTabPane();
   
   myTabs.addPane("Pane 1", pane1)
         .addPane("Pane 2", pane2)
         .addPane("Pane 3", pane3)
         .activatePane(1);
         
   pane1.addElement(new xbPara("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et erat et metus auctor cursus. Ut congue facilisis velit sit amet dapibus"));
   pane2.addElement(new xbPara("Nam pellentesque porta odio, eu auctor felis viverra eget. Aenean tortor ligula, ornare quis tristique in, fermentum nec elit. Lorem ipsum dolor sit amet"));
   pane3.addElement(new xbPara("Nullam et orci consequat, feugiat nisi in, consectetur mauris. Aenean nec imperdiet augue. Etiam placerat neque lectus, vel volutpat justo dapibus sed"));

   // Remove previous element from the layout and add myTabs 

   if (e = topLayout.getElement(1,0))
      e.remove();
   topLayout.addElement(myTabs,1,0);
}

function widgetTest(){
   // Test various Bootstrap widgets

   var panel = new xbTitlePanel("Widgets");
   
   var btnGroup = new xbButtonGroup()
                      .addElement(new xbButton("Button","btn-primary"))
                      .addElement(new xbButtonIcon("Icon","glyphicon-asterisk"))
                      .addElement(new xbButtonDropdown("Dropdown")
                                      .addItem(new xbButtonDropdownItem("Item 1",null))
                                      .addItem(new xbButtonDropdownItem("Item 2",null))
                                      .addItem(new xbButtonDropdownItem("Item 3",null)));
   panel.addElement(new xbImage("/user/Example/Redtwitter_icon_48x48.png","Red Twitter"))
        .addElement(new xbTheme("Select Theme"))
        .addElement(new xbStringInput("Input","inp"))
        .addElement(new xbSelect("Select","sel")
                        .addOption("Option 1","1")
                        .addOption("Option 2","2")
                        .addOption("Option 3","3"))
        .addElement(btnGroup);                
                        
   if (e = topLayout.getElement(1,0))
      e.remove();
   topLayout.addElement(panel,1,0);
}

function jsonNews(){
   // Get a news feed with the HTTP interface and present in an xbListGroup
   
   var jsonfeed = new xHTTP().get("http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=8&q=http%3A%2F%2Fnews.google.com%2Fnews%3Foutput%3Drss");
   var list = new xbListGroup();
   var data = JSON.parse(jsonfeed);
   for (var i = 0; ((i < data.responseData.feed.entries.length) && (i < 10)); i++){
      var ent = data.responseData.feed.entries[i];
      var item = new xbListGroupItem()
                     .addElement(new xMultiHtml("h3")
                                    .addElement(new xbPara(ent.title,"text-info")))
                     .addElement(new xPara(ent.contentSnippet));
      list.addElement(item);
   }
   if (e = topLayout.getElement(1,0))
      e.remove();
   topLayout.addElement(list,1,0);
}

function dirExport(){
   // Export the Directory database with the File Export Interface
   
   var resObj;
   var data = "";
   var myEf = new xExportFile();
   
   db.sqlSelect("select a.rowid, a.*, b.rowid, b.* from person as a, person_tel as b where b.person = a.rowid order by a.mname");
   while (resObj = db.getNextRow()){
      var first = true;
      for(fld in resObj){
         if (!first)
            data += ',';
         first = false;
         data += '"' + resObj[fld] + '"';
      }
      data += '\r\n';
   }
   
   // This is the file export trick: First send to the server and then get it back!
   
   myEf.set("text/csv","directory.csv",data);
   myEf.get();
}

function showModal(){
   // Show a Modal Dialog
   
   myModal = new xbModal("aCelery Modal");
   myModal.addCloseButton("Close","btn-primary");
   myModal.addToBody(new xbPara("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et erat et metus auctor cursus. Ut congue facilisis velit sit amet dapibus"));
   myModal.show();
}

function dirMaint(dbl){
   // Use the CRUD framework in single table and linked table modes
   
   var person = new xbTableMaint(db,"Directory","person")
                 .addField(new xbField("string","Name","mname",true,true)
                               .addValidator(new xbNotEmptyValidator()))
                 .addField(new xbField("email","Email","email",false,true)
                               .addValidator(new xbEmailValidator()))
                 .addField(new xbListField("string","Group","grp",false,true)
                               .addOption("Work","w")
                               .addOption("Friends","f")
                               .addOption("Family","m"));

   if (dbl == "2"){
      var person_tel = new xbTableMaint(db,"Telephones","person_tel")
                           .addField(new xbField("number","Person","person",false,false))
                           .addField(new xbField("tel","Telephone","tel",true,false)
                                         .addValidator(new xbTelValidator()))
                           .addField(new xbListField("string","Type","type",true,false)
                                         .addOption("Work","w")
                                         .addOption("Home","h")
                                         .addOption("Mobile","m"));

      // Link the person_tel table to the person table                              

      person.addLinkedTable(person_tel,"person");
   }
   if (e = topLayout.getElement(1,0))
      e.remove();
   topLayout.addElement(person,1,0);
   
   // Start the xbTableMaint object
   
   person.run();
}

function exit(){
   // Close the app
   db.closeDB();
   xCloseApp();
}

function showMenu(){
   // Create and show a Bootstrap NavBar with the main menu
   
   var nav, dir;
   
   nav = new xbNavBar("aCelery","acelery_navbar");
   dir = new xbNavBarDropdown("Directory");
   dir.addItem(new xbNavBarItem("CRUD Single")
                    .bindFunction(function(){dirMaint("1")}));
   dir.addItem(new xbNavBarItem("CRUD Linked")
                    .bindFunction(function(){dirMaint("2")}));
   dir.addItem(new xbNavBarItem("Export")
                    .bindFunction(dirExport));
   nav.addDropdown(dir);
   nav.addItem(new xbNavBarItem("Tabs")
                   .bindFunction(tabsTest));
   nav.addItem(new xbNavBarItem("Widgets")
                   .bindFunction(widgetTest));
   nav.addItem(new xbNavBarItem("News")
                   .bindFunction(jsonNews));
   nav.addItem(new xbNavBarItem("Modal")
                   .bindFunction(showModal));
   nav.addItem(new xbNavBarItem("Exit")
                   .bindFunction(exit));

   // Create a layout for the App with 2 rows and 1 column
   // Add the NavBar and set as the Top Element.
   
   topLayout = new xbLayout(2,1)
                  .addElement(nav,0,0)
                  .setToTop();
}

function main(){
   // App entry point
   
   initDB();
   showMenu();
}

Other Resources

• Bootstrap Framework
• SQLite Database Engine
• JQuery Javascript Library
• Code Mirror Javascript editor
• LazyLoad Javascript Library