Custom layout patterns reference

Suite and Optimus Suite 5
#1

Hi,

I’m in a need to create some custom layout patters. I know I can create any pattern by combining different existing patterns, but I want to have all the cells in 1 layout object.
I’ve tried studying the extra patterns which come with the suite in separate .js files, but there are some thing that remain unclear to me.

Is there a reference or documentation somewhere on the structure of layout patterns?

kind regards,
Arno Vanbeginne

#2

Hi,

there are not docs about custom patterns. Could you attach the pictures with desired patterns and the information how the item should be resized there ? Possibly we could help

#3

Hi,

the pattern is like the 4A pattern but with 5 rows instead of 2.
Or what you would get if you put a 5E pattern in cell “a” of a 3W pattern.

So it’s 3 columns with 5 rows in the first column.
Horizontal scaling should be on the first column and vertical scaling on the second row.

thanks in advance,
Arno Vanbeginne
Xenon54.

#4

We have created 7a pattern. It is attached
dhtmlxlayout_pattern7a.zip (535 Bytes)

#5

It works perfectly.

It could be interesting to document the creation of a custom pattern. There is a certain logic throughout all those patterns. Maybe for a future release?

Anyway I’m happy with what I’ve got now, so thank you very much for your help.

kind regards,
Arno.

#6

Hi,

we’ll necessary consider the idea of such a document.

#7

Hello Alexandra -

We are in need of the ability to define our own custom layout patterns. Any progress on the reference document describing the particulars of the pattern .js files? Or documentation on the concepts and methodology involved in creating such a file?

Such documentation would be extremely useful, I would think. I could certainly use it immediately, and from the various questions on this forum, I think others would benefit greatly as well.

Thanks.

#8

Hello,

unfortunately, there is not an article that describes how to create a custom layout. You may attach the picture with the pattern you need. And we’ll try to create it if it is possible.

#9

Hi Alexandra -

I don’t really have a picture to show you, because the need is for the ability to generate an arbitrary pattern (within the constraints of what’s allowed - as I understand not all patterns are permissible). What I am working on is a POC (Proof of Concept) solution for a customer, so there is no guarantee that my current approach will even be implemented, so I didn’t want you folks spending time to create a bunch of .js files that may never be used.

Immediate need, however, is to create an “nE” pattern, where n represents a number from 6 to 15. (n = {1,2,3,4,5} already exist). I’m comparing the 4E and 5E patterns to come up with a generalized understanding, but I’m not sure I understand it fully.

Perhaps, if you answer a couple questions, I will be able to generalize better. The 4E pattern .js file contains (in part) the following:[code]

...[/code] 1) What does the [b]autosize[/b] tag above define, and why the values chosen? For example, why not [b]ver="c;d"[/b] for instance?

  1. What does wh mean in the cell definition, and why is its value the same for all the cells in this case?

  2. Also in the cell definition, why is the neighbors attribute always the same value? What does it signify?

  3. Lastly, what are the following two lines specifying, and why the particular values in this case? dhtmlXLayoutObject.prototype._availAutoSize["4E_hor"] = new Array("a;b;c;d"); dhtmlXLayoutObject.prototype._availAutoSize["4E_ver"] = new Array("a", "b", "c", "d");
    I have more questions about this pattern, but I think I can experiment a bit and figure them out.

  4. Is it possible to have a “1C” centered (V & H) inside an arbitrary cell (picture would look kinda like a square doughnut, or thick picture frame)? How would I accomplish that?

Many thanks for your help, Alexandra!

#10

You can explain the structure the next way, something like this (f.e. it will be “6W”-pattern):

#11

Hello Darya -

Thanks for your diagram. I understand how to create a sample; the problem is that the design has not been decided upon yet, so I need the flexibility to be able to create whatever pattern is finally decided upon - which could change from time to time - and thus was looking for a way to understand how the pattern_xx.js files are generated so as to do it in an automated fashion. That’s why I have no sample to show.

In the interim, I was seeking to understand one of the simpler patterns (the “E” patterns) as a starting point. Looking at the existing patterns, I suppose one could combine layouts within layouts to get to almost any pattern combination imaginable, but that becomes more difficult on the front end to automate whether a given cell is really a sub-cell of another cell (that is, detecting when a layout is a nested layout of another).

And, while I was at it, I wondered if it would be possible to define a “1C” inside “cell” (region) as in the attached picture, but without nesting layouts.

-Will

#12

I can just suggest you the next way (see the picture):

There is no possibility (even a program way) to make a crosslike-view pattern (like this):

#13

OK, I understand.

Thanks for your time, Darya. I appreciate it. Seems I will have to adapt to using nested Layouts after all. That’s OK - it could be worse… :slight_smile: