When opening a new window using activeTab.open() in Titanium mobile for Android, the tabs are not being preserved

As a newcomer, I have come across similar questions but they are quite old and do not provide a solution. What I want to achieve is to open a new window inside the activeTab while preserving the tab group. However, my code only opens a new window that takes up the entire screen without maintaining the tabs. I would really appreciate it if someone could confirm if this can be done at all. Perhaps using views somehow... And it should work for Android as well. Below is the code snippet:

// Setting background color of master UIView (when no windows/tab groups are present)
Titanium.UI.setBackgroundColor('#000');

// Creating the tab group
var tabGroup = Titanium.UI.createTabGroup();

// Creating base UI tab and root window
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

// Creating controls tab and root window
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 2',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

win2.add(label2);

var data = [
    {title:"Sample 1",color:'black',hasChild:true,font:{fontSize:16,fontWeight:'bold'}},
    {title:"Sample 2",color:'black',hasChild:true,font:{fontSize:16,fontWeight:'bold'}}
];
var table = Titanium.UI.createTableView({
    data:data,
    separatorColor: '#ccc',
    backgroundColor:'#fff'
});
win1.add(table);

// Table view event listener
table.addEventListener('click', function(e) {
        var win = Titanium.UI.createWindow({
            url:'windows/main.js' // creating a new window       
        });

        // This line opens the newly created window in full screen mode without retaining the original tab group

         tabGroup.activeTab.open(win,{animated:true});
});

// Adding tabs
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// Opening the tab group
tabGroup.open();

Answer №1

Currently, there is no known method for achieving this on Android:

Check out a demonstration of my proposed solution here...

I hope this information proves helpful.

Answer №2

To ensure smooth navigation between tab windows, it is important to create a navigation group for each tab. Here's an example:

//Setting up the first window...
var first = Ti.UI.createWindow({
    backgroundColor:"#fff",
    title:"My App"
});

Next, we need to establish a NavigationGroup. This component, specific to iPhones, manages a stack of windows (see reference doc) - we will assign our first window as its initial viewable window:

    //Creating the navigation group to contain both windows...
    var firstnavGroup = Ti.UI.iPhone.createNavigationGroup({
        window:first
    });

    //Defining the main application window
    var mainfirst = Ti.UI.createWindow();
    mainfirst.add(firstnavGroup);

Then, assign this mainfirst window to the tab. Repeat this process for all tabs.

If you need to open a new window in the future, simply do the following:

var second = Ti.UI.createWindow({
  background:"#fff",
  title:"Child Window"
});

firstnavGroup.open(second);

I trust that these instructions will prove helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating user data with Firebase cloud functions

For my e-commerce project, I am looking to utilize the Google Maps API to input the location of a user's shop. I have successfully utilized Google Cloud Functions to insert the latitude, longitude, and address data. Currently, the data can be insert ...

Protractor Problem with Asynchronous Calls

New to Protractor, I started by using multiple 'its' in my code. However, I later consolidated everything into one 'it', resulting in the following structure: var UI = require('./../ui.js'); var co = require('co'); ...

The functionality of aria-expanded="true" is not functioning properly when accessed on mobile devices

I am facing an issue where "aria-expanded="true" does not work when the user closes the dropdown on mobile devices, but it works perfectly fine on desktop browser pages. Desktop <a class="notifLink" data-toggle="dropdown" aria-haspopup="true" id="noti ...

Ensuring Package Security in NodeJS and NPM

Given the immense popularity of NodeJS and how NPM operates, what measures can be taken to prevent the installation of insecure or malware-laden packages? Relying solely on user feedback from sources like StackOverflow or personal blogs seems to leave a si ...

Initiating sequential android path vector animations

I'm looking for a way to trigger animation drawables in sequence, like a queue. Currently, all animations are starting simultaneously but I want them to start one after the other. When I tried to use an AnimationListener to make this happen, I encount ...

teasing a forgetful settings adjustment

From my understanding of the documentation, saving a fragment instance is recommended when the app's process is killed by the system while running in the background. Is there a way to simulate this situation in order to test how state-saving works und ...

Utilizing Node, Jade, Express, and Sqlite: Implementing a MiniMap on a Leaflet Map

I recently created a map using Node, Jade, Express, and Sqlite. I am now attempting to incorporate a minimap using a plugin, but the function I added does not seem to be working correctly. Below is the code snippet that I have been working with: In my HTM ...

Quickly determine the value of an individual unchecked item in a group of checkboxes when it is changed

Is there a way to retrieve the value of an unchecked checkbox immediately after it is un-checked? I only want to capture the value of the checkbox that was just un-checked, not all un-checked checkboxes. $('input:checkbox[name=vehicle]').on("c ...

Small preview images that open up to larger images in a modal window, with AVIF format displayed first before

On my old website, I have a collection of images displayed in thumbnail form that users can click on to view larger versions. These images are scattered throughout the page and are not the main focus. I'm looking to update this functionality by conve ...

The element is not defined in the Document Object Model

There are two global properties defined as: htmlContentElement htmlContentContainer These are set in the ngAfterViewInit() method: ngAfterViewInit() { this.htmlContentElement = document.getElementById("messageContent"); this.htmlContentCont ...

What could be the issue with this particular Ajax script?

I am facing an issue with this JavaScript code - it runs smoothly in Chrome and IE, but encounters a problem in Firefox. I need assistance in identifying the issue. Can anyone help? <script> function checkGurantee() { var gurantee = document.get ...

Perform operations such as addition, subtraction, and comparison of date and time in Meteor Mongo

Currently, I am working with a collection on Meteor Mongo that includes two important fields: last_activity and expire_date. One scenario involves retrieving items from this collection based on their last_activity being N hours in the past. In another si ...

Having trouble passing variables via URL when using PHP and AJAX

I've encountered an issue while using AJAX to automatically update a web page every 5000 milliseconds. The problem arises when trying to retrieve data from the URL using $_GET or $_POST, as it only returns a value of 1. Below is an example code snippe ...

Twice the charm, as the function `$("#id").ajaxStart(...)` is triggered twice within an AJAX request

I am trying to implement the following code: <script language="javascript"> function add(idautomobile,marque,model,couleur,type,puissance,GPS){ $("#notification").ajaxStart(function(){ $(this).empty().append("<center><br/><i ...

Is it considered acceptable to employ an endless loop to continually monitor the connection to a server?

Today marks the beginning of my journey in creating an Angular App. My goal is to establish a connection to a server and display a message on screen if the connection is offline, prompting the user to check their network settings. I currently have a JavaSc ...

What is the best way to extract data from a text file in order to access the values in a dynamic HTML

After successfully generating a dynamic HTML table that takes input values using HTML and JavaScript functions, I am now looking to plot a graph with the values from the table. The challenge is to insert these values into the table from an external text fi ...

Tips for organizing an array of objects that contain null properties

Here is an array that I need help with: "data": { "risks": [ { "id": "22", "name": true, "surname": 0.5, "age": 0.75, "heigth" ...

Executing a function a specific number of times in Jquery

I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely. Is there a way to make it run for a specific duration and then stop? $(document).ready(function () { ...

swapping out an external CSS file in React for a new CSS file

My React app is quite large and includes four main CSS files (darkLTR, lightLTR, darkRTL, lightRTL), which may not be the most efficient setup. The templates were provided by my boss, and I was instructed to use them instead of Material UI, which I initial ...

Unleashing the Power of Node.js: A Step-by-Step Guide to Crafting

I am developing a console interface that prompts the user with questions and receives input through the console. Some questions require the user to provide a limited number of inputs. I have researched ways to obtain console input in node js, but I haven&a ...