Badly needed Layout features : Control Alignment and multiple-highlighted component property editing

Please can we have some decent alignment features for control and graphic objects as soon as feasible. It really helps.
Such as
ALIGN LEFT/RIGHT/TOP/BOTTOM
SPACE HORIZONTALLY/VERTICALLY

Also - it would be really useful to be able to edit the same property for multiple-selected controls, for example several button or label components at the same time.
In other IDE’s - When more than one item is selected, the Inspector displays only those properties common to all of the selected items. When you change a common property, it is changed for all the selected items.

Like I’ve said elsewhere, the Projucer GUI editor is kept around for legacy reasons and we’re not planning on adding any new features to it.

The world has moved on since the days of these static layout editors and all the smart money is now on things like FlexBox, which can handle complex, dynamic layouts. That’s the direction we’re going in the future, so it’d be unproductive for us to spend time improving this deprecated stuff. (Of course, feel free to send us a pull request if there’s any easy additions you want to make to it which you think would be useful to others too)

< feel free to send us a pull request if there’s any easy additions you want to make to it which you think would be useful to others to>

Will do.

“The world has moved on since the days of these static layout editors and all the smart money is now on things like FlexBox, which can handle complex, dynamic layouts. That’s the direction we’re going in the future”

Yes I got that impression loud and clear. And watched one of the talks on it at your devcon.
Is the intent to come up with some kind of scheme using metadata etc where any 3rd pty Flexbox editor software can be used, or are you completely “Roli-ng” (forgive me) your own - to be released whenever ready in the future ?

I presume its still considered best to create and edit FLEXBOX based layouts visually rather than editing text in some metadata format or C++ source code itself right ?

What - if any editors should i be taking a look at out there in web-land ?

No, I don’t think even web devs use visual editors, AFAIK people just write the layout manually - usually while watching a view of the results being updated so they can get fast feedback. You can do already this in C++ using our FlexBox classes and the projucer live build engine, but I’d like this year to find ways to make the process much easier and give it prettier syntax.

4 Likes

So given I’m on a new project, I’m having second thoughts about making the changes to PJ I discussed - given as you strongly suggest - Flexbox is the way forward ( and clearly from that JUCE Devcon talk- NOISE uses Flexbox substantially ).

So a question - should I forego classes such as the StretchableLayoutManager/Resizer ones etc in favour of using Flexbox classes to lay out and position/size everything ?

or mix and match ?

I’d definitely recommend using FlexBox for anything non-trivial, and yes, probably avoid StretchableLayoutManager, though it does have a few useful tricks. The syntax for using FlexBox is a bit long-winded at the moment, that’s something I want to improve, but it gives you really good functionality.

2 Likes

As someone who has come from a RAD tool 4GL background begun in the late 80s - and (for better or worse :open_mouth: ) not the arguably heavily text-favouring “hard core” C/C++ programmer kinds of mindsets - I have always used and appreciated the creative spur and productivity a good layout editor can provide. So I really hope - whether the final JUCE solution is metadata based - or as more likely contains the “metadata” within the actual C++ source code itself - that there is some visual mouse-based layout editor tool provided for the future Flexbox thing . Maybe something along the lines of WebFlow here ?

In addition Vlad Voina made the point in his talk that in larger projects there might be dedicated graphic artists assigned to GUI look-and-feel who might be able to take on more of the GUI duties directly if the are not forced to work on C++ themselves ( or continually work over-shoulder with a C++ programmer ). For such people and projects an actual layout editor - lets say PROJUCER GUI EDITOR FLEXBOX EDITION ! - is really beneficial.

if in fact there is some kind of work on a future visual flex box editor being done in some kind of pre-alpha. state - I would appreciate the option of maybe being an early alpha-tester - but someone who could - if given access to the code also make the odd (easier) improvements to it myself as work progresses as my own needs become apparent ( as I mentioned earlier ).

Maybe email or PM me about this Jules ? I’d rather help contribute to this future flex box thing for free on occasion coding wise - if it helps my own project - than the old deprecated editor after all :slight_smile:

2 Likes

I would love an editor as shown in the video. The importance of having a quick UI tool is often underestimated. I’ve used to work with Delphi 5 myself quite a bit, unmatched if you’d asked me when talking about rapid app development.

Everything can be made in code yes, but i would like to editor to generate the code for me. It saves so much time and of course UI designers could work with it to.

You talk about making the Flex box classes even simpler to use, the thing is with FlexBox is that it’s sometimes hard to predict (unless you are expert) what the end result will be because of all the different settings. So you’ll be typing quite a bit of code before you get it right.

And please don’t throw that Projucer and it’s Live build engine argument at us all the time. I’m for starters interested to know how many of your customers are actually using that Live build feature successfully (except for yourselves), maybe a survey would be a good tool for this. The survey could also be used to find out if indeed this Live Engine or a proper UI editor would be preferred by your customers.

I don’t understand why so much time has been put into this Live build Engine instead of more time in some proper UI tools. The strength of JUCE is to build cross platform rich UI apps rapidly, a proper UI editor or layout editor for that matter would accelerate that development even further. I

4 Likes

Hi Rebbur,

On the topic of RAD development I started off with 4th Dimension on the Mac unique at the time - went onto PowerBuilder - which I think at the time probably had one of the most sophisticated layout editor and GUI engines look and feel-wise ( windows-only of course ) And to boot also one of the most powerful pieces of client-server GUI-databease technologies - DataWindows - I ever came across.

I loved PB as we called it - and it was extremely productive in the City and used for major IT projects for around 5 years. Sadly in my mind this fad called java came along - which imo added little value but for supposed platform-cross-compatibility and threefold lines of code compared to PB. Now sadly powerbuilder lies in the doldrums as a legacy tool and VS with C# rules the day.

And I ended up using XOJO - which is great, cross platform - AND has a very decent GUI engine and layout editor - but still - nothing near to the power one could get with the ( Patented ) DataWindow technology. Datawindows is now available for C# but i’m not in that field

And of course - for audio… it has to be C++… :frowning:

Ahh yes PowerBuilder, i’ve used that a lot during my study, Good old times! I liked the tool quite a bit but when i finished school i found out nobody was using it :wink:

1 Like

I’ve made some changes and submitted a pull-request.

For anyone who wants to try out my modified version of PROJUCER with a limited set of changes i’ve put my modified version of PROJUCER in a shareable DropBox folder here - if anyone wants to try it out.

https://www.dropbox.com/sh/t8vgy45jg1l9xqk/AADn4nZoBbT34H6oS5Di4o3La?dl=0

The operations added are:

** Align Left, Right, Top Bottom, achieved by means of four new menu items added to the contextual menu when more than one object is highlighted.

** setting the width, height , x and y coordinates to more than one highlighted object by means of the properties inspector at the right hand side.

Whenever more than one object is selected the list of editable properties shown reduces to just those shared by all the highlighted objects - namely x,y, height and width.

one missing feature I did begin having a look at but gave up - due to time constraints and a need to get back to my own project was the ability to drag-re-size multiple-selected objects simply by means of the mouse (when the cursor is in re-size mode) . So currently this just works on a single object as before. Just coudn’t get my head around it.

1 Like

I went to take a look at the pull request but unfortunately it’s totally unusable due to GitHub showing entire file diffs instead of just your changes. This is usually a line-endings related issue - can you run the Projucer’s --trim-whitespace target_folder command line option to clean this up?

ok will do.

Dan

I’m not sure what your IDE is doing to the files but it’s still unreadable, if you look at the diff on GitHub there’s so much noise it’s impossible to see what you’ve actually changed.

It looks to me like a copy/past job into XCode, I recognise the lost indent in the comment blocks e.g. the license header. I have to fix that also each time I copy and paste there.

Also there are two settings, one in the XCode settings, the other in git, I use: core.eof=native and core.autocrlf=false.

What settings do you use/reccomend at Roli?

I took @dstenning’s commit and removed all the unnecessary diff noise. You can find the cleaned-up version here: https://github.com/McMartin/JUCE/commit/ec9ed630a06e762b3cacc2b500789a66aeb6635b


@dstenning: feel free to reset your branch to mine by doing the following

git remote add McMartin https://github.com/McMartin/JUCE.git
git fetch McMartin
git reset --hard McMartin/nonchai-develop
3 Likes

I have a good diff app on my mac so i’ll download your current develop project for this again and do my own diffs and hopefully sort out whats going on. Its definitely going to be just something to do with spaces, end file terminator or an extra line added or so on.

If you have time - you can dowload and try out the compiled modded version of Projucer i put in a dropbox folder and linked to it.

oh thanks so much for that McMartin !

will do. And thanks for the instructions as i’ve not used the PJ commandline stuff before.

1 Like

Correct. And thanks for those tips.

my develop branch now mirrors McMartin/nonchai-develop

So am i right in assuming the current pull-request can go ahead and be merged ed9 ?