What's the fastest way to render dijit widgets?
I know that the programmatic way is faster than the declarative. (Some reference)
I have a custom widget that loads too slowly (it's a datagrid with combobox, buttons and other small dijit widgets used for adding filters, etc).
Looking at the source, I see that all the dijit widgets are created programmatically, but the DOM nodes where they are inserted into are created programmatically as well.
Is it the "right" way?
I'm trying to speed up the rendering of this widget, and currently my choice would be to combine a velocity template (my company uses struts2 + velocity) to create the DOM nodes, with programmatically created widgets (using placeAt and similar methods to insert the widgets into the already built DOM nodes).
It would work fine, but sadly all the css classes are overwritten by dijit, so I have to overwrite them again, which causes a sensible overhead.
In the template I write something like this:
<input id="idOfAnExistingDomNode" class="myCssClass" />
And to insert a FilteringSelect in that DOM node I have to write this:
var fieldSelect = new dijit.form.FilteringSelect({
store : jsonStore,
searchAttr : "caption",
labelAttr : "caption",
selectOnClick : true,
value : "Content"
}, "idOfAnExistingDomNode");
fieldSelect.domNode.className += " myCssClass";
The last line is necessary because myCssClass is overwritten during the creation of the FilteringSelect.
Is there any way to avoid this issue?
Or, perhaps, I'm trying to do this thing the wrong way? I'm not completely sure about that "velocity template" thing.
Note: Dojo version is 1.5 and no, sadly we can't upgrade it to newer versions.
Please forgive me for my TERRIBLE English.
Often one of the faster ways to instantiate widgets is to create them in a temporary div and then move that div onto the DOM. Have you tried profiling what exactly is slow in this instantiation? Part of me wonders if too much time is being spent waiting for data, as a few widgets + a grid with reasonable pagesize params shouldn't take long to load.
As for your class issue, it is strange that dojo is not mixing in the existing class. That said, you could do a lookup on the node first, get the class attribute, and then specify it as
the class attribute in your mixin object when creating the FilteringSelect. If you do so, be sure you wrap class in quotes or older IE's will reject it.
Related
I have been trying to get my head around a way to intergrate Ember.js with Three.js. In particular, I want to render a number of elements, controlling the data with Ember.js bindings and general pub/sub handling, but also wont to be able to manipulate the views/elements with three.js using THREE.CSS3DObject.
I'm fairly confident with Ember but new to Three. I guess what I'm thinking is, can I have an element that exists in both the THREE.Scene and the Ember application namespace?
In the THREE.js periodic table example:
http://mrdoob.github.com/three.js/examples/css3d_periodictable.html
an DOM.element is create and then later decorated with attributes (style, position etc).
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,'+(Math.random()* 0.5 + 0.25 ) + ')';
Later, it is added as an element to the THREE.CSS3Object constructor:
var object = new THREE.CSS3DObject( element );
I'm wondering if I can create the elements in perhaps an Ember containerView and then use jQuery to iterate over the childViews, caching the currently iterated element as 'element' and then render this to the THREE.CSS3DObject constructor?
I know it's a bit hacky and I only mention the above as some indication that I have tried to think up a way before asking for help! haha!
Any guidance or even pie in the sky suggestions like mine would be greatly appreciated. Thanks in advance.
Three's CSS3D renderer is just a thin abstraction of the browsers' own renderer and therefore should not conflict with the manipulation of DOM elements with Ember or jQ.
Once passed to the CSS3DObject constructor, an element's 3D transforms are updated but beyond that, it's business as usual. You can manipulate its content and style it as needed.
recently I found in one of my older projects (asp.net 4.0)
that I've been using this code
to set display Style-property To none
DDL_ChosenEmpl.Attributes.Add("style", "display:none");
lately I was using
DDL_ChosenEmpl.Style.Add("display", "none");
i would like to know
in any case such as - property already exist whether it's with different value or not , will any of them should be avoided ?
what are the main differences between both methods ?
Both does the same functionality as you have done. The thing is, in "Attributes" collection, you have a control's other attributes like "click", "dblclick", etc. You can use either way. I believe Microsoft has given the later part for user's convinience to make coding easy.
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}
I want to change my rehosted activities look to:
Already tried ActivityDesignerTheme
Need to do it without using WorkflowViewElement because I don't want to lose it's behaviors (breakpoint, expanding).
If it's not possible, is there a way to change ActivityDesigner header background color?
#Will
I was annoyed too by the default behavior of the ActivityDesigner header when editing the DisplayName (especially the part where it positions the caret at the beginning of the string). I used Reflector to peek (System.Activities.Presentation.dll) at the implementation and I noticed that some of this behavior is defined in OnApplyTemplate. By just overriding this method in my custom designer class and NOT calling base.OnApplyTemplate(), I was able to make the DisplayName read only in the header (in my case that was all I needed, but I think one can play with some custom event handlers in there and tweak the behavior).
#Davi Fiamenghi
Digging around some more with Reflector in the same assembly, I found the controls used in OnApplyTemplate defined under system/activities/presentation/workflowelementdesignerdefaulttemplate.baml (System.Activities.Presentation.g.resources). That seems to be the default control template used for ActivityDesigner (<ControlTemplate x:Key="WorkflowElementDesignerDefaultTemplate" x:Uid="ControlTemplate_1" ControlTemplate.TargetType="{x:Type swd:ActivityDesigner}">). I guess one way to change the header color would be to try to "re-create" this template in your application and set it explicitly in your custom activity designer. Of course it's more involved than just copying it, since it appears to be referencing other resources defined in that assembly.
Hope this helps.
OK, I have a ton of controls on my page that I need to individually place. I need to set a margin here, a padding there, etc. None of these particular styles that I want to apply will be applied to more than control. What is the bets practice for determining at which level the style is placed, etc?
OK, my choices are
1) External CSS file
1A) Using ClientIdMode = Auto (the default)
I could assign a unique CssClass value to the ASP.NET control and, in the external CSS file, create a class selector that would only be applied to that one control.
1B) User Client ID = Predicatable
In the external CSS file, I could determine what the ID will be for the controls of interest and create an ID selector (#ControlID{Style} ). However, I fear maintenance issues due to including/removing parent containers that would cause the ID to change.
1C) User Client ID = Static.
I could choose static IDs for the controls such that I minimize the likelihood of a clash with auto generated IDs (perhaps by prefixing the ID with "StaticID_" and use an external stylesheet with ID selectors.
2) I could place the style right on the control. The only disadvantage here, as I see it, is that style info is brought down each time instead of being cached , which is what I'd get using an external CSS. If a style isn't resused, I personally don't see much benefit to placing it in an external file, though please explain why if you disagree. Is there moire of a reason that "It's nice to have all the CSS in one place?"
Definitely use an external CSS file.
Options 1 A-C are really a personal preference. I would go with ClientIDMode="Static" as it gives you the most control over the Ids and it will simplify accessing the elements with Javascript (if needed). I've always hated the ugly generated Ids in the earlier versions of ASP.NET. Using a unique CSS class for each element kinda defeats the purpose of a class, which is intended for use on multiple elements.
Just to confirm your thoughts of option 2, this is not the best approach. Putting your styles in an external CSS file will result in the file being downloaded once and cached, rather than having inline styles bloat your HTML that is sent to the client each time.