B4J Question [Solved] UI Idea - A combination of CLVTree, CLVExpandable and CLVDragger

aeric · Jun 1, 2023

I am not a good UI developer but I have an idea.

I have seen
Combination of CLVExpandable and CLVDragger
and
[B4X] CLVTree - Tree View

I think it would be possible to combine the code to create another CLV class or view that functions like a code editor.
It can be use as

a simple IDE or HTML editor
a tool for creating a web layout without using HTML

It would also very nice if I can drag a view from a palette to the CLV and add a new item (div) to the bottom of the list which turn out as a B4J pane or B4XView.

peacemaker said:
idea how to include this technology "under hood" of some our B4X lib\framework, to use without HTML coding

Edit: Solution in post #21

aeric · Jun 1, 2023

My question is anyone has built or is building one (or something similar) ?

PaulMeuris · Jun 1, 2023

It's not very clear how the use cases could be implemented.
In case you need some assistance in this future project just let me know. I would be glad to help.
P.S. you could use my Simple Layout Designer application to design some layouts.

teddybear · Jun 1, 2023

aeric said:
I am not a good UI developer but I have an idea.

I have seen
Combination of CLVExpandable and CLVDragger
and
[B4X] CLVTree - Tree View

I think it would be possible to combine the code to create another CLV class or view that functions like a code editor.
It can be use as

a simple IDE or HTML editor

a tool for creating a web layout without using HTML

It would also very nice if I can drag a view from a palette to the CLV and add a new item (div) to the bottom of the list which turn out as a B4J pane or B4XView.

You may refer to this which is from @stevel05, perhaps it is what you want.

Magma · Jun 1, 2023

@aeric ...you mean something like this.... but in b4j ?

Bootstrap 4 Interface Builder | LayoutIt!

LayoutIt! is a interface builder for CSS Grid and Bootstrap that wants to be the kick-off for your front-end developments.

www.layoutit.com

To create Fast Forms... etc.. ?

ps: The bad with html and divs (always hate them)... is that is difficult to limit them :-( or know their limits...

aeric · Jun 1, 2023

teddybear said:
You may refer to this which is from @stevel05, perhaps it is what you want.

Good for reference but a bit different from what I thought.

aeric · Jun 1, 2023

Magma said:
@aeric ...you mean something like this.... but in b4j ?

Bootstrap 4 Interface Builder | LayoutIt!

LayoutIt! is a interface builder for CSS Grid and Bootstrap that wants to be the kick-off for your front-end developments.

www.layoutit.com

To create Fast Forms... etc.. ?

ps: The bad with html and divs (always hate them)... is that is difficult to limit them :-( or know their limits...

Yes, something like this.
If anyone has seen Wordpress Elementor or Wix.

Magma · Jun 1, 2023

aeric said:
If anyone has seen Wordpress Elementor or Wix.

or the latest standard "wordpress editor" of Posts... it is using a logic of blocks...

and you (we) need that ... to create web-pages... or better create b4j or b4a apps ?

Magma · Jun 1, 2023

I am sure that PaulMeuris Simple Layout Designer... is one solution...
Erel's B4XPreferencesDialog+FormBuilder ...one more...
Any why not... my EasyCode (that uses preferencesdialog+formbuilder)... another one...
sorry if forgot something :-(
for web-apps... there are ABMaterial, BANano, Mashy's Solutions... that can help and have some special tools inside..

but a more Advance designer with B4xview+Ready blocks.. (blocks can be already created layouts from internal designer)
The "problem" in "this thought" is the programming of those b4xview and components inside layouts...
actually not a problem but how will make it easy... understandable for the developer to use his code to the result will take...

So this solution must produce also code - not only design.. and I think design is the easy part for an app like this: in what row will be everything (drag n drop)

aeric · Jun 1, 2023

I was thinking to have some pre-saved templates to choose from with a B4J desktop app.

Magma · Jun 1, 2023

aeric said:
I was thinking to have some pre-saved templates to choose from with a B4J desktop app.

View attachment 142514

So... for Html ?

aeric · Jun 1, 2023

Magma said:
So... for Html ?

What do you mean?

The "Designer" (CLV) will translate the items into HTML. The closing tag will be automatically appended if required (most of the case), so developer never miss a closing tag.
I also want that, if a user click on an item in the CLV, he/she can edit the class, style and id of the element in the Properties panel.
The class can be choose from a List, for example from a Bootstrap CSS class.
The style can be a Map of attributes.

Magma · Jun 1, 2023

aeric said:
What do you mean?

The "Designer" (CLV) will translate the items into HTML. The closing tag will be automatically appended if required (most of the case), so developer never miss a closing tag.
I also want that, if a user click on an item in the CLV, he/she can edit the class, style and id of the element in the Properties panel.
The class can be choose from a List, for example from a Boostrap CSS class.
The style can me a Map of properties.

I mean you need an editor to produce Html Files..

I think it is possible and I am sure that you can do it

Magma · Jun 1, 2023

The only problem I see.. here... is if you want to use javascript like jquery.. is not possible to have live preview into the b4j-app because of webview and limits of it... you need call with jshell your page... to see it at an external browser..

aeric · Jun 1, 2023

Magma said:
The only problem I see.. here... is if you want to use javascript like jquery.. is not possible to have live preview into the b4j-app because of webview and limits of it... you need call with jshell your page... to see it at an external browser..

ok. The main purpose of this project is to output html code. If JavaScript is not working well in WebView then it can be forgiven. ?

aeric · Jun 1, 2023

I am not actually started this project yet. I just got this idea a few months ago, while I am developing my Web API template. It took me an hour or half to create this POC. Here is the skeleton or wireframe of the initial idea if anyone interested to expand it.
P/S: Don't confuse with the project name. What I wanted is actually something like a layout designer, not really a html code editor. ?

Magma · Jun 1, 2023

aeric said:
What I wanted is actually something like a layout designer, not really a html code editor. ?

why you are not telling us what exactly you want ?? ?

?

aeric · Jun 1, 2023

Magma said:
why you are not telling us what exactly you want ?? ?

?

Sorry, I have no idea what to call it in the first place. Just simply give it a name to start the project quickly. The word "Designer" only strikes in my mind when I add the Designer button to the form just now.

Magma · Jun 1, 2023

aeric said:
Sorry, I have no idea what to call it in the first place. Just simply give it a name to start the project quickly. The word "Designer" only strikes in my mind when I add the Designer button to the form just now.

So you wanna create a general-Designer... create it... name your panes-b4xview as you want... produce xml... or json... and then use those xml/json to convert-compile to the required result you want

Am I listening like an AI?... I am not... hey I am Magma, yet... I am sure... soon I will be replace by an AI-Bot

aeric · Jun 1, 2023

Magma said:
So you wanna create a general-Designer... create it... name your panes-b4xview as you want... produce xml... or json... and then use those xml/json to convert-compile to the required result you want

Am I listening like an AI?... I am not... hey I am Magma, yet... I am sure... soon I will be replace by an AI-Bot

Hahah. Then don't talk like an AI. Talk as Magma.

Actually I don't like to use VSCode or Sub Lime Text to edit html.
I am frustrated with closing tags. Sometimes, I am at the bottom of a nested-nested-nested...n-th nested div and I need to trace back the head of the div (if I miss one, due to copy and paste). I have to make a parallel line using my mouse cursor. Why? Auto Indent is not always working as it should.

Then, too much text, colors and lines in the code editor. Why not hide or encapsulate all the items I don't want to see. I just want to focus on a single element at a single time. Why not list out all the items of the element class and style. Why not I can temporary uncheck that property with a checkbox. Why front end developers can read a very very long line of code. I Can't! I want read a List, with multi-line style. Modern day web developers mind are really weird. I missed the good old days of Visual Basic 6, Dreamweaver and Visual Studio Web Forms. You click on an item, the Properties panel will show you what you can modify or customize. It is similar to what we are doing in B4X IDE.
I am not sure there is any similar Web UI Designer out there. Dreamweaver? Not for free.

B4J Question [Solved] UI Idea - A combination of CLVTree, CLVExpandable and CLVDragger

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency