Jxlib jxlib → 3.2

Comments and changes to this ticket

• 

  Jon Bomgardner March 4th, 2011 @ 09:38 PM

  Very cool. I like all functionality mentioned. I'd vote for adding
  them - they sound light and provide the end user a uniform way of
  implementing generic UI elements (e.g., Message and Confirm).

  Jay

• 

  Jon Bomgardner March 4th, 2011 @ 09:38 PM

  I agree, if you are willing to contribute then lets get them all in there.

• 

  Jon Bomgardner March 4th, 2011 @ 09:39 PM

  added Jx.Progressbar and Jx.Slider

  As I add some of these if anyone checks them out and has a better way to do aything
  (especially as pertains to the css) I would be grateful for the feedback.

  Also, if anyone wants to take the visual components and update the styling to better
  align with the rest of the library I would be grateful for that as well. Currently,
  Jx.Progressbar just uses some color to fill the bar... perhaps a nice tiled graphic
  would better suit it?

  Thanks all!

• 

  Jon Bomgardner March 4th, 2011 @ 09:39 PM

  Very cool Jon! Fred is going to be away for a couple of weeks and he would probably be the best one to review
  the CSS and think about the visual presentation aspect so you probably won't get any feedback for a few weeks.
  I'll try to check the code out as soon as I can.

• 

  Jon Bomgardner March 4th, 2011 @ 09:39 PM

  Added Jx.Slide, Jx.Dialog.Message, and Jx.Dialog.Confirm (including css and tests)

• 

  Jon Bomgardner March 4th, 2011 @ 09:39 PM

  Added Jx.Panel.DataView and Jx.Panel.DataView.Group as well as some documentation
  updates.

• 

  Jon Bomgardner March 4th, 2011 @ 09:39 PM

  Added Jx.Plugin.DataView.GroupFolder which is a plugin for the grouping dataview that
  provides the ability to open/close the group items. see the test suite for a demo.

• 

  Jon Bomgardner March 4th, 2011 @ 09:40 PM

  For Message, I think we should have a way of centering or right aligning the button. Same for Confirm. That's a
  Fred job I think, he's done it before in customized CSS but I think there needs to be a Jx way of setting button
  alignment on a toolbar

  DataView and Group look cool, not sure what sort of visual style could be options for those. Checked out
  GroupFolder, very nice cinematics!

• 

  Jon Bomgardner March 4th, 2011 @ 09:40 PM

  Added Jx.Field.File and Jx.Panel.FileUpload

  Both could definitely use some CSS love but I figure I'll leave that to Fred. The
  only thing I haven't done with all of these new Widgets is to run them through their
  paces on the various browsers. I've only tested them on FireFox 3.5 on Ubuntu Linux.
  As soon as I get some time I'll try to run them through what browsers I can get my
  hands on (which is not many right now).

  If anyone runs across any issues, please let me know.

• 

  Jon Bomgardner March 4th, 2011 @ 09:40 PM

  Also, on the file upload stuff - they both require APC on the server side for the
  progress tracking part to work. They do, however, have options for NOT doing
  progress. Just be sure that if you run the progress examples that you have APC
  loaded. If anyone would like to suggest different systems for the progress stuff I'd
  be open to adding any options we think would be good.

• 

  Jon Bomgardner March 4th, 2011 @ 09:41 PM

  I should have commented earlier.

  We also need a Jx.Dialog.Prompt message box. IE8 no longer supports the default JS one.

• 

  Jon Bomgardner March 4th, 2011 @ 09:41 PM

  Jx.Progressbar suggestions

  There are two techniques we could apply to the statusbar to give it nice things like
  rounded corners, and gradient backgrounds like buttons and dialogs have.

  1. Sliding doors technique
     Buttons use a sliding doors technique. Applied to the progress bar, the HTML would
     look like the following:

     <div class="jxProgressbarContainer">
         <div class="jxProgressbarOutlineLeft">
             <div class="jxProgressbarOutlineRight"></div>
         </div>
         <div class="jxProgressbarFillLeft">
             <div class="jxProgressbarFillRight"></div>
         </div>
         <div class="jxProgressbarText">
             <div class="jxProgressbarLabel"></div>
         </div>
     </div>
     

  I've been also thinking that the fill needs to be nested inside the outline so we can
  get some hiding of the overflow incase the width calculations go too long for
  whatever reason. If that were the case, then I'd suggest both the fill and the text
  get nested.
  

  I had also considered that the text even gets nested inside the fill, but then it
  would get clipped by the fill... so that's a bad idea.

  Paul and I toyed with the idea of making the text the same size as the fill, and then
  aligning the text to the right of the center, which has a nice effect. But we should
  consider that as optional.

• 

  Jon Bomgardner March 4th, 2011 @ 09:52 PM

  Sorry, I had to go for a few minutes... following the last comment:

  1. Chrome technique
     Dialogs use a chrome technique. Applied to the progress bar the HTML would look like
     the following:

     <div class="jxProgressbarContainer">
         <div class="jxProgressbarOutline"></div>
         <div class="jsProgressbarFill"></div>
         <div class="jxProgressbarText">
             <div class="jxProgressbarLabel"></div>
         </div>
     </div>
     

  We could then either apply Jx.Chrome to the outline and fill, or we could just
  manually create the HTML. The chrome HTML (modified for just left/right looks like
  the following:

   <div class="jxChrome">
       <div class="jxChromeR">
         <img class="png24" src="dialog_chrome.png"/>
       </div>
       <div class="jxChromeL">
         <img class="png24" src="dialog_chrome.png"/>
       </div>
   </div>
  

• 

  Jon Bomgardner March 4th, 2011 @ 09:52 PM

  Jx.Slider suggestions

  I think the same suggestions as I made to the progress bar also apply the the slider.

  The slider also contains an outline and a fill, which behave in much the same manner.

• 

  Jon Bomgardner March 4th, 2011 @ 09:52 PM

  Fred,

  On the visual appearance of these components I'm willing to defer to you. Just let
  me know what changes need to be made and I'll try to get them done.

  Jon

• 

  Jon Bomgardner March 4th, 2011 @ 09:52 PM

  ok, I should have a firm suggestion tomorrow.

• 

  Jon Bomgardner March 4th, 2011 @ 09:52 PM

  I was looking at the upload panel over the weekend, and it struck me that it could
  use Jx.List to show the multiple files.

  Does that sound like a reasonable idea?

• 

  Jon Bomgardner March 4th, 2011 @ 09:52 PM

  That's actually I good idea... I wrote this before we had Jx.List. I'll make the
  updates when I have a chance.

• 

  Jon Bomgardner March 4th, 2011 @ 09:53 PM

  Updated upload panel to use Jx.List - not much had to change since it currently
  doesn't use the hover and select events for anything though you should have access
  to the hover for styling if you wish.

• 

  Jon Bomgardner March 4th, 2011 @ 09:53 PM

  I just added a first pass of graphics based styling to the Jx.Progressbar

  The graphics were discovered on http://ashung.deviantart.com/. I contacted the
  artist and he has given us permission to modify and use them in this project.

  The graphics have four colors (blue, green, yellow and red). So I began thinking of
  how we could use the validation classes (or something like it) with the progress bar.
  Turn it green upon successful completion, red on a failure, yellow for warnings...

  I noticed two issues when I applied my classes:

  1. I used borders on the fill image, so when the width is 0px the borders are still
     there. I was wondering if we should have classes that indicate 0% and 100% so I can
     perhaps hide the borders under certain conditions... or perhaps three classes "start"
     "working" "finish".

  Those classes would also come in handy if we were wanting to use the progress bar for
  an indeterminate progress length.

  1. The height seems to be set with a style. I was wondering the reasoning behind
     that and if we could remove that so I can set the height in CSS
• 

  Jon Bomgardner March 4th, 2011 @ 09:53 PM

  Fred,

  I made the changes as requested... the classes are jxProgressStarting,
  jxProgressWorking, and jxProgressFinished. Also, removed all heights from the code so
  you can set in css.

  Let me know if you need anything else.

  Jon

• 

  Jon Bomgardner March 4th, 2011 @ 09:53 PM

  Thanks Jon,

  That's perfect. I fixed a typo in the starting class and added the styles to take
  advantage of the new classes. Progress bar is done now. :D

  Next I'll tackle the slider and the upload.

• 

  Jon Bomgardner March 4th, 2011 @ 09:54 PM

  transferring ownership to Fred as he is the one that needs to do something about this to close it.

• 

  Jon Bomgardner March 4th, 2011 @ 09:54 PM

  I am currently working to extend the dialog examples with dialog.prompt, confirm and
  message for the dialogs example page and intuitively pressed on all of them enter or
  esc. None of them is working yet, so I would add these little features (optional
  maybe). I also thought the input field of a prompt could be only field.text by
  default, any other input element optionally would enhance the prompt dialog very
  much. Then it would also make sense to have the used field as a mandatory optional
  (with a passed validator).

  What do you think?
  Conrad

• 

  Jon Bomgardner March 4th, 2011 @ 09:54 PM

  Conrad,

  Having those options would be great. I'm also working on some toolbar alignment
  options that would work in with these (they should be in SVN in the next day or so).

  Go ahead and make these changes and I'll add the toolbar ones later - unless anyone
  else has an objection.

  Thanks,
  Jon

• 

  Jon Bomgardner March 4th, 2011 @ 09:54 PM

  I will take care of those features now and had another little idea:
  As every of the dialog subclasses confirm, message and prompt will listen to keyboard
  events, I was going to use the mootools keyboard class -> it just makes sense to add
  a reference to the main dialog class instead of every single subclass and only add
  additional events to it. This one could then also already implement ESC for closing
  the dialog (default off).

  Now my last question is, if these shortcuts should be editable by the options (like
  in the grid editor plugin) or should be written down directly inside render() ?

• 

  Jon Bomgardner March 4th, 2011 @ 09:54 PM

  just added it to the trunk in r861 the way I was going to explain it :)
  It works very fine, also in subclasses with custom shortcuts and custom keyboard methods.

  The way how the keyboardEvents are passed to the MooTools Keyboard instance looks
  quite difficult - it works very well and I really don't have any other idea how this
  could be made any shorter with this flexibility.

  Cheers, Conrad

• 

  Jon Bomgardner March 4th, 2011 @ 09:55 PM

  Can we close this ticket now?

• 

  Jon Bomgardner March 4th, 2011 @ 09:55 PM

  I have not done the styling for the upload list or the slider yet. Please leave this
  open for those two items.

• 

  Jon Bomgardner March 4th, 2011 @ 09:56 PM

  I started to cleanup the upload panel, and noticed a few things.

  First, there is something funky that happens when the progress bar shows up. I'm not
  sure if something is being measured wrong or if there is some style going haywire.
  Basically when the progressbar comes on it's too big, and the panel get's stretched
  and then doesn't go back. I've made a bunch of CSS changes, removing widths and
  floats in an effor to make the problem go away, but to no avail.
  

  As an aside, I also changed the image references.

  Secondly I was thinking to myself, "wouldn't it be nice if this was like the list
  view example" The way things are structured could really benefit from what was
  established there. Would anyone care to take that on?

  I am testing in the test framework. It would be nice if there was an example of this
  that I could more easily play with... Jon would you be willing to make an example for
  this?

• 

  Jon Bomgardner March 4th, 2011 @ 09:56 PM

  Fred,

  Take a look at the latest commit of the File Upload Panel. Hopefully this is what you
  were looking for. Also, I changed the Progressbar so that it didn't programatically
  set a width. Instead it uses CSS to set it.

  Let me know if there's anything else that needs work.

  Jon

• 

  Jon Bomgardner March 4th, 2011 @ 09:56 PM

  Hi Jon,

  Thanks for committing that.
  

  I made a few minor changes, including hiding those iframes so they don't take up
  space on the page.

  There are a few issues I was hoping you could investigate

  1. The interactive test page doesn't seem to work properly... when you browse for a
     file, you get [object,object] instead of the file name.

  2. The progress bar doesn't seem to progress in the example page... probably not on
     the tests page either.

• 

  Jon Bomgardner March 4th, 2011 @ 09:56 PM

  1. I didn't fix up the interactive tests yet. I only made sure it was working on the
     example page.

  2. It doesn't appear to progress because, if you're running this locally which I
     assume, the upload in most cases is rather instantaneous. Therefore, you probably
     won't see it progress before it's removed. Also, you need to have APC compiled into
     the version of PHP that your local webserver is running. If you want to actually
     see it upload you would need to run this remotely, or use a REALLY big file. Problem
     is that (I've found) uploading really big files locally tends to lock up your
     machine and you won't see the progress anyway.... I always debug this aspect with a
     remote machine if possible.

  Jon

• 

  Jon Bomgardner May 30th, 2011 @ 10:21 PM

  • → Milestone cleared.

  [bulk edit]

• You flagged this item as spam.
  

  Fred Warnock June 15th, 2011 @ 08:36 PM

  Just wanted to add a comment to indicate that I've been following the release of 3.0 and acknowledge that there are still some things in this ticket left undone that I'll aim to have done for the next release.

• 

  aek August 16th, 2011 @ 07:22 PM

  Another important widget is a ComboBox that shows items from store records something like a button that ontrigger display a listview that can support pagination combined with an store strategy and onselect the selected item display in a textfield but the id of the selected item is submited if present otherwise the displayfield is submited. An example of this is Ext.form.ComboBox.
  Also a TreeCombo is another widget that could be implemented.

• 

  Jon Bomgardner August 16th, 2011 @ 07:53 PM

  aek,

  Can you open these as separate enhancements? This ticket is for tracking work on a very specific set of widgets that have already been added.

  Thanks,
  Jon

• 

  pagameba November 1st, 2011 @ 06:54 PM

  • → Milestone set to “3.1”

  Need to check with Fred to see if there are still things left undone that he would like to accomplish for 3.1. If there are I think we need a list of the tasks left.

• You flagged this item as spam.
  

  Fred Warnock November 24th, 2011 @ 07:22 PM

  I have not made any change to the slider or the upload.

• 

  Jon Bomgardner December 18th, 2011 @ 01:26 AM

  • → Milestone changed from “3.1” to “3.2”

  Moving out to 3.2