Develop Reference

Flutter webview loader error on IOS Device

I've created a project in flutter that uses a webview widget. I also tried the webviewx widget to fix the error I got in the project. but I am still getting the same error. The loader is running while the page is loading and the loader is closing after the page is loaded.
There is a back button on the website. When this button is clicked, the "javascript:history.back()" code is running. On iOS devices, the loader starts and does not close. On android it works normally. I leave the code used below. thank you for your help.
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:webviewx/webviewx.dart';
import 'package:onesignal_flutter/onesignal_flutter.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';
void main() {
runApp(Eren());
OneSignal.shared.setAppId("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
// The promptForPushNotificationsWithUserResponse function will show the iOS or Android push notification prompt. We recommend removing the following code and instead using an In-App Message to prompt for notification permission
OneSignal.shared.promptUserForPushNotificationPermission().then((accepted) {
print("Accepted permission: $accepted");
});
}
bool isLoading = true;
String adres='';
Timer? timer;
int _start = 10;
class Eren extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(child: webViewWidget()),
),
);
}
}
_launchURL(String url) async {
if (url.startsWith('tel:')) {
launchUrl(
Uri.parse(url),
mode: LaunchMode.platformDefault,
);
}
if (url.startsWith('https')) {
launchUrl(
Uri.parse(url.toString()),
mode: LaunchMode.externalApplication,
);
}
if (url.startsWith('http')) {
launchUrl(
Uri.parse(url.toString()),
mode: LaunchMode.externalApplication,
);
}
}
class webViewWidget extends StatefulWidget {
const webViewWidget({Key? key}) : super(key: key);
#override
State<webViewWidget> createState() => _webViewWidgetState();
}
class _webViewWidgetState extends State<webViewWidget> {
#override
Widget build(BuildContext context) {
return Stack(
children: [
WebViewX(
width: double.infinity,
height: double.infinity,
onPageFinished: (finish) {
setState(() {
isLoading = false;
});
},
onPageStarted: (start) {
setState(() {
isLoading = true;
});
},
javascriptMode: JavascriptMode.unrestricted,
initialContent: 'https://www.etcxxx.com',
navigationDelegate: (NavigationRequest request) {
adres=request.content.sourceType.toString();
print("tür:"+request.content.sourceType.toString());
if (request.content.source
.startsWith("https://www.etcxxx.com") ||
request.content.source.startsWith("https://etcxxx.com") ||
request.content.source
.startsWith("http://www.etcxxx.com") ||
request.content.source.startsWith("http://etcxxx.com")) {
print('dahili link');
return NavigationDecision.navigate;
} else {
print('harici link');
_launchURL(request.content.source);
return NavigationDecision.prevent;
}
},
),
isLoading
? Container(
decoration:
BoxDecoration(color: Colors.grey.shade200.withOpacity(0.7)),
child: Center(
child: CircularProgressIndicator(
color: Colors.deepOrangeAccent,
strokeWidth: 5,
),
),
)
: Stack(),
],
);
}
}
flutter webview loader error

Ag-grid button in cell that directs to new screen

I have added the "Edit" button in the grid of the table for every row. The data for the table is coming from the api with the following JSON response.
{
Id: 1783
total: 2
trasfer: true
Sizing: true
name: "runner"
}
I am trying to implement when user clicks the edit button a new screen appears where one can edit the values of that row. So far I have implemented a button rendered component and alert when the button is click. How can I implement router to a new screen along with editable data of that particular row.
Demo: https://ag-grid2.zoltanhalasz.net/
button-renderer.component.ts
#Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
afterGuiAttached?(params?: import("ag-grid-community").IAfterGuiAttachedParams): void {
return;
}
ngAfterViewInit(): void {
return;
}
public params;
label: string;
constructor(){}
agInit(params: ICellRendererParams): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params: any): boolean {
return false;
}
public onClick(event) {
this.params.data[this.params.colDef.field] = event.checked;
if (typeof this.params.context.componentParent.notifyCellUpdate === "function"){
this.params.context.componentParent.CellUpdate(this.params);
}
}
}
app.component.ts
columnDef = [ {
headerName: 'Button', field : 'changeSettings',
cellRenderer: 'buttonRenderer',
cellStyle: {'text-align': 'center'},
cellRendererParams: {
label: 'Open'
}
} ]
CellUpdate(params){
if (params.colDef.field === "changeSettings"){
alert("Notified Button Clicked");
}
}

Create a component and navigate to it with input data.
There are many ways for transforming data between components.
Read this article
In your sample demo you should define route with an id and navigate to it's component then call an api to fetch the data.
Also you can open a modal to show the data instead.
Example:
CellUpdate(params){
if (params.colDef.field === "changeSettings"){
const modalRef = this.modalService.open(YourEditComponent);
modalRef.componentInstance.data= params;
}
}

Vue.js mounted method called twice

The method this.fillForm() of my Vue component C (EditComment) is called twice, but I'm having trouble understanding why. I tried using uuid, but don't know how it helps knowing that beforeCreate is called twice.
There are 3 components. Here are the relevant parts:
Component A:
showCommentDialog: function(recordNumber) {
this.$modal.show(
ShowComment,
{
commentRecId: recordNumber
},
{
draggable: true,
width: 400,
height: 250
},
{
closed: function(event) {}
}
);
Component B:
<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>
</div>
</template>
<script>
import * as $ from "jquery";
import EditComment from "./EditComment.vue";
export default {
props: ["commentRecId"],
data: function() {
with this function
editItem: function(){
this.showEdit = true;
console.log("editItem function() called!");
var playerID = this.$store.state.selectedPlayer.ID;
this.$modal.show(
EditComment,
{
text: playerID
},
{
draggable: true,
width: 400,
height: 400
})
}
Component C:
<script>
import * as $ from "jquery";
import DatePicker from "vue2-datepicker";
let uuid = 0;
export default {
props: ["text", "commentRecId"],
beforeCreate() {
this.uuid = uuid.toString();
uuid += 1;
console.log("beforeCreate() uuid: " + this.uuid);
},
components: { DatePicker },
data: function() {
return {
commentData: {
comment: "",
customDate: ""
},
selectedCategory: "",
lang: {
default: "en"
},
}
},
mounted: function() {
// console.log("this._uid: " + this._uid);
this.fillForm();
},
methods: {
fillForm: function(){
Any help is appreciated.

If I understand correctly your problem, you fired component C with this section of editItem method:
this.$modal.show(
EditComment,
{
text: playerID
},
{
draggable: true,
width: 400,
height: 400
})
if I'm right, you have a mistake in your method:
when you use v-if, vue fires your component and it resets all values which you passed it before, like props, data values (except your uuid because it's not a data property)
so in your method you fire your component twice with :
this.showEdit = true;
anyway...for solution, please try this way:
first, use "v-show" instead of "v-if"
then show your component by this.$modal.show()
I hope can help

How to build React checkbox tree

I'm trying to work with a checkbox tree component like this: https://www.npmjs.com/package/react-checkbox-tree, except I'm storing the items that I have selected in Redux. Moreover, the only items that I'm actually storing are the leaf nodes in the tree. So for example, I'd have the full options data which would be used to render the tree:
const fam = {
cuz2: {
name: 'cuz2',
children: {
cuzKid2: {
name: 'cuzKid2',
children: {
}
}
}
},
grandpa: {
name: 'grandpa',
children: {
dad: {
name: 'dad',
children: {
me: {
name: 'me',
children: {}
},
sis: {
name: 'sis',
children: {}
}
}
},
aunt: {
name: 'aunt',
children: {
cuz: {
name: 'cuz',
children: {
name: 'cuzkid',
children: {}
}
}
}
}
}
}
and a separate object that stores the items selected. The following would be the only items that would appear if every checkbox was checked:
const selected = {
cuz2: true,
me: true,
sis: true,
cuz: true
}
I seem to be struggling with this method for having the UI determine which boxes to have fully, partially, or un-checked based on the selected object. I was wondering if anyone can recommend another strategy of accomplishing this.

So I have used react-checkbox-tree but I have customised a bit the icons in order to use another icons library.
Check my example on sandbox:

The library provides a basic example of how to render a tree with selected and/or expanded nodes.
All you need to do is:
set up the nodes with a unique 'value'
Choose which items should be selected (it may comes from Redux)
pass nodes & checked list to the CheckBox constructor
also be sure that when user select/unselect, you update the UI properly using the state
Your code should look similar to this:
import React from 'react';
import CheckboxTree from 'react-checkbox-tree';
const nodes = [{
value: '/cuz2',
label: 'cuz2',
children: [],
},
// other nodes
];
class BasicExample extends React.Component {
state = {
checked: [
'/cuz2'
],
expanded: [
'/cuz2',
],
};
constructor(props) {
super(props);
this.onCheck = this.onCheck.bind(this);
this.onExpand = this.onExpand.bind(this);
}
onCheck(checked) {
this.setState({
checked
});
}
onExpand(expanded) {
this.setState({
expanded
});
}
render() {
const {
checked,
expanded
} = this.state;
return (<
CheckboxTree checked={
checked
}
expanded={
expanded
}
nodes={
nodes
}
onCheck={
this.onCheck
}
onExpand={
this.onExpand
}
/>
);
}
}
export default BasicExample;

Targeting specific component elements in QML

CSS makes it super easy to have on hover effects for specific buttons/elements in yhour DOM. I'm trying to create a landing page of sorts for a desktop app, but I'm trying to get around having to copy paste specific states for each object I create in my main.qml.
Heres my main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
NavBar
{
id: mainNavigation
}
}
NavButton.qml
Rectangle
{
id: navButton
height: parent.height
width: parent.width / 3 - 10
color: "orange"
MouseArea
{
state: "unhovered"
hoverEnabled: true
height: parent.height
width: parent.width
onHoveredChanged:
{
console.log("hovered")
if(this.state == "hovered")
{
parent.state = "unhovered"
}
else
{
parent.state = "hovered"
}
}
} // end mouse area
states:
[
State
{
name: "hovered"
PropertyChanges
{
target: navButton
width: parent.width
color: "red"
}
},
State
{
name: "unhovered"
PropertyChanges
{
target: navButton
width: parent.width
color: "orange"
}
}
]
}
NavBar.qml
import QtQuick 2.0
import QtQuick.Controls 1.4
Row
{
id: navigationBar
height: parent.height / 3
width: parent.width
spacing: 15
anchors.centerIn : parent
NavButton
{
id: selectDevice
}
NavButton
{
id: deviceConfig
}
NavButton
{
id: deviceInfo
}
}
right now when I hover over one of these navButtons all three of them expand in size, as apposed to having just the one I hovered over expand and change color. I'm hoping that like with CSS and Javascript, there's a way to target the element that is the subject of the hover event.
I've already tried used parent as the target of the states, but that doesn't seem to work. I've done a bit of hunting for a solution and I don't see anything obvious that allows me to accomplish this. the only alternative I see is to add states to each individual navButton inside my navBar file.
I really hope that isn't the case, as that would be a really verbose solution to a simple problem.
What I really need is a way to target just the element the event is occurring on.

You can simply scrap all those states and whatnot, which are really not needed for such a trivial scenario:
Rectangle {
id: navButton
height: parent.height
width: parent.width / 3 - 10
color: ma.containsMouse ? "red" : "orange"
property alias hoverEnabled: ma.hoverEnabled
MouseArea {
id: ma
anchors.fill: parent
}
}
And you save yourself a bunch of code too. Then simply have hoverEnabled: true for all buttons you want to hover.
Or you can create an auxiliary type called HoverButton.qml which is just a NavButton { hoverEnabled: true } if you want to avoid setting it for each and every button.
I would also recommend to switch the nesting order of your button:
MouseArea {
id: navButton
height: parent.height
width: parent.width / 3 - 10
Rectangle {
anchors.fill: parent
color: navButton.containsMouse ? "red" : "orange"
}
}
This avoids the need to use a property alias, saves you one id and allows you to bind to the mouse area handler hooks directly, something you cannot do in your original code without redirecting the signal with an additional handler and signal.
Finally, I don't think it will be productive to look at QML as if it is HTML, QML is not HTML, and it comes with its own usage paradigms.