I'm trying to remove the delete-checkbox from the HTML markup stored in data_template. Is there a way to only override the data_template or do I have to subclass the whole ImageUploadField?
ImageUploadField: http://flask-admin.readthedocs.io/en/latest/_modules/flask_admin/form/upload/#ImageUploadInput
You have to first create an instance of the widget and then override the field itself. Solution:
class ImageFieldWidget(admin.form.ImageUploadInput):
data_template = ('<div class="image-thumbnail">'
' <img %(image)s>'
'</div>'
'<input %(file)s>')
class ImageField(admin.form.ImageUploadField):
widget = ImageFieldWidget()
Related
So i am trying to implement an improved version of the available form tags so I am extending FormTagLib. I am tryign to do a simple test with teh textField tag but I can't seem to even figure out which method is getting called on the tag. I have override every available textField method available but none of them are getting hit
class TestTagLib extends FormTagLib {
static namespace = "test"
#Override
Object textField(Map attrs) {
return super.textField(attrs)
}
#Override
Object textField() {
return super.textField()
}
#Override
Object textField(Map attrs, CharSequence body) {
return super.textField(attrs, body)
}
#Override
Object textField(Closure body) {
return super.textField(body)
}
#Override
Object textField(Map attrs, Closure body) {
return super.textField(attrs, body)
}
}
I have tried putting breakpoints, console outputs for each method but nothing happens. The input fields are being generated just fine, but it doesn't seem to be using my code to do it. Heck i have even tried completely removing the call the super class and everything still works.
<test:textField name="test"/>
<input type="text" name="test" value="" id="test" />
What am I missing here and how do I intercept the creation of the textfield so I can make my modifications?
Have you taken a look at how the FormTagLib is implemented?
I think most tags are defined as Closures, like textField = { … }. This causes the implementation of the textField method to be replaced with the code between the {}.
I believe your example is a demonstration of the risks of extension. I think delegation is usually a better solution. Not sure if the tagLibs are spring beans, but you could try something like this (not tested):
class TestTagLib {
def formTagLib
def textField(args) {
formTagLib.textField(args)
}
}
I would like to provide a possibility to show my components in a bit different look and feel and thought using the decorator for it. Something like:
<body>
<my-component my-decorator></my-component>
</body>
.
#Component(
selector: 'my-component',
templateUrl: '.../my-component.html',
cssUrl: '.../my-component.css',
publishAs: 'comp',
)
class MyComponent {
MyComponent(final Element element) {
Logger.root.fine("MyComponent(): element = $element, element.attributes = ${element.attributes.keys}");
}
}
#Decorator(selector: '[my-decorator]')
class MyDecorator {
final Element element;
#NgOneWay('my-decorator')
var model; // is not used
MyDecorator(this.element) {
Logger.root.fine("MyDecorator(): element = $element, element.nodeName = ${element.nodeName}");
Logger.root.fine("MyDecorator(): element.shadowRoot = ${element.shadowRoot}, element.parent = ${element.parent}");
}
}
Unfortunately, it seems that my-decorator is processed before my-component so it is getting null shadowRoot property in the injected Element object.
It would be possible to check on existence of the my-decorator attribute within the my-component backing class, but that is clearly polluting the design.
UPDATE: Thanks to replay from Marko Vuksanovic, the following is now returning the :
#Decorator(selector: '[my-decorator]')
class MyDecorator extends AttachAware {
final Element element;
#NgOneWay('my-decorator')
var model; // is not used
MyDecorator(this.element) {
Logger.root.fine("MyDecorator(): element = $element, element.nodeName = ${element.nodeName}");
Logger.root.fine("MyDecorator(): element.shadowRoot = ${element.shadowRoot}, element.parent = ${element.parent}");
}
void attach() {
Logger.root.fine("attach(): element.shadowRoot = ${element.shadowRoot}");
}
}
The question still remains how to modify the styling of the shadow DOM.
Thanks in advance for any comments/ideas/solutions.
You can try using AttachAware and it's attach method. You should implement AttachAware interface in your decorator and/or component.
Here's link to Angular.dart docs - https://docs.angulardart.org/#angular-core-annotation.AttachAware
To change the styling of a ShadowDom component you can use element.shadowRoot to get the root of your web component. Shadow root is almost like 'document' object. You can use shadow root to get reference to any element and then you can easily modify it by applying styles as needed.
You could use something like
this.element.shadowRoot.querySelector('[some-attr]').innerHtml = "Modified by decorator" // disclaimer: not tested, but I hope you get the idea.
You can add a style tag to the shadowDom programmatically:
shadowRoot.append(new StyleElement()..text = ':host{background: red;}');
or
shadowRoot.append(new StyleElement()..text = "#import url('some.css')");
I am trying to learn symfony.. can someone please tell me if there is a similar method like renderErrorText()? because this method renderError() outputs html with an ul/li tag. I just want the text of the error and not its html.
You need to define your own decorator. The renderError use a preformatted format to display an html renderer.
Create a file like lib/form/sfWidgetFormSchemaFormatterMyFormatter.class.php:
<?php
class sfWidgetFormSchemaFormatterMyFormatter extends sfWidgetFormSchemaFormatter
{
protected
$rowFormat = '',
$helpFormat = '%help%',
$errorRowFormat = '%errors%',
$errorListFormatInARow = " <ul class=\"error_list\">\n%errors% </ul>\n",
$errorRowFormatInARow = " <li>%error%</li>\n",
$namedErrorRowFormatInARow = " <li>%name%: %error%</li>\n",
$decoratorFormat = '',
$widgetSchema = null,
$translationCatalogue = null;
And inside this class, you can define how to format and render an error.
Then, you will need to define this class a the default formatter for your form. If this is about your frontend environment, in apps/backend/config/frontendConfiguration.class.php:
class frontendConfiguration extends sfApplicationConfiguration
{
public function configure()
{
sfWidgetFormSchema::setDefaultFormFormatterName('MyFormatter');
}
}
Or if you want to it to be global to your project, in config/ProjectConfiguration.class.php:
class ProjectConfiguration extends sfProjectConfiguration
{
public function setup()
{
sfWidgetFormSchema::setDefaultFormFormatterName('MyFormatter');
}
}
You will find :
a documented example here
an example for twitter bootstrap
I am trying to implement a "bulk" insert for hasMany. And got it 90% there, but hit a hiccup with my polyclass design. I have a model like
class Parent {
static hasMany = [references: Reference]
}
class Reference {
static belongsTo = [parent: Parent]
String name
}
class ConcreteReference extends Reference{
String childName
}
I was able to get the create working(defined by creating records) by having markup like
<form action='reference/1/edit>
<input name='references[0].name' value='name1' />
<input name='references[0].childName' value='childName1' />
<input name='references[1].name' value='name2' />
<input name='references[1].childName' value='childName2' />
</form>
But the issue is it always creates the concrete type(class='domain.Reference'), so "child name is always null.
I used:
def edit(def id){
def parent = Parent.get(id)
//i actually clear all the old references first (didn't show that code)
parent.properties = params
parent.save(flush:true)
}
How can I either specify the "concrete type"( I tried a hidden value of class it didn't work) or is there an easy way to loop through params.reference[idx] create it and then add it to Parent?
hopefully that is clear, let me know if you need any clarification.
My manual way of parsing params(not I hard code ConcreteReferences, but i was able to group the params):
def refRegex = /^([a-zA-Z]+\[\d+\])/
for (ref in params.groupBy { it -> it.key.find(refRegex)}.findAll{it.key}){
//this will be like references[0]: [references[0].name : 'test', etc]
//for each one create a FreeFormReference
def _ref = new ConcreteReference(ref.value.collectEntries{it -> [it.key.replace(ref.key + '.', ''), it.value]})
log.info('created reference ${_ref}')
parent.addToReferences(_ref)
}
I'm creating a Dijit templated custom widget defined in a Html like this:
<div data-dojo-type="widgets/Test">Bla bla bla</div>
This is replaced with a template. For purpose of this example, let's say it's a simple div:
<div></div>
Now I have a problem. I can't seem to find a way to get this "Bla bla bla" (in other words, initial innerHTML) in a widget and I need it.
Any ideas?
If you are looking to modify the widget's template when the widget is being parsed, you can override your widget's markupFactory function. You can do this in your CustomWidget.js file as follows:
var CustomWidget = declare('path/to/CustomWidget', [], {
// Widget code here.
});
CustomWidget.markupFactory = function(props, node, clazz) {
// Modify the props defined in data-dojo-props.
// Modify the node that your widget is declared in.
// Don't forget to actually return the instance of your custom Widget!
return new clazz(props, node);
}