I'm currently having an optimization problem with a page. This is a dashboard-like page, it contains and AspxNavBar (analogue of Accordion control) with 3 groups, groups contain 2 charts inside callback panel, 4 grids inside callback panel (1 main + 3 dependend), filtering controls with many comboboxes and a callback panel.
The total weight of the page is like ~4 megabytes, and, in addition, the first load of the page immediately starts a callback on dependent grids (first row is 'selected' in main grid) and on panel with charts (for chart resizing).
Is there a way to reduce page size, say, size of html or callback/view state for devexpress controls? I've searched and found advices to disable rows cache (that doesn't actually help), switch textboxes to native mode (i don't have textboxes), etc. I've also disabled viewstate for all grids and got rid of 2 callback panels, but that also didn't result in significant page size reduction ( ~ 1-2 %).
I've managed to reduce the page size from 4.5Mb to 575Kb using following:
I've disabled the ViewState from the whole page and all the inner user-controls. I've enabled it for individual controls where it was necessary (actually I've come up with no viewstate at all at the very end).
I've disabled callback state for some controls where it was possible, since i do not need any info about the page at callback except those that i explicitly pass as callback parameter.
I've simplified the layout a bit. (Got rid of another 2 callback panels on a filtering control - the was a panel with 2 comboboxes inside. I am now doing 2 callback on each combo-box instead of 1 panel-callback. Combo-box callbacks are faster and healthier since they don't return page layout as html). Also, I've changed labels to spans, buttons to inputs, etc. And i got rid of some nested tags.
Used RenderMode='Lightweight' for AspxNavBar (actually, that only reduced page size by ~20kb)
Improved the code behind architecture, refactored javascript, reduced the number of callbacks and event postbacks (!filter is now applied using callback), etc.
That's all =) Hope that will help somebody.
Related
How does the aria-current works as we need to tell the screen reader where the page it is even after user does not made any movement on the laptop. Which Aria can be used ?
Aria-current works by informing the screen reader which element is current. For example, you can use aria-current="page" on a list of navigation links where it shows by visual decoration (color or underline, etc) which page link is currently chosen. Aria-current="step" could be used if there is a visual indication of checkout steps (for example) to show which step (2 of 3) the user is currently on. Aria-current="true" could be used if there are a set of size links to show which size is currently selected.
aria-current is one of the attributes defined in the WAI-ARIA specification, meant to help people with disabilities to perceive common UI widgets that are not part of the HTML specification.
It should be used to identify the current item in a set of items and it can take several values:
aria-current="page": indicates the current page within a set of pagination. It can be used, for example, within a main pagination widget (likely in the header).
aria-current="location": indicates the current page within an hierarchy of navigation. In can be used, for example, within a breadcrumb widget.
aria-current="date": indicates the current date. It can be used, for exemple, within a date picker.
aria-current="step": indicates the current step within a set of steps. It can be used, for exemple, within multi-step wizard form.
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
In Sencha, how to create a DataView or List component which renders only 1 item at a time and contains prev/next buttons to navigate data?
Store has pagination enabled to pull only 5 records at a time. Out of these 5 records I want to display only 1 record at a time on the view and with navigation buttons to move forward/backwards. Is there a built-in component for this requirement?
I see few SO posts (Sencha Touch limit number of items in list) suggesting to use 2 stores (DisplayStore to slice the actual data). This didn't work for me. I tested this with static data in the actual store. It still renders all the data in the list. Moreover I am looking for forward/backward navigation buttons too.
If there is no such built-in component (at least close enough), I want to create one for my needs. Please suggest.
You should go with a filter, and two buttons.
The handler for the next button could be alike
var number= list.getStore().first().getId()
list.filter('id', number+1)
If there is anyway to increase a number for the next valid item. Otherwise you need a counter of your current selected item and increase that.
I have a question to creator of WinRT XAML Toolkit that had helped me a lot.
What is the best mechanism for working with rich pages in WinRT?
These are the conditions:
There are about 2 pages that have a lot of elements and some high resolution images in the background. Obviously they consume time to load their content. That's why I use AlternativeFrame.Preload() method from the Toolkit.
Also these pages are the most frequently used.
That's why I stand before choosing to either constantly preload these pages (create, draw, fill) but when it is needed or creating my own page cache that would store them (maybe I am blind and the Toolkit already has this functionality?).
Can you advise what's the best practice in this problem and whether maybe there's a third way?
To add some more background - the WinRT XAML Toolkit library has two controls: AlternativeFrame and AlternativePage that are alternate implementations of the base Frame and Page classes that come out of the box in Windows 8 SDK for dealing with UI navigation - similar to how you navigate pages in a web browser. The API of these alternative controls is almost the same as in the base ones, but it adds some more support for asynchronous development model, page transition animations and preloading pages before they are requested.
Currently the Preload() method preloads a page of a given type in the background and puts it in a cache and when a Navigate() method is invoked to navigate to the page of that type - instead of instantiating a new page - the one in the cache is used, so it can immediately be shown, but also - the cache gets emptied and the next time you want to navigate to that same page - you need to preload it again. This works well if you don't return to the preloaded page often and the page uses a lot of memory, but if you want to keep that page in cache - there is not built-in support for that. The original Page class has a NavigationCacheMode property that allows to configure a page to be kept in cache once it is loaded the first time and it would be a good option for you, but AlternativePage doesn't have that support yet. I am thinking about adding it there today since I have some free time, so you might decide to wait for me to do it. Other options include
displaying your page on top of the navigation frame instead of navigating to it in the frame - then you could simply show/hide it when needed
or you can switch back to the standard Frame/Page controls and set NavigationCacheMode="Required" on your Page so it stays in memory forever, though you do lose the Preload() feature then.
or you can modify the Toolkit yourself
or you can cache the content of your page yourself - simply save the Content of your page in some sort of cache (e.g. a Dictionary<Type,UIElement> that maps page type to content) and remove it from the page (set Content to null) when you navigate away from the page and then add it back to the page when you navigate to it and the content is found in the cache. In that case you would probably want to make the Content be a separate UserControl and skip calling InitializeComponent() in the constructor if you retrieve the content from the cache since you can only have one Content and having it defined in a separate UserControl will allow you to get auto-generated code that gets executed in InitializeComponent() that grants you easy access to named elements, registers event handlers etc.
My problem is thus...
I have 4 pages which all essentially do the same thing, that is to value a specific vehicle based on the information entered, each of these pages is over 3.5k lines in the code behind.
The pages need to remain separate to allow for some minor differences between the way in which each page is accessed and to allow for future changes, however they all use the same IDs for controls so I saw no reason why I couldn't move the event handlers to the base page along with primary functions, this would allow rapid addition of future pages just by referencing the base page and setting any in page overrides that I need.
So the actual problem is that I am defining the controls as public in the base page e.g.
"Public WithEvents lstCAPManufacturers As FLHighComboBox"
Now this is fine from 2 of the pages as they use our own user control FLHighComboBox, the problem arises when called from the other 2 pages which use standard .Net dropdowns and the public declaration dies. The same thing is occurring image buttons in one page which are standard buttons in the others, and .Net textboxes in one page which are (Telerik) RadTextBoxes in others.
I did consider declaring all controls of this type as objects, and then casting them to the appropriate control in a function called on page load, however this just causes masses of compilation errors and I am unable to access properties and methods for them because they are already defined as type Object.
So I'm really after suggestions for how I can make this kind of thing work, or if not how to make this work, what I should be doing instead.
Thank you.
Added custom handlers on page load for the controls that needed them and cast the others to their type on page load for those that didn't need handlers.