Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

button list question

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • button list question

    Is there a way to control the layout of a button list?
    For example I would like to have rows of buttons like 25 buttons in 5 rows.
    I think the button list will work for my ux if I can control the layout.
    Thank you
    Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

  • #2
    Re: button list question

    Can you use 5 button lists?
    Peter
    AlphaBase Solutions, LLC

    Peter@AlphaBaseSolutions.com
    https://www.alphabasesolutions.com


    Comment


    • #3
      Re: button list question

      I believe there is no Alpha way, no property, to control a ButtonList layout... but you can still do stuff to a ButtonList. The end result depends a bit on the UX Style of the ButtonList. If you're using the "Alpha" style then it's fairly straight forward. If you're using an iOS style then you're dealing with the ends of the ButtonList. An iOS style rounds the button ends at on the 1st and last button.

      Comment


      • #4
        Re: button list question

        Frank,
        Yes, you can configure a button list to appear in rows and columns.
        There are multiple ways to do this, but probably the easiest way is to set the "Method for defining buttons" to StaticJSON.
        Create a new UX from a blank template.
        Set the style name of the UX to "MobBlue" (I have some custom CSS below that assumes this is the style for the UX, you can change the CSS to match whatever style you want to use.
        Go to the "Controls" property page and insert a "ButtonList" data control.
        Go to "Method for defining buttons" property and set it to "StaticJSON".
        Go to "Static JSON" property and insert and save the following into it:

        Code:
        [
        	{html: 'A' , value: 'A', tip: 'Help for A',  className: 'btn'},
        	{html: 'B' , value: 'B', tip: 'Help for B',  className: 'btn'},
        	{html: 'C' , value: 'C', tip: 'Help for C',  className: 'btn'},
        	{html: 'D' , value: 'D', tip: 'Help for D',  className: 'btn'},
        	{html: 'E' , value: 'E', tip: 'Help for E',  className: 'btn btnLast'},
        
        	{html: 'F' , value: 'F', tip: 'Help for F',  className: 'btn btnBrk'},
        	{html: 'G' , value: 'G', tip: 'Help for G',  className: 'btn'},
        	{html: 'H' , value: 'H', tip: 'Help for H',  className: 'btn'},
        	{html: 'I' , value: 'I', tip: 'Help for I',  className: 'btn'},
        	{html: 'J' , value: 'J', tip: 'Help for J',  className: 'btn btnLast'},
        
        	{html: 'K' , value: 'K', tip: 'Help for K',  className: 'btn btnBrk'},
        	{html: 'L' , value: 'L', tip: 'Help for L',  className: 'btn'},
        	{html: 'M' , value: 'M', tip: 'Help for M',  className: 'btn'},
        	{html: 'N' , value: 'N', tip: 'Help for N',  className: 'btn'},
        	{html: 'O' , value: 'O', tip: 'Help for O',  className: 'btn btnLast'},
        
        	{html: 'P' , value: 'P', tip: 'Help for P',  className: 'btn btnBrk'},
        	{html: 'Q' , value: 'Q', tip: 'Help for Q',  className: 'btn'},
        	{html: 'R' , value: 'R', tip: 'Help for R',  className: 'btn'},
        	{html: 'S' , value: 'S', tip: 'Help for S',  className: 'btn'},
        	{html: 'T' , value: 'T', tip: 'Help for T',  className: 'btn btnLast'},
        
        	{html: 'U' , value: 'U', tip: 'Help for U',  className: 'btn btnBrk'},
        	{html: 'V' , value: 'V', tip: 'Help for V',  className: 'btn'},
        	{html: 'W' , value: 'W', tip: 'Help for W',  className: 'btn'},
        	{html: 'X' , value: 'X', tip: 'Help for X',  className: 'btn'},
        	{html: 'Y' , value: 'Y', tip: 'Help for Y',  className: 'btn'}
        ]
        Go to the main "Properties" panel of the UX and open up the "Local CSS definitions" property under the "CSS/SVG" category. In there, place the following css:

        Code:
        .btn {
        float: left;
        width: 32px;
        }
        .btnBrk {
        clear: left;
        border: 1px solid #acc0dc;
        border-radius: 3px 0px 0px 3px;
        webkit-border-radius: 3px 0px 0px 3px;
        moz-border-radius: 3px 0px 0px 3px;
        }
        .btnLast {
        border: 1px solid #acc0dc;
        border-radius: 0px 3px 3px 0px;
        webkit-border-radius: 0px 3px 3px 0px;
        moz-border-radius: 0px 3px 3px 0px;
        }
        Save and run the component in Working Preview.

        P.S.
        I am not sure why the ".btn*" classes that I added are able to override the properties set by the class(es) added by AA; it adds its own classes after adding my "btn*" classes to the "class=" string for the button elements. I would have thought I would have needed to add a "!important" to each of my CSS class lines. I think I have asked Selwyn to provide more flexibility in the button class, so we can completely override the classes it tries to add to each button. In my real application, I have code that alters the behavior of the ButtonList class, such that I prevent AA from adding its own classes. The fix has to do with disabling what the ButtonList calls a "theme".
        Last edited by RichCPT; 06-08-2018, 01:45 PM. Reason: changed ".btnBrk" to round the corners, added P.S.

        Comment


        • #5
          Re: button list question

          Here is a little better CSS for the first button on rows 2 - 5 (I added border-right-style: none)

          .btnBrk {
          clear: left;
          border: 1px solid #acc0dc;
          border-right-style: none;
          border-radius: 3px 0px 0px 3px;
          webkit-border-radius: 3px 0px 0px 3px;
          moz-border-radius: 3px 0px 0px 3px;
          }

          The next thing to perhaps style would be the bottom border for lines 1 - 4, could set their style to "none", so the horizontal lines in the interior of rectangle are not double thick. Would need to add another CSS class.

          Comment


          • #6
            Re: button list question

            BTW, the solutions I posted above do interfere with CSS for mouse hovering and for the selected button - more tweaking of the css is needed.

            Like I said, in my real app I just turn off the butonList's theme and do not let alpha add any CSS classes to the buttons. This eliminates all the problems of mouse hovering and the selected button when I put everything under my own CSS.

            Please, if you need the feature to completely turn off AA's injection of the UX's style (CSS) into the buttonList then request Alpha to build it in.
            It would be super easy for them to just make it a property of the ButtonList control to either add the UX's style into the ButtonList or not. Also, in all the places where you can specify CSS class names in a buttonList, alpha should provide a way to specify if you want your CSS class names prefixed or appended to any classes that come from the buttonList's theme.

            If you want to fiddle with your own CSS for the hover state and selected button state then you can add "hoverClassName" and "pressedClassName" to the JSON for each button definition and then create CSS classes, as needed. I don't know if that will completely override what alpha may already supply as part of the "theme" and/or if you will need to include "!important" in your CSS attributes.

            Comment


            • #7
              Re: button list question

              Thanks for the ideas. My first was to use 5 button lists too. But then I thought that would be a waste of resources since I only need one onclick method to process all of them. I will look at the other ideas and see what i can come up with. By the way I am using the ios7 style so that does complicate it a bit. I'm not sure the json method will work since I am planning on using the Data Series method.
              Last edited by frankbicknell; 06-08-2018, 04:58 PM.
              Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

              Comment


              • #8
                Re: button list question

                DataSeries is even more limited than the "ButtonListBuilder" in terms of appearance (notice "DataSeries" does not allow specification of class names for the button!). The ButtonList class provides a vast amount of options that you just cannot get to unless you start out with the staticJSON method.

                After you fine tune things with StaticJSON, you can then replace the staticJSON with JavaScript and JSON data that you build yourself.

                What is dynamic about your list? And, what is it that you want the buttons to do? Just correspond to a value for the control or to actually perform an action?

                Comment


                • #9
                  Re: button list question

                  What Rich has shown is very cool. Usually I would prefer working on the front end... as he shows. But in this case there are so many variables that working on the rendered end may be more efficient.

                  Let Alpha do whatever it's doing... regardless of the data source... regardless of how the buttons are created. Then, depending on the Style used, adjust the rendered ButtonList. The code you need would be adding a line break to specific elements... and then adjusting the First and Last button css... which you'd do by removing and adding a Class only for those specific buttons.

                  http://youtu.be/M2f58NAWePk?hd=1

                  The process used would most likely depend upon where/how/why the ButtonList is being implemented. This is just another way to get stuff done.

                  Comment


                  • #10
                    Re: button list question

                    Thank again for the ideas.
                    What I am doing is what I call Quick Items Buttons. When the user clicks on a particular button I have a callback that queries the items table with the items I'd which I now have hard coded in the buttons onclick. My Items/charges list is updated with the results of the query.
                    This is working very well for me and the number of buttons and their items selections are changing often. As you might imagine it is very cumbersome doing it by creating a button and having to code each one.. What I envision is having a form in which I can select the appropriate data to create the button list, hence the desire to use the data series method. I suppose that I could convert the SQL data to Jason data but that seems like a lot of work.
                    Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                    Comment


                    • #11
                      Re: button list question

                      Thanks for the video David I will try to make that work.
                      Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                      Comment


                      • #12
                        Re: button list question

                        I am having a hard time wrapping my head around this. What I have settled on for now is creating an app that generates the json with my button criteria that I can just paste into the static json. I'm sure there is a better way but for now that is all I can muster. Thanks Rich and David for giving me some great ideas.
                        Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                        Comment


                        • #13
                          Re: button list question

                          If you'll post a sample UX I'll have a look and put in the code to affect the ButtonList. There are so many options to all this stuff, and Alpha renders code with minor differences when using different ButtonList building methods. Post a sample UX with what you're doing and then I'll know what I'm working with after Alpha renders.

                          Comment


                          • #14
                            Re: button list question

                            I have made some adjustments to the process that works for me. The button list i am experimenting with is named 'BTN_QUICK_ITEMS_CAPACITORS'
                            I have to do some more maniupulation to make it line up when I insert my Items names instead of the alphabet example.
                            this code in the onRenderComplete event of the ux.
                            Code:
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.0').className = "btn iOS7Button iOS7ButtonGroupHF";
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.4').className = "btn iOS7Button iOS7ButtonGroupHL";
                            
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.5').className = "btnBrk iOS7Button iOS7ButtonGroupHF ";
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.9').className = "btn iOS7Button iOS7ButtonGroupHL";
                            
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.10').className = "btnBrk iOS7Button iOS7ButtonGroupHF ";
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.14').className = "btn iOS7Button iOS7ButtonGroupHL";
                            
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.15').className = "btnBrk iOS7Button iOS7ButtonGroupHF ";
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.19').className = "btn iOS7Button iOS7ButtonGroupHL";
                            
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.20').className = "btnBrk iOS7Button iOS7ButtonGroupHF ";
                            $('{dialog.ComponentName}.V.R1.BTN_QUICK_ITEMS_CAPACITORS.CONTROL.24').className = "btn iOS7Button iOS7ButtonGroupHL";
                            and the CSS
                            .btn {
                            float: left;
                            }
                            .btnBrk {
                            float: left;
                            clear: left;
                            }
                            [/CODE]

                            The statis json
                            Code:
                            [
                            	{html: 'A' , value: 'A', tip: 'Help for A'},
                            	{html: 'B' , value: 'B', tip: 'Help for B',  className: 'btn'},
                            	{html: 'C' , value: 'C', tip: 'Help for C',  className: 'btn'},
                            	{html: 'D' , value: 'D', tip: 'Help for D',  className: 'btn'},
                            	{html: 'E' , value: 'E', tip: 'Help for E'},
                            
                            	{html: 'F' , value: 'F', tip: 'Help for F'},
                            	{html: 'G' , value: 'G', tip: 'Help for G',  className: 'btn'},
                            	{html: 'H' , value: 'H', tip: 'Help for H',  className: 'btn'},
                            	{html: 'I' , value: 'I', tip: 'Help for I',  className: 'btn'},
                            	{html: 'J' , value: 'J', tip: 'Help for J'},
                            
                            	{html: 'K' , value: 'K', tip: 'Help for K'},
                            	{html: 'L' , value: 'L', tip: 'Help for L',  className: 'btn'},
                            	{html: 'M' , value: 'M', tip: 'Help for M',  className: 'btn'},
                            	{html: 'N' , value: 'N', tip: 'Help for N',  className: 'btn'},
                            	{html: 'O' , value: 'O', tip: 'Help for O'},
                            
                            	{html: 'P' , value: 'P', tip: 'Help for P'},
                            	{html: 'Q' , value: 'Q', tip: 'Help for Q',  className: 'btn'},
                            	{html: 'R' , value: 'R', tip: 'Help for R',  className: 'btn'},
                            	{html: 'S' , value: 'S', tip: 'Help for S',  className: 'btn'},
                            	{html: 'T' , value: 'T', tip: 'Help for T'},
                            
                            	{html: 'U' , value: 'U', tip: 'Help for U'},
                            	{html: 'V' , value: 'V', tip: 'Help for V',  className: 'btn'},
                            	{html: 'W' , value: 'W', tip: 'Help for W',  className: 'btn'},
                            	{html: 'X' , value: 'X', tip: 'Help for X',  className: 'btn'},
                            	{html: 'Y' , value: 'Y', tip: 'Help for Y'}
                            ]
                            Yields this
                            2018-06-10_0-04-52.png

                            The only way I can make the line break is the .btn {float: left;} and the .btnBrk {clear: left;}. It would be nice to know how to insert a break without altering the css.
                            Last edited by frankbicknell; 06-10-2018, 12:59 AM.
                            Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                            Comment


                            • #15
                              Re: button list question

                              After all of that the onClick event of the buttonlist does not fire. I have tried various ways to change the css. I have even tried to change the buttons style attribute. But the onclick still does not fire. I don't know why. There is no javascript error causing issues.
                              Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                              Comment

                              Working...
                              X