Template overrides and Bootstrap

[George Wilson]

So I've recently decided to revamp my website and for a challenge and to get an impression for a common user case of not using bootstrap and another CSS framework

My biggest issue to date has actually been front end editing. One issue is in the form fields which in several cases need to move to JLayouts (for example the media and calendar form field modals need their button class changing). But I can do this as a PR reasonably easily.

My bigger issue is the layout themselves. The particular framework I have chosen requires a format for fields of

<div class="parent-div">
<label class="label_class">blah</label>
<div class="input-div"
// input here
</div>
</div>

The issue here being with the current implantation of Joomla it's currently impossible to add a class to the label when your using the getLabel() function without either core hacking the forms XML file or the JFormField getLabel class. And I was wondering what people considered to be an appropriate substitute here as clearly manually adding the HTML for the label isn't ideal but I'm not sure what the obvious solution is either for a template override.

If we can agree on a method I'll code it up and submit a PR

Kind Regards,
George

[Gary Mort]

On Monday, February 24, 2014 9:47:28 AM UTC-5, George Wilson wrote:

So I've recently decided to revamp my website and for a challenge and to get an impression for a common user case of not using bootstrap and another CSS framework

My biggest issue to date has actually been front end editing. One issue is in the form fields which in several cases need to move to JLayouts (for example the media and calendar form field modals need their button class changing). But I can do this as a PR reasonably easily.

My bigger issue is the layout themselves. The particular framework I have chosen requires a format for fields of

<div class="parent-div">
<label class="label_class">blah</label>
<div class="input-div"
// input here
</div>
</div>

The issue here being with the current implantation of Joomla it's currently impossible to add a class to the label when your using the getLabel() function without either core hacking the forms XML file or the JFormField getLabel class. 

By hacking the xml file are you referring to modifying the actual file, or modifying the in-memory copy of the file?

You can use the onContent events[I beleive it was onContentPrepareForm?] to modify the in memory copy of the xml.  You can create a custom XML with your form modifications and then merge that xml with the original XML using JForm's merge methods.

You can also do it programatically.

[Gary Mort]

On Monday, February 24, 2014 9:47:28 AM UTC-5, George Wilson wrote:

So I've recently decided to revamp my website and for a challenge and to get an impression for a common user case of not using bootstrap and another CSS framework

My biggest issue to date has actually been front end editing. One issue is in the form fields which in several cases need to move to JLayouts (for example the media and calendar form field modals need their button class changing). But I can do this as a PR reasonably easily.

My bigger issue is the layout themselves. The particular framework I have chosen requires a format for fields of

<div class="parent-div">
<label class="label_class">blah</label>
<div class="input-div"
// input here
</div>
</div>

The issue here being with the current implantation of Joomla it's currently impossible to add a class to the label when your using the getLabel() function without either core hacking the forms XML file or the JFormField getLabel class. 

[George Wilson]

So I mean going and adding labelClass to each XML element in every form. Which is frankly just horrific even if you do it as a plugin and definitely it feels like there should be a better/simpler/more efficient method of doing it than having to activate a content plugin

Kind Regards,

George

[Bakual]

We sure need a way for templates to override each output of JForm. Imho, it could be done easy with JLayouts both for the label and the input itself, and we need probably a parent JLayout for the surrounding"control-group" stuff.

[George Wilson]

I thought about a triple JLayout use like that and I thought that using a JLayout for the control group, whilst a nice idea was probably slightly excessive? and maybe a JLayout for the construction of the label in JForm (and obviously move the FormFields to JLayouts as well)

Kind Regards,

George

[Bakual]

Maybe simple layout files like we use for component views and models (the ones in the tmpl folders) would be enough? It's not likely that these layouts will be used outside the scope of JForm and thus JLayouts is not really needed.

[Roberto Segura]

I'm preparing a PR. It's based on all the improvements I've done to both jlayout and jformfield.

I hope to send a PR. I say that because there are a lot of changes and I want to avoid duplicate work. If you don't like my proposal then we can try next one.

On 25 Feb 2014 07:19, "Bakual" <werbe...@bakual.ch> wrote:

Maybe simple layout files like we use for component views and models (the ones in the tmpl folders) would be enough? It's not likely that these layouts will be used outside the scope of JForm and thus JLayouts is not really needed.

--
You received this message because you are subscribed to the Google Groups "Joomla! CMS Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-cm...@googlegroups.com.
To post to this group, send an email to joomla-...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-cms.
For more options, visit https://groups.google.com/groups/opt_out.

[Bakual]

Looking forward to see your PR. I guess chances are high that the solution will be good :-)

[Gary Mort]

On Monday, February 24, 2014 10:12:36 AM UTC-5, George Wilson wrote:

So I mean going and adding labelClass to each XML element in every form. Which is frankly just horrific even if you do it as a plugin and definitely it feels like there should be a better/simpler/more efficient method of doing it than having to activate a content plugin

I don't see why it's so horrific.   I simply copy the xml definition for the form, delete everything but the definitions[ie a blank skeleton] and then add labels to the fields I want to add labels to.

In the plugin, it's a simple matter to invoke the JForm merge methods to merge the supplemental xml file with the existing file.

Mind you, I'm not thrilled by using xml to begin with, and it's annoying - but it works.

If your doing this repeatedly, then it's much much simpler to add create a subclass of JForm and some methods to make this all more convenient.   For my own use, I've been using methods loosely modeled on the Drupal framework.  I add a "render" method to JForm.   It basically does the same thing a lot of the old subform templates would do.  I pass it the the subform section/fieldset to use and it runs through a foreach loop and for each field, triggers a plugin event so I can modify the field, calls the display methods for the field, and then sets $field->rendered = true.

Oh, I should mention, for every field element when I am running "render", i check to see if $field->rendered is true and skip it if it is set.   That way when I'm done doing any fiddly formatting stuff, I can call render without a root and it processes every field that has not been rendered....

Somewhat tedious to setup and not compatible with the current layouts....I just got tired of using XML forms personally and preferred how Drupal handled them.  The nice thing with Joomla is that I'm free to override things for my own code when I want to....  

[George Wilson]

I've just realised we have a function that gets the control group (https://github.com/joomla/joomla-cms/blob/staging/libraries/joomla/form/field.php#L872) added in 3.2 with an extra function in JForm to do this for each field (https://github.com/joomla/joomla-cms/blob/staging/libraries/joomla/form/form.php#L637). This is a great idea. Obviously it should be moved into a JLayout - but would be a smart move in my opinion :)

Kind Regards,

George

[George Wilson]

Right I've just applied this to com_content frontend editing and look at the simplification that takes place :P https://github.com/joomla/joomla-cms/pull/3205 As I said before the getControlGroup Function is going to need to become a JLayout - but this is going to massively simplify overriding forms in the frontend

Kind Regards,

George

[Bakual]

Saw your PRs. Great work! :)

[Roberto Segura]

Thanks George for removing things of my todo list. I hope you never finish this template :D

Roberto Segura
@phproberto

http://phproberto.com

--

[Roberto Segura]

BTW can I ask you to rename the function to something more descriptive before we go further and spread it everywhere? Maybe something like $this->form->renderField('whatever');

And deprecate getControlGroup converting it in an alias.

You'll make me happy.

Roberto Segura
@phproberto

http://phproberto.com

[George Wilson]

Yes I can :) But it is already used in a LOT of layouts and a large chunk of the backend since 3.2. But it's easy to do. I also have enacted the layout swap on my server and it's so good :D Will push to github on my return from uni

Kind Regards,

George

[Roberto Segura]

Thanks! Looking forward to see it!

Roberto Segura
@phproberto

http://phproberto.com

[George Wilson]

PR: https://github.com/joomla/joomla-cms/pull/3209

This doesn't transition over any layouts using the getControlGroup(s) functions - I'll leave that for another PR to keep things simple :)

Kind Regards,

George

[George Wilson]

PR for moving into JLayouts (as mentioned previously): https://github.com/joomla/joomla-cms/pull/3209

PR's for implementations

https://github.com/joomla/joomla-cms/pull/3204 com_content backend

https://github.com/joomla/joomla-cms/pull/3205 com_content frontend

https://github.com/joomla/joomla-cms/pull/3206/files details JLayout (although it doesn't appear to be used anywhere)

https://github.com/joomla/joomla-cms/pull/3207/files com_contact backend

https://github.com/joomla/joomla-cms/pull/3215 com_weblinks frontend

Kind Regards,

George