Doesn't vscode support creating element and DOM manipulations? I've read the api referrence but cannot figure out how to get the handle of document. I'm looking for something equivalent to workspaceElement = atom.views.getView(atom.workspace) in atom.
VSCode does not expose the DOM, the only DOM manipulations that can be performed are through the API calls like decorations. Here is a sample of the decorator API in action https://github.com/Microsoft/vscode-extension-samples/tree/master/decorator-sample
The primary reason for not allowing direct manipulation of the DOM is to improve the speed and stability of the editor.
Related
Using javascript in the browser's console (firefox), I can do:
document.activeElement.placeholder
If the mouse cursor is in the StackOverflow search bar, the code above returns:
"Search…"
I can achieve the same using Parenscript with:
(ps:chain document active-element placeholder)
Is it possible to achieve the same output using CL Plump (manual) and/or Clss (manual) instead of Parenscript?
If so, how to do it?
I have tried finding this on the documentation references above but I could not find it. I am new to CL, though. Maybe I missed something.
Thanks.
When using Parenscript you are using the browser engine through JavaScript. The browser has a concept of user interaction, such as focus, on top of the model representing the document itself.
Plump and CLSS are not browser engines. They only have an object model of the HTML document they have parsed. They do not model anything like user interaction, so they also do not have something like the »active element«.
I'm in the process of creating a VSCode extension to do code completion for an existing Lua API.
I'm having a bit of trouble achieving the following (examples are JavaScript):
I've been looking for examples and tutorials but haven't come up with much. I assume I may need to do a fair amount of string processing, around the current cursor position, to get enough data to lookup the appropriate documentation (which I stored in an array of json objects). But presently I don't know how to get the meta-data dialog to show when entering parameters.
P.S. I have reviewed the official extension samples.
Your screenshots show two VS Code features:
The first screenshot shows a hover / quick info. It is used to display information about the current word the user is hovering over. To add a hover, your extension should implement and register a HoverProvider
The second screenshot shows parameter hints / signature help. It displays information to the user as they complete a function call. To add signature help, your extension should implement and register a SignatureHelpProvider
In both cases, how you implement the functionality is entirely up to your extension. Most language extensions maintain a structural representation of the file (such as an AST) and use this to provide hover and signature help info.
You can also either implement your extension as a direct VS Code extension or using the language server protocol (which works across editors). See VS Code's Language Extensions Overview for more information about developing a language extension and why you may want to consider the Language Server Protocol
So I am trying to inject some javascript into a website to scrape some information. However, if I could get a reference to the react component my life would be made a lot easier. I have looked at several questions on Stackoverflow but nothing useful turned up:
Reactjs - Get a component from anywhere in the app
React - get React component from a child DOM element?
I realize that react is basically just rendering the DOM by using its internal state and so reversing the DOM is not an option. Moreover, since the javascript on the website isn't mine I can't exactly have a global reference to the React component when its created. What I would really like is to have the '$r' that the react chrome devtools provides when you choose a DOM element but without having to rely on the chrome extension. I guess my question really boils down to how can I get the same representation that the chrome dev tools does so that I can reference a react component without actually creating a global variable. Also note I don't really care about efficiency or best practices I just want the reference to the component the same way that the devtools does it.
We are develpoing a web-based automation solution for a web application that is built using ExtJs.
Currently i am testing various different object identification techniques that identify web elements in the best way.
We'd like to use the IE developer tools (F12) to highlight and select DOM objects on the page, and (somehow) get their corresponding ExtJs component (along with its corresponding properties, such as itemId).
Is this possible to do through code or through some other technique?
I am unfamiliar with IE Dev tools for such things, however I can attempt to answer targeting specific components and their elements.
You can target Ext components via several ways:
Ext.ComponentQuery.query(CQselector) method (see docs for examples)
Ext.getCmp(componentID) if you know component ID
up() and down() methods from any container/component. these also take CQselector expressions
Any of these methods are accessible from the page since Ext library is loaded. In browsers like FF and Chrome you can execute these methods directly from the console. I am guessing similarly they should be available in IE Dev tools.
Once you have reference to the Ext component you can get HTML elements through .dom or .el or similar properties. Or you could use Dom query directly.
I believe that if you set the id property rather than the itemId, you can achieve the desired result as this is passed through as the html id property of the top level container for the component (I think!). It's a little complicated to get that to work with accuracy though given the amount of nested divs/tables that are used in most of the extjs components. Good luck!
Hard to tell what you're looking for, but if you're trying to get a reference to an Ext.Component that is rendered, you can look for the wrapper node for your component in the HTML structure. The HTML id is the same as the component id. If you run var comp = Ext.getCmp('some-id-12345') and if that returns something, you've found the wrapper for an Ext.Component.
You could then use
comp.itemId
To retrieve the itemId
You should look into http://www.illuminations-for-developers.com/ A plugin for firebug that shows Ext.Components.
You can also use the Sencha Page Analyzer to see the entire component tree
I am almost at the end of my rope trying to style my Zend form using decorators. Previously to avoid these issues I would create a form script extending zend_form, add whatever validators, labels, etc I needed then retrieved the element from my view script using $form->getElement('my_form_element');
that way I could wrap whatever css tags I wanted around the element. I thought I should learn how to use the built in decorators, but I'm starting to feel like it's a waste of my time. My old way seems easier, is there some reason I am not seeing that makes using custom decorators better?
In general decorators are used to dynamically add functionality without having to touch the code's core functionality and for a better re-usage of code. In Zend_Form however, I think that the decorator system (as well as Zend_Form in general) is unintuitive and heavily over-engineered and so it does exactly the opposite of what it should do: Help the developer to create better and more intuitive code faster.
In my opinion the usage of Zend_Form_Decorator makes only sense in the case where you have some extended logic that you plan to reuse throughout your project on multiple and different types of elements.
Let me give you two examples:
You want to add a tooltip icon next to an arbitrary form element with a nice icon and a fancy JavaScript hover box.
An element should be validated directly upon entering data by posting an AJAX request and adding either a green check mark on success or a red cross icon on failure next to the element.
With the decorator you can now separate the logic of the added functionality from that of the underlying element and so you can use the same code to add the tooltip and/or the live validation feature to a textbox element as well as any other element simply by adding all the decorators you want to the element.
There is also a great article from Matthew Weier O'Phinney, the lead developer of Zend Framwork, that gives some background insight on the motivations for using decorators along with a lot of examples: Decorators with Zend_Form
Decorators can come in handy if you have a specific repeatable markup for your forms, for example if you want to use Bootstrap. Other than that, especially if you have a good html/css person, I would avoid them.