I have the following in Titanium:
var imageArray = [];
imageArray[0] = 'photo0.png';
imageArray[1] = 'photo1.png';
....
imageArray[N] = 'photoN.png';
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundImage:imageArray[0],
backgroundColor:'#fff'
});
win1 is my main window and when I click a button I want to change it's backgroundImage without need for recreating the window. Anyone any idea of how could I do that?
Thanks
You can just set the backgroundImage of your window, like this:
win1.backgroundImage = "photo1.png";
It will works to you. But make sure that the image is in the Resources folder.
You have to use Ti.UI.currentWindow just when you are using external windows (with URL parameter in the window, using another JS file).
In the same context, the Ti.UI.currentWindow not works.
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();
});
I'm using dojo toolkit dijit.layout.TabContainer to switch 3 tabbed pages.
Right now I click on tabs to switch them, but I want to switch them by mouse over instead.
Can a TabContainer be configured to switch by mouse over, or should I write a code to handle mouse over events to explicitly switch tabs?
I'd appreciate any suggestions!
-Sari
Yes. For this functionality, we need to add the onmouseover event to the tabs label fields. Add this code inside the dojo/ready (or addOnLoad) function.
require(["dojo/ready","dojo/query"], function(ready,query){
ready(function(){
var tabs = dijit.byId("TabContainerID");
query("#TabContainerID.dijitTabInner").onmouseover(function(evt){
var tablabelid = dijit.getEnclosingWidget(evt.target).id;
var currentId = dijit.byId("TabContainerID").selectedChildWidget;
var tabwidid = tablabelid.split("_").pop();
if(tabwidid && currentId!=tabwidid) {
tabs.selectChild(tabwidid);
}
});
});
});
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'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.