Splitview - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

<SPLITVIEW/> : <BOX/>

The SPLITVIEW widget divides the horizontal space vertically into 2 views. The vertical divider can be moved along the horizontal axis to grow/shrink each view respectively which is particularity useful on large landscape displays. Its immediate children are VIEWs which can contain user customizable dashboards, especially combined with TREEVIEW and TABVIEW as shown here.

Restrictions:

  • The direct child of a SPLITVIEW must be a <VIEW> that wraps the children.
  • SPLITVIEW only supports two VIEWS.
  • VIEWS in SPLITVIEW will always be resizable based on ratio of one to the other.
  • If using a TABVIEW in one of the views, open() events, regardless of the scope they are called in, will open a new tab rather than a new page framework.

Attributes

Name Type Default Description Req
direction string (vertical, horizontal) horizontal The spliview orientation (top/bottom or left/right)
ratio double (0.0 - 1.0) 0.5 The initial percentage size of top/left pane relative to the bottom/right pane

Examples

Splitview showing scrollto() event integration between views

Splitview scrollto() Example

Show Splitview Scrolling Template 
<BOX width="500" height="500">
        <SPLITVIEW ratio=".70" direction="horizontal">
            <VIEW>
                <SCROLLER>
                    <COLUMN>
                        <BOX id="red" color="red,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Red"/>
                        </BOX>
                        <BOX id="redaccent" color="redaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Red Accent"/>
                        </BOX>
                        <BOX id="pink" color="pink,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Pink"/>
                        </BOX>
                        <BOX id="pinkaccent" color="pinkaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Pink Accent"/>
                        </BOX>
                        <BOX id="purple" color="purple,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Purple"/>
                        </BOX>
                        <BOX id="purpleaccent" color="purpleaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Purple Accent"/>
                        </BOX>
                        <BOX id="deeppurple" color="deeppurple,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Deep Purple"/>
                        </BOX>
                        <BOX id="deeppurpleaccent" color="deeppurpleaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Deep Purple Accent"/>
                        </BOX>
                        <BOX id="indigo" color="indigo,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Indigo"/>
                        </BOX>
                        <BOX id="indigoaccent" color="indigoaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Indigo Accent"/>
                        </BOX>
                        <BOX id="blue" color="blue,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Blue"/>
                        </BOX>
                        <BOX id="blueaccent" color="blueaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Blue Accent"/>
                        </BOX>
                        <BOX id="lightblue" color="lightblue,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Light Blue"/>
                        </BOX>
                        <BOX id="lightblueaccent" color="lightblueaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Light Blue Accent"/>
                        </BOX>
                        <BOX id="cyan" color="cyan,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Cyan"/>
                        </BOX>
                        <BOX id="cyanaccent" color="cyanaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Cyan Accent"/>
                        </BOX>
                        <BOX id="teal" color="teal,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Teal"/>
                        </BOX>
                        <BOX id="tealaccent" color="tealaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Teal Accent"/>
                        </BOX>
                        <BOX id="green" color="green,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Green"/>
                        </BOX>
                        <BOX id="greenaccent" color="greenaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Green Accent"/>
                        </BOX>
                        <BOX id="lightgreen" color="lightgreen,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Light Green"/>
                        </BOX>
                        <BOX id="lightgreenaccent" color="lightgreenaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Light Green Accent"/>
                        </BOX>
                        <BOX id="lime" color="lime,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Lime"/>
                        </BOX>
                        <BOX id="limeaccent" color="limeaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Lime Accent"/>
                        </BOX>
                        <BOX id="yellow" color="yellow,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Yellow"/>
                        </BOX>
                        <BOX id="yellowaccent" color="yellowaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Yellow Accent"/>
                        </BOX>
                        <BOX id="amber" color="amber,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Amber"/>
                        </BOX>
                        <BOX id="amberaccent" color="amberaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Amber Accent"/>
                        </BOX>
                        <BOX id="orange" color="orange,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Orange"/>
                        </BOX>
                        <BOX id="orangeaccent" color="orangeaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Orange Accent"/>
                        </BOX>
                        <BOX id="deeporange" color="deeporange,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Deep Orange"/>
                        </BOX>
                        <BOX id="deeporangeaccent" color="deeporangeaccent,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Deep Orange Accent"/>
                        </BOX>
                        <BOX id="brown" color="brown,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Brown"/>
                        </BOX>
                        <BOX id="black" color="black,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Black"/>
                        </BOX>
                        <BOX id="grey" color="grey,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="Grey"/>
                        </BOX>
                        <BOX id="white" color="white,blur" start="left" end="right" width="100%" height="20%" center="true">
                            <TEXT value="White"/>
                        </BOX>
                    </COLUMN>
                </SCROLLER>
            </VIEW>
    
            <VIEW>
                <BOX expand="true" height="90%" color="#F8FBFC">
                    <TREEVIEW icon="keyboard_arrow_right" expandedicon="keyboard_arrow_down">
                        <NODE label="Scroll To Event" expanded="true">
                            <NODE label="Red" onclick="scrollto('red')" />
                            <NODE label="Pink" onclick="scrollto('pink')" />
                            <NODE label="Purple" onclick="scrollto('purple')" />
                            <NODE label="Indigo" onclick="scrollto('indigo')" />
                            <NODE label="Blue" onclick="scrollto('blue')" />
                            <NODE label="Teal" onclick="scrollto('teal')" />
                            <NODE label="Green" onclick="scrollto('green')" />
                            <NODE label="Yellow" onclick="scrollto('yellow')" />
                            <NODE label="Orange" onclick="scrollto('orange')" />
                            <NODE label="Grey" onclick="scrollto('grey')" />
                        </NODE>
                    </TREEVIEW>
                </BOX>
                <BOX height="10%" color="#313131">
                    <CENTER>
                        <TEXT color="white" label="Side Menu Example" />
                    </CENTER>
                </BOX>
            </VIEW>
        </SPLITVIEW>
    </BOX>

Splitview containing a Treeview and a Tabview

Splitview Treeview/Tabview Example

logo See it in Action

Other Widgets You May Find Useful:

Framework Markup Language is an open source programming language created by AppDaddy Software Solutions Inc. FML and is licensed under a fair source license agreement and is maintained by a community of developers.

⚠️ **GitHub.com Fallback** ⚠️