Titanium iOS : Show window on top - titanium

I am created 3 windows A,B,C. Window B is opened from window A. And window C from window B.
But the thing is window C is shown in between A & B. I want this window to be shown on top of B. Works fine in android, but not in iOS.
Following is the code :
1. Window A
var chatBoxWindow = Titanium.UI.createWindow({
top : Ti.API.top,
url : '',
left : '100%',
width : '100%',
zIndex : 100,
orientationModes : [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT]
});
chatBoxWindow.open();
Window B
var modal = require("/ui/common/smileypopup").modalWin;
var popupWin = new modal();
popupWin.open();
Window C(Smiley Picker)
backgroundColor : 'transparent',
id : 'popupWin'

Does Window C have to be a window? Based on your code, I can't really tell. So with that assumption, see if the following helps:
What about creating a View for C as a commonJS file and call that inside of Window B:
//Code for Smileypopup which is really just a view
function Smileypopup(){
var self = Ti.UI.createView({
top:0,width:Ti.UI.FILL,height:Ti.UI.FILL,
backgroundColor:'transparent',
id:'smileypopup'
});
//add your smiley code picker code along with
//your functions using the self.functionname(){}; approach
return self;
}
module.exports = Smileypopup;
Then inside of Window B commonJS call WindowC:
function WindowB(){
var Smileypopup = require('/ui/common/Smileypopup');
var popup = new Smileypopup();
var self = Ti.UI.createWindow({});
self.add(popup);
self.showPopup = function(){ popup.show(); };
self.hidePopup = function(){ popup.hide(); };
return self;
}
module.exports = WindowB;
Finally, inside of Window A you can proceed as usual. It sounds like C can be a view instead of creating another Window.

Related

Center buttons in a view horizontally

I have buttons I want to center horizontally in a view. There are three, and all I can seem to get is:
[button1-button2-button3------------------------------]
What I really want is
[--------button1--------button2--------button3--------]
These buttons are dynamic widths too. The amount of buttons will change, some views have 1, others have 2 or 3. Depending on an action, the number of buttons can change. I need this support both iOS and android.
Try splitting the screen into n different columns using percentage layout. Then add your buttons to their respective invisible container.
var n = // Your number of buttons horizontal
var container = Ti.UI.createView({width : "100%", layout: "horizontal" });
for(var i=0;i<n;i++) {
var column = Ti.UI.createView({
width : (100/n)+"%",
});
// Create your button here
// .....
// .....
// Now add it to the column
column.add(yourNthButton);
// Now add the column to the container
container.add(column);
}
How about wrapping your buttons in a view with layout set to 'horizontal'?
var wrapperView = Ti.UI.createView({
layout : 'horizontal',
...
});
// In a view with horizontal layout,
// the positioning is relative to the preceding element
var buttonOne = Ti.UI.createButton({
right : 10,
...
});
wrapperView.add(buttonOne);
Untested, but give it a try!
UPDATE
Ok, the above code alone won't do what you wanted. I wrote a more complete example here.
Seems a bit clumsy, so if someone has a better solution, please let us know!
// Create our window
var win = Ti.UI.createWindow();
// Our wrapper view
var wrapperView = Ti.UI.createView({
width : Ti.UI.FILL,
height : 40,
top : 0,
layout : 'horizontal',
});
// Add some test buttons to our wrapper
for(var i=0; i<3; i++) {
wrapperView.add(Ti.UI.createButton({
title : 'Test ' + i,
height : 30,
}));
}
// Add wrapperView to our window and open it
win.add(wrapperView);
win.open();
// Wait until "size" becomes available
win.addEventListener('postlayout', distributeButtons);
// Distribute buttons evenly
function distributeButtons() {
if(wrapperView.children) {
// Get the width of the wrapper view
var wrapperWidth = wrapperView.size.width;
var buttonWidths = 0;
var buttonSpacer;
var childrenLength = wrapperView.children.length;
// Get the button sizes
for(var i=0; i<childrenLength; i++) {
buttonWidths += wrapperView.children[i].size.width;
};
// Calculate the spaces between the buttons
buttonSpacer = (wrapperWidth - buttonWidths) / (childrenLength + 2);
// Set the buttons left value
for(var i=0; i<childrenLength; i++) {
wrapperView.children[i].left = buttonSpacer;
};
}
}
If you can put a toolbar, you can use the "flexspace" button, which will create a space necessary to fill the gap between other buttons. Here's the syntax from simple toolbar example in titanium docs:
var send = Titanium.UI.createButton({
title: 'Send',
style: Titanium.UI.iPhone.SystemButtonStyle.DONE,
});
var camera = Titanium.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.CAMERA,
});
var cancel = Titanium.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.CANCEL
});
flexSpace = Titanium.UI.createButton({
systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var toolbar = Titanium.UI.iOS.createToolbar({
items:[send, flexSpace, camera, flexSpace, cancel],
bottom:0,
borderTop:true,
borderBottom:false
});
win.add(toolbar)
try this
var yourView = Ti.UI.createView({ layout:"horizontal"});
var buttonsHolder = Ti.UI.createView({ width:"100%" });
// this view will hold the buttons
var button1 = Ti.UI.createButton({title:"button1 , left:0"}); // the left button
var button2 = Ti.UI.createButton({title:"button2"}); // the middle button
var button3 = Ti.UI.createButton({title:"button3",right:0}); // the right button
buttonsHolder(button1);
buttonsHolder(button2);
buttonsHolder(button3);
yourView.add(buttonsHolder);
Hieyy bro
If you are want achieve this using titanium alloy in xml. in that case you can use %.
Container ------------width 100%-----layout horizontal---------
first child--------left 10%------- width 20%
second child--------left 10%------- width 20%
third child--------left 10%------- width 20%-----right 10%
if you don't get your answer please let me know
Spartacus Thanks:)
If using Alloy, then I recommend using percentages to control width and position. Here's an example that centers three small images below a larger image, also centered:
<TableViewRow selectionStyle="Ti.UI.iPhone.TableViewCellSelectionStyle.NONE" backgroundColor="white" layout="vertical">
<ImageView id="detailsFeaturedImage" top="10"/>
<View height="60">
<View layout="horizontal">
<View left="25%" width="10%"><ImageView image="images/thumb-up-7#2x.png" onClick="thumb_up" /></View>
<View left="10%" width="10%"><ImageView image="images/thumb-down-7#2x.png" onClick="thumb_down"/></View>
<View left="10%" width="10%"><ImageView image="images/flag-7#2x.png" onClick="flag_for_review"/></View>
</View>
</View>
</TableViewRow>

How to pass data from one window to another in Titanium?

I want to to send data from one window to another.
Example:
I have a text field and a button on first window. When click on window I need to send text field value to the second window?
I found a tutorial, but it's not in MVC.
I have created a new alloy controller (left click in your project and then new) and here is how i am passing parameters to the next view.
The new controller is called CallBack and the first controller is called index.
In CallBack.xml i have:
<Alloy>
<View class="container">
</View>
</Alloy>
In CallBack.tss i have:
".container": {
backgroundColor: "black"
}
In CallBack.js i have:
var args = arguments[0] || {};
//here you can do whatever you want to your parameter, i just show the value.
alert(args.textField);
And finally in index.js this is how i am passing the parameters of my textField:
//with a button i can open a new view in my current window
$.btnNext.addEventListener('click',function(e){
//tfInsert is the id of my textfield in index.xml file and with .value i can access to whatever it contains
//the "?" operator is like an if
var textField = $.tfInsert.value != "" ? textField = $.tfInsert.value : textField = "Hello";
var nextView = Alloy.createController('/CallBack', {
textField: textField
}).getView();
//this is how i add a new view to my current window
$.window.add(nextView);
});
Hope this helps.
In controller.js (from where we are passing Data)
function createController(win)
{
//title is the data to pass
var platform = Ti.Platform.osname;
var calledWindow = require('/ui/' + platform + '/addProductWindow').createCalledWindow(title);
calledWindow.open();
};
In calledWindowController.js
function createController(win){
//Do whatever control you want
};
In calledWindow.js
exports.createCalledWindow = function(title)
{
//Do whatever UI you want
Ti.include('/Controllers/calledWindowController.js');
var controller = createController(win);
return win;
};

on event call another js file having new window

i developing sample android application in Titanium. on home window(app.js) it has some buttons ,now what i want is on the click of each button app.js(home window) must call another javascript file (they will create new window of their own.
but.addEventListener('click', function(e){
call another .js file which will open new window
})
will appreciate some guidance
that's not so hard. Incl. params.
First create your other .js file and create a function as follows.
Another .js File:
exports.createNewWindow(params) {
var window = Ti.UI.createWindow ({
     // ... Your stuff with your params
});
return window;
}
Than you can call this function as follows:
First .js File
var window = require("pathToYouAnotherFile.js").createNewWindow({title:"xyz"});
window.open();
If you want you can call the window.open() in the "another.js" file.
Have fun.
You should learn Alloy. It will help you properly structure your app, as you have asked.
http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html
I handled this by raising an event from one JS file to another. Take a look at Ti.App.fireEvent('event',data) to fire the event and Ti.App.addEventListener to receive the event.
but.addEventListener('click', function(e){
var newwin=Ti.UI.createWindow({url:'another.js'});
newwin.open();
});
Its a simple event handler in which we are creating and opening a windows and opening after that.Url is the file to the desired window.
Simple.Cheers!!
var All = require('ui/common/All');
Tree = require('ui/common/Tree');
EBOM = require('ui/common/E-BOM');
MBOM = require('ui/common/M-BOM');
SBOM = require('ui/common/S-BOM');
//create object instance
var self = Ti.UI.createWindow({
title:'Products',
exitOnClose:true,
navBarHidden:true,
backgroundColor:'#ffffff',
/////////////////////////////////////////////////////////////////////////////
activity: {
onCreateOptionsMenu: function(e) {
var menu = e.menu;
var menuItem = menu.add({ title: "C-BOM", icon: 'Arrow-Hover.jpg' });
//menuItem.setIcon("Arrow-Hover.jpg");
menuItem.addEventListener("click", function(e) {
var all = new All();
self.add(all);
});
......................
.....................
..........................

Sencha Touch - switching between views

i am trying to make the same app with the miamicode, i am at step 3
http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-3/
i try to make the button that goes to new note (switch to a new screen and create a new note)
the code at the example is this:
onNewNoteCommand: function () {
console.log("onNewNoteCommand");
var now = new Date();
var noteId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();
var newNote = Ext.create("NotesApp.model.Note", {
id: noteId,
dateCreated: now,
title: "",
narrative: ""
});
this.activateNoteEditor(newNote);
}
the activateNotesList function is this :
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
on my own example i try just to go the editview without passing data.
so i try this:
onNewNoteCommand:function()
{
var noteEditor = this.getNoteEditor();
// Ext.Viewport.add(noteEditor); also tried this.
Ext.Viewport.setActiveItem(noteEditor);
that code runs with no errors but the screen doesn't change.
any suggestion? whats the difference on add ?
how do i set the viewport (haven't created any custom viewport) to card? is this the problem that setactiveitem doesn't work? any other way to switch between views?
Are there some errors in google chrome browser's console? Ctrl+Shift+J to open.
Also you have to check if noteEditor equals Object or Number.
From sencha docs: setActiveItem( Object/Number activeItem )

Sencha how to update viewport on click on tabpanel?

I have an MVC multi item & paged image carousel in Sencha Touch 2, which works perfectly on it's own when added to the Viewport on init.
However, the problem I am having now is how to adapt it to my tab panel style app. I am a little unclear where I should put the code, at init or (I'm guessing) in the controller which fires on click of the specific tab. My tabpanel style app was downloaded from Github (Sencha touch 2 boilerplate template).
My working MVC carousel calls the following in the app.js:
controllers: ['Main'],
views: ['Carousel', 'Page'],
stores: ['Thumbnails'],
models: ['Thumbnail'],
launch: function () {
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);
Ext.getStore('Thumbnails').load(function (apps) {
var cols = 4, rows = 4; // todo: change for tablets
var page;
var btn;
var iPage = 0;
var iApp = 0;
var x = 1, y = 1, z = 0;
var row, grid, bottomrow;
var firstpage = 0;
etc....code cut for readbility.
Basically I want this carousel to appear on the second tab of the tabpanel, not initially on the viewport how it works now. Perhaps I should have the working launch code in a controller that fires when I'm on that tab of the tabpanel? I'm not sure of the best way to approach this.
Here is the launch function of my tabpanel app, with the
launch: function() {
Ext.create('TCApp.view.Viewport', {fullscreen: true});
// I have tried adding this working launch code after creating the Viewport, but maybe it should be in the controller? But I'm not sure how to go about it...
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);
Ext.getStore('Thumbnails').load(function (apps) {
var cols = 4, rows = 4; // todo: change for tablets
var page;
var btn;
var iPage = 0;
var iApp = 0;
var x = 1, y = 1, z = 0;
var row, grid, bottomrow;
var firstpage = 0;
Any help would be much appreciated!
You are adding your carousel to Ext.Viewport, which is the component that gets instantiated by default on application bootstrap. So, instead of using Ext.Viewport.add(carousel);, and adding it to the Viewport itself, try with
tabpanel.add(carousel);
Where tabpanel is the reference to your tab panel instance. This way you'll be adding the carousel to the first available card in Ext.tab.Panel
Thanks Grgur, it helped. I eventually solved it this way, making sure to have a title and iconCls otherwise I get an error in the console when adding the carousel item to the tabpanel:
var carousel = Ext.create('Ext.Carousel', {
title: 'Carousel',
iconCls: 'info'
});
var MyTabPanel = Ext.getCmp('mytabpanel');
MyTabPanel.add(carousel);