Does anyone know where I could hook into the element life cycle to modify some template in my component before the component renders but after the light DOM has been distributed? I guess the ready method no longer guarantees that the light DOM has been distributed when it gets called.
Related
I am writing my first component for Firemonkey. It is very dynamic control and to keep refresh times minimal, when a property changes, I only want to modify the effected attributes rather than repaint the entire control.
The first issue I found was that unless you are in the Paint loop, you need to call Canvas.SetMatrix(AbsoluteMatrix) first otherwise canvas functions are referenced to the parents coordinates. I don't quite understand this.
The second issued is that when use this control on OSX, unless I call the inherited paint procedure (which I override) nothing changes on the canvas gets displayed. This works fine in Win32
Component is based off of TControl
You might not like this, but you're not supposed to paint outside of a paint event. So don't do it. Windows is a bit more forgiving if you break that rule, but you shouldn't do it on Windows either. For example, if your window is (partly) hidden, no updates are needed and the OS will skip the paint event. So instead of trying to work against the OS it is better to work with it. And usually there is a better alternative.
You can keep an internal "cache" bitmap and update that as needed. Then when the paint event comes, you can draw this entire bitmap. If possible, update this cached bitmap in the paint event if it needs changing.
If you want to temporarily highlight items, you can have a transparent window on top and paint on that window. Let the OS window manager do the heavy work for you.
I've created an ngComponent with its own css, html and dart files.
The rendering works great, and the code runs correctly.
However, I usual style the dom elements by using Chrome's dev inspect tool and by dynamically modifying the css. I can't do this anymore with Darium and I don't seem to be able to get in the dom tree of the component. I'm always stuck with the component html tag.
Any ideas?
In angular dart Ngcomponents are implemented using Shadow DOM
Components isolate their views from their surroundings by creating a
shadow DOM. Using a shadow DOM allows components to be used anywhere
without suffering from things like CSS name collisions.
You have to enable show shadow DOM feature in dartium to see template of your custom component.
We are working with Firemonkey since version 1, and still find difficulties updating components that are currently visible on the screen. There are many 'ways' to request a repaint in Firemonkey, perhaps too many:
Applying a style (ApplyStyle event) - mostly when it becomes visible on screen
Requesting ".repaint" - some components have this
Requesting ".realign" - sometime works, current versions of FMX seem to drop / hide it
Requesting ".invalidate" - some components, mostly forms, have this
Requesting ".invalidateRect" - most components have this
Calling the ApplyStyle event manually - not guaranteed to work and design-wise is incorrect...
Given the lacking documentation for the platform, is there a "well defined" way to change the visual appearance (internal values of a style) when a component is already displayed? I.e. a listboxItem that is already present and visible on screen, a TGrid cell, and so on. Would appreciate your thoughts...
I don't think there's a single unified 'correct way' to refresh the visual of components in Firemonkey.
However, as a recommendation from personal experience, I'd take the .repaint route - this method is at the TControl level, and so it precedes primitives and styled controls (which are generally made up of primitives) and so applies to all visual controls. It also doesn't require parameters, so it's a good all-round solution.
I have noted that Firemonkey has always had an issue correctly repainting controls of it's own accord. Often I'm left with a 'shadow' of the previous visual of a control/primitive, and must call .repaint manually to update it. This got noticeably worse with FM2 and FM3 (presumably due to optimizations made for mobile platforms), and so doing a manual .repaint -- especially where effects such as TGlow and moving or rotating controls/primitives are concerned, has become a standard practice for me.
I'm using jQuery UI Sortable behavior and have come upon a situation in which I needed to start the sortable drag behavior from interaction with another element other than the original handle (which is not visible at the time).
I have managed to put together a way to achieve this thanks to suggestions in some posts and the use of jquery.simulate.js (used to run official jQUI tests) and I can procedurally start the sortable drag process in pretty much all browsers except IE8 and below, simulating the events like so:
item.simulate('mousedown',pos).simulate('mousemove',{ clientX: pos.clientX+1, clientY: pos.clientY});
Problem: In IE8 (or below), after the interaction with the outside 'handle' and simulation of mousedown and mousemove events, the drag is indeed correctly started, but as soon as the user really moves his mouse in any way/shape/form, the drag stops or cancels as if the 'mouseup' event had ocurred to finalize it.
I highly think this is due to some fundamental difference in the old fireEvent (IE8-) method vs the dispatchEvent that everything else uses, but cannot quite figure out how to, or if it's possible to prevent it.
What I'm looking for are snippets of what may be done to correct this or suggestions as to why this is happening and if it can have a workaround of some sort to prevent the cancelling (such as is the behavior that occurs in any other browser using dispatchEvent instead of fireEvent).
Have put together a small example for you of the success (any recent browser) or failure of the situation described: demo
TL;DR: Have put together a small way to procedurally start a jQUI sortable drag (through jquery.simulate.js, link above), but it fails to work or cancels itself in IE8-. Need some guidance or suggestions about how to overcome that. Check above demo
I am using jQuery UI sortable and my helper element is doing some funky things in terms of rendering. Normally I'd just go in with Firebug or other browser dev tools and see what's going on with CSS, DOM, etc. But there is no way to examine the helper element with dev tools because any such action completes the sortable action and the helper is removed.
Is there a way to "blow up" jQuery UI so it leaves the helper (and placeholders and other jQuery UI DOM elements) in place so that I can examine it?
You can tie into the drag handler option for those plugins and put some code in there and then put a breakpoint on that code.
The drag event happens every time the mouse moves while you are dragging the helper