Alpha DevCon 2018
Page 1 of 2 12 LastLast
Results 1 to 30 of 42

Thread: Styling Alpha using Alpha

  1. #1
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Styling Alpha using Alpha

    There is a great deal of debate on this message board about making programs modern and stylish. Alpha actual makes it easy to do. However, the problem is that easy is not quick. Just having great stylesheets does not solve the whole problem. Layout and program flow is possibly the largest problem.

    We are trying to build a framework that will solve many of these problems.

    My question is
    • what parts of Alpha take the most time to style?
      What parts prove the most difficult?


    Here is where we have got so far.

    Moodboard
    http://smg.datadrivensystems.co.uk/r.../moodboard.a5w
    Examples
    http://smg.datadrivensystems.co.uk/r...tyle/form1.a5w
    http://smg.datadrivensystems.co.uk/r...tyle/grid1.a5w
    Ideas that need a little work.
    Input control sub Themes
    https://dochub.com/michaelcornford/E...swgnf9enrutmej
    Form styles Three column
    https://dochub.com/michaelcornford/K...h4kkdp7dn3uf6h
    Form single column right help
    https://dochub.com/michaelcornford/6...47v2fhmy5p6cdk
    Form 2 Column
    https://dochub.com/michaelcornford/z...twpg9uubf9oa8p
    Form 2 Column with footer
    https://dochub.com/michaelcornford/g...okacmood00e71m


    Here is a fun component.

    https://cornford-gmail.tinytake.com/...MwMV83MjkyNTQ0

  2. #2
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default Re: Styling Alpha using Alpha

    this is great! I would love to have global library templates like your modern looking forms-form1(15+ modern looking/responsive text/gird/form templates) and as alpha has global library if it can be distributed as global templates it will be awesome.

  3. #3
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    Templates take a lot of time to set up.

    So Dashboards and Form layouts require some thought, our problem is focusing effort where it is most useful.

    https://cornford-gmail.tinytake.com/...AwNV83Mjk2ODUw

  4. #4
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default Re: Styling Alpha using Alpha

    may be some really good looking themes similar to warrant and with more modern colors and rounded corner boxes, if you apply all controls start looking great with those colors and height/width/ rounded corner/highlight etc.

  5. #5
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default Re: Styling Alpha using Alpha

    another cool thing is adding touch events to grid.

    http://tutorials.jenkov.com/responsi...avascript.html

    You can catch elemtns using jquery and add many touch events. This way we can use powerful grid in all devices(just adding responsive rules to hide columns)

  6. #6
    Member
    Real Name
    Richard Battle
    Join Date
    May 2017
    Location
    Austin,TX
    Posts
    87

    Default Re: Styling Alpha using Alpha

    Moodboard is pretty cool. I like the list control you created at the bottom that allows the user to switch between a columnar layout and freeform. I think that's a great addition to any app. The ability to let the user decide how to view data based on their priorities. I'd say if anything go in that direction with your project. More customization. All of us can create a basic, nice looking layout, but responsive designs are more challenging to create(for me anyway).

    On my wishlist would also be a button to allow the user to scroll down to a certain point on a long form page. Html has an option to scroll to a certain hashtag on a page so I can use that on an a5w page. If there is a way to do that in the UX itself that would be great.

    BTW your last 3 links before the video are getting a 404 error.

  7. #7
    "Certified" Alphaholic DaveM's Avatar
    Real Name
    Dave Mason
    Join Date
    Jul 2000
    Location
    Hudson, FL
    Posts
    5,927

    Default Re: Styling Alpha using Alpha

    A template with module positions would be a step up. Look at Joomla and others that use that method. For example only, Notice the sides on the page and the slider at the top. Those are modules with pretty much unrelated article content in the main space. Also this template is almost all CSS and uses bootstrap 4. https://pwadds.com
    ZPay no attention to the content, but on the subject all content is in MySQL using Mysqli and Maria actual db's. Oh the background is a module built into the Template. One can learn a lot from Joomla and wordpress type sites
    Dave Mason
    dave@aldaweb.com

    Skype is dave.mason46

  8. #8
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    Thanks Richard I will post the links later

    On my wishlist would also be a button to allow the user to scroll down to a certain point on a long form page. Html has an option to scroll to a certain hashtag on a page so I can use that on an a5w page. If there is a way to do that in the UX itself that would be great.


    This is fairly easy will post an example later.

  9. #9
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    Thanks Dave I will post a picture and component to see that I have understood.

  10. #10
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    Richard

    Here is a video that shows what you requested. Thanks for the suggestion, we will include this.

    https://cornford-gmail.tinytake.com/...Q4NV83MzA2ODE4

    There is another way of doing the same thing.

    https://cornford-gmail.tinytake.com/...UyOV83MzA2ODk1

  11. #11
    "Certified" Alphaholic DaveM's Avatar
    Real Name
    Dave Mason
    Join Date
    Jul 2000
    Location
    Hudson, FL
    Posts
    5,927

    Default Re: Styling Alpha using Alpha

    This is demo of one of my favorite Templates. See what the world likes now?
    http://www.template-joomspirit.com/t.../template-137/ for 26.00?
    Dave Mason
    dave@aldaweb.com

    Skype is dave.mason46

  12. #12
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    The problem with price is well-constructed templates in bootstrap can sell 40,000 in Alpha the numbers are smaller. However, the work is the same.

    I am working on some examples, but I am not thinking of competing with content-rich programs. I see Alpha's strength as data rich.

    Thanks for the input

  13. #13
    "Certified" Alphaholic DaveM's Avatar
    Real Name
    Dave Mason
    Join Date
    Jul 2000
    Location
    Hudson, FL
    Posts
    5,927

    Default Re: Styling Alpha using Alpha

    Just woul like to see alpha be able to use some of the thousands of open source templates available so you guys could make them pretty AND functional. Most of the competition has templates built in and one can add their own as they like. They are like using plug ins. Wake up alpha!
    Dave Mason
    dave@aldaweb.com

    Skype is dave.mason46

  14. #14
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,940

    Default Re: Styling Alpha using Alpha

    3022CA0F-2548-4ABC-A567-59B40AA65FFF.jpeg

    This is an alpha created style in a UX. Templates are great for ideas but i find them often times where you have to strip so much out that it’s often better to come up with your own. It would however be a great addition to take the styles a bit further and have a templating system, it might be a UX that is already responsive.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  15. #15
    Member
    Real Name
    Richard Battle
    Join Date
    May 2017
    Location
    Austin,TX
    Posts
    87

    Default Re: Styling Alpha using Alpha

    Aha Michael! Thanks for showing me the way. So it's as easy as a static text header with the <a> tag, just like in html. I've been trying show/hide boxes to make forms as small or large as need be, but this is much better.

  16. #16
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    Richard

    Yes and Kudos to Alpha standard Html and CSS works so you can search the web and adapt the code.

  17. #17
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    Charles, I agree 100%.

    We are trying to do exactly what you suggest, so our form templates would have common themes and "blocks" so you could build, rather than deconstruct, what suits you.

    The question boils down to
    to take the styles a bit further
    which styles?
    What things do people need adding or tidying?

  18. #18
    Member
    Real Name
    Richard Battle
    Join Date
    May 2017
    Location
    Austin,TX
    Posts
    87

    Default Re: Styling Alpha using Alpha

    Does anyone know how to create a hyperlink within the button without the look of hyperlink styling, and also so it still works as a button? Haven't been able to override the blue/underline style with inline style option, and don't want to change local css. Also it stopped working as a button, meaning you need to click the text itself to make it link. I would like to push anywhere within the button to make it work.

    hyperlink example.PNG
    Last edited by asap rich; 03-06-2018 at 09:23 PM. Reason: edit to add pic

  19. #19
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    You could try something like this.

    buttonLink.a5wcmp

  20. #20
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,946

    Default Re: Styling Alpha using Alpha

    Why wouldn't you just create your normal button... and then call window.open() in the click event?

    I wouldn't want to have to create 2 controls per one button... seems a bit much.

    Why do you need to create a hyperlink within a button?

  21. #21
    Member
    Real Name
    Richard Battle
    Join Date
    May 2017
    Location
    Austin,TX
    Posts
    87

    Default Re: Styling Alpha using Alpha

    Thanks again Michael, I think that'll work!

    David I'm trying to make a button that will skip down to a certain area of the page. I have a long form, and just want the menu to go to the beginning of a container with specific info to fill out or edit. Would window.open() be able to control where it would scroll to? The html method works atm.

  22. #22
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,946

    Default Re: Styling Alpha using Alpha

    Ok... thanks... now that we have some details... your button click event code would be...

    Code:
    location.href = "#bottom";
    Where "#bottom" is the id of your anchor tag.

    And... not that you need it... but removing the underline from a hyperlink is done by setting it's Style to text-decoraction:none;

  23. #23
    Member
    Real Name
    Richard Battle
    Join Date
    May 2017
    Location
    Austin,TX
    Posts
    87

    Default Re: Styling Alpha using Alpha

    That is an improvement over hyperlinks. Thanks!

  24. #24
    Member
    Real Name
    Sean OKelly
    Join Date
    Sep 2015
    Location
    Charleston, WV
    Posts
    131

    Default Re: Styling Alpha using Alpha

    Michael, I certainly know you do great work. But to me, I think what should be done is programmatic.

    The way to make this more like other development environments is to allow applying any css file and having those classes show up when clicking the little "class" icon for a control. I know there are reasons they haven't gone down this road, but the gap between Alpha and other tools is closing in many ways and this is a stumbling block in my opinion.

    Alpha controls should default to certain tags in a css file, just like basic html tags do (p, h1, etc.). For example, a PanelCard Header and Footer, should default to some class name that could be in any css file, such as class="PanelCardHeader". When an external front end developer hands over a design it's easy to integrate it because many items already match up. Those that don't you could then use the little button to pick the correct class.

    I'm working with that scenario right now where a client already has a user interface design made up (graphics, css, navigation)....and it's a pain in the arse.

    Having the additional stylesheets available is awesome, and Michael is the guy to do it. But I just think in the long run we need a better way to handle it.

    If there is a way to do what I'm asking already, someone please let me know. Converting this stuff is NOT what I want to be doing.

  25. #25
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Styling Alpha using Alpha

    Hi Sean

    One of the major problems is CSS itself. There are some steps being taken to help but we are still a long way from having CSS that is up to date.
    You could look at BEM to make your CSS more readable. It is currently not practical to scope CSS.
    We are trying to use CSS Variables to play with style in the browser. Once we have something close we export (Manual process) the variables to Sass.
    http://datadrivensystems.co.uk/demo/...m-dynamic2.a5w
    Here is a look at forms using a number of Sub Themes. If you play with the pickers you can change the look of the forms, press Save and you can see the variables. Export gets them into a text file.

    The moodboard is step 2
    https://drive.google.com/file/d/1_WB...ew?usp=sharing
    Once you have played with the CSS Variables and set Sass you can see predefined Alpha components styled.

    The final step is to build a UX
    This is a little contrived but I guess you get the idea
    http://smg.datadrivensystems.co.uk/l...ra/example.a5w
    Change the size of the window to see the media query break points.

  26. #26
    Member
    Real Name
    Sean OKelly
    Join Date
    Sep 2015
    Location
    Charleston, WV
    Posts
    131

    Default Re: Styling Alpha using Alpha

    Hi there Michael,

    I get what you are doing, and it's good. However, I just think Alpha needs to go more in the direction of other platforms as it relates to styling. Do you know why they haven't yet done that?

    I will be taking a very close look at what you are doing in the next few weeks as I have a new mobile app which needs styling (for a new client, not one of my own).

    Also, are you guys going to conference this year? It would be great to see you guys again and catch up.

  27. #27
    Member
    Real Name
    Jeremy Scrime
    Join Date
    Sep 2015
    Posts
    69

    Default Re: Styling Alpha using Alpha

    Quote Originally Posted by WebDesignShop View Post
    Hi there Michael,

    I get what you are doing, and it's good. However, I just think Alpha needs to go more in the direction of other platforms as it relates to styling. Do you know why they haven't yet done that?
    Retweet. I agree and I also echo your statement in a previous thread about this being Alpha's biggest stumbling block. RAD needs to be RAD in all aspects for a top notch tool. You can't promote RAD simply because you offer low code development if you haven't solved the styling issue.

    I wish I had the time to devote to solve this myself, but I don't so that I was I use RAD tools in hopes of automating some of the easily repeatable stuff that is not business logic specific. That's where the tool should get me and then I pick up from there.

  28. #28
    Member
    Real Name
    Sean OKelly
    Join Date
    Sep 2015
    Location
    Charleston, WV
    Posts
    131

    Default Re: Styling Alpha using Alpha

    Hi Jeremy,

    Just for clarification, I think Alpha is fine for promoting it as a RAD tool even with the styling issues. It still beats many of the other tools on the market for developing multi version apps (desktop, web, mobile). So, the styling thing is an issue YES, but is Alpha Anywhere a great RAD TOOL anyway....YES. The competition is growing but Alpha is still ahead of the pack....in my mind. Plus, I'm hoping Michael solves the issue soon. :)

  29. #29
    Member
    Real Name
    Jeremy Scrime
    Join Date
    Sep 2015
    Posts
    69

    Default Re: Styling Alpha using Alpha

    I don't disagree that it is a RAD tool, I do however feel that in order to stand the test of time and hold up against competitors in this space the styling issue is going to have to be addressed. Overall I'm very happy with the product, enhancing the styling of finished products would for my purposes make it an extremely hard tool to replace. Can that be done now, certainly but with far too much effort and time.

    As I've stated in the past, to be one of the "industry leaders" in this space there are improvements that can be made to the product that will propel it far beyond where it is today. Many of those have been made and Alpha is very aggressive with updating the product to stay relevant. The growth and enhancements in the product in the short time I've been using it have been extremely impressive and one of the primary reasons I have all the faith in the world that Alpha will solve the styling issue in an upcoming major release.

  30. #30
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,506

    Default Re: Styling Alpha using Alpha

    If you think about the design you want and make your templates with the inline CSS modifications required you can do it now.
    Here are some examples - works great with Browser or Mobile.
    2018-04-20_1127.png2018-04-20_1127_001.png2018-04-20_1128.png2018-04-20_1130.png
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

Similar Threads

  1. Replies: 0
    Last Post: 10-02-2013, 12:31 AM
  2. Styling Alpha Five Help Documentation
    By TheSmitchell in forum Application Server Version 11 - Web/Browser Applications
    Replies: 0
    Last Post: 09-14-2012, 02:38 PM
  3. Alpha Five 2011 Plans & Announcing - a comprehensive Alpha Five Subscription Plan
    By Richard Rabins in forum Alpha Five Version 10 - Desktop Applications
    Replies: 24
    Last Post: 12-26-2010, 03:18 PM
  4. Replies: 0
    Last Post: 12-22-2010, 11:37 AM
  5. Replies: 5
    Last Post: 12-20-2009, 03:19 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
  •