I'm currently working on updating a Flutter Web app to support sharing pages via URLs. I currently have a screen that uses a TabBar, and shows different views based on the selected tab. I want to be able to do two things:
Update the URL when a tab is selected (e.g. append §ion=tabName to the URL)
Paste the URL into a new browser tab and have the application open on the tab specified by the URL
The second part of this was simple enough, just take the §ion=... argument and use that to set the initialIndex of the tab controller. Updating the URL however seems quite difficult.
I've tried using RouteInformationParser to generate a new route from a list of arguments, but that triggers the onGenerateRoute callback and just seems to re-navigate to the page with the initialIndex updated from the new URL. I can get around this by replacing the TabBarView with a nested Navigator that navigates to the selected tab's content, but it seems like this could quickly become quite clunky if you wanted to navigate deeper than just a selected tab.
A simpler option I've seen mentioned is window.history.replaceState, which seems a lot simpler but feels like a bit of a kludge. Are there any ways of doing this that I've missed?
Thanks!
It's a little hacky, but I was able to force a URL change on tabbed navigation by using the TabBar.onTap, which provides the tab index, and having navigation happen through that. It ruined the nice slide action, but I got the custom URL in the address bar, which was more important for my use.
Related
as I'm coding some app I was wondering if there's any cheat sheet explaining navigation and routing options I have and when should I use the specific one (for which usecase its the best solution)?
For example I'm creating a form, when I press the button I need to load a list of items (Listview) from which I will chose one item and go back to the form. This list should cover all screen (something like full screen modal I guess)
Im not sure what should I use, whether MaterialPageRoute, ModalRoute or maybe somethig different like dialog?
Is there any good source to learn besides of reading documentation?
You can read this for push and pop concepts. An example related to that.
This example is for routing.
See this and this for complete understanding of Routing and Navigation
I've been trying to find a solution but I can't find any.
I'll use basic examples so anyone who knows ionic can understand my problem well.
ionic start myApp tabs will create a new project with tabs ready to go.
Those tabs are Dashboard, Chat and Settings.
When you go to the Chat Tab you will then select a person to view its chat content (which directs you to the Chat-Detail Page in actuallity)
I wanted to hide the ion-tabs directive when I go to the chat-detail page so I can force the user to use the Back button instead of clicking anything on the ion-tabs.
Simply put : you will have a hard time doing that. At best it will not look good, IF you succeed to hide using css (I did it, and really, it's not pretty). Basically you would need to define a variable on the parent scope, that changes when entering the chat-detail state, and bind it to ng-class directives on multiple elements (the ion-tabs to hide it, the ion-content to translate it up to cover the area where the tabs were, and add some transition to make it not too brutal).
The logical thing to do would be to have the chat-detail state not being a child of the state containing the tabs. The problem you will have, though, is that there is a huge bug going to / from tabbed state. See details here : https://github.com/driftyco/ionic/issues/2997
At the end of this discussion you can find some posts by Jason and Jerrybels (that would be me), that could lead you on the right way to do it. Basically, you will have to get rid of the ion-tabs directive, and use Ionic's CSS for tabs instead, doing all the states manipulations yourself.
Good luck !
You can use "hidden" attribute of ion-tab like this -
<ion-tab hidden={{condition}}" />
Using this we can show/hide tab.
I'm creating a web-site using GWT for the first time. The aplication has two Composite class, one of them is a menu and the other one is where I show de info about the specific menu that has been clicked. I'm using MVP, the class History and the interface ChangeValueHandler to switch among different pages.
I have one pair presenter-view for each Composite. The app begins well creating the menu and the section info. When you click in the menu it works fine showing the information and the token browser is changed. The thing is that if you load a page(eg: myapp.com#register) without loading the home page, it doesn't show you the menu. It loads the Composite section info, but not the Composite menu (the Composite menu is load with myapp.com#home).
I think it's because of a bad design of the application, but I don't know how to do that in other way. If the app only had one Composite it wouldn't be a problem, but when there are 2 or more Composite per page I don't know how to manage the whole thing to work properly.
It's difficult to tell what exactly is wrong, because of the lack of code. So I'm guessing. You should design to act on the PlaceChangeEvent instead of the ValueChangeEvent. That means a menu click should fire the place change and then the application will handle this event. That way you unbind the menu actions from your content pages. And think more of each page as a separate entity. Also take a look at the GWT Activity mechanism and how it helps having a main page that is always the same and on that main page a content area that changes depending on the page actually shown.
You should include your menu in each page instead of creating it once in the home page and then keeping it on screen. I assume you create the menu and add it to the DOM via
RootPanel.get().add(myMenuWidget);
If you are using UIBinder it should be pretty straightforward to include the menu in each page, just a matter of adding the corresponding tag in each .ui.xml file of your pages.
I'm using Appcelerator Titanium to build an iPhone app. I currently have a tabGroup control that links to the major sections of the app, including the home screen.
What I'd like to do is remove the "Home" tab only from the navigation, without removing it from the tabGroup object. So, for example, I'd still be able to call tabGroup.setActiveTab(0) and it would take me to the home screen, but the tabs at the bottom wouldn't have a "home" button.
Is this even possible? If so, how can I do it?
Notes: I do not want to hide the whole bar, just a single tab. I also do not want to remove the screen from the underlying object, just the navigation UI. Also, I'm only developing for iPhone and don't care if other platforms aren't supported, so iPhone-only solutions are acceptable.
take the home screen out of the tab group completely and manage displaying it and transitioning to it separately; in the end, it will be a cleaner solution.
Have you tried tab.hide() or when creating the tab setting it to visible: 0?
I've got an iPhone web-app which I'd like to look as native as possible. I've used the scrolling trick to get rid of Safari's navigation, and taken away scrolling to prevent it from coming back; however, every time my app pulls an XHR, it shows the navigation again. Because users will need to use external links to get into the app, I cannot use a standalone bookmark. Is there any way to do the AJAX calls on the sneak?
Edit: I found that it was actually the fact that I'm using the hash method for AJAX history. It makes sense that the nav slides out temporarily, since I'm updating the URL. Thanks for your responses.
Yes, would be the short answer.
Since my webapps don't show the navigation bar, I have to assume that you are doing something other than just the XHR call which causes the scroll. Share some code and maybe we can see it.
For example, Night Sky and Border Gas both do XHR calls.
Yes.
I've tried two methods: one using plain XHR and one using jQuery.
XHR example you can see here: AnyExample.com
and here's the shorter jQuery version:
window.scrollTo(0, 1);
$.get("http://www.stackoverflow.com");
Same as GeoNomad, the navbar didn't come to view, and all I saw was the loading icon on the top bar.