The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Boxes that relate, How should i solve this?
SE-FMO
post Jan 6 2019, 04:17 PM
Post #1





Group: Members
Posts: 3
Joined: 6-January 19
Member No.: 26,790



Hello!

I have a project in mind that i want some help and input how to solve.

My problem so to speak is that i want a HTML page where i want to create boxes with attributes.
The three main attributes will let me describe a relationship between different boxes on the page.

The basic way to describe the mechanics is that it would work like a file cabinette like a tree view sort of.
In real life a good example would be a kitchen cabinette.

The attributes that i want to use is "Function", "Location" and "Product".
* Function declares a function
* Location declares a location
* Product declares a product

So to give an example of the kitchen cabinette with location aspect i start with a blank page
and declare that i want to input a location wich will be the MAIN location the cabinette.
a box will be representing the cabinette on the page.
then i want to insert two locations within that location wich will be RIGHT and LEFT.
Two boxes within the MAIN box will be displayed representing right and left.
Then i want to insert 3 levels or shelves into each side of the cabinette.
They will be displayed inside the right and left boxes.

The layout would be displayed on the whole page until i wanted to declare a second MAIN location or
if i wanted to put the cabinette in a kitchen wich then would be the MAIN location.

Then i want to add functions in the cabinette.
PLATES will be my first function so i place it in the cabinette on the right side, third shelf from the top.
The function box will be placed in the locationbox now we have a relation between the function and the location.
Then i want to add products in the cabinette.
DINING PLATES and DESSERT PLATES will be the first products. As function they are plates but with different tasks so therefore
two products, they will be placed in the functionbox of plates in the locationbox in the cabinette
on the right side, third shelf from the top.

Now we have created a relationship between the three aspects/attributes smile.gif

To add some more, location is not always the leading MAIN a location coukd be placed inside a function.
a product could contain several components also to make the complete product you used as a MAIN and location and function
could occur within the product.

So how could i create this? I have been searching for a java editor type interface where i can create a table
and place tables in tables is this the way to solve this? Or should i approach this in a different way?
When ever i want to place something i want to attach attribute and name,
Attribute will control CSS and style the box accordingly and a name will be places in the top right corner of each box.
Some restrictions may occur like size but to start with i will have to go slow.

Kind regards

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 6 2019, 05:48 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,218
Joined: 10-August 06
Member No.: 7



Hello!

QUOTE(SE-FMO @ Jan 6 2019, 10:17 PM) *

The basic way to describe the mechanics is that it would work like a file cabinette like a tree view sort of.

Do you mean something like these multi-level SELECT menus for the user interface? http://www.javascriptkit.com/script/script...iplecombo.shtml and then you want to display the result in a two-column table, each column with three rows?

QUOTE
To add some more, location is not always the leading MAIN a location coukd be placed inside a function.
a product could contain several components also to make the complete product you used as a MAIN and location and function
could occur within the product.

This confuses me. blink.gif Can any attribute contain any other, or are there restrictions? Maybe it's impossible to say without knowing the real purpose of the application (if it's not a kitchen).

QUOTE
I have been searching for a java editor type interface where i can create a table
and place tables in tables is this the way to solve this? Or should i approach this in a different way?

You could do it with javascript (client-side java is something else and not used anymore) but also with any server-side scripting language (PHP is popular).

If there are lots of attributes (and/or they are changed often by users or site owners) maybe a database becomes necessary too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SE-FMO
post Jan 7 2019, 07:40 AM
Post #3





Group: Members
Posts: 3
Joined: 6-January 19
Member No.: 26,790



QUOTE(Christian J @ Jan 6 2019, 11:48 PM) *

Hello!


QUOTE(SE-FMO @ Jan 6 2019, 10:17 PM) *

The basic way to describe the mechanics is that it would work like a file cabinette like a tree view sort of.


QUOTE
Do you mean something like these multi-level SELECT menus for the user interface? http://www.javascriptkit.com/script/script...iplecombo.shtml and then you want to display the result in a two-column table, each column with three rows?

I was thinking simple like a button, one for each. But this demands for a setup window or the ability to set the properties of the inserted object?

QUOTE
To add some more, location is not always the leading MAIN a location coukd be placed inside a function.
a product could contain several components also to make the complete product you used as a MAIN and location and function
could occur within the product.

QUOTE
This confuses me. blink.gif Can any attribute contain any other, or are there restrictions? Maybe it's impossible to say without knowing the real purpose of the application (if it's not a kitchen).

Not really but if it goes into a single-cell table and you put another single-cell into that they relate but the attributes of each can shift. The attributes themselves only relate to ONE object the single-cell.
But if i want to view the whole picture the location aspec attribute starting from MAIN you create a searchpath down to the last CHILD like a file cabinette.
The purpose of the application could fit a kitchen or relations within the kitchen or everything you want to declare smile.gif


QUOTE
I have been searching for a java editor type interface where i can create a table
and place tables in tables is this the way to solve this? Or should i approach this in a different way?

QUOTE
You could do it with javascript (client-side java is something else and not used anymore) but also with any server-side scripting language (PHP is popular).

If there are lots of attributes (and/or they are changed often by users or site owners) maybe a database becomes necessary too.

Is a table a good way to go or could i use a different class/object?

The plan is to run a server on a local computer so no large numbers of users. A DB is a good idea to keep track of the structure
the DB would be the holder of the dimensions of the relations. We are looking at three dimensions of structure displayed in one interface really.
I have been testing with PHP before so i think its going to work with the DB and Java.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 7 2019, 10:23 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,218
Joined: 10-August 06
Member No.: 7



QUOTE(SE-FMO @ Jan 7 2019, 01:40 PM) *

I was thinking simple like a button, one for each. But this demands for a setup window or the ability to set the properties of the inserted object?

How many Functions, Location and Product values (as opposed to combinations) are there in total? If it's just a few, buttons might work, but for a large number maybe some kind of sub-menu system could be used.

QUOTE
Is a table a good way to go or could i use a different class/object?

An HTML table for the visual layout? Maybe, if the cell content is tabular data. With CSS there are other ways to create a grid layout of more decorational nature, some can be made to rearrange themselves in small viewports (like on a smartphone).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SE-FMO
post Jan 7 2019, 05:35 PM
Post #5





Group: Members
Posts: 3
Joined: 6-January 19
Member No.: 26,790



QUOTE(Christian J @ Jan 7 2019, 04:23 PM) *

How many Functions, Location and Product values (as opposed to combinations) are there in total? If it's just a few, buttons might work, but for a large number maybe some kind of sub-menu system could be used.

First i thought i just test with the three i mentioned earlier and see the outcome and what could be done with it.
so for starters i think a button for each of the three aspects would do fine.
So when i push the putton for the function aspect the "editor" would output a single cell of a table for me to attatch information on.
The cell of that aspect kind would have to be in a specific color so it could easily be identified among the other three kinds.
the single cell of the same kind would have to have an identifier in readable text and also an object name so that it could be handled.

Now a trycky part would be if i create a MAIN cell of an aspect this would represent the main "folder" of where the other cells relate to.
like the cabinette the contents if i have many levels and go to the deepest point in the structure this point should refer to all the previous ones
readable. Maybe the name would have to be a prefix to be added on the next one of the same type?


QUOTE
An HTML table for the visual layout? Maybe, if the cell content is tabular data. With CSS there are other ways to create a grid layout of more decorational nature, some can be made to rearrange themselves in small viewports (like on a smartphone).

HTML tables are really useful and simple smile.gif
If i run out of ideas i always end up using a table even in documents like *.doc they come in handy when styling a sheet for work
and contents get more controlled.
The contents i think would be really simple and the table just a place to hold the text.

Are there any examples of the other kinds?

Kind regards

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 8 2019, 05:44 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,218
Joined: 10-August 06
Member No.: 7



QUOTE(SE-FMO @ Jan 7 2019, 11:35 PM) *

QUOTE(Christian J @ Jan 7 2019, 04:23 PM) *

How many Functions, Location and Product values (as opposed to combinations) are there in total? If it's just a few, buttons might work, but for a large number maybe some kind of sub-menu system could be used.

First i thought i just test with the three i mentioned earlier and see the outcome and what could be done with it.

I meant how many Locations other than Main, Left and Right? How many more Functions than Plates? How many more Products than Dining Plates and Dessert Plates?

QUOTE
Now a trycky part would be if i create a MAIN cell of an aspect this would represent the main "folder" of where the other cells relate to.
like the cabinette the contents if i have many levels and go to the deepest point in the structure this point should refer to all the previous ones
readable. Maybe the name would have to be a prefix to be added on the next one of the same type?

Perhaps some kind of bread crumb navigation, similar to

CODE
HTMLHelp Forums > Web Authoring > General Web Design > Boxes that relate

?

QUOTE
Are there any examples of the other kinds?

Search for any of these (you need more than just the property though): "position: absolute", "display: table-cell", "display: flex" or "display: grid". I'm not familiar with the last two ones, but there are plenty of tutorials on the web.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th September 2019 - 06:43 PM