Add API to Polymer web component - polymer

I am building a Polymer web component that should respond to mouse/touch events. I would like to bind the on-tap="{{$.myElement.show}}" where show is a function in the element:
show: function(e) {
// Do something with the event here
}
Is there anyway to define a public API in Polymer. The route I am going at the moment is to have attributes="event" on the element then the parent element has on-tap="{{updateEvent}}":
updateEvent: function(e) {
this.$.myElement.event = e;
}
The element then just has:
eventChanged: function() {
show(this.event);
}
Which just seems boilerplaty (think that is a made up word). Can I add the show function to the element prototype somehow?

If show() is a method on your element, just use on-tap="{{show}}". show() is part of the element's public APi.
But it looks like you want is to call another element's method? This came up recently in a pull request: https://github.com/Polymer/polymer-dev/pull/30
What you have with setting this.$.myElement.event = e; and using eventChanged() in myElement works. You can also just call the element's method directly:
updateEvent: function(e) {
this.$.myElement.show();
}
Here are a few other ways: http://jsbin.com/guyiritu/1/edit

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.

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 }));

React: Cant call a function inside child component

I am trying to call a function inside child component through this.refs but i keep getting error that this function doesn't exist.
Uncaught TypeError: this.refs.todayKpi.loadTodaysKpi is not a function
Parent component:
class KpisHeader extends React.Component {
constructor() {
super();
this.onUpdate = this.onUpdate.bind(this);
}
render(){
return <div>
<DateRange ref="dateRange" onUpdate={this.onUpdate}/>
<TodayKpi ref="todayKpi" {...this.state}/>
</div>;
}
onUpdate(val){
this.setState({
startDate: val.startDate,
endDate: val.endDate
}, function(){
this.refs.todayKpi.loadTodaysKpi();
});
}
}
I want to get some data from DateRange component through function onUpdate, and then I want to trigger a function inside TodayKpi which fetches data from the server. For now it is just console.log("AAA");.
Child component:
class TodayKpi extends React.Component {
constructor() {
super();
this.loadTodaysKpi = this.loadTodaysKpi.bind(this);
}
render(){
console.log(this.props.startDate + " "+ this.props.endDate);
return <div className="today-kpi">
</div>;
}
loadTodaysKpi(){
console.log("AAAA");
}
}
How should I implement this?
For reasons I don’t yet grasp, React discourages calling child methods from the parent. However, they relent and give us an ‘escape hatch’ which allows just that. You were correct in thinking that ‘Refs’ were a part of that escape hatch. If, like me, you have read dozens of articles searching for this information, you will be well prepared to understand their description of the escape hatch
In your case, you may want to try something like this in your KpisHeader class.
Change this line
<TodayKpi ref="todayKpi" {...this.state}/>
to use a ref callback function something like this:
<TodayKpi ref={(todayKpiComponent) => this.todayKpiComponent = todayKpiComponent} {...this.state}/>
or, pre-ES6, this:
<TodayKpi
ref=
{
function (todayKpiComponent)
{
this.todayKpiComponent = todayKpiComponent
}
}
{...this.state}
/>
Then you will be able to access your todayKpi component methods from your KpisHeader class like this:
this.todayKpiComponent.someMethod();
Oddly, for me, inside the ref callback function, ‘this’ was the window rather than the parent component. So, I had to add
var self = this;
above the render method and use ‘self’ inside the ref callback function.
In my case I had an unknown number of dynamically generated children components, so I put each one into an array. I cleared the array in componentWillUpdate. It all seems to be working but I have an uneasy feeling especially given React’s distaste for calling children’s methods.
If you want the function/method to be called inside the child, you should pass it to the child from the parent to start with. The other thing that you need to change is onUpdate to onChange, assuming that you want to track every change to that field. The other alternative is to check when it is onSubmit, but it sounds like you want to have it happen every time the field is updated.

Alert/ Dialog box in AS3

I am working on a app using Adobe flash Builder which should pop up a Alert window once a particular event has been triggered.
Another event needs to be called when the Alert box is closed. But I do not see the Alert class in mx.controls library. It seems like the class (which existed in AS2) has been removed from AS3. Is there any other way to accomplish the same functionality?
Thanks,
Pritesh
Yo need to define closeHandler for your Alert control. Checkout the ActionScript 3.0 Reference api from here http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/Alert.html#show()
Use ExternalInterface.
import flash.external.ExternalInterface;
// tell flash what javascript function to listen for, and what flash function to call in response
ExternalInterace.addCallback('onAlertWindowClosed', onPopupClosed);
function openPopUp():void
{
// this conditional prevents errors when running local (yes, this needs uploaded to work)
if(ExternalInterface.available)
{
// this calls a javascript function in your html
ExternalInterface.call('myJavascriptAlertFuntion');
}
}
// this function is called from the javascript callback **onAlertWindowClosed**
function onPopupClosed():void
{
// do something when your popup closes
}
and in the html:
<script type="text/javscript>
// this chunk gets the flash object so you can call its methods
function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet") == -1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else
{
return document.getElementById(movieName);
}
}
// function that is called from flash
function myJavascriptAlertFuntion()
{
alert("Hey! Yeah you there!");
}
// call this when you want to tell flash you are closing your popup
function tellFlashMyPopupWindowClosed()
{
// **flashContainer** should be replaced by the name parameter of your flash embed object
var flashMovie = getFlashMovieObject("flashContainer");
flashMovie.onAlertWindowClosed();
}
</script>
To have a popup alert in a Mobile project using MXML and AS3, you need to create a component based off of the SkinnablePopUpContainer from the Sparks components. (Since a simple alert has been conveniently uncluded.)
I learned alot reading up on the SkinnablePopUpContainer in the docs here:
The Spark SkinnablePopUpContainer container
To sum it up, I've created a component in MXML with SkinnablePopUpContainer as the base class. In the View that I want to have the popup to be added to, I create a new instance of the class in Actionscript. I listen to the custom events the buttons in the component will be firing on user response. To show the new popup component, simply call the static method open();. The open() method expects a parent container, and wether or not the popup should be Modal. Modal means that nothing under the component can receive user input.
var alert:SkinnablePopUpContainer = new SkinnablePopUpContainer;
alert.addEventListener( "OK", onOK );
alert.open( this, true );
function onOK(e:Event):void{ trace("User said OK") };
I'll put up some example files later when I can.

Flex popup window

I am creating modal popup canvas window in a parent page. When I close the popup how do we get notification in parent screen that child popup is just closed. Any event for that ?
The code to show your popup:
var popup:MyPopup = new popup:MyPopup();
popup.addEventListener(CloseEvent.CLOSE, function(evt) {
PopUpManager.removePopUp(popup);
});
PopUpManager.addPopUp(popup, this, true);
Inside your MyPopup class, you will have a button for closing the popup. Simply hook the click event to publish a "CLOSE" event:
<s:Button Label="X" click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));" />
I prefer this mechanism over having the MyPopup object calling PopUpManger.removePopUp (as #Fank is suggesting) because it couples the MyPopup component to the PopUpManager which I don't like. I'd prefer the user of MyPopup to decide how to use the component.
Honestly, though, these are two very similar mechanisms to perform the same end goal.
Yes there is:
I Preffer to use the Popupmanager:
Your Popup:
There is a Button "close" call a internal function eg.closeme
private function closeMe () :void
{
PopUpManager.removePopUp(this);
}
in your Parent, you open the PopUp like this:
private function openPopup () :void
{
var helpWindow:TitleWindow = TitleWindow(PopUpManager.createPopUp(this,MyTitleWindow,fale));
helpWindow.addEventListener(CloseEvent.CLOSE, onClose);
}
protected function onClose (event:CloseEvent) :void
{
PopUpManager.removePopUp (TitleWindow(event.currentTarget));
}
My TitleWindow is the name of your class of cour popup extended by TitleWindow.
BR
Frank
Along with Brian's answer don't forget to detach the event listener. If you leave the event handler in your main app listening for an event from a child object, the child object will not be garbage collected as something is still referencing it. This is a common memory leak issue.
popup.addEventListener(CloseEvent.CLOSE, popup_CloseHandler);
private function popup_CloseHandler(event:CloseEvent):void{
event.target.removeEventListener(CloseEvent.CLOSE, popup_CloseHandler);
PopUpManager.removePopUp(popup);
}
Here's a great post about Flex's memory management if you want to delve into that further.
http://blogagic.com/163/flex-memory-management-and-memory-leaks