I have following flow of app :
First screen is Login screen and if Login gets success the tab-group opens.
here is code :
app.js
var win = Titanium.UI.createWindow
({
title:'User Login',
url:'Login.js',
tabBarHidden:true,
backgroundColor:'gray',
navBarHidden:false
});
win.open();
Login.js
var win = Ti.UI.currentWindow;
// some UI controls
loginBtn.addEventListener('click', function(e)
{
//calling web service
if(isSuccess == 1)
{
var tabGroup = Titanium.UI.createTabGroup();
// code to create Tab
tabGroup.open();
}
}
Now if I hide the currentWindow (win) every thing works fine But Login view is get displayed in background of all the time !!! So I want to close Login window and then open the tab group. So I tried :
win.close();
tabGroup.open();
But doesn't work application gets crashed.
So, How to close window and then display the tab Group ???
Thanks....
Solved !!! As slash197 has suggested in Login.js I was trying to close win which was the root window. So I used a dummy window inside the Login.js and close it and the open tabGroup . Like :
Login.js
var win = Ti.UI.currentWindow;
var loginView = Ti.UI.createWindow
({
backgroundColor:'transparent'
});
And added all the UI component into the loginView instead of win.
Then for Android
loginView.open();
And for iPhone
loginView.open();
win.add(loginView);
After success :-
loginBtn.addEventListener('click', function(e)
{
//calling web service
if(isSuccess == 1)
{
var tabGroup = Titanium.UI.createTabGroup();
// code to create Tab
//for Android
loginView.close();
//for iPhone
win.remove(loginView);
tabGroup.open();
}
}
Note:- Not sure that it is best approach. But it works for me.
If that window is the first than it's the root element and can't be closed. You could try removing all of it's children and set it's background to transparent then open your tabGroup.
Related
var webpage = require('webpage').create();
var filename = 'demo.png';
webpage.open('https://www.example.com/', function() {
webpage.render(filename);
phantom.exit();});
In the above code when the example web site loads it displays a bootstrap popup. now in phantom js i want to take a screenshot of the web page without the popup. please help me on how to hide this popup through phantomjs..
You need to hide/turn modal off before making a screenshot:
var page = require('webpage').create();
var filename = 'demo.png';
page.open('https://www.example.com/', function() {
// Delay script by a second to give
// javascript some time to load and execute modal
setTimeout(function(){
page.evaluate(function(){
// You'll need to find the modal id to hide it programmatically
$('#themodal').modal('hide');
});
page.render(filename);
phantom.exit();
},
1000);
});
Another way is to just remove the modal window elements from DOM:
page.evaluate(function(){
// These classes are for Bootstrap 4
$('.modal, modal-backdrop').remove();
});
I'm trying to get to controls inside a frame that is located inside a frame that is located inside another frame.
The last (deepest) frame is used only for login - that I manage to do.
The problem is that after the login I basically need to return to the upper frame and click a button. For some reason I keep getting the error:
NoSuchElementError: no such element
BTW, all the code in the frames is non-angular.
This is my code for the test:
it('Should get to drive sample app', function () {
login.get();
login.clickLogin();
browser.ignoreSynchronization = false;
login.goToUsecases(); //getting to the page
$('[href="/developers/api/1542"]').click();
browser.sleep(5000);
//iframe issue starts here
browser.switchTo().frame(0);
browser.ignoreSynchronization = true;
browser.switchTo().frame(0);
browser.switchTo().frame(0);
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
// login succeeded
browser.sleep(10000);
browser.driver.switchTo().defaultContent();
browser.driver.findElement(by.id('home')).click();
browser.sleep(10000);
});
The problem is that after the login I basically need to return to the upper frame and click a button.
From what I see in your code, you are switching to the default content, but, as you said, the button is inside the upper iframe, switch to it:
browser.driver.switchTo().defaultContent();
browser.switchTo().frame(0);
browser.driver.findElement(by.id('home')).click();
You can try this may be this helps you.. As this works for me for handling different windows.
browser.getAllWindowHandles().then(function (handles) {
newWindowHandle = handles[1];
browser.ignoreSynchronization = true;
browser.switchTo().window(newWindowHandle).then(function () {
browser.sleep(500).then(function () {
browser.ignoreSynchronization = true;
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
//login succeeded
});
//to close the current window
browser.driver.close().then(function () {
//to switch to the previous window
browser.switchTo().window(handles[0])
browser.driver.findElement(by.id('home')).click()
browser.sleep(10000);
});
});
});
Instead of ::browser.switchTo().frame(0);
try giving the locate of the iframe where you want to switch too.. that might help.
// Switch to iframe context in order to see inside iframe
browser.switchTo().frame(element(by.tagName('iframe')));
I have a simple tabbed app where the user can click a button and then a view will load in the active tab where a picture is displayed and a sound is being played.
However if the user tabs on the back button the sound doesn't stop playing.
How can I make the sound stop when I go to the previous view?
Thanks in advance!
My index.js:
function viewSelectedItem() {
var args = { image : 'images/photo/farm/chicken1.jpg', title : 'kip' };
var win = Alloy.createController('viewItem', args).getView();
Alloy.Globals.tabgroup.activeTab.open(win);
}
my viewItem.js
var args = arguments[0] || {};
$.itemImage.image = args.image;
$.itemTextLabel.text = args.title;
var sound = Ti.Media.createSound({
url: 'sounds/farm/chicken1.mp3'
});
sound.play();
I assume you target Android with this and that each Alloy Controller represents a Window.
You need to set allowBackground to true to allow the audio to continue when the Activity the Window belongs to is stopped because the Window closed.
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Media.AudioPlayer-property-allowBackground
I fixed it like this:
$.itemView.addEventListener('close', windowClosed);
function windowClosed() {
sound.stop();
}
I'm looking to add an active state to a systemButton in the header bar of an iOS app using Appcelerator Titanium.
I want to achieve the same result as the the Calendar with the list view activated in iOS8. As you can see the below the list icon has an active state, whereby it has an orange background.
Is there a way to achieve this using iOS System Buttons in the header of an app?
Thanks, Owen
You must manually keep track of the states of the button for a Toggle effect. This does not work with a systemButton.
example:
var button = Ti.UI.createButton({ title: 'Off', isOn: false });
button.addEventListener('click', function(e) {
if (e.source.isOn) {
e.source.title = 'Off';
e.source.isOn = false;
} else {
e.source.title = 'On';
e.source.isOn = true;
}
});
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);
});
......................
.....................
..........................