In my project I make a TabView programmatically and expect it to update its TabViewItem (changing title for example) whenever I set myTabView.items = newArray. Unfortunately, it doesn't work like that. Any help will be greatly appreciated.
Here are my code when I generate the TabView:
function initTabview(tabList: Array<string>) {
let items = [];
let myTabView = page.getViewById("myTabView");
for (let i in tabList) {
let stackLayout = new StackLayout();
let tabEntry = {
title: tabList[i],
view: stackLayout
};
items.push(tabEntry);
}
myTabView.items = items;
myTabView.on(TabView.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => {
// Some code here
});
}
Thank you very much.
Related
I would like to make a view disappear with a transition to the top, but I have no idea how to do this with SwiftUI. Here is my code so far:
struct MyList: View {
#State private var loading = true
#State private var elements: [MyElement] = []
var body: some View {
ZStack {
Color.white
List(elements) {
ListRow($0)
}
if loading {
LoadingView() // This is the view I want to slide to the top when hiding
.ignoresSafeArea()
}
}
.onAppear {
callAPI() { elements in
self.elements = elements
self.loading = false
}
}
}
}
I want to hide the LoadingView() with a slide-to-top transition, but don't know how.
Thank you for your help!
You could use the .transition modifier.
documentation
LoadingView()
.transition(.move(edge: .top))
But don´t forget to animate it:
.onAppear {
self.loading = true
callAPI() { elements in
self.elements = elements
DispatchQueue.main.async { // as this is probably from background Thread dispatch it
self.loading = false
}
}
}.animation(.default, value: loading)
I'm back again lol. My content view looks like:
struct ContentView: View {
#ObservedObject var VModel = ViewModel()
#State private var resultsNeedToBeUpdated: Bool = false
var body: some View {
VStack {
if self.resultsNeedToBeUpdated == true {
SearchResults(VModel: VModel, resultsNeedToBeUpdated: $resultsNeedToBeUpdated)
}
}
}
}
The SearchBar view looks like:
struct SearchResults: View {
var VModel: ViewModel
#Binding var resultsNeedToBeUpdated: Bool
var body: some View {
List {
ForEach(VModel.searchResults, id: \.self) { result in
Text(result)
}
}
}
}
Finally, the ViewModel class looks like:
class ViewModel: ObservableObject {
#Published var searchResults: [String] = []
func findResults(address: String) {
let Geocoder = Geocoder(accessToken: 'my access token')
searchResults = []
Geocoder.geocode(ForwardGeocodeOptions(query: address)) { (placemarks, attribution, error) in
guard let placemarks = placemarks
else {
return
}
for placemark in placemarks {
self.searchResults.append(placemark.formattedName)
print("Formatted name is: \(placemark.formattedName)") //this works
}
}
//I'm doing my printing on this line and it's just printing an empty array ;(
}
The variable 'resultsNeedToBeUpdated' is a boolean Binding that is updated when the user types some text into a search bar view, and it essentially just tells you that the SearchResults view should be displayed if it's true and it shouldn't be displayed if it's false. What I'm trying to do is update the SearchResults view depending on what the user has typed in.
The error is definitely something with the display of the SearchResults view (I think it's only displaying the initial view, before the array is updated). I tried using a binding because I thought it would cause the ContentView to reload and it would update the SearchResultsView but that didn't work.
Make view model observed, in this case it will update view every time the used #Published var searchResults property is changed
struct SearchResults: View {
#ObservedObject var VModel: ViewModel
// #Binding var resultsNeedToBeUpdated: Bool // << not needed here
additionally to above published properties should be updated on main queue, as
DispatchQueue.main.async {
self.searchResults = placemarks.compactMap{ $0.formattedName }
// for placemark in placemarks {
// print("Formatted name is: \(placemark.formattedName)") //this works
// }
}
I am using Nativescript with Angular and have a page where I photograph a receipt or add from gallery and add a couple of text inputs and send to server.
The Add from gallery is working fine in Android but not in iOS.
Here is the template code:
<Image *ngIf="imageSrc" [src]="imageSrc" [width]="previewSize" [height]="previewSize" stretch="aspectFit"></Image>
<Button text="Pick from Gallery" (tap)="onSelectGalleryTap()" class="btn-outline btn-photo"> </Button>
and the component:
public onSelectGalleryTap() {
let context = imagepicker.create({
mode: "single"
});
let that = this;
context
.authorize()
.then(() => {
that.imageAssets = [];
that.imageSrc = null;
return context.present();
})
.then((selection) => {
alert("Selection done: " + JSON.stringify(selection));
that.imageSrc = selection.length > 0 ? selection[0] : null;
// convert ImageAsset to ImageSource
fromAsset(that.imageSrc).then(res => {
var myImageSource = res;
var base64 = myImageSource.toBase64String("jpeg", 20);
this.expense.receipt_data=base64;
})
that.cameraImage=null;
that.imageAssets = selection;
that.galleryProvided=true;
// set the images to be loaded from the assets with optimal sizes (optimize memory usage)
selection.forEach(function (element) {
element.options.width = that.previewSize;
element.options.height = that.previewSize;
});
}).catch(function (e) {
console.log(e);
});
}
I have posted below the Android and iOS screenshots of the line:
alert("Selection done: " + JSON.stringify(selection));
In Android there is a path to the location of the image in the file system but in iOS there are just empty curly brackets where I'd expect to see the path and then when submitted the message back is "Unable to save image" although the image preview is displaying on the page in Image.
Here are the screenshots:
Android:
iOS:
Any ideas why it is failing in iOS?
Thanks
==========
UPDATE
I am now saving the image to a temporary location and it is still not working in iOS. It works in Android.
Here is my code now.
import { ImageAsset } from 'tns-core-modules/image-asset';
import { ImageSource, fromAsset, fromFile } from 'tns-core-modules/image-source';
import * as fileSystem from "tns-core-modules/file-system";
...
...
public onSelectGalleryTap() {
alert("in onSelectGalleryTap");
var milliseconds=(new Date).getTime();
let context = imagepicker.create({
mode: "single"
});
let that = this;
context
.authorize()
.then(() => {
that.imageAssets = [];
that.previewSrc = null;
that.imageSrc = null;
return context.present();
})
.then((selection) => {
that.imageSrc = selection.length > 0 ? selection[0] : null;
// convert ImageAsset to ImageSource
fromAsset(that.imageSrc)
.then(res => {
var myImageSource = res;
let folder=fileSystem.knownFolders.documents();
var path=fileSystem.path.join(folder.path, milliseconds+".jpg");
var saved=myImageSource.saveToFile(path, "jpg");
that.previewSrc=path;
const imageFromLocalFile: ImageSource = <ImageSource> fromFile(path);
var base64 = imageFromLocalFile.toBase64String("jpeg", 20);
this.expense.receipt_data=base64;
})
that.cameraImage=null;
that.imageAssets = selection;
that.galleryProvided=true;
// set the images to be loaded from the assets with optimal sizes (optimize memory usage)
selection.forEach(function (element) {
element.options.width = that.previewSize;
element.options.height = that.previewSize;
});
}).catch(function (e) {
console.log(e);
});
}
Any ideas? Thanks.
It is an already communicated issue, several of us subscribed for, check here issue #321
for updates.
I made a inline widget similar a placeholder (ckeditor4), but now I want to render a dropdown when the widget is selected to show options values to replace the placeholder. I trying use BalloonPanelView but no success until now, someone have a idea about how to make it?
this.editor.editing.view.document.on('click', (evt, data) => {
evt.stop();
const element = data.target;
if (element && element.hasClass('placeholder')) {
if (!element.getAttribute('data-is-fixed')) {
const balloonPanelView = new BalloonPanelView();
balloonPanelView.render();
['option1', 'option2', 'option3'].forEach((value) => {
const view = new View();
view.set({
label: value,
withText: true
});
balloonPanelView.content.add(view);
});
balloonPanelView.pin({
target: element
});
}
}
});
I found the solution using ContextualBalloon class:
import ContextualBalloon from "#ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon";
// Define ballon
const balloon = editor.plugins.get(ContextualBalloon);
const placeholderOptions = // Here I defined list with buttons '<li><button></li>'
// Finnaly render ballon
balloon.add({
view: placeholderOptions,
singleViewMode: true,
position: {
target: data.domTarget
}
});
I need to make a Firefox addon add a button to the address bar if the tab is in a certain domain.
I've managed to find the element navbar-icons for the current window and add a child, but that add the icon to all tabs for that window, instead of just the relevant tab. How can I do this?
EDIT:
Sorry i was on mobile and didn't include the code.
What i have so far:
var windowsUtils = require('sdk/window/utils');
var loadButton = function(doc, urlBtnClick) {
var urlBarIcons = doc.getElementById('urlbar-icons');
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'button-icon');
btn.setAttribute('image', self.data.url('./images/icon16.png'));
btn.click(onButtonClick);
urlBarIcons.appendChild(btn);
return btn;
}
var onButtonClick = function(event) {
console.log('i was clicked');
}
whenever i call the above i add a icon/button to every tab instead of the current active one.
This is a hacky implementation just using the SDK's tabs and button apis:
let { ActionButton } = require("sdk/ui/button/action");
let tabs = require('sdk/tabs');
let soButton;
tabs.on('activate', (tab) => {
if (/^http[s]*\:\/\/stackoverflow.com/.test(tab.url)) {
soButton = ActionButton({
id: "so-button",
label: "This is StackOverflow!!",
icon: {
"16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: function(state) {
console.log("clicked");
}
});
} else {
if (soButton && typeof (soButton.destroy === 'Function')) {
soButton.destroy();
}
}
});
It feels klugey to create / destroy the button every time we switch tabs, but the user experience is exactly what you want. A similar and perhaps 'better supported' approach might be instead to just disable the button.