ipad divide database calls between detail and master windwo

Question

ipad divide database calls between detail and master windwo

You must Login before you can answer or comment on any questions.

My operating system is Mac OS 10.6.8 This is being made for iPad only with IOS 5. Titanium Studio: build: 2.1.2.201208301612 with recent update to the SDK in place.

Here is my code. What I am trying to do is make it split the navigation part to go to my MASTER_WINDOW and the content to go to the DETAIL_WINDOW. I have the first set of navagation going to the MASTER_WINDOW but the second row of navigation does not come up. There are no errors but I do see the items scrolling in the Console panel. Can someone point me in the right direction, please?

/ Initialize database
Titanium.Database.install('content.sqlite','contentDB');
 
var categoryArray = [];
var catRows = [];
 
// populate category array from database
// only called on first rendering of the tab, after that the array is filled
if (categoryArray.length == 0) {
    var db = Titanium.Database.open('contentDB');
    var dbrows = db.execute('select category_id, category_name from categories order by category_name asc');
    while (dbrows.isValidRow()) {
        categoryArray.push({
            catid:dbrows.fieldByName('category_id'),
            title:dbrows.fieldByName('category_name')
        }); 
        Ti.API.info("Found category: "+dbrows.fieldByName('category_name')+" ["+dbrows.fieldByName('category_id')+"]");
        dbrows.next();
    }
    dbrows.close();
    db.close();
}
 
// category table view
for (var c=0;c<categoryArray.length;c++) {
    var row = Ti.UI.createTableViewRow({height:40,backgroundColor:'#ffffff',selectedBackgroundColor:'#eeee33',hasChild:true}); 
    var item = categoryArray[c];
 
    row.catname = item.title;
    row.catid = item.catid;
 
    var catName = Ti.UI.createLabel({
        text: item.title,
        color: '#000000',
        textAlign:'left',
        left:4,
        top:8,
        height:'auto',
        font:{fontWeight:'bold',fontSize:20}
    });
    row.add(catName);   
    catRows[c] = row;
}
var categoryTableView = Titanium.UI.createTableView({data:catRows});
 
// a helper function to make the code cleaner below
function composeItemHTML(id, desc) {
 
    var retval = '<html><head>';
    retval += '<style>BODY {color: black;font-family: Arial, Helvetica, Sans-Serif;text-align:center;font-size: 12px}';
    retval += '</style>';
    retval += '</head><body bgcolor="#004299"><div style="padding: 26px; background-color: white; border: 1px solid; -webkit-border-radius: 5px;text-align:left">';
    retval += desc;
    retval += '</div>';
    retval += '</body></html>';
    return retval;
}
 
function showItemsInCategory(cid,cname) {
        var itemArray = [];
        Ti.API.info("-> "+cname+" <- clicked");
 
        // populate item array from database
        // called every time a category row is clicked
        var db = Titanium.Database.open('contentDB');
        var dbrows = db.execute('select item_id,item_name,item_description from items where category_id=? order by item_name asc',cid);
        while (dbrows.isValidRow()) {
            itemArray.push({
                item_id:dbrows.fieldByName('item_id'),
                title:dbrows.fieldByName('item_name'),
                item_description:dbrows.fieldByName('item_description')
            }); 
            Ti.API.info("Found item: "+dbrows.fieldByName('item_name')+" ["+dbrows.fieldByName('item_id')+"]");
            dbrows.next();
        }
        dbrows.close();
        db.close();
 
        // create item table view
        itemRows = [];
        for (var c=0;c<itemArray.length;c++)
        {
            var row2 = Ti.UI.createTableViewRow({height:'40',backgroundColor:'#ffffff',selectedBackgroundColor:'#eeee33',hasChild:true});
            var item = itemArray[c];
 
            // assign custom row values
            row2.item_id = item.item_id;
            row2.heading = item.title;
            row2.item_description = item.item_description;
 
            // the label for the item name in tableview row
            var itemTitle = Ti.UI.createLabel({
                text: item.title,
                color: '#000',
                textAlign:'left',
                left:4,
                top:8,
                height:'auto',
                font:{fontWeight:'bold',fontSize:20}
            });
            row2.add(itemTitle);
 
            itemRows[c] = row2;
        }
        var itemTableView = Titanium.UI.createTableView({data:itemRows});
        var subWindow = Titanium.UI.createWindow({  
            title:cname,
            style:'none',
            backgroundColor:'#000',
            barImage:'/images/title.png'
        });
        subWindow.add(itemTableView);
        Titanium.UI.currentWindow.open(subWindow,{animated:true});
        // called when user clicks on an item
        itemTableView.addEventListener('click',function(e)
        {           
            var w3 = Ti.UI.createWindow({title:e.row.heading,barImage:'/images/title.png'});
            var wb3 = Ti.UI.createWebView();
            wb3.html = composeItemHTML(e.row.item_id,e.row.item_description);
            w3.add(wb3);
            var b3 = Titanium.UI.createButton({
                title:'Close',
                backgroundColor:'#000000',
                style:'none',
                style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN
            });
            w3.setLeftNavButton(b3);
            b3.addEventListener('click',function()
            {
                w3.close();
            });         
            w3.open({modal:true});
        });
};
 
// called when use clicks on a category to see items in that category
function handleCategoryClick(e) {               
    showItemsInCategory(e.row.catid,e.row.catname);
}
 
// category view event listener
categoryTableView.addEventListener('click', handleCategoryClick);
 
var win = Ti.UI.currentWindow;
win.barImage = '/images/title.png';
// add category table view to the window
Titanium.UI.currentWindow.add(categoryTableView);

5 Answers

Your Answer

Think you can help? Login to answer this question!

i am confused? is this a database issue or a SplitView issue? hard to follow the question

— commented 8 months ago by Aaron Saunders

Answer 1

Sorry, it is splitview I think.. I had it working for iphone but i now want it for my ipad. I want to use the splitview of menu/navigation and html to show in detail window. I seem to be getting mixed up how to load the navigation to the master window which is menu and the html portion that comes from the database after selected into the detail window.

Menu will run through two sets of table views before it gets to the selection which will call the html to go to detail window.

for example: - Cat - - >> persian -->> HTML CONTENT on click

Answer 2

I have a few splitView examples posted on my github repo that might help you get started

http://blog.clearlyinnovative.com/post/3665600022/titanium-appcelerator-quickie-minimal-ipad-splitview

there is also included a link to a CommonJS Version of the sample

Answer 3

yes i am trying to see how to use your great tutorial to figure out how to break this content pulled from sql lite database i have but I am getting a bit confused on how to split it all up.

Answer 4

I have included two more files and another explaination of what I am trying to do.

app.js

// Simple Code for splitview ipad project
SplitViewApp = {};
 
// WINDOWS
SplitViewApp.masterWindow = Ti.UI.createWindow({
    title:'Menu',
    backgroundImage : '/images/bar-bckgrd-yellow.png',
        barImage: '/images/PageTitle-bg.jpg',
        barColor: '#000',
    url:'master_list.js'
});
SplitViewApp.detailWindow = Ti.UI.createWindow({
    title:'UAF Admissions',
     backgroundImage: '/images/cover_960X768.jpg',
     barImage: '/images/PageTitle-bg.jpg',
     barColor: '#000',
    url:'detail.js'
});
 
 
//Forces the application to only open in Landscape
// MASTER NAV GROUP
SplitViewApp.masterNav = Ti.UI.iPhone.createNavigationGroup({
    window:SplitViewApp.masterWindow
});
 
// DETAIL NAV GROUP
SplitViewApp.detailNav = Ti.UI.iPhone.createNavigationGroup({
    window:SplitViewApp.detailWindow
});
 
// SPLIT VIEW
SplitViewApp.splitView = Titanium.UI.iPad.createSplitWindow({
    masterView:SplitViewApp.masterNav,
    detailView:SplitViewApp.detailNav
});
 
Ti.App.addEventListener.addEventListener('app:rowClicked', function(e) {
    Ti.API.log('setMasterPopupVisible');
    // see bug in lighthouse
    // https://appcelerator.lighthouseapp.com/projects/32238/tickets/2300-hide-master-popover-on-ipad
    SplitViewApp.splitView.setMasterPopupVisible(false);
    SplitViewApp.splitView.setMasterPopupVisible(true);
});
 
SplitViewApp.splitView.addEventListener('visible', function(e) {
 
    //if detail view then show button to display master list
    // the framework does this automagically!!
    if (e.view == 'detail') {
        e.button.title = "Master View List";
        SplitViewApp.detailWindow.leftNavButton = e.button;
        SplitViewApp.masterWindow.button = e.button;
        Ti.API.log('Set button');
    }
    else if (e.view == 'master') {
        SplitViewApp.detailWindow.leftNavButton = null;
        SplitViewApp.masterWindow.button = null;
        Ti.API.log('Removed button');
    }
});
 
SplitViewApp.masterWindow.navGroup = SplitViewApp.masterNav;
SplitViewApp.splitView.open();

Here is the master_list.js which calls the page I am having trouble with splitting the nav from the data.

var MASTER_WINDOW = {};
 
(function(){
    var win = Titanium.UI.currentWindow;
    var navGroup = win.navGroup;
    var tableData = [
     Ti.UI.createTableViewRow({title:'Admissions', url:'master_months.js'}),
     Ti.UI.createTableViewRow({title:'Financial Aid', url:'master_days.js'}),
     Ti.UI.createTableViewRow({title:'Degrees and Programs', url:'tab_categories.js'}),
     Ti.UI.createTableViewRow({title:'Galleries', url:'galleries.js'}),
      Ti.UI.createTableViewRow({title:'Viewbook', url:'flipbook.js'})
    ];
 
    /**
    * on click event, fireEvent, detail window is listening
    */
    function tableClick(evt) {
        var newWin = Ti.UI.createWindow({
            title:evt.row.title,
            backgroundColor: '#fff',
            url:evt.row.url
        });
        navGroup.open(newWin);
    }
 
    /**
    * initialize the window
    */
    MASTER_WINDOW.init = function(){
 
        var tableview = Titanium.UI.createTableView({
            data:tableData
        });
        win.add(tableview);     
 
        tableview.addEventListener('click',tableClick);                     
    }
 
})();
MASTER_WINDOW.init();

The tab_categories.js is pasted in the first post, which is the one that calls items from my sqlite database inside the resource folder. The database has:

For categories: category_id, category_name (belongs in masterNav)

For subcategores: item_id, item_name (belongs in masterNav)

For webview: item_description (where item_description is linked to item_id) (belongs in detailView)

It pulls the categories first, when you click on a category, it lists its subcategories/children, when you click on the subcategory it will pull from the database and make a webview of the content. The problem I am having is getting the subcategory to show the webview in the detail window as a webview.

Answer 5

is their anyone who could help me I am just getting so confused about this