Think of the following:
I've got a table data grid webcomponent and another component providing a data feed. In the applications main acting as kind of controller, i'd like to wire and setup those two components. Therefore i need a reference to underlying table grid instance Dart class and call methods on the "Component API' (to provide the table grid's tablemodel with data).
How do I access the Dart Class instance of a webcomponent instance from outside ?
Probably I missed something fundamental or are polymer webcomponents meant to interact only using databinding and stringy attributes stuff ?
Follow up: Found it !!
RLTable table = querySelector("#apptable").xtag;
does the job
As zoechi pointed out, xtag is not necessary.
var component = $['myComp'];
var componentXtag = $['myComp'].xtag;
print(component == componentXtag);
prints true. Therefore both
component.method()
componentXtag.method()
work fine
You don't need xtag. Some weeks/months ago this was a workaround until the final solution was landed.
Related
I am using angular ui grid. At first I implemented this in a controller and it works fine after all my customization. As I am using multiple grids I cannot write a long controller each time. So, I converted it to factory. I kept the common function in factory and column definition and data in controller. Now when I use this factory in more than 1 controllers, the last controller is overriding all others.
1) Is it correct to make this grid in a factory?
2) If yes how do I overcome this problem?
3) By using factory for this grid, my gridObj.gridApi.pagination.on is throwing error(gridObj is the singleton object that I am returning).
Any suggestion is welcome. Thanks a lot in advance.
You should use a Directive instead. Factories create a single Instant (see Angular Provider Documentation and wont create a private scope, which you need to not override your data.
Note: All services in Angular are singletons.
But Directives provide a private scope and create new instances every time they are called in HTML if you want them to.
//directive
scope: { // this option creates isolated scopes
something : '=',
},
I created a Plunkr showcasing a possible setup. For some more written details please see my answer from few days ago.
Your HTML might look like this afterwards
<my-grid options="all.firstOptions" class="grid"></my-grid>
Where my-grid is your directive and options="" are your special settings (and whatever else you wish to use in the directive). In your directive you declare the default settings and merge them with the special ones.
scope.gridOptions = {
data: scope.options.data, //private scoped from options : '=',
columnDefs: scope.options.colDef || defaultColDef, // optional setting or default setting
// ... some more default data
};
If you have any specific questions, let me know.
Once again, a Dart/Polymer related question.
I wanted to use the Parse.com JavaScript library, but since it's not available in Dart I've written Wrapper classes which store a JsObject and delegate all calls from Dart to the corresponding JavaScript object. Basically it's like a proxy.
Guess what, it works pretty great.
However, my observables don't. To understand this, you have to take a look at the following structure of one of my "proxy"-classes.
class ParseObject extends Observable {
JsObject _jsDelegate = new JsObject(context['Parse']['ParseObject']);
void set(String key, dynamic value) {
_jsDelegate.callMethod('set', [key, jsify(value)];
}
dynamic get(String key) {
return dartify(_jsDelegate.callMethod('get', [key]));
}
}
The HTML code of my Polymer Element looks like this:
<div>Name: {{project.get('name')}}</div>
Since the data binding is only evaluate in case the parameter of the method changed, it will never be updated and thus even though the name is changed, the old one will stay in place.
The solution I came up with is to store all the values the user is setting in the ParseObject#set(String, dynamic) method into a Map which is observable. This works but I think it's quiete dirty since I have to make sure that both Maps, the one in Dart and the one in the ParseObject's JavaScript representation equal.
Thus I am looking for a better solution and I think of some kind of method to tell Polymer to reevaluate it's data bindings.
Does such a method exist or are there any other possibilities to address this problem?
Extending observable by itself does nothing yet.
You need to annotate the getters with #observable (and if you are not using Polymer, you also need to add the observable transformer to pubspec.yaml). You can't make functions observable (this works in Polymer elements but not in Observable model classes. For more details about observable see for example Implement an Observer pattern in Dart or Dart: #observable of getters
I am developing an Ember app and it is really great. But I have a annoying problem I can not solve. I use routing in my app and two diffent controllers with their own views. If I try to use a binding property from the first controller to the second one, that property is not reflected in the second view. In a short way I have something like this:
router = Em.Router.extend({.....});
App = Em.Application.create({
Router: router,
FirstCtrl: Em.Controller.extend({x:'ABC'}),
FirstView: Em.View.extend({...}),
SecondCtrl: Em.Controller.extend({xBinding:'Em.App.router.firstCtrl.x', y:'123'}),
SecondView: Em.View.extend({...}),
});
App.initialize();
Em.App = App;
If in the template for the second view I have something like this:
Binding property: {{x}}
Property with no binding: {{y}}
'ABC' is not shown in the view but there is no such problem with '123'.
In my browser I can access that property from Javascript console with Em.App.router.firstCtrl.x but Em.App.router.secondCtrl.x returns undefined.
So, my question is Why can't I access that property? How should I write that binding?
Thanks in advance for your help
I don't think Em at the beginning of binding is required, Try this..
SecondCtrl: Em.Controller.extend({xBinding:'App.router.firstCtrl.x', y:'123'}),
Well summing up the comments:
All the controllers defined in ember must end with Controller while routing, for example if you call router.get('applicationController').connectOutlets('home') its corresponding controller shall be App.HomeController or App.homeController
while binding use 'App.router.yourController.yourProperty' instead of 'Em.App.router.yourController.yourProperty'
We can also use connectControllers in order access properties across controllers if you want to avoid global bindings
I would like to build a new component on the basis of PrimeFaces Tab/Tabview components. It should look like an add tab in a browser and open a page for filling out a form. The problem is that I want to integrate it in a TabView based on a data model (http://www.primefaces.org/showcase/ui/tabviewModel.jsf). Right now I can either combine a tab for filling out a form with a tab with predefined data or use a TabView, which dynamically creates tabs for my data.
I have read JSF documentation about creating custom components in two ways - as composite component or as a new Java class. I tried to create a custom component but it does not seem to work the way I described beyond.
My questions are:
1) is it possible to solve this problem with a composite component? If yes, could someone give me a hint?
2) if not, is there a tutorial for writing a new component on the basis of existing PrimeFaces component (presumably new sort of TabView)?
UPD: After doing some research I realized that the easiest way is writing a new renderer for TabView.
I declared a new renderer class:
public class AddableTabViewRenderer extends TabViewRenderer
and registered it in faces-config.xml:
<render-kit>
<render-kit-id>HTML_BASIC</render-kit-id>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.TabView</renderer-type>
<renderer-class>
de.idealo.evaluation.jsf.webapp.component.AddableTabViewRenderer
</renderer-class>
</renderer>
</render-kit>
However, when a view with TabView component is rendered, the encodeEnd method of TabViewRenderer is called, not the overriden method of AddableTabViewRenderer.
Can you give me a hint about where the problem might be?
The renderer-class is wrong in my configuration. I misunderstood the instructions about registering a component. I thought that render-type is the class that will be rendered with the custom renderer. It must be org.primefaces.component.TabViewRenderer instead. Now it works fine :)
im calling an actionscript class from my main mxml file. the actionscript class is responsible for calling a web service and handling the response, however im having trouble and keep getting the following error; (im new to flex btw)
Error #1009: Cannot access a property or method of a null object reference.
my code goes as follows;
public function getSites(argWsdl:String):void{
ws = new WebService();
ws.loadWSDL(argWsdl);
ws.getSites.addEventListener(ResultEvent.RESULT,echoResultHandler);
ws.getSites();
}
public function echoResultHandler(event:ResultEvent):void {
var siteField:ArrayCollection = event.result as ArrayCollection;
Application.application.setSiteField(siteField);
}
when i run the debugger the code never reaches the result hanlder and i see the #1009 error in the variable list.
any ideas?
looks like you have it sorted, but just to add more information in case someone else comes along to this question, you generally see this error when you are trying to use something that hasn't been created yet. A lot of the time you will see it when trying to access UI components that have not yet been created (its good to rely on the creationComplete event for these sort of things), but in this case it looks like you are using the webservice before it is completely ready (the wsdl hasnt been loaded yet).
Just so you know, you can also define your webservices in mxml (mx:webservice) and specify the wsdl there or you can also load the wsdl later on from a configuration file afterwards just by referencing the ID.
sorted it out,
i needed to created a loadEvent and loadhandler. Once loadWsdl is called the loadhandler specifies the laodHandler to use, inside the loadHandler i call the method name as seen in the wsdl
thanks Ryan,
the main reason im using a seperate actionscript class is so i can reuse the same web service calls across my components without having to retype the same code. I couldnt think of a better way to do this - maybe a could have done the same with a custom component