how to use external Javascript library in vaadin? - vaadin

I want to use an external js library in my vaadin application.
i installed the library with the command npm install #iota/identity-wasm and now it is inside the node_modules folder.
The JS code can also be executed without any problems, which means that the library is installed correctly.
However, if I set the annotation #JsModule("./register.js") in my Java class, Then I get the error message that the external Js-Bib is not found.
the register.js file is in the frontend folder.
this is how my Java class looks now
#Route("")
#NpmPackage(value = "#iota/identity-wasm", version = "0.6.0")
#JsModule("#iota/identity-wasm/node/identity_wasm.js")
#JsModule("./register.js")
public class RegisterView extends VerticalLayout { .... }
this is what i get when i go to localhost
=============================UPDATE=============================
Thanks to the hint from ( Sascha Ißbrücker ) The frontend can now be compiled successfully. but I still can't execute any Js-code( from the #iota/identity-wasm library) in my Vaadin application.
so the js code should be executed when i click on a button.
this is what my Js code looks like, what I want to execute from my Java code
const {AccountBuilder, ExplorerUrl} = require('#iota/identity-wasm/web')
window.register = {
createDid : async function (){
console.log("creating identity... This might take some time to complete POW")
let builder = new AccountBuilder();
let account = await builder.createIdentity();
let did = account.did();
console.log(`Explorer Url:`, ExplorerUrl.mainnet().resolverUrl(did));
return account.document();
}
}
This is what is should happen after I click my Vaadin button (Java-Code)
Button submit = new Button("Submit");
submit.addClickListener(
event -> UI.getCurrent()
.getPage()
.executeJs("return register.createDid()")
.then(s-> System.out.println(s))
);
Should i do anything else in the java code to make this work ??
best regards

Related

Xamarin & Multiple Filepicker

i'm building a project on Xamarin. Right now i have a big issue. I need to browse user's computer for upload any file. He can of course upload multiple files. As i know Xamarin does not provide browsing of all the system but just its. So i tried to find a way with some drag n drop, i didn't find. I tried a filepicker but he let me pick just one file (my client would upload 100 files at once) so it doesn't fit to what i need. Finally i decided to do my own browsing system but it takes forever to browse because of the UI. Do you have any solution for me ? I would appreciate a package with a filepicker that allow multiple files.
Thanks
Have you tried the class FileOpenPicker in UWP ?
It supports to pick multiple files , check the method FileOpenPicker.PickMultipleFilesAsync.
Sample
Define interface in Forms project
public interface MyFilePicker
{
Task OpenFilePickerAsync();
}
Implement in UWP project
[assembly: Dependency(typeof(UWPFilePicker))]
namespace App24.UWP
{
class UWPFilePicker : MyFilePicker
{
public async Task OpenFilePickerAsync()
{
var openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".png");
IReadOnlyList<StorageFile> files = await openPicker.PickMultipleFilesAsync();
if (files.Count > 0)
{
StringBuilder output = new StringBuilder("Picked files:\n");
// Application now has read/write access to the picked file(s)
}
else
{
return;
}
}
}
}
Call it in Forms project
private async void Button_Clicked(object sender, EventArgs e)
{
MyFilePicker service = DependencyService.Get<MyFilePicker>();
await service.OpenFilePickerAsync();
}

Dart build runner generate one dart file with content

I am working on a dart package with includes over 200 models and at the moment i have to write manually one line of "export" for each model, to make the models available for everyone who uses this package.
I want the build runner to generate one dart file which contains every export definition.
Therefore I would create an annotation "ExportModel". The builder should search for each class annotated with this annotation.
I tried creating some Builders, but they will generate a *.g.dart file for each class that is annotated. I just want to have one file.
Is where a way to create a builder that runs only once and creates a file at the end ?
The short answer to your question of a builder that only runs once and creates a single file in the package is to use r'$lib$' as the input extension. The long answer is that to find the classes that are annotated you probably want an intermediate output to track them.
I'd write this with 2 builders, one to search for the ExportModel annotation, and another to write the exports file. Here is a rough sketch with details omitted - I haven't tested any of the code here but it should get you started on the right path.
Builder 1 - find the classes annotated with #ExportModel().
Could write with some utilities from package:source_gen, but can't use LibraryBuilder since it's not outputting Dart code...
Goal is to write a .exports file next to each .dart file which as the name of all the classes that are annotated with #ExportModel().
class ExportLocatingBuilder implements Builder {
#override
final buildExtensions = const {
'.dart': ['.exports']
};
#override
Future<void> build(BuildStep buildStep) async {
final resolver = buildStep.resolver;
if (!await resolver.isLibrary(buildStep.inputId)) return;
final lib = LibraryReader(await buildStep.inputLibrary);
final exportAnnotation = TypeChecker.fromRuntime(ExportModel);
final annotated = [
for (var member in lib.annotatedWith(exportAnnotation)) element.name,
];
if (annotated.isNotEmpty) {
buildStep.writeAsString(
buildStep.inputId.changeExtension('.exports'), annotated.join(','));
}
}
}
This builder should be build_to: cache and you may want to have a PostProcessBuilder that cleans up all the outputs it produces which would be specified with applies_builder. You can use the FileDeletingBuilder to cheaply implement the cleanup. See the FAQ on temporary outputs and the angular cleanup for example.
Builder 2 - find the .exports files and generate a Dart file
Use findAssets to track down all those .exports files, and write an export statement for each one. Use a show with the content of the file which should contain the names of the members that were annotated.
class ExportsBuilder implements Builder {
#override
final buildExtensions = const {
r'$lib$': ['exports.dart']
};
#override
Future<void> build(BuildStep buildStep) async {
final exports = buildStep.findAssets(Glob('**/*.exports'));
final content = [
await for (var exportLibrary in exports)
'export \'${exportLibrary.changeExtension('.dart').uri}\' '
'show ${await buildStep.readAsString(exportLibrary)};',
];
if (content.isNotEmpty) {
buildStep.writeAsString(
AssetId(buildStep.inputId.package, 'lib/exports.dart'),
content.join('\n'));
}
}
}
This builder should likely be build_to: source if you want to publish this file on pub. It should have a required_inputs: [".exports"] to ensure it runs after the previous builder.
Why does it need to be this complex?
You could implement this as a single builder which uses findAssets to find all the Dart files. The downside is that rebuilds would be much slower because it would be invalidated by any content change in any Dart file and you'd end up parsing all Dart code for a change in any Dart code. With the 2 builder approach then only the individual .exports which come from a changed Dart file need to be resolved and rebuilt on a change, and then only if the exports change will the exports.dart file be invalidated.
Older versions of build_runner also didn't support using the Resolver to resolve code that isn't transitively imported from the input library. Recent version of build_runner have relaxed this constraint.

Using DataConnectionDialog

When I am attempting to use the DataConnectionDialog from NuGet (version 1.2), I receive the Advanced Settings dialog for setting up the Database Connection. Is there some Setting I have missed or additional library to retreive?
Code:
using System;
using Microsoft.Data.ConnectionUI;
DataConnectionDialog dcd = new DataConnectionDialog();
DataSource.AddStandardDataSources(dcd);
dcd.SelectedDataSource = DataSource.SqlDataSource;
dcd.SelectedDataProvider = DataProvider.SqlDataProvider;
DataConnectionDialog.Show(dcd);
Output:
What I want (this comes from the datasource wizard in Visual Studio Community 2015):
I happened to stumble on the same issue. From my main form, I called an async method using Task.Factory.StartNew. This method tries to open the Data Connection Dialog but it would show the Advance Settings dialog box instead.
During troubleshooting, I replaced the DataConnectionDialog with a OpenFileDialog and this gave me a ThreadStateException which pointed me towards the solution.
To solve it, I had to put the code in a separate function, e.g. AskConnectionString and call it using Control.Invoke.
e.g.
public void btnConnString_Click(object sender, EventArgs e)
{
_connectionString = (string)this.Invoke(AskConnectionString);
}
public string AskConnectionString()
{
DataConnectionDialog dcd = new DataConnectionDialog();
DataSource.AddStandardDataSources(dcd);
dcd.SelectedDataSource = DataSource.SqlDataSource;
dcd.SelectedDataProvider = DataProvider.SqlDataProvider;
DataConnectionDialog.Show(dcd);
return dcd.ConnectionString;
}

Vaadin 7 : How to import JS files from custom path?

I am using Vaadin-7 and this answer was not fix for me .
I am trying to import my js file under myproject/WebContent/js/test.js . I used #JavaScript in my UI class as below..
#Theme("myTheme")
#SuppressWarnings("serial")
#Title("VaadinTest")
#JavaScript("js/test.js")
public class VaadinTest extends UI {
#Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
}
}
But I got "NetworkError: 404 Not Found - http://localhost:8080/myproject/APP/PUBLISHED/js/test.js" error log in my firebug console.
So , how can I import js files from my custom directories ?
PS: Please don't be force me to create APP/PUBLISHED/ directory manually ! Thanks.
You can use app://:
#JavaScript({ "app://js/test.js" })
or use:
#JavaScript({ "vaadin://js/test.js" })
Generated url inside VAADIN folder:
http://localhost:8080/myproject/VAADIN/js/test.js
the file you refer to must be reachable by the classloader relative to the package you are using it in. according to your example, lets say your package of VaadinTest is com.example.app and you want to access it as js/test.js you have to put it in the directory com/example/app/js/test.js in a "root" for the classloader to find it (e.g. src/main/java,groovy or where resources are loaded from in your config).

Adobe air Native Process only works in the flash environment, but when deployed i get Error #3219

I've been trying to use ffmpeg with an air app that I made in flash cs5.5. I have it so that ffmpeg.exe needs to be located in the directory where the air app is installed (File.applicationDirectory.nativePath).
For some reason this only works when I run the program through the flash dev environment. But when I actually deploy the app, I get error #3219:The NativeProcess could not be started. ffmpeg.exe is located in the same folder.
I actually don't know the full message that it gives...not sure what the property of the error that will give me that message when I catch it. All I know is that it's error 3219.
Would this be a profile issue? If i didn't have the extended desktop desktop profile, I don't think I would be able to get this error, I'd get a profiling error wouldn't I?
I've disabled user access control as well...I'm using windows 7.
So I'm the OP, and I just realized that you can't use native process calls if you do not install the air application through the exe installer, which is an option in publish settings. I've been using the air installer.
one thing to mention is that (I'm sure you already know) the NativeProcess works only on that OS where it was compiled, so if you compile on a windows box your NativeProcess will only work on windows and not on unix/mac.
I don't know how you call the native process, but here is a code snippet that I extracted of one of my working Classes, maybe comparing it with your aproach it will give you some hint to find the problem :)
import flash.desktop.*;
import flash.errors.*;
import flash.events.*;
import flash.filesystem.*;
public function execute():void
{
var executablePath:String = "C:\ffmpeg.exe";
var parametersString:String = "-i input.avi -b 64k output.avi";
if(NativeProcess.isSupported) {
var args:Vector.<String> = new Vector.<String>();
var file:File = new File(String(executablePath));
var parameters:Array;
parameters = parametersString.split(" ");
for each ( var parameter:String in parameters ) {
args.push(parameter);
}
}
var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
nativeProcessStartupInfo.executable = file;
nativeProcessStartupInfo.arguments = args;
startExecution(nativeProcessStartupInfo);
}
private function startExecution(nativeProcessStartupInfo:NativeProcessStartupInfo):void
{
var nativeProcess:NativeProcess = new NativeProcess();
nativeProcess.addEventListener(NativeProcessExitEvent.EXIT, onExitError);
var msg:String = "";
try {
nativeProcess.start(nativeProcessStartupInfo);
trace("Trying to start process");
} catch (error:IllegalOperationError) {
trace("Illegal Operation: "+error.toString());
} catch (error:ArgumentError) {
trace("Argument Error: "+error.toString());
} catch (error:Error) {
trace("Error: "+error.toString());
}
if (nativeProcess.running) {
trace("Native Process Support");
}
}
public function onExitError(event:NativeProcessExitEvent):void
{
trace("Native Process Exit code: "+event.exitCode);
}

Resources