I understand that JavaFX's Alert cannot be used yet with mobile apps. But what about the Gluon Charm Alert?
I have defined a Gluon Mobile MultiView FXML project. I've updated the gradle project's dependencies to include charm-2.2.0.jar, so the Gluon Charm Alert class is available. In order to use it, you also need access to javafx.scene.control.Alert.AlertType.
I don't seem to have compile-time access to the above AlertType class.
I'm using NetBeans 8.1 with the most recent Gluon/Gradle plug-in on a Mac with OS X 10.11.14. Is there an additional configuation dependency I must define?
Thanks in advance for any help.
Here is my build.gradle file.
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'org.javafxports:jfxmobile-plugin:1.0.8'
}
}
apply plugin: 'org.javafxports.jfxmobile'
repositories {
jcenter()
maven {
url 'http://nexus.gluonhq.com/nexus/content/repositories/releases'
}
}
mainClassName = 'com.capitals.Capitals'
dependencies {
compile 'com.gluonhq:charm:2.2.0'
androidRuntime 'com.gluonhq:charm-android:2.2.0'
iosRuntime 'com.gluonhq:charm-ios:2.2.0'
desktopRuntime 'com.gluonhq:charm-desktop:2.2.0'
}
jfxmobile {
android {
manifest = 'src/android/AndroidManifest.xml'
}
ios {
infoPList = file('src/ios/Default-Info.plist')
forceLinkClasses = [
'com.asgteach.capitals.**.*',
'com.gluonhq.**.*',
'io.datafx.**.*',
'javax.annotations.**.*',
'javax.inject.**.*',
'javax.json.**.*',
'org.glassfish.json.**.*'
]
}
}
You can access JavaFX Alert.AlertType class, without the need of adding any dependency.
Make sure you are using the latest version of the jfxmobile plugin (1.0.8).
This works on desktop and mobile:
import com.gluonhq.charm.glisten.control.Alert;
import com.gluonhq.charm.glisten.control.AppBar;
import com.gluonhq.charm.glisten.mvc.View;
import com.gluonhq.charm.glisten.visual.MaterialDesignIcon;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
public class BasicView extends View {
public BasicView(String name) {
super(name);
Button button = new Button("Show alert");
button.setOnAction(e -> {
Alert alert = new Alert(AlertType.INFORMATION, "This is an Alert!");
alert.showAndWait();
});
setCenter(new StackPane(button));
}
}
If it isn't the case for you, post your build.gradle and any exception you may have.
Related
Fast Refresh is broken in some Detox tests and I need to disable it from Javascript, without using the Developer Menu.
Any idea?
Found the answer in the source code
For version 0.61:
import { NativeModules } from 'react-native';
if (__DEV__) {
const { DevSettings } = NativeModules;
DevSettings.setHotLoadingEnabled(false);
DevSettings.setLiveReloadEnabled(false);
}
For version >= 0.62:
import { DevSettings } from "react-native"
if (__DEV__) {
DevSettings._nativeModule.setHotLoadingEnabled(false);
}
For React Native 0.63, it seems like something broke with the accepted answer. However, just toggling the property makes it work:
import { DevSettings } from "react-native"
if (__DEV__) {
DevSettings._nativeModule.setHotLoadingEnabled(true);
DevSettings._nativeModule.setHotLoadingEnabled(false);
}
I'm curious if this works for others.
I had same issue with RN 0.63.4 and fixed that by adding a patch.
I noticed this is already fixed in 0.64.0 version and here is the PR.
you can either upgrade or add a patch to fix this. this worked for me.
Here's a capacitor plugin I found https://github.com/JhonArlex/capacitor_qrcode
and I want it to integrate it to my ionic app, on web serve it works as expected, but when I try on livereload on android, the error screen pops out and says the plugin is undefined..
import "capacitor_qrcode";
import { Plugins } from "#capacitor/core";
//..
await Plugins.QRCodePlugin.getCodeQR();
// QRCodePlugin is undefined?
I'm using Ionic React Capacitor... also would appreciate if you can suggest any other way I could integrate QR code scanning feature on my app thanks!
When using your own plugins you need to register/add it into your android MainActivity.
https://capacitor.ionicframework.com/docs/plugins/android#export-to-capacitor
Like this:
import com.jhon.capacitor_qrcode.QRCodePlugin;
public class MainActivity extends BridgeActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Initializes the Bridge
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
// Additional plugins you've installed go here
// Ex: add(TotallyAwesomePlugin.class);
add(QRCodePlugin.class);
}});
}
}
I'm building a React application bundled using Parcel or Webpack.
The application should be able to embed external React components
developed by third-parties and hosted elsewhere as modern javascript modules:
// https://example.com/scripts/hello-plugin.js
import React from 'react';
export default class HelloPlugin extends React.Component {
render() {
return "Hello from external plugin!";
}
}
Host application loads these components using asynchronous import like this, for example:
// createAsyncComponent.tsx
import * as React from 'react';
import { asyncComponent } from 'react-async-component';
export default function createAsyncComponent(url: string) {
return asyncComponent({
resolve: () => import(url).then(component => component.default),
LoadingComponent: () => <div>Loading {url}....</div>,
ErrorComponent: ({ error }) => <div>Couldn't load {url}: {error.message}</div>,
})
}
But looks like bundlers don't allow importing arbitrary urls as external javascript modules.
Webpack emits build warnings: "the request of a dependency is an expression" and the import doesn't work. Parcel doesn't report any errors, but fails when import(url) occurs at runtime.
Webpack author recommends using scriptjs or little-loader for loading external scripts.
There is a working sample that loads an UMD component from arbitrary URL like this:
public componentDidMount() {
// expose dependencies as globals
window["React"] = React;
window["PropTypes"] = PropTypes;
// async load of remote UMD component
$script(this.props.url, () => {
const target = window[this.props.name];
if (target) {
this.setState({
Component: target,
error: null,
})
} else {
this.setState({
Component: null,
error: `Cannot load component at ${this.props.url}`,
})
}
});
}
Also, I saw a similar question answered a year ago where the suggested approach also involves passing variables via a window object.
But I'd like to avoid using globals given that most modern browsers support modules out of the box.
I'm wondering if it's possible. Perhaps, any way to instruct the bundler that my import(url) is not a request for the code-split chunk of a host application, but a request for loading an external Javascript module.
In the context of Webpack, you could do something like this:
import(/* webpackIgnore: true */'https://any.url/file.js')
.then((response) => {
response.main({ /* stuff from app plugins need... */ });
});
Then your plugin file would have something like...
const main = (args) => console.log('The plugin was started.');
export { main };
export default main;
Notice you can send stuff from your app's runtime to the plugin at the initialization (i.e. when invoking main at the plugin) of the plugins so you don't end up depending on global variables.
You get caching for free as Webpack remembers (caches) that the given URL has already loaded so subsequent calls to import that URL will resolve immediately.
Note: this seems to work in Chrome, Safari & firefox but not Edge. I never bothered testing in IE or other browsers.
I've tried doing this same sort of load with UMD format on the plugin side and that doesn't seem to work with the way Webpack loads stuff. In fact it's interesting that variables declared as globals, don't end up in the window object of your runtime. You'd have to explicitly do window.aGlobalValue = ... to get something on the global scope.
Obviously you could also use requirejs - or similar - in your app and then just have your plugins follow that API.
Listen to the Webpack author. You can't do (yet) what you're trying to do with Webpack.
You will have to follow his suggested route.
I would like to create a custom page using react but I cannot find the documentation to do this. On the Sonarqube documentation, there only the way to create a custom page using javascript only and I don’t understand how the example plugin works with react.
Can you tell me if there is a documentation that I can use.
Short answer: There isn't. There is barely anyone (no one in fact, as far as I've seen) using custom pages currently.
However, it IS possible. You need to create a react project with Webpack (or a similar JS packager).
I also recommend using Create-React-App. This fixes a lot of the setup for you. After that, in your index.js you use the example code from the SonarQube wiki.
Here is an example:
/*
PRODUCTION ENTRYPOINT
*/
import React from 'react';
import ReactDOM from 'react-dom';
import Project from './components/Project';
import './main.css';
window.registerExtension('myplugin/coverage', function (options) {
appendCustomCSS();
let isDisplayed = true;
window.SonarRequest.getJSON('/api/measures/component', {
component: options.component.key,
metricKeys: 'coverage'
}).then(function (response) {
if (isDisplayed) {
let obj = JSON.parse(response.component.measures[0].value);
let div = document.createElement('div');
render(obj, div);
options.el.appendChild(div);
}
});
return function () {
isDisplayed = false;
};
});
function appendCustomCSS() {
let fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "/static/myplugin/coverage.css");
document.head.append(fileref);
}
function render(objectArray, container) {
ReactDOM.render(<div className="Coverage"><Project objects={objectArray}/></div>, container);
}
I had a project which used youtube-api-search in it. it works there fine.
I have created a sharepoint framework template with yeoman "yo #microsoft/sharepoint" and installed youtube api package as I did in previous project. but when I run this project I encounter an error like below;
Cannot find module 'youtube-api-search'
as I said its working in other react project do i need something specially to make it work here ?
I installed api via "npm i youtube-api-search --save-dev" command
here main component content;
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Announcements.module.scss';
import { IAnnouncementsProps } from './IAnnouncementsProps';
//I have added only these 2 lines to default code
import YTSearch from 'youtube-api-search';
const YOUTUBE_API_KEY = "AIzaSyCI9gcceui5zcQDAEwbyv...";
export default class Announcements extends React.Component<IAnnouncementsProps, void> {
public render(): React.ReactElement<IAnnouncementsProps> {
return (
...
);
}
}
we can import modules in three methods
FIRST::Using Config-->config.json and change
"externals": {
"jquery": "https://code.jquery.com/jquery-3.1.0.min.js",
"OwlCarousel":{
"path":"./node_modules/react-owl-carousel/lib/OwlCarousel.min.js",
"globalName":"OwlCarousel"
},
"Slider":{"path":"./node_modules/react-slick/lib/slider.js",
"globalName":"Sliders"}
},
SECOND:: npm install #types/youtube-api-search --save
THIRD ::
`npm install typings`
`typings install dt~youtube-api-search -global --save`
sometimes dt~ is neccessary sometimes it is not necessaary