Hi , I'm trying to do slide functionality. I have 2 controllers menu and news, In menu controller I have menus like news. by click the menu(news) the news controller will be called and in the news we have list view ,And i'm trying to do that by clicking the list view the menu option has to come right side , I have tried that but it's showing some error
menu.xml
<Alloy> <Window id="mwin"> <View id="lmenu"> <TableView id="lmenutable"> <TableViewRow id="lmtrow2" onClick="newsclick"><Label id="lmtlabel2" >News</Label> </TableViewRow> </TableView> </View> <!-- Left Menu view Close !--> <View id="mmainview"> <View id="mtbarview"> <Button id="mbtnList" onClick="showLeftPane1"/> </View> <!-- logo image view --> <View id="logoimage"></View> <!-- Displaying data in the view according to the menu option clicking !--> <View id="news_dataView"> <Require id="newspage" src="news" type="view"/> </View> </View> <!-- Main view Close !--> </Window> </Alloy>and in menu.js
//****************Nav style1*******************/// var animateToLeft1 = Ti.UI.createAnimation({ left : 0, curve : Ti.UI.ANIMATION_CURVE_EASE_OUT, duration : 500, }); var animateToRight1 = Ti.UI.createAnimation({ left : '33%', curve : Ti.UI.ANIMATION_CURVE_EASE_OUT, duration : 500, }); var position1 = "left1"; var showLeftPane1 = function(e) { if (position1 == "left1") { $.mmainview.animate(animateToRight1); position1 = "right1"; } else { $.mmainview.animate(animateToLeft1); position1 = "left1"; } }; //--------------------------------------Alignment-------------------------------------------------------------// //-----font-----------// var tmp = (Titanium.Platform.displayCaps.platformHeight*4)/100; var font2 = (Titanium.Platform.displayCaps.platformHeight*2.2)/100; $.mwin.addEventListener('open',function(){ //$.mtbarview.height=Ti.Platform.displayCaps.platformWidth/11; $.mbtnList.height=Ti.Platform.displayCaps.platformWidth/20; $.mbtnList.top=($.mbtnList.height+$.mtbarview.height)/8.5; $.mbtnList.font ={fontSize: tmp,fontWeight: 'bold'}; //$.lmtrow1.height=Ti.Platform.displayCaps.platformWidth/12; //---tbl row 1-----// $.lmtlabel1.font ={fontSize: font2,fontWeight: 'bold'}; //---tbl row1 label-----// $.lmtlabel2.font ={fontSize: font2,fontWeight: 'bold'}; //---tbl row2 label font-----// $.lmtlabel3.font ={fontSize: font2,fontWeight: 'bold'}; //$.lmtlabel1.left =Ti.Platform.displayCaps.platformWidth/20; //---logo image alignment--// $.logoimage.top = ($.mtbarview.top+$.mtbarview.height)/3.5; //---news_dataview--// $.news_dataView.top= $.logoimage.height+$.logoimage.top+5; //----List view count -----// var rowNumber = $.lmenutable.data[0].rowCount; //alert("Total rows : " + rowNumber); if(rowNumber=3){ $.lmenutable.separatorColor="#1B1B1B"; } //----List view count -----// }); //--------------------------------------Alignment-------------------------------------------------------------// //--News click ---// function newsclick(e){ $.news_dataView.setVisible(true); };news.xml
<Alloy> <!-- list view !--> <View id="viewlist"> <TableView id="listtable"> <TableViewRow id="listtablerow1" > <ImageView id="listimage1" /> <Label id="title2" >News 1</Label> <Label id="subtitle1">Established in 1999, The Tatami Shop Singapore has taken the lead to communicate the benefits of natural Igusa Tatami to local customers.Established in 1999, The Tatami Shop Singapore has taken the lead to communicate the benefits of natural Igusa Tatami to local customers.Established in 1999, The Tatami Shop Singapore has taken the lead to communicate the benefits of natural Igusa,Perfint’s newest product MAXIO, is set to change the world of Interventional Oncology. MAXIO will allow clinicians to visually plan, execute, and validate ablation procedures on a single system, and all in 3D. MAXIO has been designed to make complex, multi-probe ablations simpler, which will help to make these life-saving procedures available to more cancer sufferers than ever before.</Label> <View id="rowline"></View> </TableViewRow> <TableViewRow id="listtablerow2" > <ImageView id="listimage2" /> <Label id="title3" >News 2</Label> <Label id="subtitle2" >Perfint’s newest product MAXIO, is set to change the world of Interventional Oncology. MAXIO will allow clinicians to visually plan, execute, and validate ablation procedures on a single system, and all in 3D. MAXIO has been designed to make complex, multi-probe ablations simpler, which will help to make these life-saving procedures available to more cancer sufferers than ever before.</Label> <View id="rowline"></View> </TableViewRow> </TableView> </View> <!-- Detail view which consists of scroll view---> <View id="detailview"> <!-- back button---> <View id="backbuttonview" top="0"> <Button id="backbutton" ></Button> </View> <ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" > <View id="popview"> <ImageView id="getimage"></ImageView> <Label id="labelview"></Label> </View> </ScrollView> </View> </Alloy>news.js
//***Nav style left***/// var animateToLeft1 = Ti.UI.createAnimation({ left : 0, curve : Ti.UI.ANIMATION_CURVE_EASE_OUT, duration : 500, }); var animateToRight1 = Ti.UI.createAnimation({ left : '33%', curve : Ti.UI.ANIMATION_CURVE_EASE_OUT, duration : 500, }); var position1 = "left1"; var showLeftPane1 = function(e) { if (position1 == "left1") { $.mmainview.animate(animateToRight1); position1 = "right1"; } else { $.mmainview.animate(animateToLeft1); position1 = "left1"; } }; //--------------------------------------Alignment-------------------------------------------------------------// //-----font-----------// var tmp = (Titanium.Platform.displayCaps.platformHeight*4)/100; var font2 = (Titanium.Platform.displayCaps.platformHeight*2.2)/100; var font3 = (Titanium.Platform.displayCaps.platformHeight*2.6)/100; //----List Align -----// $.viewlist.top = 0; var newsviewheight = $.listimage1.toImage().width; //--subtitle height --// var newstitleheight = $.title2.toImage().height; // Ti.API.info("label1.size.height = " +$.listimage1.width); //-- List Title and subtitle alignments --// $.title2.top = $.listimage1.left-10; $.title2.left = $.listimage1.left+$.listimage1.width+20; $.subtitle1.top = $.title2.top+newstitleheight; $.subtitle1.left = $.listimage1.left+newsviewheight+20; $.title3.top = $.listimage2.left-10; $.title3.left = $.listimage2.left+$.listimage2.width+20; $.subtitle2.top = $.title3.top+newstitleheight; $.subtitle2.left = $.listimage2.left+newsviewheight+20; //---when the image is not present in the list view, the labels has to align at strating--// Ti.API.info("fdbbvbsd"+$.listimage2.image); if($.listimage2.image === null){ $.listimage2.setVisible(false); $.title3.left = Alloy.CFG.lviewleft; $.subtitle2.left = Alloy.CFG.lviewleft; } else { } //--- rowline for table row --// //--------------------------------------Alignment-------------------------------------------------------------// //--animation pop up--// var animation = Titanium.UI.create2DMatrix(); animation = animation.scale(1.1); var openanimation = Titanium.UI.createAnimation({ transform:animation, duration : 2000 }); $.listtable.addEventListener('click', function(e){ // alert(e.row.children[1].getText()); // first child // alert(e.row.children[2].getText()); //alert( e.row.children[0].image); $.detailview.setVisible(true); //--back Arrow alignment --// //$.backbutton.top=$.backbuttonview.height/25; //--Detail scroll view alignment ----// $.scrollView.top =10+parseInt($.backbuttonview.height); Ti.API.info("fdsd"+$.scrollView.top); //--Detail scroll view imageview ----// $.getimage.image = e.row.children[0].image; //---Text align when label is available--// if($.getimage.image === null){ //alert("hi"); $.labelview.top = "0"; } else { $.labelview.top = $.getimage.height+20; Ti.API.info("labelview"+$.labelview.top); } //--Detail scroll view Label ----// var gettext = e.row.children[2].getText().length; $.popview.height = gettext; $.labelview.text = e.row.children[2].getText(); //---if right menu clicks menu items has to be shown in right side --// // $.lmenu.left = "65%"; }); //---Click back to detail view ----// $.backbutton.addEventListener('click', function(e){ $.detailview.setVisible(false); $.lmenu.left = "0"; });