I'd like to create a twitter like stream out of a sap.m.list, hence when I get more data with a pulltorefresh control, I'd like to update the list with the additional rows, but should not move the list at all, and be hidden until the user scrolls the list down.
Any standard ways of doing this, or alternatively, custom CSS/JS recommended ways of doing this?
Thanks,
Matt
There's no need to drop down to jQuery here as OpenUI5 already contains the awesome iScroll library.
I've just setup a test app for you to have a look at here: https://github.com/js1972/ui5_pull_to_refresh.
Clone this; check the readme; then just run grunt serve to open the app in your default browser. You can use Chrome dev tools to emulate an iphone or android, etc.
I think this does what you're after - it works just like the GMail mobile app. You pull down to refresh items and at the end of the refresh your still looking at the same items but can now scroll up to see the new ones.
Will be interesting to see the performance if you have a thousand items... iScroll gives you allot of settings to play that may help (which aren't discussed in the UI5 SDK).
One thing to be careful of with browser scrolling is paint times. If the browser is not 100% done painting then iScroll can't calculate all the element dimensions it needs and you get strange results - typically just no scrolling. Sometimes you've just got to give a little time back to the browser by wrapping things in setTimeout(scroll_stuff, 0).
Hope this helps...
While not quite the answer I was after, looked into doing it another way, and provided you can work with automatically generated Id's that you'll need to calculate based on the row number, the following is one brute force way of doing it (I've borrowed it from another SO question and kept the animation for fun - Referenced SO Link):
var pOffset = $("#__item0-App--Main--MyList-76").position().top;
$("#App--Main--myPage-cont").animate({scrollTop: ( pOffset)}, 800);
Related
I'm in the process of comparing MvvmCross with ReactiveUI for a major pharma project on Win Store, WP8, iOS, Droid. We've already selected Xamarin.
I'm totally new to ReactiveUI. I really like what I see in principle, and I think Paul is a genius. However the details are becoming a real bear. I've spend several days tracking down documentation (the manual is from 2011 and seems almost entirely outdated - it doesn't even contain the word "Router") and sample code.
I'm looking at the sample from ReactiveUI.Samples
Also the project MobileSample-RT from the ReactiveUI solution.
I based my little hello world on the ReactiveUI.Samples "Routing" example. Frankly this isn't much of an example as all it does is navigate from AppBootstrapper to the one and only view. I'm trying to do something similar to the "three page" example from MobileSample-RT. The problem is, if I try something like this in my project:
HostScreen.Router.Navigate.Execute(RxApp.DependencyResolver.GetService(typeof(LoginViewModel)));
It crashes (pdb symbols not loaded in ReactiveUI.dll)
If I try this:
HostScreen.Router.NavigateCommandFor<LoginViewModel>().Execute(HostScreen);
Same result - hard crash. That really threw me as it seems like something that should "just work".
I can call this:
HostScreen.Router.Navigate.Execute(new LoginViewModel(HostScreen));
And it does go to my view, as expected. I also wired up a back button in the main screen:
this.OneWayBind(AppBootstrapper, x => x.Router.NavigateBack, x => x.BackButton.Command);
And that indeed moves back from the view to which I'd just navigated.
So now I want to move forward again. I click on the button that does this (again):
HostScreen.Router.Navigate.Execute(new LoginViewModel(HostScreen));
And I go back to that view. However this time it takes 2 clicks on the back button to get actually move back. If I then move forward again, it takes 3 clicks the next time. The NavigationStack is filling up with new instances of LoginViewModel.
So, what IS the correct way to do routing/navigation? Why are those commands crashing? Rather than calling "new" each time in the Navigate.Execute, how do I navigate to a viewmodel that is already in the navigation stack (or should it be there in the first place?).
Many thanks for any clarity you can provide.
If you're building for iOS and Android, you simply don't want to use Routing - the notion of routing conflicts too much with what the platforms want you to do (even on WP8 it's a stretch but I was able to hacky make it work). You should stick with View-first location.
However, if you're using Xamarin Forms, ReactiveUI works great with VM-based routing (since Xamarin managed to do all the hacks to make it possible!). Check out https://github.com/paulcbetts/xamarinevolve2014 for a demo of it
I know the docs suck and I'm working on new ones:
https://github.com/reactiveui/ReactiveUI/pull/391 - Pull Request / Progress
https://github.com/reactiveui/ReactiveUI/tree/docs/docs/basics - Browsable version
First of all drag and drop works correctly in my stages in version 4.3.0, so I just want to understand why I get the following problem with 4.3.3.
I have three stages. One sits in a container in a document in an iframe. The others sit in containers in the iframe's parent document, one displaying a complex layout of shapes and the other a single simple shape for testing. The document in the iframe which controls all the action has a viewfinder overlay that drags and drops correctly. However the shapes in the layout and test stages do not release on mouseup.
Any idea about what's going on would be appreciated ... I like to try and keep up to date.
Well, since I can't see any of your code I can only help so much, try doing the following.
For each shape that you have, add this attribute:
dragOnTop: false
example:
Kinetic.Rect({
fill: 'blue',
dragOnTop: false
});
Let me explain how I found an answer by first amending the structure. There is a holding file which contains shared files and two iframes - one for a machine-like index and one for a display each with its own scripts. The main shared file is nameset.json which lists all the objects and their key/value couplets. These are sent to 'fill out' the machine and display frameworks. I thought I could do the same with the Kinetic Global object, referring to the Global.stages array. It seems obvious now that each of the iframes needs its own Kinetic link (rather than pointer) and these need to be used to marry machine/display interactions like the map shown here. Anyway all the dragging and dropping works smoothly as promoted. Thanks for that!
Will mark as answered but if anyone has any comments would be pleased to read them.
The new Facebook app seem to have done away with the grid-icon layout, with a more interesting custom navigation layout where the bottom-most view shows all the options (like Profile, News Feed, Messages etc for Facebook) and clicking on one of them brings another view sliding over the top. You can press the 3-lines button to then expose the bottom-view again, but the current view is partially visible. The Path app also recently updated to match this scheme.
What's the best way to recreate this? I've searched for any open-source options but haven't found them. Three20 doesn't seem to support this either.
Another option that I wrote: ECSlidingViewController
It has support for orientation changes like Facebook and sliding to the left like Path.
Video demo: http://vimeo.com/35959384
Code: https://github.com/edgecase/ECSlidingViewController
Try These from Cocoa Controls:
JTRevealSidebar http://cocoacontrols.com/platforms/ios/controls/jtrevealsidebar
clcascade http://cocoacontrols.com/platforms/ios/controls/clcascade
StackScrollView http://cocoacontrols.com/platforms/ios/controls/stackscrollview
Many more on the same site like:
http://cocoacontrols.com/platforms/ios/controls/mfslidingnavigationcontroller
http://cocoacontrols.com/platforms/ios/controls/psstackedview
I found a really nice project on github:
https://github.com/devindoty/DDMenuController
Everything I've seen on the internet and those recommended by Yosi Taguri are all way too complicated. Drawers can be achieved by a very simple category to UINavigationController with no graphics asset whatsoever and no class extension needed, and backwards compatible with iOS 3.0!
Take a look a this:
http://code.google.com/p/drawer-navigation-controller/
Here is a video http://www.youtube.com/watch?v=5T-1-_pFbG0
This project (not mentioned above) looks like the most mature and polished to me: https://github.com/gotosleep/JASidePanels
Also, seems to still be active.
Edit: I have since transitioned to: https://github.com/mutualmobile/MMDrawerController which IMO is an almost perfect implementation.
Check my answer here - SplitView like Facebook app on iPhone - which contains a list of open-source codes.
if anyone's wondering which one to choose among JTReveal and DDMenu, I'd suggest DDMenucontroller over JTRevealSidebar (haven't used the other options listed by #Yosi). Its a lot simpler, lighter and works exactly the way the Path app works (and it is easier to modify to suit your requirements). Havent seen the issue of black background mentioned by #Henning
My project FRLayeredNavigationController on GitHub goes in about the same direction.
(The spacing between the layers is easily configurable and it supports rotation of course).
Have a look at the demo videos/screenshots:
http://youtu.be/v_tXD_mL05E
http://youtu.be/q66HX2td_uc
https://github.com/weissi/FRLayeredNavigationController/raw/master/FRLayeredNavigationControllerScreenshot1.png
https://github.com/weissi/FRLayeredNavigationController/raw/master/FRLayeredNavigationControllerScreenshot2.png
Here's another one: PPSlideDrawer.
http://www.localwisdom.com/blog/2013/05/simple-sliding-drawer-implementation-for-ios/
I checked out #Ephraim's answer (http://code.google.com/p/drawer-navigation-controller/) because it seems pretty easy to work with. The problem, it seems, with drawer-navigation-controller is that the swiping animation does not follow the user's finger--it is automated. PPSlideDrawer aims to solve that. I'm about to try it out in my project and will post some updates.
Might be a dealbreaker for some that the following are still under "TODO:"
Implement auto open functionality.
Implement swipe from edge functionality(rather than just detect panning gesture).
Landscape support.
Here is one thats very easy to implement and use with storyboards. It has control for shrinking, show hide animations, and direction.
https://github.com/HelloMihai/HMSideDrawerDirectional
I'm trying to use the printing stuff in iOS 4.2 to print from my iPhone app, but I'm having real trouble getting multi-page content to display nicely. As you can see in the attached screenshots of PDFs generated through the iOS printing API, UIMarkupTextPrintFormatter really likes to use a painfully small top-margin when rendering.
Additionally, it doesn't seem to try to split block-elements too nicely either ... it's tough to see in the screenshot but the page break actually occurs halfway through a table row, rather than on a border between rows.
I've tried using the CSS #page directives to specify page boundaries, however iOS Webkit doesn't seem to support these at all.
Does anyone know of any techniques, either in HTML or through the iOS SDK to make these top-margins bigger?
I really don't want to write a custom UIPrintPageRenderer class because I'm trying to give my users the ability to customize their printouts through HTML templates ... going with a custom renderer would almost certainly make this impossible (or really difficult).
Any help is much appreciated!
You're on the right track with UIPrintPageRenderer, but fortunately you don't need to write a custom subclass to do this. All you need to do is instantiate a vanilla UIPrintPageRenderer, set the headerHeight and footerHeight properties, and add your HTML formatter to the renderer using addPrintFormatter:startingAtPage:. It only takes a few extra lines of code, I have posted my method here: Print paper size and content inset
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.