Using Chart.pluginService.register I drew a line on chart for some requirement on Page B (lets say). I go to Page B from Page A.
Now when I go back to page A and again go to Page B, the line drawn on the chart starts getting darker.
How to unregister that plugin when I go back to Page A?
I saw an unregister and clear function on this source: https://github.com/chartjs/Chart.js/blob/647dc582cd85fc8e25d49cf0e38d459c582b2652/src/core/core.plugin.js
Unregister function has no effect. Clear function clears the previously drawn line but the legend of the chart disappears.
Adding
ngOnDestroy() {
Chart.pluginService.unregister(this.horizonalLinePlugin);
}
in your ProductDetailComponent shoud do the trick.
https://stackblitz.com/edit/angular-uxfwqb?file=src/app/product-detail/product-detail.component.ts
The problem here is that if you have multiple chart components visible at the same time, the plugin will be visible in all the other charts.
The better fix:
register the plugin only once, outside of ngInit... directly in the module file or somewhere globally. This will impact all the charts in the entire application but will make it unnecessary to unregister it so it is clear that it's something global that impacts all charts.
create your own wrapper component/directive over chart.js (or a pull request for angular2-chartjs) that can accept a plugins input and pass it to the Chart constructor http://www.chartjs.org/docs/latest/developers/plugins.html:
var chart1 = new Chart(ctx, { plugins: [plugin] }); This will allow you to have a chart with the plugin and a chart without it, so no need to register/unregister global plugins.
Related
I'm new to Jetpack Compose, so I'm struggling to implement a feature which is dynamic colors (and font, size,... but I think they are the same so I'll just focus on color) at run time from backend. I'll let the app the some default colors, and a whole default splash screen just to load the colors setting from the backend. In case the API request failed, it would use the last succeeded requested colors or just the default color.
Tutorials I found round the internet was just about changing the dark/light theme at run time, not changing a specific color in the color pack. In those tutorials, the color is defined in Colors.kt file which is not a composable or class or object, ...
I imagine the color within lightColors or darkColors would be something like this.
return lightColors(
primary = Color(android.graphics.Color.parseColor("#" + dynamicColorMap["One"])),
...
}
And when dynamicColorMap changes in the splashscreen, all screen later will have reference to the new value, but I don't know how to update its variable outside of a composable.
I thought of using DB to store the colors, but getting the data from DB is async, so it cannot be query in the default Colors.kt like var colorOne = DBManager.getColor("One"), I can run the async task in my splash screen before changing to the next screen but then the problem again is how to have a global state that my theme composable wrapper can have access to on every screen?
I just don't know where to start for these case.
Thank you for your time
EDIT:
I currently having the project structured in MVVM. For now, only one activity (MainActivity) is present, and inside that activity, the splash screen component or home screen or login screen,... are being navigated. So is it a good practice to create a viewmodel for the mainactivity screen, that can holds the color state for the theme?
Thanks #Maciej Ciemiega for the suggestion. I ended up structure my code like that.
In my MainActivity.kt I create a viewmodel for it.
val mainActivityViewModel by viewModels<MainActivityViewModel>()
MyTheme(mainActivityViewModel = mainActivityViewModel) {
initNavigationController(navController)
Surface(color = MaterialTheme.colors.background) {
if (mainActivityViewModel.appSettingsState.value.appSettings.colorsMapLight.size != 0
&& mainActivityViewModel.appSettingsState.value.appSettings.colorsMapDark.size != 0) {
navController.navigate(NavigationDestinations.homeScreen)
}
}
}
my initNavigationController function shows the splashscreen first. But it doesn't do anything. The getting app settings configuration is called in MyTheme composable via the mainActivityViewModel, and MyTheme will use the state from the viewmodel to define the theme, and the navController.navigate is based on the state as you guys can see in the if above.
I don't know if this is a good practice or not, or when my app grows it would be a mess or not, but at least it works for me. I tried with font styles too and it works like a charm.
I have a web app in which there are two components - date picker and button.
When I select a date from date-picker, the button's title and color should change.
This is my hbs code where two components are given:
{{bootstrap-datepicker value=expiresAt todayHighlight=true todayBtn=true startDate=startDate changeDate="changeDateAction" autoclose=true}}
{{button-custom title="Previous Date" startDate=startDate status=1 id="button1"}}
The button-custom is created by me.
When I select a date, the function in datepicker named changeDateAction() will be called. I have a function in button component's controller, named changeValues() which when called will do my task.
How can I call changeValues() (which is in button-custom.js) from changeDateAction() which is in another file?
Please be as simple as possible as I'm beginner in Ember JS. Thanks in advance.
It seems like you'd like to inform a component (button-custom) about a change in a sibling component (bootstrap-datepicker). You've already set up an action handler (changeDateAction) that informs the parent component/controller about the change. In order to propagate that change to button-custom, I'd suggest to just pass the effect you'd like to achieve down to it:
{{bootstrap-datepicker changeDate="changeDateAction" (...)}}
{{button-custom title=title color=color (...)}}
Like this, you can control the appearance of the button from the outside by modifying title and color. Like that, the logic is moved to the parent component/controller, and the button component becomes a "dumb" presentational component.
The basic concept behind this is called "Data down, Actions up" (DDAU), and i'd highly recommend to read up on it (for example here if you're learning Ember!
newBie here. I have added an UItableViewController into storyBoard. I use this as a setting page.
HomeVC ----> Setting VC
In code : I use the below code to bring the tableView below the battery Bar:
self.tableView.contentInset = UIEdgeInsets(top: 20,left: 0,bottom: 0,right: 0)
Problem:
How to move the TableView down below the battery bar so that I can add a button above the table in StoryBoard
Please help.
For this you should use a normal view controller and drag a table on the view controller this way you can make the table size whatever you like. This will also allow you to place buttons wherever you like.
Don't forget to assign the TableViewDataSource and TableViewDelegate to your view controller.
Good luck!
After doing some search on UiTableViewController, to use it as setting page I have to set static cell to it. This UiTableViewController will occupy the entire view.
To set the tableView below the battery icon,
use:self.tableView.contentInset = UIEdgeInsets(top: 20,left: 0,bottom: 0,right: 0)
However, No need to do so. In the first TableViewSection, you can create a few tableView cell, just leave the first cell blank which acts as a margin below the battery bar.
I want to have the android back button to close the app if the user is on one of the two main pages. Both pages can be navigated to with two tabs button, which are shown on those both pages. But on any other pages I want to keep normal stack pages behaviour.
I read about registerBackButtonAction and also got some information in this thread concerning Ionic 1.
I created a custom behaviour to close the app:
private registerSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){
this.platform.exitApp();
}.bind(this),101);
}
}
My idea is to call the registerSpecificActionOnBackButton() function in the ionViewWillEnter() function on the pages where this behaviour is needed.
But I don't manage to cancel that behaviour on the ionViewWillLeave() function with a deRegisterSpecificActionOnBackButton() function, I've tried among other things:
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){return true},101);
}
}
Or
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(event){event.unbind()},101);
}
}
But I happen to be stuck. Has anyone any idea about canceling a custom registerBackButtonAction?
I've managed to make this work as I expect: When the app is on one of the pages that can be reached thru the tabs menu, it closes when the back button is hitten (on Android).
First, forget about the registerBackButtonAction() for the moment because as quoting what is explained in this thread of 2016-08-05:
it suggests not trying to override the default back button behavior.
So I've looked for other solutions. I've found one that is not really clean but works.
To begin with, I looked if I could reset the stack with the NavControler using remove(startIndex, removeCount, opts). But that doesn't work out because the two main pages are embeded in the tab page (like it is shown there).
So when you're on one of those pages the NavController is a Tab and the parent of that is a Tabs.
In Tabs there is a Array variable named _selectHistory. The _selectHistory array seems to have a role similar to the stack. So when navigating from one page to another using the two tab buttons, one can see in a console.info(this.[NavControler var of the page].parent._selectHistory) that the array grows as the tab buttons are hitten alternatively. And when trying on a real device, the back button take you back switching from one page to another until the array is empty and then the next back button hit closes the app.
Hence I thought: Let see what happens if I override the value of that array. It cannot be done thru a function to apply on a Tabs object (unlike what is possible with NavController).
So in the Page concerning my pages embedded in the Tab page, I added the following in ionViewWillEnter():
ionViewWillEnter(){
this.navCtrl.parent._selectHistory=[];
}
This.navCtrl is my NavController object passed in the constructor of the page.
That's it.
Titanium SDK version: 1.6.2 (tried with 1.7 too)
iPhone SDK version: 4.2
I am developing an iPhone app and I am fetching data from my API and presenting it in a table. In this table I got a button on each row that should allow the user to add that person to his or her contacts. The only problem with the code (I think) is that only the last button responds when being clicked. Nothing happens when I click the other buttons.
This is my code: http://pastie.org/1932098
What is wrong?
You are adding the button.addEventListener outside of the for statement, and since you are overwriting the button var with each iteration, the eventListener only attaches to the last button created.
This probably isn't the best way to work this, but to fix your problem, move the button.addEventListener inside the for statement, and then check for a unique identifier in the object that gets sent to the event. Example:
for (x=0;x<5;x++) {
var button = Titanium.UI.createButton({
height:40,
width:100,
top:50*x,
id:x
});
var label = Titanium.UI.createLabel({
text:'LABEL '+x
});
button.add(label);
win1.add(button);
button.addEventListener('click', function(e){
Ti.API.info('Button clicked '+e.source.id);
});
}
The button.id property is just made up, but now you can see which button sends the event. You could also use title, or anything else that is unique.
Other options to look at are creating unique variable names for each button, but that's probably more work. Also, instead of working with putting a button in the table row, use a label or image, then listen for the event generated by the table or row.