VSCode extension IPC with UI inside HTML preview - webview

I wish to develop a unit test runner extension for VSCode. The extension should display discovered tests grouped into expandable hierarchy, annotate run status, display output and errors for each test, provide run/debug commands on different levels, and of course the red/green bar.
Roughly spearating this into "model" and "view", I plan to implement the model in the extension process, and I plan to implement the view as HTML preview based on a TextDocumentContentProvider. (Is there a better approach?)
Now, the model and the view should communicate with each other. I want to implement the view as a single-page application. The view will send commands to the model, and the model will send events to the view (or the view will poll the model for events). The view will update itself according to received events.
My question is, what communication technique should I use? Can HTML page inside the HTML preview access VSCode/Atom/Electron/Node APIs? Can I share object instances, or do some lightweight IPC? By far I didn't figure out.
I've found that I can invoke VSCode commands or refresh the entire page, when the user clicks a link with href set to specific scheme (command:// or the one I registered for my TextDocumentContentProvider).
I do succeed to open an HTTP listener (http.createServer) in the extension process, and communicate through XMLHttpRequest on the HTML preview side. But it looks to me like a heavy overkill.
I wonder if there are more appropriate ways to do this?

Almenon is referring to the currently proposed Webview API that was released in version 1.21 (Feb 2018). For the time being, this appears to be a much better approach for HTML previews. But in order to use the API, there are special instructions. From the release notes:
These APIs are still proposed, so in order to use it, you must opt into it by adding a "enableProposedApi": true to package.json and you'll have to copy the vscode.proposed.d.ts into your extension project.
What isn't clarified (and probably should be) is how to add the downloaded declaration file to a project. One way to do it is place the file in $/node_modules/vscode, next to vscode.d.ts, which is generated during postinstall. Then add the following line to the top of vscode.d.ts:
/// <reference path="vscode.proposed.d.ts" />
That will link the type declaration files. To make this part of the installation process, write a build task to do it and then call it in the vscode:postinstall script in package.json.

VSCode has a new API that makes this easier.
https://github.com/Microsoft/vscode/issues/43713
You can find the new API here
To try the new API:
Add "enableProposedApi": true to your package.json
Manually download vscode.proposed.d.ts and add it to your project: https://raw.githubusercontent.com/Microsoft/vscode/master/src/vs/vscode.proposed.d.ts
Run your extension with the latest VS Code insiders build

Related

Generating Multiple Typescript Files with NSwag

I've just started looking into using NSwag to auto-generate typescript clients for a WebAPI project. I've naively started with this simple build step:
nswag webapi2swagger /assembly:bin\MyProject.WebAPI.dll /output:Swagger.json
nswag swagger2tsclient /input:Swagger.json /output:WebAPIs.ts
This works great... maybe too great. I've now got a 17000 line typescript file full of clients for every endpoint in the API.
I know I could specify individual classes or controllers for nswag to generate, but I'd like it to be automatic for new controllers as we continue to build the system. Ideally, I'd probably be best served with a set of typescript files where each file represented a single controller.
Does anyone know how I might use the command line tools to break up the output that way?
I don't think this is possible with the current CLI tools, so I wrote a small console application which uses reflection to gather controllers from the webapi assembly, then calls the WebApiToSwaggerGenerator and SwaggerToTypeScriptClientGenerator for each controller individually.
This is not possible yet but you can follow this feature's progress on: https://github.com/RicoSuter/NSwag/issues/1398
The page contains some suggested workarounds. One is to use this tool:
https://github.com/hemiaoio/nswag-ts-splitter

Modifying Hyperledger Composer WebApp

I've completed the Hyperledger Composer Developer tutorial https://hyperledger.github.io/composer/tutorials/developer-guide.html and I've generated the BNA, deployed it to a local Hyperledger Fabric 1.0 instance, generated the REST API, and generated the skeleton webapp using yo.
However, I noticed that the resulting webapp only has a menu for adding assets, and none for adding participants and submitting transactions. I have two questions:
1) Why doesn't the webapp generate menus for adding participants and submitting transactions? (or does it, and how do I get it to do that?)
2) In an attempt to add the ability to add participants and submit transactions through the webapp, I've looked through the app directory for the relevant source code but became confused as I'm relatively new to web/angular dev.
Is there any reference documentation to show which source files need to be edited to add participants and transactions?
As far as I can tell, \src\app folder has the source files but I don't understand the roles that each of these files play:
app.component.html has the actual HTML menus, but what is this [routerLink] referring to?
I noticed for each asset that there is a subfolder with a CSS, HTML, and three .TS files. Are these needed for each participant as well?
Any direction or reference on how to modify the web app to accommodate adding participants and transactions would be much appreciated.
1) Why doesn't the webapp generate menus for adding participants and submitting transactions? (or does it, and how do I get it to do that?)
Because its a very simple skeleton NG2 app scoped to assets, which you as a developer can add to. You can easily add REST API calls (operations) from your Angular app to (for example) submit transactions. This is how you should interact with the runtime Fabric using Composer REST operations.
2) Is there any reference documentation to show which source files need to be edited to add participants and transactions?
This is a straightforward Angular tutorial https://angular.io/tutorial and here https://angular.io/guide/quickstart - and this tutorial will help explain Angular further.
The dataservice in the generated App is where the current 'asset' REST operation is called from and further REST operations can be added here -> /src/app/data.service.ts

Pentaho 5.0.1 CE Adding folder to pentaho-solutions directory

How do I get a folder to appear in the browser after adding it to \pentaho-solutions in Pentaho 5.0.1 CE. The documentation I read does not seem to work with this new version.
1. Create a new directory in /pentaho/server/biserver-ee/pentaho-solutions/.
Use underscores instead of spaces in the solution directory name. Ensure that the directory has the appropriate user
and group ownership to be writable from the BI Platform.
2. Using an XML-aware text editor (or Design Studio), create a file named index.xmlin your new solution directory.
3. Copy the following text into the index.xml file, changing the content accordingly:
***<index>
<name>Example Solution</name>
<description>This solution contains examples I created while learning to
work with action sequences.</description>
<icon></icon>
<visible>true</visible>
<display-type>icons</display-type>
</index>***
4. Save the file and close the text editor.
5. Log into the Pentaho User Console as an administrator.
6. Refresh the solution repository cache by going to the Toolsmenu, then selecting the Refreshsubmenu, then
clicking on Repository Cache.
You now have a new solution directory. It will show up in all file dialogues in the Pentaho User Console as well as the
Solution Browser in the left pane.
Every time you add or edit an action sequence to your solution directory, you must refresh the repository cache as
explained above. Each user currently logged into the Pentaho User Console must also refresh their session cache; this
is best done by re-logging into the Pentaho User Console.
I am using Pentaho design studio to develop an xaction sequence script. I followed this procedure:
1. In Design Studio, go to the Filemenu, then select New, and click on Other...in the sub-menu.
The Newwindow will appear.
2. In the Newwindow, click the triangle next to Pentaho, select New Action Sequence Wizard, then click Next.
3. In the File namefield, type hello_world.xaction.
4. Select Hello Worldfrom the Templatedrop-down box, then click Finish.
The wizard will generate the new file and bring you back to the workbench.
5. Click on HelloWorldComponentin the Process Actionssection on the left.
The right side of the screen will change to show the options available for this action: Nameand Message. The
Name field controls the name of the component in the Process Actions list on the left; it doesn't do anything else of
note. The Message field contains the text that will appear on the screen when the action sequence is run. It is prepopulated with %quote, which is a token that represents a quote message in a nonexistent properties file. Pentaho
used to provide properties files for each example, but they have been removed from the standard Pentaho Business
Analytics distribution.
6. Replace the %quotewith a sufficiently inspiring message.
Alternatively, you could create a hello_world.propertiesfile and populate it with the appropriate messages and
tokens, but that has no advantage unless you intend to internationalize this action sequence.
7. Save the file.
You now have a working action sequence that prints a short text message: "Hello, World." plus whatever you typed into
the Message field. The first part of the message is determined by a message bundle packaged with the Pentaho Web
application archive.
To test the action sequence, use the Test tab if you are on Windows or OS X, or log into the Pentaho User Console and
run it from the Solution Browser.
Running the sample xaction fails with
Sorry. We really did try.
Something went wrong. Please try again
or contact your administrator.
I figure this is because pentaho cannot locate the xaction file as specified in the file path when I generate the url from within design studio. The folder I created within the solution directory does not appear in the browser directory list despite refreshing the cache. Any help?
With Version 5 the files and folders are no longer stored in "/pentaho/server/biserver-ee/pentaho-solutions/..."
It is stored now in a jackrabbit repository.
You can create folders and upload files in the user console.
I did mistake after starting biserver 5.2. Unexpectedly i deleted Public folder after configuring to jackrabbit. Now how do i create the folder so that i can see Public and Home Folders.
Sorry for getting back to this question some time later, just in case someone searches something related to Pentaho repositories management with no success, i hope this information can help.
Just to make things more clear, i'm using version 5.2.x and i'm supposing you want to create a new folder on the root directory of Browse Files screen, something that is not allowed on Pentaho5 CE Web Console.
The answers about repository management based on JackRabbit are correct, so the old way we used to configure new "solutions" folders doesn't work anymore. From version 5 on, Pentaho exposes an interesting REST api that allows you doing things not allowed in web console.
For instance, for creating a folder in root directory you should create a http REST PUT request against Pentaho Server (using tools like curl or if you appreciate Google Chrome, something like Advanced Rest Client, etc.) using the following URL:
http://localhost:8080/pentaho/api/repo/dirs/:new_directory_name?userid=admin&password=password
Pentaho repository directory REST api is documented here:
http://javadoc.pentaho.com/bi-platform500/webservice500/resource_DirectoryResource.html
It's worthy to spend some time reading REST API the documentation.

ActiveX Control always working on my machine - unpredictable behavior on others?

I have a question about my ActiveX control not always working in IE on other machines.
Context: I'm working on an internal app for my company. It is designed to be a standalone web-page config tool for viewing a static customized version of our web app. The user may select the colors, images, and other settings they would like to see, and these will be present in the static mockup/preview version on their machine when they click a button.
Implementation: my javascript file creates a filesystem/activex object that essentially creates a temporary javascript file to which a list of values are written. Then when the user previews the configuration, the javascript file is located and values are loaded dynamically into the dom, etc etc. Naturally this functionality only works in Internet Explorer and is shady at best, but is my only way of implementing a purely zero configuration, client-side dynamic webapp.
Problem: When I test out my script, Internet Explorer prompts me twice about ActiveX controls and I say "yes" to them and the ActiveX functions work. I do this every single time I open my page. But sometimes when I send the file to another person so they can use it, they don't get the notifications so it doesn't work. However sometimes they do get notifications and it does work! I am using default security settings for IE so there should be no difference between my settings and theirs.
Could this be related to my user permissions vs theirs, or the fact that the files are read-only (because they are coming from source control and are also being made read-only when put on the shared drive.) or unknown dark Microsoft forces beyond human comprehension?
Thanks,
Josh
I believe you may want to create an HTA (HTML Application) instead of a web page. Writing HTA's gives you more privileges as far as ActiveX objects are concerned. Check out this page from Microsoft: http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx.
To answer your question about privileges, I believe that some of your coworkers' IE settings probably prevent web pages from using ActiveX objects. Your settings may be such that you are prompted whenever ActiveX object are about to be created.

Is there a tool that allows to edit related code in single file?

My idea is that it's much easier to edit related code when it sits in single "work" file. E.g. in Rails application when you implementing some functionality you may edit 1 function per file in the following files: integration test, controller test, controller, model, controller helper. So if it would be possible to 1) mark this code fragments 2) automatically collect them in "work" file 3) edit them togather 4) the tool synchronizes (puts back) the changes; it could simplify development process in many cases. Especially if you need to go through many tweek-and-try iterations.
Vim works fine for this. Install the Rails.vim(1) plugin and with the command :AV you can open a vertical split with the accompanied tests/specs, or :RV to open related files like migrations and views (depending on whether you're viewing model or controller). When you're workspace becomes to cluttered, use :only to go back to one file. Splits are the best way to manage multiple related files IMHO. You can even open the same file twice to see two parts of the same file. It's not exactly the same as you are describing, but it comes close.
1: http://rails.vim.tpope.net/
Just open up Vim and open some windows. What's the problem?

Resources