I'm developing with Titanium Appcelerator for iOS. I would like to manage manually a 'back' button using the properties of window, that can set a left and right buttons.
I'm trying with this code:
var win = Titanium.UI.currentWindow;
win.backgroundColor = '#FFF';
var b = Titanium.UI.createButton({title:'Back'});
win.setLeftNavButton(b);
b.addEventListener('click', function()
{
win.close();
});
But no button is showed.
Swanand is right but i want to add some more thing that if you use modal property of window to open then also you can use setLeftNavButton method to set button in navigation bar but if you do not want to use tab group or navigation group or even modal property then you need to add that button in window with left,top,width and height property.
You can use below example....
var win = Titanium.UI.currentWindow;
win.backgroundColor = '#FFF';
var b = Titanium.UI.createButton({
title:'Back',
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
top : 10,
left : 10
});
win.add(b);
Related
I have one window defined in a FirstView.js and a View defined in Settings.js.
I add the Settings View to the FirstView Window doing this:
var Settings = require('ui/common/Settings');
var Settings = new Settings();
self.add(Settings);
And now, when users press "back" button i need to remove the Settings View from main window.
I know that i could do this with self.remove(Settings) if both codes were in the same .js file.
But, in this case, how can i remove the Settings View from the main FirstView Window?
try to use Application level events.
in Settings.js and when you click on back button
Ti.App.fireEvent("backSetting");
and in FirstView.js
Ti.App.addEventListener("backSetting",function(e){
self.remove(Setting);
};
why not use a container for settings?
e.g:
var FirstView=Ti.UI.createWindow();
var contentSetting=Ti.UI.createView({
height:Ti.UI.SIZE //or Ti.UI.FILL,
width:Ti.UI.SIZE //or Ti.UI.FILL
});
FirstView.add(contentSetting);
var Settings = require('ui/common/Settings');
var Settings = new Settings();
contentSetting.add(Settings);
FirstView.addEventListener('android:back', function(e){
//remove view
$.contentSetting.removeAllChildren();
});
Am using Tab group and using 4 tabs, 4 different windows are added to the tabs. when i try to get current window , by Ti.UI.currentWindow in any of the views which is added to windows, am getting blank value, that is it is not returning, current window value.
Can anyone correct me??
you set "url" property in Window on creation time. Like
in "app.js"
var tabGroup = Titanium.UI.createTabGroup();
var win_home = Titanium.UI.createWindow({
url :'home.js',
backgroundColor :'#000',
backgroundImage :'image/bg_img1.png',
barColor : "#000000",//"#ff429c"
});
var tab_home = Titanium.UI.createTab({
index : 0,
window:win_home
});
tabGroup.addTab(tab_home);
tabGroup.open();
in "home.js"
var cur = Ti.UI.currentWindow;
var view = Ti.UI.createView({
height : 100,
width : 100,
backgroundColor : "#0f0",
});
cur.add(view);
Understand this code and try to make like this. this is truly working... cheers...
I have an issue here. A new window is defined in a separate js file. And I want to add a menu to this window. So I used the following code:
var menu = Titanium.UI.Android.OptionMenu.createMenu();
var item1 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Item 1',
icon : '/images/item1.png'
});
var item2 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Refresh',
icon : '/images/refresh.png'
});
menu.add(item1);
Titanium.UI.Android.OptionMenu.setMenu(menu);
In doing so, the application has crashed. Could anyone help me figure this out?
thanks in advance!
NOTE: Developing Android application using Appcelerator.
always remember Set the menu on the current heavyweight window.
To create a heavyweight window, specify one or more of
fullscreen,
navBarHidden,
modal
otherwise you can use you app.js file this is working.... with specify this property.
var menu = Titanium.UI.Android.OptionMenu.createMenu();
var item1 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Item 1',
icon : '/images/item1.png'
});
item1.addEventListener('click', function(){
Ti.UI.createAlertDialog({ title : 'You clicked Item 1'}).show();
});
var item2 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Refresh',
icon : '/images/refresh.png'
});
item2.addEventListener('click', function(){
Ti.UI.createAlertDialog({ title : 'You clicked Refresh'}).show();
});
menu.add(item1);
menu.add(item2);
// Set the menu on the current heavyweight window. A heavyweight window maps to an Android
// Activity. To create a heavyweight window, specify one or more of [**fullscreen**,**navBarHidden**,**modal**] to createWindow.
Titanium.UI.Android.OptionMenu.setMenu(menu);
I use Dojo Toolkit 1.7.2 from http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
I need to show scrollable (with help touch) content inside dialog. Also, if possible, I will need to have transition between views inside dialog like at mobile too.
What I do (simplified version of code):
var dialog = new Dialog();
var view = new ScrollableView({
selected: true
});
//add some content inside view. Content heigh is greater than height of dialog.
If I do this, the dialog tries to fit the whole height of the content.
Next attempt:
var dialog = new Dialog({
style: {
width: 600,
height: 400
}
});
or
dialog.resize({w: 600, h: 400});
Now dialog has fixed height, but inner ScrollableView instance won't scroll to bottom of its content.
When I dig into the source, I find that ScrollableView inherits from dojox/mobile/_ScrollableMixin which inherits from dojox/mobile/scrollable.
The resize() function of dojox/mobile/scrollable uses window height in order to calculate scrolling functionality.
Is there some way to have what I need without implementating my own version of ScrollableView?
Solution:
var dialogRect = domGeometry.getMarginBox(dialog.domNode);
var headerRect = domGeometry.getMarginBox(dialog.titleBar);
var containerNodePaddingTop = domStyle.get(dialog.containerNode, "paddingTop");
var containerNodePaddingBottom = domStyle.get(dialog.containerNode, "paddingBottom");
var viewHeight = dialogRect.h - headerRect.h - containerNodePaddingTop - containerNodePaddingBottom;
var view = new ScrollableView({
selected: true,
height: viewHeight.toString() + "px"
});
// or
// view.set("height", viewHeight.toString() + "px");
Fixed it this way:
var Name = 'yourdialogid';
dojo.query("#"+Name+" .dijitDialogPaneContent").forEach(function(node, index, arr){
dojo.style(node,"overflow","auto");
dojo.style(node,"height",(dojo.position(dijit.byId(Name).domNode).h-80)+"px");
});
Can anyone help me with a link where I find Dojo sliding panel ? I have been searching for it but still didn't got it. I have sliding panel for jQuery, I got it from this link : http://web-kreation.com/all/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/
You could make use of the dojo.fx.wipeIn functionality.
http://dojotoolkit.org/reference-guide/1.7/dojo/fx/wipeIn.html
So if you create two divs, one above the other, have the top one with display: none, and the other as the bit that you click to slide the panel down. Then use dojo.connect to link the clicking of the bottom panel to a wipe in of your top panel.
e.g.
// Have your main body content
var mainBody;
// Create top panel
var myPanel = document.createElement("div");
// Set visibility to none
dojo.style(myPanel, "display", "none");
// Create tab to expand your panel (or slide it down)
var expand = document.createElement("div");
expand.innerHTML = "click here to slide down";
mainBody.appendChild(myPanel);
mainBody.appendChild(expand);
var self = this;
dojo.connect(expand, "onclick", this, slidePanel);
Then you'd have your slidePanel function do something like:
// Get reference to your panel
var myPanel;
var wipeArgs = {
node: myPanel
};
// Then just wipe the panel in or out respectively
if (myPanel.style.display == "none") {
dojo.fx.wipeIn(wipeArgs).play();
} else {
dojo.fx.wipeOut(wipeArgs).play();
}