Introducing Div

The Div component is the component that supports such a layout when one screen needs to be divided and processed. For example, it can be used when you want to cut the center of one screen horizontally to show a chart at the top and a grid at the bottom. Of course, components can be placed on one screen to form a divided screen, but the Div component provides several functions to process this function.

Able to display the borders of the screen that are separated.

It is ok with only one component, but when two or more components are grouped and separated, the borders can become ambiguous. In this case, the Div component can be used to easily separate the borders.

Able to recycle Form.

The Div component can connect Form already created. If you create Form that provides the chart function and want to apply it to all screens, you can place the Div component and connect only the corresponding Form. You do not have to create a new screen every time.

Able to adjust the size of the area.

Components placed within the Div component are located relative to the Div component. Therefore, when the size of the Div component is changed, the location of the connected components also changes.

Example

When placing the components of the screen (images, text, etc.) visible on the website, they appear to be placed in the correct location without anything, but actually, they use a lot of div tags. The div tag is different from the Div component processed by the Nexacro but has similar characteristics in that it is used to wrap elements visible on the screen.

Creating Div

It is rare to use the Div component alone. In most cases, it is implemented to connect Form or include the component inside. In this example, the Div component is placed and one Button component is added.

Select the Div item from the toolbar, drag and drop it onto the form to create it. A blank white box is displayed on the screen.

Select the Button item from the toolbar, drag and drop it onto the Div area to create it. It must be created exactly within the Div area. If it is created in the Div component, it is displayed in the property window as follows.

Run it with QuickView (Ctrl + F6). The border is displayed because of the border property of the Div component specified in the default theme. If you set the border property to be invisible, the border is not visible. However, the creation of the Button component in the Div component does not change.

Showing Different Screen

How can it be implemented if different screens need to be shown depending on the selected menu? You can change the entire page URL, but you can also change the content area to the desired screen. By using the method of changing only the Form connected to the Div component, you can naturally show the desired content to the user.

Example

When you click the button, the corresponding screen is displayed in the Div component area. To show different contents, create the main Form that processes events and 2 Forms that contain contents. For the two Forms that contain content, place the Button component in the upper left and lower right respectively, and display the background color of Form differently so that you can see that the content has changed. Clicking the "Init" button changes it to the unspecified state.

sample_div_01.xfdl

Core features used in the example

url

Specifies the path of Form connected to the Div component. You can specify the absolute path, relative path, or service path. In the example, it is assumed that 3 Forms are in the same service path.

How to implement an example

Set the text property value of the Div component to "divMain" so that you can check the state when initialized. Set the width, height property values to 300. The width, height properties of the Form object that will contain the content created in the next step will also be set to 300.

Create a new Form and place the Button component. Set the width, height t property values of Form to 300. On the main screen, when you click the "left top red" button, place the Button component in the upper left corner and set the background property value of Form to "red". On the main screen, when you click the "right bottom blue" button, place the Button component in the lower right corner and set the background property value of Form to "blue".

Write the event function to be processed when 3 buttons are clicked. Specify the file path for each button and specify the null value if you select to initialize.

this.btnLeft_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.set_url("Sample::sample_div_01_left.xfdl");
};


this.btnRight_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.set_url("Sample::sample_div_01_right.xfdl");
};

this.btnInit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.set_url(null);
};

When the Button component included in sample_div_01_left.xfdl and sample_div_01_right.xfdl is clicked, access the Form object id property value of sample_div_01.xfdl and add the function to display as the alert method.

this.btnLeft_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.alert(this.parent.parent.name);
};

this.btnRight_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.alert(this.parent.parent.name);
};

Run it with QuickView (Ctrl + F6) and click the button to check the changed content.

Accessing Div Contents

Components or objects placed in Form are all siblings. They can answer by calling each other's names. However, components contained within the Div component cannot be called directly. You must always go through the Div component.

Example

If you enter text in the Edit component and click the button, the entered text is entered as the text property value of the Static component in the Div component.

sample_div_02.xfdl

Core features used in the example

form

This is the property that accesses the component defined inside the Div component. In the case of connecting Form to the url property value, it is accessed in the same way.

this.[Div Component].form.[Component];

How to implement an example

Place the Edit, Button, Div components as shown in the example screen. Set the border property value as shown below so that the Div component can be seen clearly.

1px solid #e5e5e5

Select the Div component and select the [Start Div Contents Editor] item from the context menu, or select the [Start Div Contents Editor] item from the upper right toolbar of the design window.

Place the Static component in the Div Content editing state. You can place the Static component on the Div area without entering the editing state, but you can place the component more clearly in the editing state.

When editing is finished, select the [End Div Contents Editor] item from the context menu or select the [End Div Contents Editor] item from the upper right toolbar of the design window.

Transmit the input value as the text property value of the Static component in the Div component.

this.btnInput_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.form.staticInput.set_text(this.editInput.value);
};

When using the code hint function in the Nexacro Studio script window, it is automatically entered without entering the "form" item.

Run it with QuickView (Ctrl + F6) and click the button to check the changed content.

Implementing Simple splitter

When the frame or window screen is separated, the splitter is used to adjust the size of the divided screen. It is also used in Nexacro Studio to resize each screen area. As shown in the figure below, when you place the mouse pointer over the area, the shape of the cursor changes. At this time, you can adjust the screen size by pressing the left mouse button and dragging it to move it in the desired direction.

Example

When you move the mouse over the light blue bar (splitter) displayed in the middle, the shape of the cursor changes. You can change the width of the LEFT, RIGHT areas by pressing the left mouse button and dragging the mouse.

sample_div_03.xfdl

Core features used in the example

ondrag

This is the event that occurs when the drag operation is performed while holding down the left mouse button on the component. In this case, the event is transmitted to the parent component only when the true value is returned. Since the drag operation exceeds the range of the component that started dragging, the moving coordinate values can be processed by the parent component. In the example, the movement of the splitter area is processed by the ondragmove event of the parent component.

cursor

In the example, only the LEFT, RIGHT areas are resized, so the cursor property value is set to "e-resize". Property values can be selected according to the direction of moving the splitter.

How to implement an example

For the screen configuration, place 3 Div components inside the Div component. The Div component placed in the center acts as the splitter. Set the top property values of the 3 components to 0px, and the height property value to 100%. Set the left property value of the LEFT Div component to 0px, and the right property value of the RIGHT Div component also to 0px. Set the left property value of the splitter Div component appropriately and set the width property value to 5px.

For LEFT, RIGHT Div components, specify the splitter Div component as the reference component so that the right, left property values can be changed according to the movement of the splitter Div component without specifying the width property value. Set the right property value of the LEFT Div component to "Div01:0", and the left property value of the RIGHT component to "Div01:0".

Add the ondrag event function of the splitter Div component. In the event function, return the true value to transmit the event to the parent component.

this.Div00_Div01_ondrag = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	return true;
};

Add the ondragmove event function of the Div component surrounding the outside. In the event function, check the dragging location and move the splitter Div component to that location.

this.Div00_ondragmove = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	this.Div00.form.Div01.set_left(e.clientx);
	this.Div00.form.resetScroll();
};

Run it with QuickView (Ctrl + F6) and move the splitter Div area by dragging it while holding down the left mouse button.

Processing Last Coordinate Value

Let us see how to move the Button component within the Div component by dragging the mouse, save the last coordinate value, and move it to the previous coordinate value.

Example

You can move the Button component by dragging it with the mouse. When the mouse button is released, the coordinate values are saved in the ListBox component, and when the list of ListBox components is selected, the coordinate values move to the previous coordinate values.

sample_div_04.xfdl

Core features used in the example

getOffsetWidth, getOffsetHeight

Returns the width and height of the component as numbers in pixels.

getInnerDataset

Used to access the Dataset object set in the innerdataset property of the component.

clientx, clienty

Returns the coordinate value based on the client area of the component. In the example, when starting the mouse drag, clientx, clienty of the Button component are temporarily saved to correct the coordinate values that occur in the drag event of the Div component.

How to implement an example

var btnOrgW;
var btnOrgH;
this.sample_div_04_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var btnOrgW = this.Div00.form.Button00.getOffsetWidth();
	var btnOrgH = this.Div00.form.Button00.getOffsetHeight();
};

Check the coordinate values of the Button component at the start of the drag operation.

var nButtonX;
var nButtonY;
this.Div00_Button00_onlbuttondown = function(obj:nexacro.Button,e:nexacro.MouseEventInfo)
{
	nButtonX = e.clientx;
	nButtonY = e.clienty;
};

In the ondrop event function, add the last coordinate value to the innerdataset object of the ListBox component.

this.Div00_ondrag = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	return true;
};

this.Div00_ondragmove = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	var nLeft = e.clientx-nButtonX;
	var nTop = e.clienty-nButtonY;
	this.Div00.form.Button00.move(nLeft,nTop, btnOrgW, btnOrgH);
};

this.Div00_ondrop = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	var tempDS = this.ListBox00.getInnerDataset();
	var nIndex = tempDS.rowcount;
	tempDS.insertRow(nIndex);
    tempDS.setColumn(nIndex, "codecolumn", (e.clientx-nButtonX)+","+(e.clienty-nButtonY));
    tempDS.setColumn(nIndex, "datacolumn", "Left >> " + (e.clientx-nButtonX) + "  Top >>> " + (e.clienty-nButtonY));
    this.resetScroll();
};

Selecting a specific coordinate value moves the Button component to that location. When the focus goes out of the ListBox component, initialize the selection state.

this.ListBox00_onitemchanged = function(obj:nexacro.ListBox,e:nexacro.ItemChangeEventInfo)
{
	if(e.postindex!=-1)
	{
		var tempArray = e.postvalue.split(',');
		var nLeft = tempArray[0];
		var nTop = tempArray[1];
		this.Div00.form.Button00.move(nLeft,nTop, btnOrgW, btnOrgH);
	}
};

this.ListBox00_onkillfocus = function(obj:nexacro.ListBox,e:nexacro.KillFocusEventInfo)
{
	obj.setSelect(-1);
};

Creating Back to Top Button

For content that scrolls longer, sometimes it shows a shortcut button to the top. This can be conveniently used when you want to move to the top without moving the scrollbar.

Example

Moving the scrollbar of the Div component down displays the Back to Top button, and clicking the button moves it to the top.

sample_div_05.xfdl

Core features used in the example

pos

This is the property that has the location value of the scrollbar. In the example, the property value of the vscrollbar control of the innerform object in the Div component is set.

onvscroll

This is the event that occurs when the scrollbar moves. In the example, the button is made to be visible when the location is not at the top.

How to implement an example

If you double-click the Div component or select the [Edit] item from the context menu, then you can edit the location of the component placed in the Div component. In the example, some Edit components are placed outside the Div component area.

Place the third and fourth Edit components outside the Div component area.

var nTop = this.Div00.form.Button00.top;

this.Div00_onvscroll = function(obj:nexacro.Div,e:nexacro.ScrollEventInfo)
{
	if( e.pos > 0 ) {
		this.Div00.form.Button00.set_visible(true);
		this.Div00.form.Button00.set_top(nexacro.toNumber(nTop)+ nexacro.toNumber(e.pos));
	} else {
		this.Div00.form.Button00.set_visible(false);
	}
};

this.Div00_Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Div00.form.vscrollbar.set_pos(0);
};

Implementing Portlet Screen

Portlet means a small window. It is used to show various information in the form of a box. In the example, the Div component is placed in the form of the portlet to see how each window moves.

Example

The Div component is moved to another Div component location by dragging the mouse to change the locations of the two Div components.

sample_div_06.xfdl

Core features used in the example

fromobject

Indicates the object where the event occurred. In the example, the InnerForm object of the Div component becomes fromobject, and to find the Div component, the parent of fromobject is searched.

userdata

By specifying the value of the userdata property in the DragEventInfo object, you can get that property value from the connected drag operation. In the example, the property value is specified in the ondrag event function and that value is used in the ondrop event function.

How to implement an example

For each Div component, set the background property value with a different color. In the example below, the 2 Div components in the lower right have no background color specified.

The Div component placed on the right is a temporary Div component to express movement when dragging. Set the visible property value to false and set the border property appropriately. To make the color of the moving Div component lighter, set the opacity property value to 0.5.

Since one function is used in common, the function is created in the script window in advance and specified as the component event property.

this.Div_ondrag = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
		e.userdata = obj;
		this.fn_makeDragObj(obj);
		return true;
};

this.fn_makeDragObj = function (obj)
{	
	this.divMove.set_background(obj.background);
	this.divMove.set_visible(true);
};

this.form_ondragmove = function(obj:nexacro.Form,e:nexacro.DragEventInfo)
{
	this.divMove.move(e.clientx + 10, e.clienty + 10);
};

Create the Animation object for animation processing when moving the Div component.

this.fv_objFrom;
this.fv_objTo;

var aniObj = new nexacro.Animation("Ani00", this);
this.addChild("Ani00", aniObj);

this.form_ondrop = function(obj:nexacro.Form,e:nexacro.DragEventInfo)
{
	this.divMove.set_visible(false);
	this.fv_objFrom = e.userdata;
	this.fv_objTo = e.fromobject.parent;							
	if (this.fv_objTo != "[object Div]") 
	{
		
		return;
	}
	this.Ani00.addTarget("AniItem00", this.fv_objFrom, "left:"+this.fv_objTo.left+", top:"+this.fv_objTo.top);
	this.Ani00.addTarget("AniItem01", this.fv_objTo, "left:"+this.fv_objFrom.left+", top:"+this.fv_objFrom.top);
	this.Ani00.play();
	this.Ani00.removeTarget("AniItem00");
	this.Ani00.removeTarget("AniItem01");
};

Placing buttons by privileges

Certain functions may be set not to be supported according to the privileges of the logged-in user. For example, if a user is allowed to view data, but not to edit and save data, the user will be able to see the "View" button but not the "Save" and "Delete" buttons.

It was not easy to dynamically arrange UI components such as buttons in the previous method. If you delete the button in the middle, you need to adjust the position of the remaining buttons in the script.

These features can be implemented more simply using the Fluid Layout feature. This example will compare the existing method and the Fluid Layout feature method.

Example

If the checkbox component's selection state is changed, the B Button component won’t be visible on the screen.

sample_div_07.xfdl

Core features used in the example

type

Set the orientation and format of the component placement. In set to "default", the components are placed based on the coordinate property values of each component, and if set to "horizontal", "vertical", and "table", the components are automatically placed according to the set rules.

horizontalgap, verticalgap

If the type property value is "horizontal" or "vertical", the horizontal and vertical axis spacing of the placed component are set.

flexmainaxisalign, flexcrossaxisalign

It feature works like the paragraph alignment feature in text editors. The type property values change Main Axis (horizontal if type property value is "vertical", vertical if type property value is "vertical”) and Cross Axis (vertical if type property value is "horizontal", horizontal if type property value is "vertical”) which process the alignment.

How to implement an example

In the editing state, Layout Information and Fluid Layout are additionally displayed in the property window.

Set the spacing between components (horizontalgap) to 10px, horizontal alignment (flexmainaxisalign) to the right, and vertical alignment (flexcrossaxisalign) to the center.

horizontalgap: 10
flexmainaxisalign: end
flexcrossaxisalign: center

When selecting and placing components, the currently set type property information (horizontal layout) is displayed on the screen.

When copying and pasting a component, the component is placed in the next position without a separate guide.

(1) Place the first Button component at the specified location with the specified spacing.
(2) Place the second Button component at the specified location with the specified spacing.
...
(n) Place the nth Button component at the specified location with the specified spacing.

If there are only a few components to be placed, it would seem that there isn’t much difference compared to the existing method of arranging components by specifying coordinates. However, the Fluid Layout function is useful when there are many components to be placed or when they need to be placed dynamically.

If you need to change the arrangement direction of the components or adjust the spacing of the components, you just need to change the corresponding property values with the Fluid Layout function. When coordinates are specified and placed, all positions of the components must be readjusted (This is not difficult for users who are familiar with the Design menu, but it would still be cumbersome.) Imaging having to change hundreds of screens this way. It would require a lot of effort).

this.CheckBox00_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	var bCheck = obj.value;
	this.Div00.form.Button01.set_visible(bCheck);
	this.Div00_00.form.Button01.set_visible(bCheck);
};

With the component placed in the first Div component by applying the Fluid Layout feature, the position of the other components are automatically adjusted by making the component in the middle invisible. However, for the component placed in the second Div component based on the coordinates, the position of the rest of the components need to be respecified according to their state (in the example code, the coordinates are not re-adjusted, so the center component's place is displayed as empty).