I have a build coming up, where I have the following JSON-feeds:
site.com/json/items
site.com/json/item/:id
I'm using Backbone.Marionette and Backbone's router to manage which view is being shown (index or detail), but have 2 things I'm having some trouble figuring out:
My client wants to show 'previous' and 'next' buttons on the detail-view
Preferable they'd want to animate this sort of like how Reveal.js shows next/previous items.
How would I go about getting the "next" or "previous" ItemView, and how would I determine where to animate the next ItemView in from? I want to go about this as DRY / smart as I can. Also when using the Back-button it should use the "reverse" animation, so that the transition appears natural when using browser's back button. So I think I should somehow determine whether we were already showing the ItemView, and if the current ItemView is before or after the requested ItemView. Is that the "right" way to do it?
Related
I am pretty new to Flutter. I am working on a project to create an UI like Uber to have google map in the background and have different type of views, such as full screen address input view(it seems full screen but part of the view can be hidden to expose the map behind and interact with it), persistent bottom sheets and some floating button on top. Using stack to put one bottom sheet on the map is not difficult. But when it comes to navigate back and forth between different type of views while keeping the map in the background and the map is still touchable, I am not sure how to manage it. Sometimes it navigate 2-3 times deep and back to the first bottom sheet. So the question is:
How to implement a way to navigate between different type of views, like firstly pull up full screen address view, pop the address view after entering address and pull up car type view as the sample image shown on the link below. And press on the back button on top left corner will go back to address view.
If you have any idea how to design this navigation flow, please share it. Thank you.
Sample image
Update: found this GitHub repository demonstrating how to implement Uber like UI. I am checking it out.
https://github.com/iamSahdeep/fu_uber
For background maps with elements on top, a Stack is best as you mentioned.
For persistent bottom sheets, use the BottomSheet class
For the floating button, use the FloatingActionButton class
For the navigation between BottomSheets only, you might want to learn more about this plugin Modal Bottom Sheet. It has exactly what you need. Check the "Cupertino Modal with inside Navigation".
Using Nativescript, where is the navigation in the SideDrawer stored? Should it be stored in application settings as a json string, or just loaded with an api call everytime it's needed?
every time you call $navigateTo or similar navigation strategy, you generate a kind of navigation entry (varying depending of your nativescript flavour) and this is used to tell to where back button should go if pressed.
Please note you might set clearHistory in order to take rid of the navigation entries stack.
If you use a Frame (Core / Vue) / page-router-outlet (Angular) as root for drawer content, the navigation history should be taken care by default.
Hitting the back button will automatically take you to previous page on the topmost frame's navigation stack.
I need Modal Page appears with "slide from bottom and cover (NOT push) current page" transition.
I set parameter animated of showModal method, but nothing changed.
How implement such transition for Modal Page? Android platform.
it's bug github.com/NativeScript/NativeScript/issues/5989
I have kinda hacky stuff, wrapping my elements with AbsoluteLayout and give it a high top value like '800',
and in navigatedTo function make transition animation with the negative value of the top attribute. In your case you would use left attribute and make transition over x.
Another solution that looks better in the UI, adding a custom component that would act as your modal, wrap your page elements with AbsoluteLayout, add your custom component when you need to show your modal, and apply the previous animation hack to it.
Tip: You can set the actionBarHiddin = true if you want to your custom component to overlay the full screen.
Tip: async/await and then would be very useful for the smoothing matters.
i want to swipe webbrowser Control which is on pivot item ,each pivot item
has a web control .i want to swipe with web browser control .
but i don't have any idea.but swiping is necessary in my project .is there any method to doing this if yes then please send me sample code for this ..
This is a bind if you have some different sections of HTML you want to display in a Pivot. If you are targetting WP7 Mango it might be possible for you to convert your HTML to RTF and then use a RichTextBox instead of a WebBrowser. However if your HTML is fairly complex, this probably isn't going to work for you.
Alternatively you could place your WebBrowser in a pivot item with a transparent Rectangle above it in the Z-order. Make sure that Rectangle swallows any gestures and doesn't pass them through to the WebBrowser control - that way you will be able to swipe left and right on the WebBrowser to get the pivot to move.
Next you can use the GestureService on this transparent rectangle to recognize vertical pans/swipes and taps to take you to a full page view of your WebBrowser content. In this full page view you would have a fully interactive WebBrowser control.
You have an issue with competing gestures. Try setting the WebBrowser control to IsHitTestVisible to false. This will mean that you'll be unable to manipulate or scroll the content of the WebBrowser control though.
shanu: if you still need it, check my recent answer at: WP7 Pivot control and a WebBrowser control
There's a bit of info on how to "hack into" the webbrowser and what to do, to (almost) prevent it from stealing your swipes. If you are insane/masochistic enough to try that approach I described there, then in addition to that eventhandling and other configuration/detection, you will have to drive your pivot manually via relevant pivot.selectedindex++/-- on H-swipes detected with your handlers (or you can separate blocking and observing with gesture listener, that may sometimes result in the code being a bit cleaner). I also think you will have to be careful with the selectedindex near to the page ranges. I dont know how pivot behaves if you order it to go further than you page count, and I dont know either if it will animate correctly, if being on the last page you order it to go "wrap around" and go to page 0 via selectedindex=0. It may get "crazy" and rewind back instead of going forward in a circular fashion.. you will have to experiment with that
I'm developing a Windows Phone 7 application that uses some Transient content.
To avoid to go back to that transient content I've decided to use a phew page with several grids on the same page.
When I have to show another "page" I set to collapsed current grid and then I set to visible desired grid.
I know this can be done using user control, but I'm not sure if using user controls can be slowest that using Grids. Any advice?
And another question is if I use grids, how can I use page transitions?
Another option for when you want to show transient content is to use a Popup control. This won't appear in the navigation stack, so when a user goes back (<-) they won't see this content.
However, Popup content isnt GPU accelerated, so you only want to display simple content, no animations etc...
If you want page transitions etc... then i think your only option is to use Pages. That way you can do the transitions and the back button works as expected.
It doesn't matter if you do this via user controls or grids - what matters speed wise is the complexity of your layout.
A user control may be better if you are doing this on a number of pages so you don't repeat yourself.
One way to do page transitions is to do it with stack panels. Have the second "hidden" stack panel way off to the right so it is off screen then animate it in.