I'm experimenting with creating a metro style app with Visual Studio 2012, I am not the most experienced designer but one thing with my applications is confusing me.
I have been working with 'basic pages' instead of blank ones for the different pages in my application for design consistency, however it seems that these 'basic pages' have a strange behaviour. Every item I place on the page (buttons, text boxes, etc) will all slide in one by one when the page opens. For example if I run the application and navigate to a page with 10 buttons, it will do a brief animation where each button will slide in from the right side to the left side. When dealing with a large number of items on one page this can take a lot of time as each item slides in seperatley.
Looking at the properties for each item I have been able to change the direction it slides in while loading the page by changing the flow direction. Also with a bit of research I am thinking it could potentially be due to either the metro style 'enterPage' or 'enterContent' animations, though I can not be certain.
I have tried to experiment and figure this out, and search to find out what causes this so I can modify it (Ideally I would like to just group items together to slide in with each other) however it's kind of a difficult thing to search with vague words, so I'm asking here.
What is causing this and how might I go about modifying it?
EnterPage shouldn't be sequencing the animations. They do offset some of the animations of a number of elements, but it shouldn't be each one sequentially.
Are you using WinJS navigation?
Well after a bit of experimentation I figured out that putting all my page content inside a grid made them all come in at once like I wanted. I probably should have tried that earlier but everything was already inside an outer grid for the page, so I thought that woulda handled it.
I don't quite understand it fully, but that works for now.
Related
I am working with flex for the last two years on some desktop apps. Until now I never had any performance related issues but today as we completed a mobile application for the iPad, I'm facing a challenge, the application is incredibly slow on the iPad.
http://i.stack.imgur.com/qkbWn.png
Slow, means that when I press a button in the menu to change the splitview I must wait something like 5s. Then scrolling is really slow two, with less than one fps and my TextInput starts to bug (the text is not in his box anymore).
I started to read a lot of blog post and presentation about optimisation for the mobile platform and then I rewrite some of the components I use. I removed the SkinnableContainer for instance and replaced it by a VGroup including some actionScript based drawing.
Now what you see is a VGroup (the dark grey one) containing some others VGroup (the group with title here) and then each widget is an HGroup with a label and a Widget. I only use Label and TextInput for the text.
Creation time is slow even (several seconds to create the view) for another page where there is only 4 text widget on it, or another one with only a list with a custom item renderer where each row is a set of 4 labels.
The whole things is cabled with RobotLegs, with nothing fancy, one models is injected in the view and at the beginning I set a member variable on the view with this object to bind my variables.
Frankly my thinking right now is : it smells fishy because if I've done everything right it is impossible to have such low performance and thinks that flex is competitive on the mobile platform. So right now I'm trying to disable the application piece by piece to try to locate what could slow it like that. I've got a couple suspects to check, for instance I've got some binding warning to check, and then see if robotlegs has got its share of the problem.
So my main question here is what do you think, and could you have some ideas about "is there a problem" and "how do we solve it".
Thanks
Run profiler for startup and separatelly for each operation that takes longed that it needs. Then prioritize the problems and try to solve them with basic optimization techniques.
Some problems you will not be able to solve fast - e.g. time for creating big components. The only option there is to rewrite those components with AS3 without MXML, styles and anything. I'm sure that flash.text.TextField is created many times faster than mx.controls.Label. The same for other components.
When component is created, it can be reused at a very low price. In your app there must be a lot of places where you recreate while you can reuse old components. It will save you memory and time.
Layouts tend to redraw even when it's not needed. If you have a lot of nested layouts, find the most critical places and replace a series of layouts with one custom layout or even component.
This all is very developer time consuming. At the end you will not get a smooth app anyway, but I believe that it can become usable.
I have a form with almost 60 controls on it and the client wants all that information to be fillable on one form, because all that is related to one document. Are there some usable patterns to do that? Some ways of dealing with such problem i see:
put many controls on one page with vertical/horizontal scrolling(for example i hate scrolling, dont think that decision is suitable).
create tab pages for sections. But here is a small problem: the sections are not really there, because all information is related to one thing..Tho still i can create some sections, but must save/validate all tab pages at once.
Please suggest some common practices for such problems.
Well, my app has forms with far more than that on and so I feel your pain.
I would avoid scroll bars. It's much harder for the user to be sure that they have seen everything when you have scroll bars.
I'd recommend page controls (i.e. tabs). I'm sure if you try hard enough you'll find some sort of grouping that makes sense.
The other approach you sometimes see used which is similar to a page control is pages but with Next/Back buttons. The problem with this is that it is needlessly linear.
It's harder to advise on validation. If the validation only depends on the value of the single value in question, then validate on entry. Consider using colour highlighting rather than dialog boxes. Only show hard fail dialogs when the user tries to dismiss the dialog.
Validation for values whose validity depend on other user input is harder. I'd postpone that to dialog dismiss time.
I'm trying to modify overflow7 so that its even quicker to navigate - trying to make it more quickly browsable.
To do this, I want to add the notion of navigating "up" as well as the "back" direction that's so natural in WP7. So, if a user is browsing a StackOverflow question then I want them to be able to:
quickly navigate "up" to the StackOverflow page (this could be ten steps "back" otherwise)
quickly navigate "up" again to the list of all StackExchange sites.
Currently, I've experimented with using a "Home" icon on the application bar (but this goes too far currently - all Home requests go to the top level), and I've experimented with putting a hyperlink top-left on the page. I've also tried putting a series of them as a breadcrumb.
These experiments have so far had several problems:
they've required too much thumb dexterity - links at the top of the page are a bit of a stretch
they've looked a bit ugly
they've taken up too much screen real-estate (especially the breadcrumb)
I think I'm currently heading towards trying to use some sort of Up icon on the Application Bar - although the designs I've looked at so far don't really look like they fit with Metro...
So... I'm asking the Metro design gurus among us: what's a nice Metro-friendly way to achieve the effect I'm looking for? Is there a Metro-friendly concept I could link to in terms of verb and icon? I am trying to work with Metro, rather than against it.
This is one of those situations where there just isn't a good "metro" way to do this - the guidance really is, back key presses, until "home". In fact, some of the marketplace ingestion requirements enforce this in some situations.
Usually, when a View requires a lot of bindings, or some UI Elements like a Bing Map, it takes a "while" to load (like between half a second and a second).
I don't want a delay between a "tap" action (like tapping an element on a ListBox) and the navigation action (displaying a new page).
I don't mind displaying the page progressively. For example, for a Bing Map, I don't mind displaying a black page with only a title, and a second later, having the Map appear.
What are the best practices ? It could post a sample if i'm not clear enough
edit: I'll keep the question open for a while, so other can answer. Thanks Matt and Mick for awesome answers. I'm already working on some improvements. The major one being binding my controls after the page loaded.
It's expected on resource constrained devices that non trivial actions will take at least a little time to execute.
The most commonly recommended best practice for dealing with this is to use animations to give the user the impression of perceived performance. This has been a recurring recommendation throughout the CTP and Beta phases by the product team and in presentations at Mix 10 and Tech Ed 2010.
Page transitions are a common approach to this.
Discussed here by Kevin Marshall, prior to inclusion in the November toolkit.
WP7 – Page Transitions Sample
And here, referencing the control in the toolkit.
Transitions for Windows Phone 7
There are also a number of very basic optimisations you can do that will give you some bang for a little effort.
don't name controls that you don't reference in code
use background worker to load any data to avoid impact the UI thread (already busy loading your page) and fire this off after the page is loaded (disable any controls not usable in leui of this) (Phạm Tiểu Giao - Threads in WP7)
use httpwebrequest over webclient for the same reason (WebClient, HttpWebRequest and the UI Thread on Windows Phone 7)
I would also reiterate Matt's suggestion for not loading controls that aren't used initially.
If you decide to go the extra mile, there is more you can do to optimise page loading. These two posts are worth absorbing in that regard.
Creating High Performing Silverlight Applications for Windows Phone
WP7 Development Tips Part 1 - Kevin Marshall's Epic Work Blog for Awesome People
If using Listboxes, also familiarise with Oren Nachman and David Anson's
WP7 Silverlight Perf Demo 1: VirtualizingStackPanel vs. StackPanel as a ListBox ItemsPanel
Keep a low profile LowProfileImageLoader helps the Windows Phone 7 UI thread stay responsive by loading images in the background
Never do today what you can put off till tomorrow DeferredLoadListBox (and StackPanel) help Windows Phone 7 lists scroll smoothly and consistently
and be sure image sizes are optimised for their display size.
My suggestions/recommendations:
Create and navigate to the new page as quickly as possible.
Display the page with placeholder content while it loads (if appropriate).
Give an indication that something is happening while the page loads. An indeterminate progress bar (use this one) is the convention on the platform.
If it's not possible to use the page until all controls are loaded, then prevent access to the page. A semi-transparent object displayed over the entire page is a common technique to not only prevent touching of controls but also to indicate that they can't yet be touched.
If possible/practical set the size of the items in xaml/code to prevent relayout due to resizing once an item is loaded.
Try delay loading of items which aren't on the screen initially to get the perceived total load time down.
and finally:
Optimize everything to get the load time down and the application as responsive as possible.
VS2008 seems to have a new feature that allows one to split a website into the source code and design aspects on the same page. This feature seems great, however it defaults to having the design part on the bottom half of the screen and the code part on the top half.
Unfortunately, my brain doesn't work this way and it ends up being more of a hassle than to just continue switching back and forth when needed like I've done in the past.
Is there a way to swap them so that the design part is on the top and the code part on the bottom? Most other tools in VS are drag and droppable, so I can't see why not, but I'm not finding the setting anywhere. I did a quick google search and found a way to make the split vertical, but thats not what I'm looking for. I'm just looking for the same horizontal split with the design part on top.
Thanks
Here's an alternative approach that may help. If it's a traditional .aspx page (one that has a codebehind), you can open both documents simultaneously. Then right click one in the tab area at the top and select New Horizontal Tab Group. You can manipulate it so that the design window is on top of the code window.
I would be very surprised if this possible, since I have never seen a window configuration that changes the vertical alignment of the Objects and Events drop-down-lists.
I could be wrong, though.
It does seem rather strange - in the xaml designer you can split the screen whichever way you want as there is a button to switch the position of the panes. The options for the html designer only seem to allow a vertical or horizontal split though, there isn't anything in there specifying whether to have code or design at the top, it does seem a little backwards as I imagine most people find it more natural to have the visual designer at the top with the code below.