Alpha DevCon 2018
Results 1 to 6 of 6

Thread: Help information on the use of "ControlGroup" container...

  1. #1
    Member
    Real Name
    Mark Bunds
    Join Date
    Aug 2015
    Location
    Cypress, TX
    Posts
    68

    Default Help information on the use of "ControlGroup" container...

    Where can I find direct information concerning the various types of containers, when and where their events apply, how they affect the alignment of child elements, and assignment of events?

    These seem to be important topics, but nothing turns up with explicit information on the forums, help documentation, wiki, or video library.

    There appear to be several thousand other poorly documented topics as well.

  2. #2
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    404

    Default Re: Help information on the use of "ControlGroup" container...

    Quote Originally Posted by mbunds View Post
    Where can I find direct information concerning the various types of containers, when and where their events apply, how they affect the alignment of child elements, and assignment of events?

    These seem to be important topics, but nothing turns up with explicit information on the forums, help documentation, wiki, or video library.

    There appear to be several thousand other poorly documented topics as well.
    Hello Mark,

    The "Explain Different Container Types" link in the Insert Container dialog will show you documentation for the different containers. The ControlGroup container changes the styling used to render the controls within it. It hides the border around the input controls and adds a divider line between each row of controls.

    Specifically, the ControlGroup adds a div around all the controls in the container with the class {dialog.style}ControlGroup and places each row of controls inside another div with the class {dialog.style}ControlGroupRow. The first row in the group also has the class {dialog.style}ControlGroupRowFirst. These classes are defined in the stylesheet for the UX Component. We recently published a video about applying custom CSS to the UX Component. It may or may not be of interest to you depending on what you're trying to accomplish: http://www.alphasoftware.com/video-l...t&search=style

    The "Containers" video provides an overview of all of the containers with the exception of Editor and EditorSet, which were added after this video was produced: http://www.alphasoftware.com/video-library/?v=3883

    Are you running into a specific issue? What are you trying to build?
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  3. #3
    Member
    Real Name
    Mark Bunds
    Join Date
    Aug 2015
    Location
    Cypress, TX
    Posts
    68

    Default Re: Help information on the use of "ControlGroup" container...

    Great Info, thanks!

    Quote Originally Posted by Beta Spark View Post
    Are you running into a specific issue?
    - Just my ignorance of the product!

    The custom CSS styles video is of great interest, and was responsible for helping me adjust the button and container styles (and I also totally hosed my .sass by placing an incompatible gradient style rule into the .css editor, so I learned way more than the video illustrated!)

    I am building a custom on-screen keyboard that is driven differently from the one created for the example videos. As elegant as the keypads in sample application are, they're too abstracted and integrated with the inspection project to use as a "drop-in" under the menu structure I am using which is based on an Alpha-supplied template.

    I have examined some excellent JavaScript OSK's by others, but the better ones tend to be a bit "heavy" since they have numerous features, and multiple localization files that are not needed for our project.

    By far, my largest goal is to get a better handle on passing data around, but a close second is to get layout and styling under control. While I was experimenting with the different container types, I noticed that the layout and/or styles of certain controls changed slightly, and I assumed this was due to the purposes for which Alpha built each container, but I really didn't see where to get detailed information.

    Your response has provided the epiphany I needed to get (this particular part of) the project under control, and for that I thank you!
    Last edited by mbunds; 05-11-2016 at 03:29 PM. Reason: Inserted quote...

  4. #4
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    404

    Default Re: Help information on the use of "ControlGroup" container...

    Quote Originally Posted by mbunds View Post
    Great Info, thanks!

    - Just my ignorance of the product!

    The custom CSS styles video is of great interest, and was responsible for helping me adjust the button and container styles (and I also totally hosed my .sass by placing an incompatible gradient style rule into the .css editor, so I learned way more than the video illustrated!)

    I am building a custom on-screen keyboard that is driven differently from the one created for the example videos. As elegant as the keypads in sample application are, they're too abstracted and integrated with the inspection project to use as a "drop-in" under the menu structure I am using which is based on an Alpha-supplied template.

    I have examined some excellent JavaScript OSK's by others, but the better ones tend to be a bit "heavy" since they have numerous features, and multiple localization files that are not needed for our project.

    By far, my largest goal is to get a better handle on passing data around, but a close second is to get layout and styling under control. While I was experimenting with the different container types, I noticed that the layout and/or styles of certain controls changed slightly, and I assumed this was due to the purposes for which Alpha built each container, but I really didn't see where to get detailed information.

    Your response has provided the epiphany I needed to get (this particular part of) the project under control, and for that I thank you!
    Any time, Mark!

    A lot of documentation is scattered about in various locations - release notes, the wiki, help boxes in the product, pdfs, etc. We are actively pulling all documentation for the product into one central location.

    I did pass on your request for a keyboard editor. We are investigating how best to provide a custom keypad/keyboard control. Thanks!
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  5. #5
    Member
    Real Name
    Mark Bunds
    Join Date
    Aug 2015
    Location
    Cypress, TX
    Posts
    68

    Default Re: Help information on the use of "ControlGroup" container...

    Quote Originally Posted by Beta Spark View Post
    I did pass on your request for a keyboard editor. We are investigating how best to provide a custom keypad/keyboard control. Thanks!
    In hindsight, a "native Alpha" OSK replacement keyboard is probably the very first "TOF" add-on feature that should have been explored.

    I noticed early on that the the native OSK's on mobile devices were going to cause formatting and layout flow problems, but I assumed this was pretty much a "given," and Alpha had a handle on it.
    I can see now that this is no small order; the keyboard that works for MY project is going to fall short of someone else's needs, and when a "one-for-all" keyboard is completed, it will likely be too bloated for smaller projects.

    For the HMI touch-screen PC's on our drilling rigs, I created a universal keyboard containing its own display field. The program could call the keyboard into view, passing arguments that told the keyboard how to configure itself, how to validate input, and where the results were to be stored. This keyboard could appear as a plain number pad, hexadecimal number pad, calculator, set point entry pad, user/password entry, and various alphabetic keyboards:

    image012.png
    image011.png
    image027.png
    image028.png

    I can't find any screen shots of the keypad in calculator mode, but the full-alpha keyboard and the set-point entry keypad are the same project, using dynamic rendering of all controls, surfaces, and text. The borders, buttons, insets, and the "carbon-fiber" background are all generated procedurally on-the-fly the first time a mode-instance is launched, and then re-served from a cache of "baked" images for subsequent calls, unless the "fixed" control graphics are edited or otherwise changed.

    It was built using Microsoft Expression "Blend" which is a graphical WPF editor that served as the WPF screen/window/graphics front end for Visual Studio (now integrated), and it used MS C# .NET for its code-behind, and despite its flexibility, it was very lightweight and responsive.

    And not at all compatible with non-Windows mobile devices.

    Of course, we weren't fighting with any kind of native OSK, but this is the kind of thing I am working on for this project (minus the fancy animations included in the WPF project), and intend to make it easy to apply to other projects also.

    The first effort goes into creating a monolithic UX component that expands or contracts to the keyboard configuration desired. If that gets too heavy (or even if it doesn't), it will be split into modular sections that can be used in place of the master when all that functionality is not needed.

    Here's what I have so far:

    MRI_SW_SMALL.png

    Besides what you see here, the project has a few functional panel cards with text input controls performing look-ups, along with their list controls that perform filtering for other lists, but we have a long way to go from here. Right now, the keypad more-or-less "embedded" on this page, and simplistic as it is, it is beautiful now that you advised me about the layout (those buttons were scattered all over the screen before).

    The basic keys for "Employee ID" input are the only ones visible here, but it does have hidden sections containing buttons for basic operators, and the mating "FWD" pointer button is hidden in a container with the "Enter" button which shows after the user has input 5 characters. The control elements will be copied to an independent UX for further development after their basic functionality and style has been detailed a bit more.

  6. #6
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    404

    Default Re: Help information on the use of "ControlGroup" container...

    Quote Originally Posted by mbunds View Post
    In hindsight, a "native Alpha" OSK replacement keyboard is probably the very first "TOF" add-on feature that should have been explored.

    I noticed early on that the the native OSK's on mobile devices were going to cause formatting and layout flow problems, but I assumed this was pretty much a "given," and Alpha had a handle on it.
    I can see now that this is no small order; the keyboard that works for MY project is going to fall short of someone else's needs, and when a "one-for-all" keyboard is completed, it will likely be too bloated for smaller projects.

    For the HMI touch-screen PC's on our drilling rigs, I created a universal keyboard containing its own display field. The program could call the keyboard into view, passing arguments that told the keyboard how to configure itself, how to validate input, and where the results were to be stored. This keyboard could appear as a plain number pad, hexadecimal number pad, calculator, set point entry pad, user/password entry, and various alphabetic keyboards:

    image012.png
    image011.png
    image027.png
    image028.png

    I can't find any screen shots of the keypad in calculator mode, but the full-alpha keyboard and the set-point entry keypad are the same project, using dynamic rendering of all controls, surfaces, and text. The borders, buttons, insets, and the "carbon-fiber" background are all generated procedurally on-the-fly the first time a mode-instance is launched, and then re-served from a cache of "baked" images for subsequent calls, unless the "fixed" control graphics are edited or otherwise changed.

    It was built using Microsoft Expression "Blend" which is a graphical WPF editor that served as the WPF screen/window/graphics front end for Visual Studio (now integrated), and it used MS C# .NET for its code-behind, and despite its flexibility, it was very lightweight and responsive.

    And not at all compatible with non-Windows mobile devices.

    Of course, we weren't fighting with any kind of native OSK, but this is the kind of thing I am working on for this project (minus the fancy animations included in the WPF project), and intend to make it easy to apply to other projects also.

    The first effort goes into creating a monolithic UX component that expands or contracts to the keyboard configuration desired. If that gets too heavy (or even if it doesn't), it will be split into modular sections that can be used in place of the master when all that functionality is not needed.

    Here's what I have so far:

    MRI_SW_SMALL.png

    Besides what you see here, the project has a few functional panel cards with text input controls performing look-ups, along with their list controls that perform filtering for other lists, but we have a long way to go from here. Right now, the keypad more-or-less "embedded" on this page, and simplistic as it is, it is beautiful now that you advised me about the layout (those buttons were scattered all over the screen before).

    The basic keys for "Employee ID" input are the only ones visible here, but it does have hidden sections containing buttons for basic operators, and the mating "FWD" pointer button is hidden in a container with the "Enter" button which shows after the user has input 5 characters. The control elements will be copied to an independent UX for further development after their basic functionality and style has been detailed a bit more.
    Wow! Your keyboard and keypads look fabulous.

    This is great feedback, Mark! Thank you!
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

Similar Threads

  1. "Could not open or create multi-user-information file" error when opening workspace
    By twwtc in forum Alpha Five Version 11 - Desktop Applications
    Replies: 6
    Last Post: 08-05-2014, 04:39 PM
  2. "Object Is Not Defined" Error When I Use "Close Form" in the "OnInit"
    By nigeldude in forum Alpha Five Version 11 - Desktop Applications
    Replies: 5
    Last Post: 03-23-2013, 04:22 AM
  3. Getting Toggle Button / Container To Initially Render as "closed" Instead of "open"
    By Al Buck in forum Application Server Version 11 - Web/Browser Applications
    Replies: 1
    Last Post: 06-22-2012, 03:53 PM
  4. "Login Information Incorrect" in change Password Dialog
    By Locke in forum Application Server Version 9 - Web/Browser Applications
    Replies: 5
    Last Post: 06-21-2011, 02:25 PM
  5. "Missing" report from a container.
    By cjw423 in forum Alpha Five Version 7
    Replies: 0
    Last Post: 01-26-2009, 10:01 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •