I have just started to discover the ui-grid last couple of days.
The documentation of the ui.grid.class:GridOptions shows an example on how to use the rowTemplate property :
rowTemplate
'ui-grid/ui-grid-row' by default. When provided, this setting uses a custom row template. Can be set to either the name of a template file:
$scope.gridOptions.rowTemplate = 'row_template.html';
inline html
$scope.gridOptions.rowTemplate = '<div style="background-color: aquamarine" ng-click="grid.appScope.fnOne(row)" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>';
As you can see in the rowTemplate html code there is an ng-repeat which iterates over colContainer.renderedColumns's col items and there is the track by option which uses col.colDef.name.
the same template was also used in the 317_custom_templates tutorial example.
I was looking in the documentation for the origin of the colContainer property and i only could found a property having the same name under ui.grid.cellNav.object:CellNav without any details for it (i already don't know if it's exactly the same colContainer property used in the rowTemplate example above and in the 317_custom_templates tutorial example because in the 202 Cell Navigation tutorial it's said :
> To enable, you must include the 'ui.grid.cellNav' module and in the 317_custom_templates tutorial example there is no such as injection for this module)
there is also a property sourceColContainer under the ui.grid.class:ScrollEvent but it's not the same poperty name but maybe it can be its origin.
I would like to find the colContainer property's documentation and understand it better and know what are its own sub-properties if any exists (other than the colDef.name) or at least i would know its origin and look into its code source if there is no documentation for it maybe that would be useful too.
Best regards.
I found this /src/js/core/directives/ui-grid-render-container.js:47 :
var colContainer = $scope.colContainer = grid.renderContainers[$scope.colContainerName];
So colContainer is in fact a render Container that you can access outside directives and templates by doing $scope.gridApi.grid.renderContainers["nameOfColContainer"]
to know the nameOfColContainer you will have to check your template here
(/src/templates/ui-grid/ui-grid.html:33) :
<div ui-grid-render-container
container-id="'body'"
col-container-name="'body'"
row-container-name="'body'"
bind-scroll-horizontal="true"
bind-scroll-vertical="true"
enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar"
enable-vertical-scrollbar="grid.options.enableVerticalScrollbar">
</div>
So it is most certainly body. Within a renderContainer you will have an object called renderedColumns which contains the columns to be rendered.
You can also access other containers other than 'body' : left and right.
This is if you use pinned left and/or right, body being the center container.
Related
I am trying to make UI by using Thymeleaf template engine. I have a property file, which contains list of messages for validations.
For example: I have a propery customer.collateral.allocated_amount=Entered amount is bigger than your available balance. Balance: {0}
Now this I wanna replace this {0} with value, which I get from server side from database. For example, I query from database and I get 500.50. And what I want to do now, is to display this propery with value. In this example, it would be: Entered amount is bigger than your available balance. Balance: 500.50
I tried to do this, but no luck:
<th class="right" th:inline="text">([[#customer.collateral.allocated_amount]], ${availableAmount})</th>
How could I do this?
Here are the steps you need to follow for a basic set-up to use Thymeleaf messages:
1) Let's assume you have a Thymeleaf template called customers.html.
2) Your properties file must therefore be called customers.properties, and it must be placed in the same directory as the customers.html template.
3) Let's assume your properties file contains this entry:
amountBiggerThanAvailable=Entered amount is bigger than your available balance. Balance: {0}
4) For the placeholder {0} I will assume you have a Java object called account which has a property called availableAmount and which you pass to Thymeleaf in the usual way (i.e. the same way you pass any other data to your Thymeleaf template). Of course, your version may be different.
Here, I will use a <div> for my example - but you can use whatever you want, of course:
5) Use the message in your template like this:
<div th:text="#{customers.amountBiggerThanAvailable(${account.availableAmount})}"></div>
Note that there is no actual content in the div (between the opening <div> and the closing </div>). All the Thymeleaf directives are attributes inside the opening <div>.
The above fragment will generate the following HTML in your web page:
<div>Entered amount is bigger than your available balance. Balance: 123.45</div>
Once you have got this far, there are various enhancement you can make. For example, you can also look into providing localized (translated) messages as described here.
The current implementation of a CCDA generator I'm working on, prints a message on a <name> tag (in header sections, where no <text> is available) when something's name is not found:
<name>No information</name>
I know the right way to express not found information is through the #nullFlavor attribute:
<name nullFlavor="NI" />
But right now there is a component on the application that reads the value on the tag and shows it in a human-readable view of the CCDA document. If I use #nullflavor only, the field that shows such name will be empty, instead of "No information".
In order to avoid changing such component, I was thinking on adding the #nullFlavor attribute but still letting the message there:
<name nullFlavor="NI">No information</name>
I know this is syntactically correct, because I've tested it with the reference validator and it passes. My question is: from a semantic point of view, is it valid?
Yes it's valid. The particular specification in question - the v3 abstract data types, simple says:
invariant(ST x) where x.nonNull {
x.headCharacter.notEmpty;
};
So if there's no nullFlavor, there must be some content. But the reverse rule is not applied; there can be content if there's a nullFlavor
Although it is not restricted, my point of view is that it is not a good strategy. I understand that you have a restriction regarding this component but, when you are building a CDA, it is important to keep in mind that it is something to be shared with everyone, and I would never expect to find content inside a nullFlavor attributed element.
I've been tasked with creating a webapp using AngularDart. I'm new to Dart and therefore AngularDart also, but have worked through the tutorials at https://angulardart.org/tutorial/.
I've read similar SO questions/answers (How to access a AngularDart components attribute (NgOneWay) outside of the component, eg. on the page it is in?) but given my limited knowledge I don't fully understand how to implement Brian's suggestion - or if indeed it relates to my question! Am I also right in thinking that Vink's suggestion is now irrelevant as #Controller's are now deprecated?
In short, I'm trying to figure out if the following is in fact achievable:
create a top-level <custom-component/> complete with attributes;
within <ng-view/> - and therefore nested components - access <custom-component/>'s attributes. More specifically, bind/listen for changes to these attributes and act accordingly.
For example, given the following
<body>
<custom-component att1="val1" att2="val2"></custom-component>
<ng-view></ng-view>
</body>
and on the assumption that <ng-view/> renders the following markup
<div>
...
<other-component att1="{{customComponent.att1}}" att2="{{customComponent.att2}}"></other-component>
<another-component att1="{{customComponent.att1}}" att2="{{customComponent.att2}}"></another-component>
...
</div>
is it possible to bind customComponent.<<attributeName>> to <other-component/> and <another-component/>?
Or, as is likely, am I misunderstanding the use of AngularDart's #Component/#Decorator?
Should the #att1 and #att2 attributes be moved from <custom-component/> to <ng-view/>?
Alternatively, should I look to architect a different solution altogether? My ultimate goal in this instance is to provide the user with att1/att2 select boxes (from yet another component) which in turn determine the rendered content within each of <other-component/> and <another-component/>.
Any and all suggestions welcome, I won't be offended if you dismiss any/all of the above!!!
My current development environment is as follows:
Dart SDK version 1.9.0-dev.8.0
angular 1.0.0
Many thanks, J
What you can do is to move the two components into the content(template) of a wrapper component and bind attributes of both components to fields of the wrapper element.
Usually a better way is to use events like shown in How to communicate between Angular DART controllers or Angular Dart component events (controllers have been merged with components since then)
Once I switch my context to the DOM of the webview, I want to be able to search those elements by tag, but I get the error that searching by tag is deprecated and to search by class instead. This won't work to find DOM elements by tag. Is there still a way to do it? Thanks!
As per Appium documentation for migrating to 1.0:
We've removed the following locator strategies:
-name
-tag name
... tag name has been replaced by class name. So to find an element by its
UI type, use the class name locator strategy for your client.
Why searching by tag name?
Although Selenium still supports this type of query, Appium decided not to do anymore. Actually when interacting with the device, searching by tag name is very inefficient.
Why would you want to do that? Think about it, if your page has a bit of content, you will end up having many p, div, span tags. Your search will return many elements and then you will have to go thorugh the list and locate the one you are interested in. If your page is very little, then you will probably end up with one tag of the type you are looking for, however why not applying a class and solve the problem?
Classes are not for CSS style
Remember that HTML attribute class was not introduced by W3C for applying CSS style. It is used to provide an element with more informationa bout its purpose in the DOM. When you apply a class to an element, you should do that basing on the role that element holds! Thus locating an element by class is sure better.
So forget searching by tag name. You should change your strategy and apply class names to your tags in your hybrid app. If you do not want to do so, then do not switch to the new version of Appium but this will keep you far from future innovations!
Migrating from a tagname based element location to a class name
orientd one is good practice. That's why you should change too.
maybe this can help
element.getAttribute("class")
Angular newb here, thoughts appreciated...
Say I want an input field to control the window title as you type. A field with a model binding and no associated controller acts on keypress, as intended. However, there has to be a bit more logic to it -- default value before any user input, also used if the input is blanked.
Adding a controller bound to enclosing elements gives a place for that logic, but the change-on-keypress behavior is gone. I'm sure it's possible to recreate it by hand or with ui, but since it's inherently there without the controller, I'm wondering if I'm missing the simple clean way.
Simple version, acts on keypress, but with no smarts:
<title ng-bind-template="{{windowTitle}}">Default Title (not seen)</title>
<input ng-model="windowTitle" type="text">
Putting controller bindings on the head (for the title) and a containing div (for the input), and setting a default $scope.windowTitle inside the controller function does use that default value, but it breaks the auto-update.
I know in real life you'd want a real model, but what I'm really trying to understand is these two ways angular appears to work. I haven't found anything specifically describing two different implicit input binding behaviors, but I haven't been through all the docs yet.
How should I be thinking about this?
Edit: It's not the window title or default value per se that I'm interested in. I'm trying to understand this:
When there's no controller on either the field or the title, typing in the field changes the window title immediately, on keypress. The title is directly linked to the field value, with no other angular hookup.
With controller bindings around the title and the field, typing in the field has no effect on the title.
What I've since realized (I think) is that ng-controller bindings create a new instance of the controller each time. Here's the non-working code I didn't show before:
<title ng-controller="TitleCtrl" ng-bind-template="{{windowTitle || 'Foo'}}">Foo</title>
...
<label ng-controller="TitleCtrl">
<input ng-model="windowTitle" type="text">
{{windowTitle}}
</label>
The value set by the model binding to the field is shown correctly within that instance of that controller, and updates on keypress, as before. But since those two controller instances are separate, the binding to the title works but the data it points to isn't bound to the field.
Isn't that right? The reason it works with no controllers is that that makes the value global, so the title binding sees the value set by the field binding.
So what's the canonical way to reference data from some other area? Create a service?
I realize that this is basic angular stuff, just getting started here, so thanks!
Edit 2
On reflection, I've come to seriously disrespect this whole question, even though I wrote it.
It's based on way-too-early poor understanding of the Angular application model. I had worked through only part of the official tutorials, and jumped ahead to removing all the js from a not big but not totally trivial existing app, and exploring what Angular could to in that context.
I got some very quick bang for the buck, getting several pieces of functionality working with very little code, and simple, clear markup, felt good. But I really had short-circuited internalizing the Angular way of thinking, and my quick and dirty no-architecture approach broke down when different parts of the page needed to coordinate with each other, as in this question.
I've postponed that project while I go back to tutorials and other learning. If other folks think this question should be deleted, I'd add my vote. Or maybe it's a useful on some level, ignorant though it is.
Well, there are multiple ways to achieve the behavior you want without using an explicit controller and model, you could:
<title ng-bind-template="{{windowTitle && windowTitle || 'default'}}"></title>
Or in a more simple way:
<title>{{windowTitle && windowTitle || 'default' }}</title>
In both cases, we're using the conditional expression:
(condition) && (answer if true) || (answer if false)
You should however strive to remove logic from the templates.