Navigate inside a popover - ionic-framework

I’d like to know how to navigate in the same popover with Ionic 4 (beta 15).
The example is filtering options.
I click on a funnel and have a list of items displayed in a popover : the filtering categories(year, color etc…)
Each category has a sublist associated.
I’d like to be able to click on a filtering category, and navigate forward to a new view containing the associated options, but staying inside the popover.
When using NavController.navigateForward, the whole current view is impacted, not the popover.
What would you do ?
PS: it is what is currently done in Plex Media server for filtering movie
Filtering workflow
Thanks.

Related

Positioning ListViews in WinJS Metro apps using scrollIntoView

I am building a jscript-based Windows 8 Metro app. The main screen of this application is a scrolling "panorama" view with several list views showing various aspects of the app's state. In some cases the user will select something on the page which results in a navigation to another page (using the WinJS.Navigation.navigate method.
When the user hits the back arrow on the other page, it returns to the main screen, and I use "scrollIntoView" on to position the screen to the section that the user was working on before the navigation occurred.
Unfortunately this hardly ever results in correctly positioning the view. It seems random. I suspect that the page isn't finished being built yet and that the scroll values are set based on the state at some snapshot in time.
Now the question:
Is there some what to be notified by WinJS ListView objects that they are completely rendered and layed out? Or is this the job of the page's ready function?
Thanks for any insight!
Putting multiple list views side by side is Not A Good Idea(TM). I would recommend putting one list view, and placing your content in a grouped data source to get the groups. If the items have different templates, then you can use a custom item Template selector to dynamically select a template.
Additionally, to ensure that the list view is scrolled to the right position, you need to use the indexOfFirstVisible to set the items the name suggests.

Need architecture direction

I'm creating an app and I need some help with design.
Launch Screen - I want to show 6-8 "category" buttons with labels loaded from an array ("normal" buttons from interface builder - not tab bar buttons or menu bar buttons).
Table Screen - When one of the category buttons is pushed on the launch screen, I want to show a table view with all of the items in that category.
Detail Screen - When one of the items on the table screen is selected, go to a new screen with details for the item. There will be an action button on this screen which will remove the item from the list if pressed.
My questions are as follows:
1) I don't want to show navigation buttons on the first screen. Can I still use a Navigation-Based application and hide the navigation controls on the first screen, or would it be better (easier) to create a view-based application and put a navigation controller "inside" one of the views? I'm totally open to any basic design approach suggestions you may have.
2) I've figured out how to create a sqlite3 file, add it to the project, query it, and generate the table view from the results, but I'm not sure about how to store the sqlite file in a way that will persist on the device when the user upgrades the app later. Any pointers on that?
Thanks for any help/links/documentation you can point me to. I've watched a million tutorials but none of the ones I've seen really address basic app design.
Now for Q1, both ways work fine but if you have buttons from the first screen, having a uinavigationcontroller might make it slightly easier if you plan to have back buttons on the screens after the first screen.
For Q2, to make the database persist when the user updates their app at some stage, simply keep the original database and include a new database (with a different name) with additional content, then modify your original database and import any additional content to it.
You can also do variations of that also, ie import content from old database to new database and etc. But the key is to keep the database file names different, ie add database_v1.sqlite, database_v2.sqlite and etc.
BTW don't forget to clean up any databases you won't use in future.

How in Interface Builder can you select a rectangular group of items when they're on top of a background item?

I've had this problem several times now, and never found a satisfactory solution: If I want to move a group of items with a view all together in Interface Builder, and these items are all on top of a larger background item, I can't put a selection rectangle around the items in the view because any click and drag in the view initiates a move of the background item. In other words, every pixel in the area I'm interested in (and nearby) has a "hand" mouse pointer, no "arrow" pointer is available so I can't drag out a rectangle selection box.
cmd-clicking individual items to build up the group only works when they are separate, and only when there are a few of them. Sometimes I want to select a "pile" of items all on top of each other.
Is there some way to "select for moving" by clicking in the .xib item list? Double clicking a single item selects it for moving in the view, but I have't found a way to add to the "select for moving" selection this way.
So far the best way I've found is temporarily moving the background out of the way and then putting it back but this is unsatisfactory, and wouldn't work with a more complex background arrangement.
How have others done this?
I know what you mean, and I have found a slightly better solution: go to the list view and...
drag either the background view or your custom view up to the root hierarchy level (adjacent to File's Owner)
double click on your custom view and edit away using drag-box-selection
when finished, drag the view back into its original hierarchy position
The key here is that the GUI editor only edits one root object at a time, so moving the background vs. 'foreground' views into separate root objects allows you to edit them separately. Woo!
This is my solution to this problem: Select the background images/object that you don't want to move and set its width to 1 and then, after a comfortable layout editing, restore its original width. This works for me.
Use the left hand side list view and multi-select a range by clicking on the first item in the range then shift-click on the last item. Use ctrl-click to unselect some items if necessary. As items are selected they will also show as being selected in the interface view on the right.
Once have set up all the selected items, cmd-click on the selected items in the right hand side interface view and drag.
In the list of objects, cmd+click each one you want to select them all. In the interface hold command and click and drag the stack of items. Drag them to where you want them and release cmd. If you don't release the button they will rubber band back to their original position.

iPhone Application UI Implementation Suggestion

I am building an iPhone app, which will function similarly to many restaurant finder applications. When launched, the application will start with a view that allows a user to specify a zip code for performing a search. Alternatively, if the user has an iPhone with a GPS, the application will automatically perform a search based on their current location, although it will be possible for the user to specify their own location.
After the search has been performed, the user will be presented with a tab bar view, which displays a list of all results, or a map view, containing all of the results within a specified range. Finally, there will be a details view, which gives the user detailed information about any one particular result from the list or map.
The application should flow as follows:
Search -> (list | map) -> details
I'm very new to iPhone development, so I'd appreciate some feedback on how to put together the interface.
What I'm thinking is I could use a navigation view controller for the opening search view. When the user clicks the "Search" button, the app will switch views to a view containing a tab bar controller (one tab for the list and another for the map). Both the list and map views will be placed inside yet another navigation view, which will allow the user to switch to the details view when the user attempts to drill down into the details view.
Does my solution to the problem sound feasible? Is there an alternative way I should consider?
I wouldn't use a tab bar for switching between the map and the list. They basically display the same data, just in a different way. This is usually done with a segmented control in the title bar.
Use one UINavigationController to switch between the 3 main views (Search > (list | map) > details).
Within the (list | map) view, use a UISegmentedControl to switch between viewing modes.
When in the details view, users can go back to the search results by using the back button.
Two mockups I came up with quickly:
alt text http://img340.imageshack.us/img340/8913/uimockup.png alt text http://img219.imageshack.us/img219/9553/uimockup2.png

Wizard style of interface in iPhone

How would one implement a wizard style interface for the iPhone?
For instance I have a form that I would like to break down into 5
different pages or views instead of putting all the information to fill out
into one page or view.
This interface must have the ability to go prev or next in case they want
to change something on page 2 when they are on page 4.
This interface must have the ability to go to page 3 directly and still be
able to go prev and next. Seems like using UINavigationController wouldn't
work here since views 1 and 2 are not on the stack so prev would not work.
Update: Check out the "gas cubby" application. It has what I'm looking for. UITableView presents the items you can fill out. Selecting a row takes you to the detail view to enter data and prev and next to fill in other information.
UINavigationController seems like the obvious solution. It gives you nice, familiar page transitions for free, and if you need to jump to a specific page you can just set up your navigation stack without using the transition animations.
I would say use a Navigation Controller. On the 1st view, show the 5 options in a Table View. The user selects a row, and then the corresponding section is pushed onto the stack as a new UIViewController. So, if they are in view #3 and want to go back to view #1 (to be honest, I would recommend rethinking whether or not somebody in the real world will actually want to do this), they hit "back" and then select view #1 from the table.
I can't think of a better way to do this because you won't have room to do something like breadcrumbing, which Apple would recommend against anyway. You could use a tab bar but that is more like options then some sort of wizard workflow.
If you really want them to be able to skip around the process, the combination of a UINavigation controller with a UISegmentedControl to jump to sections would do what you want. You can either embed the segmented control in the nav bar or place it just below the nav bar (which seems more like what you want since you have five sections).
If the Segmented control is not quite to your taste just put up any set of five buttons to change sections and make them visually appealing.
A "wizard" UI is typically used when you have a relatively small number of steps where one step depends on the previous, at least at some steps, the results or presentation depends on previous steps. This is like a navigation tree that usually results in the use of the navigation controller, but with only one potential branch at each each step. My feeling is that the navigation UI would be perfect, but with one exception; A button on the right hand side of the navigation bar that is the left to right mirror image of the "back" button that is usually found in the left part of the navigation button. That button would navigate to the the next step, and at each step the page presented would allow the user to fill in the information for that step. The only problem then is navigating to a step not the next or previous, and this could be corrected with a custom button that includes a drop-down list of the steps in the process. And this would fit nicely with the rest of the iPhone UI, which Gas Cubby's wizard UI (as good as it is) does not.