I have a requirement that I think is common in many applications: paging. I have chosen to go with the "press to load 10 more" pattern, I think it looks better in a Metro app instead of using page numbers.
The problem I am facing is memory related. I load the first 10 items, which contain some images, and as I press "load more", I notice that the memory of the application is increased proportionally, obviously because of the images loaded. It soon gets to the 150MB memory limit where the operating system might actually kill the app.
What I am thinking is if there was some way after you scroll to the next page for the images not visible anymore to be unloaded from memory. This is gracefully handled by the iOS with the GetCell method, but is there an equivalent pattern in Windows 8 Javascript model?
Thanks,
Themos
Metro style apps usually do infinite scrolling using data virtualization. Check out the Build sessions on Data Virtualization in Metro style apps:
Build polished collection and list apps using XAML
Build data-driven collection and list apps using XAML
Build polished collection and list apps in HTML5
Build data-driven collection and list apps using ListView in HTML5
For example: HTML ListView working with data sources sample
Related
I'm new to UWP (windows 10), working on an app for windows phone, I wanted to know what is the difference between:
Using multiple frames and navigate from one to other.
Using a single xaml with no frames but with multiple grids (or other patterns), and instead of navigate- just change visibility so only the desired grid will be visible.
which option is better? and why?
The system keeps track of the Page you are currently on. So even when your App exists and even if it's removed from memory the OS can tell the App to reopen on that page.
Similarily when your App provides other Apps with the capability of calling into it to open certain file types of to perform certain actions (e.g. start navigation, etc.) pages will be used.
Lastly if you put everything on a single page and just manipulate visibility this will increase memory consumption of your App (as everything needs to be loaded even if it's not visible) and it also might increase load times.
Of course how much that impacts you is up to the type of App you are building. In general however I'd advice you to start building using separate pages in case your App grows. Also you get a lot of stuff out of the box if you do so (e.g. animated transitions, etc.)
I am hesitant to develop a Windows Phone app in the HTML/WinJS Universal App space because of the difficulty of building complex user controls. Before I go the XAML/C# route, I would like to find out if it is possible to use a user control built in XAML/C# inside of an HTML/WinJS view?
My initial feeling is that it is not possible due to XAML parsing not being available in the HTML space, but I am not certain that this is the case. Any thoughts?
Also, I am not interested in 3rd party solutions such as Xamerin. I am really trying to see if this is possible from a native approach.
No. The HTML and Xaml UI stacks in the Windows Runtime are separate and cannot be mixed. You can call non-UI C# or native Windows Runtime Components from JavaScript.
You can include HTML in a Xaml WebView, but there is no reverse hosting.
--Rob
I have implemented a lazy-load solution for images using http://www.appelsiini.net/projects/lazyload, and it works as expected.
Now that the DNN skin I'm working on is responsive, I want to make use of ImageResizer's responsive solution: http://imageresizing.net/blog/2013/effortless-responsive-images -- the setup is working right now, but when combined with lazy-load, the images that are served are no longer responsive.
Is there a way to combine these two technologies?
We run the latest .NET and IIS 7+. Thanks in advance!
Images added to the page after DOMLoaded will not be detected by Slimmage.js unless you call window.slimmage.checkResponsiveImages() . If you use a separate lazy-load or jQuery plugin that modifies images, call checkResponsiveImages() after it completes its work.
Browser vendors advise against lazy image loading, as it drains mobile device power. Turning on the wifi or LTE radio is the most expensive operation for a device, and lazy loading can make it 3-10x more chatty.
I am dynamically creating some controls in a page. it will become slow when we have some fifty controls.
what are the code optimization techniques/ guideline used in extjs?
Is there any specific methods which will slow down the entire loading?
Sencha has great posts:
Ext JS 4.1 Performance about:
Network latency which affects initial startup time heavily, but also data store load time.
CSS processing.
JavaScript execution.
DOM manipulation.
Optimizing Ext JS 4.1-based Applications about optimization tips and the Page Analyzer tool.
My tips are
Use Ext.container.Container rather than Ext.panel.Panel.
Instead of adding ext components, use XTemplate with data view to load similar controls.
if you are using many images then use image sprites - An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
http://css-tricks.com/css-sprites/
How to create custom templates in iOS app having uiimageview ,uitextview,and many other views so that user can select any one template and starts editing it.
There is a famous library thats floating around for this kind of usage - iOS BoilerPlate
It is intended to provide a base of code to start with
It is not intended to be a framework
It is intended to be modified and extended by the developer to fit their needs
It includes solid third-party libraries if needed to not reinvent the wheel
What it includes -
HTTP requests and an image cache (both in-memory and disk-based)
UITableViews and UITableViewCells: fast scrolling, async images, pull-down-to-refresh, swipeable cells,...
A built-in browser so your users don't leave your application when they browse to a certain URL
Maps and locations: directions between two points, autocomplete a location, etc.