Welcome, Guest
Username: Password: Remember me

TOPIC: From Bootstrap 2 to Bootstrap 3, and others

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 13:26 #11085

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
As a test on a future dev aiming primarily for smartphones, i'm trying to use a Cook component with bootstrap 3.
Many things are misssing, i have to add several new classes and modify a lot of code : that's no problem, i never expected it to work directly as the names of the classes have changed very much fom B2 to B3. At least one thing you could do is add form-control as a class for every input of cook projects, it would already be a good start.
I forked the helper file to load js's and css's from my template, but there is a point where i can't seem to fork enough : Jdom
One of the things really missing are placeholders : there are some for some of the fields, but not every of them. And the workaround i found is nor pretty nor persistant : i will have to replace the code chunks everytime i reinstall the component.
My question is a little unclear in fact : i would like more control over the view file and how the fields are built, and i sometimes have to search very hard to modify the look and behavior of one single field.
And is there a way to have something else than $field->label and $field->input ? E.g., i can modify classes of the input in the xml file, but there are also some other things i can't control like that.
My question is as messy as my thoughts right now, the only thing is i would like less cook formating and more power to adapt labels and inputs myself. Sorry for the trouble you had reading this mess.
The administrator has disabled public write access.

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 13:40 #11086

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 987
  • Karma: 140
I am very interrested by your post because I am right now rewriting JDom correctly for Bootstrap.
The UI Layer is gonna be improved with a lot of fixes.
I am interrested to know what did you changed (in order of importance), then it will be a pleasure to integrate them.

Yes JDom is really powerfull building for Bootstrap.
As soon as I can I will build a little JDom generator for understanding all possibles parameters and to understand how powerfull it is.
But the road is long and Bootstrap evolving as well.

One thing about JDom is that it encapsulate in a lot of php. It is developper oriented to make it easier.
Some purist can say it consumes CPU and it is true but optimized and at the end, you still can replace by a static code when you output thousands of fields for example.
Coding is now a piece of cake
Last Edit: 15 Sep 2013 13:41 by admin.
The administrator has disabled public write access.

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 13:42 #11087

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 987
  • Karma: 140
I found this for the changes :
getbootstrap.com/getting-started/#migration
Coding is now a piece of cake
The administrator has disabled public write access.

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 13:59 #11088

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
Knew about this, have spent almost all the night on it :
Example
  $( ".input-append" ).each(function() { $(this).addClass('input-group');});
  $( ".icon-calendar" ).each(function() {$(this).addClass('glyphicon glyphicon-calendar isGray');});
  $( "select" ).each(function() { $(this).addClass('form-control');});
this takes care of the range form for selecting a date and the isGray class is a personnalised class
I could have deleted the old class and replace with the new, but i'm stil playing with B2 and B3 on the same component to be used with the most templates possible.
Last Edit: 15 Sep 2013 13:59 by VeCrea.
The administrator has disabled public write access.

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 14:05 #11089

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
I believe the main thing is i never let a form as it is out of cook, with all fields one below the other : i like to put several fields on the same line, or to have fields blocks,... As it is now, i really have to play a lot on the view file, and my main concern are those $field->label and $field->input.
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
</form>
that would be super easy and clean, and that's the way it's supposed to be with bootstrap. So why not stick to the basics ? (i know, JForm, the XML,... i just think the output could be so much easier to work with
Last Edit: 15 Sep 2013 14:06 by VeCrea.
The administrator has disabled public write access.

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 14:13 #11090

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
Brick alias and css classes are not used when using multiple forms in one view. That's a pitty because class could be "form-group" and the brick alias could be the id of the div, so we could build tabs or accordion with jqueryui.com/tabs/ or jqueryui.com/accordion/
The administrator has disabled public write access.

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 14:16 #11091

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
Those fields with validate[required] could also benefit from a "form-group has-warning" class in the div that contains it
The administrator has disabled public write access.

From Bootstrap 2 to Bootstrap 3, and others 15 Sep 2013 14:21 #11092

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
Time fields could use api.jqueryui.com/spinner/ as used here jqueryui.com/spinner/#time with abilty to choose steps (by five minutes i.e.)
The administrator has disabled public write access.
Time to create page: 0.072 seconds

Get Started