Polymer - Fire not updating the UI checkboxes - polymer

I have very simple setup. When I check on checkbox, a pop up will open and ask to link to another checkbox.
When I close the popup, whatever the checkbox I selected, both will be checked.
I have array updated with checkbox value.
After I close the popup, the values are showing right in the array but not in UI. When I select other tab and get back to this tab, checkboxes are showing right.
this.fire('details', this.details);
This is not working from child page.
How can I refresh the parent element?

Above your details event, will fire an event with on-<your-custom-event> at parent element as on-details So you need to assign a listener something like at parent:
<child-element
on-details = '_detailsChanged'>
</child-element>
...
Polymer {(
_detailsChanged: function(e) {
// e.detail will give you this.details object
}
Or I assume you want to assign an object at the child and reflect observations on the parent, so at parent element :
<child-element
details = "{{details}}"
><child-element>
and at the child element, you need to notify=true this object at property declarations and notifyPath with making observable changes at parent something like:
properties: {
details: {
type:Object,
notify:true
}
}
..
this.set('details', nevDetailsValue); //Use this.set method
this.notifyPath('details'); // Than detail property will change value at parent.
EDIT : Need to specify the exact path !!
DEMO
this.notifyPath('details.<path which is changed>'); // ie:this.notifyPath('details.name')

Related

How to know google map controls creation is done?

I need to dynamically create a ui widget with a parent div.id='myDivId', which is a google map control.
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
centerControlDiv.index = 1;
centerControlDiv.id = 'myDivId';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
// $('#myDivId') causes exception as $('#myDivId') is not created on
// map as a DOM element yet.
var uiWidget = new uiWidget('myDivId');
// $(#myDivId) is used in class uiWidget().
class uiWidget {
constructor(divId) {
this.id = divId;
// It should fail here due to this.$div property, as
// div 'myDivId' is not a DOM element yet by google map
// controls API.
this.$div.click($.proxy(this.event_click, this));
}
get $div() {
return $(‘#’ + this.id);
}
event_click(eve) {
}
}
But, there is no event of when this parent div is created. Therefore, the child ui widget can't be created at correct time.
How to know parent div with id 'myDivId' is created?
You are trying to reference a DOM element by ID as a child of document when that element has only been created but not yet added to the document.
But you already have a reference to the #myDivId element in the centerControlDiv variable, so you don't need to use the ID to reference it. Just change this line:
$('#myDivId').append("<div>UI widget</div>");
to:
$(centerControlDiv).append("<div>UI widget</div>");
Put another way, to answer your question "How to know parent div with id 'myDivId' is created?", that div already is created - you created it in the document.createElement('div') call. It just isn't a child of document yet.
So when you use $('#myDivId'), or similar calls like document.getElementById('myDivId'), those calls can't see it. It's just a standalone element that you have a reference to, so you can access it through that element instead of looking it up in the document DOM.
Update based on your latest code:
To apply this principle to your uiWidget class, you can have the class work with the actual div element you created instead of accessing it by ID. Even better, since you're using jQuery, pass it a jQuery object from the beginning, like this:
var uiWidget = new UiWidget( $(centerControlDiv) );
class UiWidget {
constructor($div) {
this.$div = $div;
this.$div.click($.proxy(this.event_click, this));
}
// ...
}
As you can see, the code no longer requires the div ID at all, and it doesn't need the get $div() either. $div and this.$div are already a jQuery object wrapping your centerControlDiv.
I also changed the name of the class to UiWidget to follow recommended JavaScript style and avoid conflict with the uiWidget variable that holds an instance of the class.

Child component value not setting in Angular 2?

So I have my child component's value marked like so:
#Input flag;
And then in the particular method I have:
myParentComponent.flag = true;
Then in the html of the parent component I have:
<app-childComponent-template [flag] = flag ></app-childComponent-template>
I'm using Chrome's inspection tool to watch the console where I'm logging the changes. When I set the flag to true in the child component it works, however, it won't carry over to the parent component and I can't figure out why. I've gone through this documentation (https://angular.io/guide/component-interaction) multiple times but everything seems to match up accordingly.
Thank you!
The syntax [flag] indicates that it's a one-way data binding: The parent will push changes to flag to the child. But changing the child's #Input flag variable will not emit a change to the parent.
In order to do that, you need to use an #Output in the child component:
#Input('flag') flag;
#Output('flag') flagChanged = new EventEmitter<boolean>();
Then, to inform the parent that the flag has changed, emit an event from the child component:
this.flagChanged.emit(newFlagValue);
Finally, to be informed of changes in the parent component:
<app-childComponent-template [flag]="flag" (flag)="onFlagChanged($event)"></app-childComponent-template>
onFlagChanged(newValue) {
alert(`New flag value: ${newValue}`);
}

AS3 set focus on specific component

I have a form with several component: datagrid, textArea, text input...
For each component FocusIn Event is available.
var objTarget:String;
protected function memo_focusInHandler(event:FocusEvent):void
{
objTarget=event.currentTarget.id;
}
With memo_focusInHandler, I know which has focus.
My goal is to backup last focus objet, and re open Windows with focus on this object.
I try to do this:
objTarget.setfocus();
But it doesn't work. Could you help to found the best way to reach my goal.
String is not a display object, thus it can't be in focus. The representation of string on the stage is a TextField.
In as3 you can set focus to the desired target by using stage method:
stage.focus = myTarget;
Please see the corresponding documentation section: https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#focus
There is no need (that you've shown) to work with the string id reference. It would much simpler (and slightly more efficient) to work directly with the object reference.
var objTarget:Object; // Object instead of type :String
protected function memo_focusInHandler(event:FocusEvent):void {
objTarget = event.currentTarget; //instead of the currentTarget's id property, assign the current target itself
}
Then, when you want to reset focus, you can do:
if(objTarget is TextInput || objTarget is TextArea){ //make sure it's a text input or text area first - optional but recommended if you don't like errors
objTarget.selectRange(objTarget.text.length, objTarget.text.length); //set cursor to the end
objTarget.setFocus(); //focus the text input/area
}
I found a solution:
this[objTarget].selectRange(this[objTarget].text.length, this[objTarget].text.length);
this[objTarget].setFocus();

polymer, shadow dom, events and bubbeling

I have a polymer custom element using shadow dom (v1), this element is inside another polymer custom element, also wrapped in shadow dom..
In my understanding, when the most inner element raises an event, the most outer element (the app) should be able to listen for these events.
Is this incorrect?
I have a rating component inside a review component inside an app component. the rating component throws an event:
this.dispatchEvent(new CustomEvent('custom-event'), { bubbles:true, composed:true });
However, the code below in the app-component never gets fired..
connectedCallback() {
super.connectedCallback();
this.addEventListener('custom-event', () => { console.log('a');});
}
Am I incorrect in assuming the event should bubble all the way up the different shadow doms to the window eventually, unless someone stops the propagation?
Thanx for any answers..
John.
Found it, I set the options as argument to the dispatchEvent instead of adding the options to the CustomEvent.
so instead of
this.dispatchEvent(new CustomEvent("event"), { options });
you have to do
this.dispatchEvent(new CustomEvent("event", { options }));

AS3: What is the best way to put button-behaviors ONLY on child_mcs of a container_mc

I have a container_mc, with lots of child_mcs inside. I want the child_mcs to have full button-like behaviors (click-able, cursor effects).
I am not interested in putting individual mouse listeners on every child.
... I would like to simply have one listener on the parent container, though the parent would effectively be inactive ... only the child_mcs.
Delfine the common behaviour of the buttons in a class and associate that class with the button symbol in the library.
You could listen to click events on the container with the useCapture flag set to true (addEventListener's third argument) - the listener would be invoked every time any container's child (including grandchildren and so on) is clicked. Then you could check which button was clicked for example by examining its name property.
Let's assume you have something like this:
var container_mc:Sprite = new Sprite();
addChild(container_mc);
container_mc.addChild(button1);
container_mc.addChild(button2);
//and so forth with all your buttons
To do what you ask, you would do the following:
//add a click listener to the container
container_mc.addEventListener(MouseEvent.CLICK,click);
//make the buttonMode true on the container, so you get the button hand cursor
container_mc.buttonMode = true;
function click(e:Event):void {
//e.target is a reference to what was clicked (see caveat after code sample)
//if all the children of container_mc are of the same custom class,
//you could now call a click handler on that item
MyButtonClass(e.target).myClickHandler(e);
//or you could use a switch statement
switch(e.target){
case button1:
//button 1 was clicked, do something with it
break;
case button2:
//button 2 was clicked, do something with it
break;
}
}
The only caveat here, is an event's target could be any child down line of container. So if button1 had some children and those children had children, the object referenced in e.target could be any of them (which ever was clicked). If you have child object inside your button, then the easiest way to make sure your target is always the button, is do the following:
button1.mouseChildren = false;
That will ensure any mouse events dispatched by the button, will have button1 as the target and not any of it's children.
please ignore the downvote ... if your problem is the same as mine,
then this solution works
//-- pseudo code --\\
*for the container:*
container.addEventListener( MouseEvent.MOUSE_DOWN , callback_function ) ;
container.buttonMode ...... false
container.mouseEnabled .... false
container.mouseChildren ... true
*for each child:*
child.buttonMode ...... true
child.mouseEnabled .... true
child.mouseChildren ... false