Introducing Frame

When configuring an application that operates with an independent window structure, it has the Frame structure. MainFrame, as per its name, is the basic object that makes up the Frame structure. There can only be one MainFrame.

When running in the web browser, the web browser plays the role of Frame. Content loading status, screen size, and title bar settings are processed by the web browser. The appearance on the screen may be slightly different depending on the characteristics of the web browser.

Depending on the Frame type, it may not be possible to distinguish whether the Container component is used like the Div component. Frame specifies the structure of the entire application, while the Container component sets the structure of each component. The Container component can change the structure with the script, but the Frame structure is difficult to change easily. As the Frame structure is responsible for maintaining the consistency of the content provided, it is not recommended to change the structure.

Example

Recently, menus are expressed in various formats, but there still are many cases that maintain the structure of the upper main menu and the left sub-menu. Especially, when there is a lot of content, this is the natural approach similar to reading a book.

Configuring Frame

Specify a Frame template when creating the project. If you don't select anything else (select "Full" for Frame set Template), it will create a FrameBase service and create a Form_Work Form.

Even if you do not select the Frame structure when creating the project, the Frame structure can be changed after the project is created. Various templates are provided, but if they are not the desired form, then you can select "None" and modify them in the desired form in the Frame editing window.

formurl

Among Frames, only ChildFrame has the formurl property. The rest, MainFrame, FrameSet, only provide the functions for how to show Form connected with ChildFrame and how to place ChildFrame, and they do not connect the contents.

When Form is executed with [QuickView] from the menu in Nexacro, the screen is displayed with an arbitrary Frame setting. ChildFrame is under MainFrame and Form is connected with formurl. However, if it is executed with [Launch] from the menu, then it is executed according to the set Frame structure, and Form specified in the formurl property value of ChildFrame is displayed on the screen.

Creating ChildFrame

Creating Frame in Form is not recommended in principle. However, it can be used when you want to process functions that operate independently, like pop-up windows.

Example

Create ChildFrame and change the style property or change whether to support dragging. Click the [Create Frame] button to display the pop-up window and click the [Draw Border] button to display the border of the pop-up window. At this time, you can freely move the pop-up window by holding the window title area, but if you click the [dragmovetype] button, the dragmovetype property value changes and the window does not move. Click the [dragmovetype] button again to move the pop-up window again.

sample_frame_01.xfdl

Core features used in the example

dragmovetype

This is the property that sets whether to enable the function to move ChildFrame by dragging the mouse. The default value is "normal". You can select the title bar area and move it by dragging the mouse. If you do not want the title bar area to be visible, then you can drag the Form area. Since the Form can process text selection or item selecting by dragging, the default property processes the mouse drag method to be determined depending on whether the tile bar exists so that events do not overlap.

replace

This is the method of the String object. You can use this method if it is the String type property like the text property of the Button component. replace replaces a specific string with another and returns the replaced value. What to note is that it does not change the original value itself, but returns the changed value. If you want to change the corresponding value, then you need to specify it again with the value obtained using the replace method.

How to implement an example

Place the Button component as shown in the example screen. ChildFrame is not created in Nexacro Studio, but created in the script when the button is clicked.

ChildFrame is created when the first button is clicked. Specify only the location and size to create ChildFrame.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframeNew", "absolute", 30, 90, 200, 150);
	this.addChild("childframeNew", objChildFrame);
	objChildFrame.show();
};

Specify the border property of the created ChildFrame. Access with the id property value specified when creating ChildFrame.

this.btnBorder_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.childframeNew) {
		this.childframeNew.border = "1px solid blue";
	} else {
		trace("childframeNew undefined");
	}
};

Use the condition statement to check if ChildFrame has been created, and if not, then display a message.

Specify the dragmovetype property of the created ChildFrame. If you change the property value to "none", then you cannot move ChildFrame by dragging the mouse. It compares the current value of the property value and changes it to "none" if it is "normal" and changes it to "normal" if it is "none", to act as the toggle function.

this.btnDrag_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.childframeNew.dragmovetype == "normal") {
		this.childframeNew.dragmovetype = "none";
		obj.text = obj.text.replace("normal","none");
	} else {
		this.childframeNew.dragmovetype = "normal";
		obj.text = obj.text.replace("none","normal");
	}
};

Use the replace method to display the current property value as the text property of the Button component. Change only the string corresponding to the dragmovetype property value according to the condition in the displayed value.

Run it with QuickView (Ctrl + F6) and click the button or drag the mouse to check the operation. A script error may occur depending on the situation. The script error can be checked in the Nexacro Studio [Output] window when executed in runtime, and in the console window in the web browser.

Creating FrameSet

FrameSet is the object used to process the screen arrangement. It is divided into HFrameSet (horizontal arrangement), VFrameSet (vertical arrangement), and TileFrameSet (tile type arrangement) according to the screen arrangement method. When HFrameSet is selected, the added ChildFrame is placed horizontally and the size of ChildFrame is automatically adjusted to fit the HFrameSet. In addition, even if you change the order of placement by dragging the mouse, they are automatically arranged in the correct location.

Example

Click the button to create HFrameSet and create 3 ChildFrames to add them to HFrameSet. The size of ChildFrame is set automatically, but if you select the Radio component, the size ratio changes.

sample_frame_02.xfdl

Core features used in the example

addChild

This is the method that dynamically adds the child component or object. The container component, such as the Div component or Form, can add components or objects, and FrameSet can add FrameSet or ChildFrame.

separatesize

Specifies the width of ChildFrame included in FrameSet by separating with a comma (,). If the property value is not specified, then it is processed with the same width.

How to implement an example

Place the Button component and the Radio component as shown in the example screen. The item value of the Radio component is used when specifying the separatesize property value. The innerdataset value is as follows.

Create HFrameSet within the onload event function of the Form object.

this.sample_frame_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var objHFrameset = new HFrameSet();  
	objHFrameset.init("hframesetNew", 30, 90, 400, 200);
	this.addChild("hframesetNew", objHFrameset);
	objHFrameset.border = "1px solid #999999";
	objHFrameset.show();
};

Then, create and add ChildFrame when the button is clicked. The border property value was additionally specified to be visible on the screen.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.addChildFrame(this.hframesetNew, "childFrame00");
	this.addChildFrame(this.hframesetNew, "childFrame01");
	this.addChildFrame(this.hframesetNew, "childFrame02");
};

Since ChildFrame repeats the same format 3 times, the function called addChildFrame was created and used. Add ChildFrame as the child of HFrameSet, not Form.

this.addChildFrame = function(obj, strId:String)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init(strId, 0, 0, 0, 0);
	obj.addChild(strId, objChildFrame);
	objChildFrame.border = "1px solid #999999";
	objChildFrame.show();
}

If you click the button, then you can see 3 ChildFrames placed as below.

If you select the item of the Radio component, the width of the placed ChildFrame changes. If the value is specified as numbers, then the width is modified in px unit, and if it is specified as * characters, the rest is calculated and processed, excluding the width specified as numbers. For example, if the width of HFrameSet is 400 and the separatesize property value is set to "250, *, *", then the width of the first ChildFrame becomes 250 and the width of the rest of ChildFrame becomes (400-250)/2. When calculating the actual value, the border property and other properties must also be considered, and the numbers may vary.

this.radioSeparate_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.hframesetNew.separatesize = obj.value;
};

Run it with QuickView (Ctrl + F6) and click the button or drag the mouse to check the operation.

Arranging ChildFrame

The document editing software provides the function of arranging with multiple windows spaced apart as shown in the figure below. It provides the function to arrange windows horizontally, vertically, cascaded, or tiled. In Nexacro, you can also specify the window arrangement method when ChildFrame is added to FrameSet.

Example

Clicking the first button creates FrameSet and clicking the second button creates ChildFrame and adds it to FrameSet. Since FrameSet does not forcefully adjust the location or size of ChildFrame, ChildFrame is created at the specified location and size. When you set the items of the Radio component, the specified arrangement method is applied.

sample_frame_03.xfdl

Core features used in the example

arrange

Specifies the arrangement method when using FrameSet. It is applied when the method is executed, and it is not affected if other ChildFrames are added. If necessary, you need to run the method one more time. If the arrangement direction is specified like HFrameSet, then the arrange method cannot be used, and it is the method that only FrameSet has.

showtitlebar

In the example, to show the window arrangement method, the title bar area is processed to be not shown.

How to implement an example

Place the Button component and the Radio component as shown in the example screen. The item value of the Radio component is used when specifying the separatesize property value. The innerdataset value is as follows.

Create FrameSet when the button is clicked. The border property value was additionally specified to be visible on the screen.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objFrameset = new FrameSet();  
	objFrameset.init("framesetNew", 30, 90, 400, 400);
	this.addChild("framesetNew", objFrameset);
	objFrameset.border = "1px solid #999999";
	objFrameset.show();
};

Create ChildFrame when the button is clicked. To create multiple ChildFrames, define the index variable that increases each time it is clicked, and set the id value and location value. Set the showtitlebar property value so that the title bar is not visible. Also, set the background color to a different color each time.

var frameIdx = 0;

this.btnAddChild_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframe"+frameIdx, frameIdx, frameIdx, 40, 40);
	this.framesetNew.addChild("childframe"+frameIdx, objChildFrame);
	objChildFrame.border = "1px solid #999999";
	objChildFrame.showtitlebar = false;
	objChildFrame.background = '#'+Math.random().toString(16).slice(-6);
	objChildFrame.show();
	frameIdx = frameIdx + 10;
};

If you select the item of the Radio component, then the arrangement method of the placed ChildFrame changes.

this.radioArrange_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.framesetNew.arrange(obj.value);
};

Run it with QuickView (Ctrl + F6), create FrameSet and ChildFrame, and change the arrangement method.

Creating ChildFrame as Modal Window

When you click the login button on the website, the login window may appear in the pop-up form. In this case, you may have seen that the areas other than the open login window are grayed out. It is the same for the advertisement window that offers a 10% discount coupon if you register your email.

Modal windows are similar to pop-up windows, but they are used to show simple information or to process inputted information. To focus on that task, other areas appear dimmed and disabled.

Example

Click the button to create ChildFrame and display it in the center of the screen with the modal window.

sample_frame_04.xfdl

Core features used in the example

openalign

Specifies the location at the initialization step of ChildFrame, but if the openalign property is specified, then it can be arranged and displayed in the desired location. This property is applied only when used with the showModal method.

resizable

Sets whether to allow the window of ChildFrame to be resizable. The default value is false and cannot be resized. If the property value is set to true, then the mouse cursor changes to the state that can be resized when the mouse hovers over the border area of the window. If you allowed the window to show the status bar, then the resizable control area is added at the bottom left of the window.

overlaycolor

This is the property that specifies the background color of the rest of the area when displaying ChildFrame as the pop-up window. You can specify only the color value or the transparency as well. If you want to specify the transparency, then specify the value in the RGBA() format.

How to implement an example

Place the Button component as shown in the example screen.

Create ChildFrame when the button is clicked. The border property value was additionally specified so that it can be seen on the screen, and the showstatusbar property value was specified to show the status bar. The openalign property value was set and the background color around the modal window was modified so that it can be placed in the center when it is displayed on the screen as the modal window.

this.btnPopup_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframe00", 0, 0, 300, 300, null, null);
	objChildFrame.border = "1px solid #999999";
	objChildFrame.showstatusbar = true;
	objChildFrame.openalign = 'center middle';
	objChildFrame.resizable = true;
	objChildFrame.overlaycolor = "rgba(255,0,0,0.3)";
	objChildFrame.background = "#ffffff";
	objChildFrame.showModal(this.getOwnerFrame());
};

Run it with QuickView (Ctrl + F6) and click the button to create ChildFrame as the modal window.

Transmitting Property Value with Open Method

Container components such as the Div component appear as the pop-up window, but they can access each other because they operate within the same browser. However, if you use the open method, then it processes the browser itself as a new window. There is no way for them to access each other in this case, so, it is prepared to transmit the required property value when executing the open method.

The property value transmitted with the open method is transmitted to the property of ChildFrame, the parent frame of the executed Form. The new property value can be transmitted as the user property, and the existing property value can be overwritten.

Example

Click the "Create Popup" button to open a new window. Click the "Show property" button in the new window to check the transmitted property value.

sample_frame_05.xfdl

Core features used in the example

open

The open method dynamically creates ChildFrame and displays it as the modeless window. You can transmit the desired property value by specifying the objArgumentList item among parameters. The property value is transmitted in the "{Property Name:Property Value, Property Name:Property Value}" format.

How to implement an example

Place the Button component as shown in the example screen.

When the "Create Popup" button is clicked, the open method is executed. The same Form is recycled without creating a separate Form. The property value is transmitted as the 4^th parameter. The name property among the transmitted property values overwrites the original property value of the ChildFrame object, and the uname property creates a new property and sets the property value.

this.btnPopup_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	nexacro.open("POPUP FRAME", "Sample::sample_frame_05.xfdl", 
		nexacro.getApplication().getActiveFrame(), 
		{name:"POPUP FRAME RENAME", uname:"TEST"});
};

Check whether the property value transmitted is properly processed when the "Show property" button is clicked. Since the property value is the property value of ChildFrame, which is the parent of Form, access it in the form of "this.parent.Property Value".

this.btnShow_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
		this.alert(this.parent.name + "\n" + this.parent.uname);
};

Run it with QuickView (Ctrl + F6) and click the button to create ChildFrame as the modal window and check the transmitted property value.

Changing Title Bar Area

The title bar area is configured with separate control and can be accessed for each control. In the help, you can check its structure by looking for the TitleBarControl item.

Example

If you click the "Create Frame" button, the frame is created under the Button component. If you click the "Set TitleBar" button in the created window, then you can change some properties of the title bar area.

sample_frame_08.xfdl

Core features used in the example

titlebar

This is the title bar object property of the frame. You can check the sub-properties in the TitleBarControl object.

titleicon

This is the area where text and icons are displayed in the title bar area. You can change the icon image and text properties. You can check the sub-properties in the TitleBarIconTextControl object.

maxbutton, minbutton

These are minimum and maximum buttons. The buttons were set not to be visible in the example. You can check the sub-properties in the TitleBarButtonControl object.

How to implement an example

Place HFrameSet and place ChildFrame inside it. Set the formurl property of ChildFrame to the same Form.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objHFrameset = new HFrameSet();  
	objHFrameset.init("hframesetNew", 30, 90, 400, 200);
	this.addChild("hframesetNew", objHFrameset);
	objHFrameset.border = "1px solid #999999";
	objHFrameset.show();
		
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("TEST", 0, 0, 0, 0);
	objHFrameset.addChild("TEST", objChildFrame);
	objChildFrame.border = "1px solid #999999";
	objChildFrame.formurl = "Sample::sample_frame_08.xfdl";
	objChildFrame.show();
};

When you click the button, the same Form is displayed on the screen. However, modify the code to process different operations when the button is clicked. If the parent.id property value is "TEST", which is the id property value of ChildFrame, then make it process the operation of changing the title bar area.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.parent.id=="TEST")
	{
		this.parent.titlebar.titleicon.font = "20pt 'Arial'";
		this.parent.titlebar.titleicon.color = "pink";
		this.parent.titlebar.minbutton.visible = false;
		this.parent.titlebar.maxbutton.visible = false;
		this.parent.titlebarheight = 40;	
	}
	else
	{
		...
	}
};

this.sample_frame_08_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	if(this.parent.id=="TEST")
	{
		this.btnCreate.text = 'Set TitleBar';
	}
};

Limiting Pop-up Window Size

The user can change the size of the window displayed as the pop-up window, but keep it within the specified range.

Example

When you click the "Create Popup" button, the frame is created under the Button component, and when the size of the created pop-up window is changed, it cannot be made smaller or larger than a specific size.

sample_frame_09.xfdl

Core features used in the example

cx, cy

This is the value returned by the SizeEventInfo object. When the size of the component changes, it returns the changed width and height values.

How to implement an example

Place the ChildFrame object and use the addEventHandler method to trigger the script that limits the size when the onsize event occurs. When the showModal method is executed, the minimum and maximum size values are transmitted together.

this.btnPopup_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframe00", 0, 0, 300, 300, null, null);
	objChildFrame.border = "1px solid #999999";
	objChildFrame.showstatusbar = true;
	objChildFrame.openalign = 'center middle';
	objChildFrame.resizable = true;
	objChildFrame.background = "#ffffff";
	objChildFrame.titletext = objChildFrame.width+"*"+objChildFrame.height;	
	objChildFrame.addEventHandler( "onsize", this.ChildFrame00_onsize, this);
	objChildFrame.showModal(this.getOwnerFrame(), {minsize:'150', maxsize:'400'});
};

Whenever the user changes the size of the pop-up window, the onsize event occurs, and the size of the current pop-up window is compared with the size to be changed. If it is out of the range, then it is changed to the minimum or maximum size value.

this.ChildFrame00_onsize = function(obj:nexacro.ChildFrame, e:nexacro.SizeEventInfo)
{
	obj.titletext = obj.width+"*"+obj.height;	
	if(e.cx < obj.minsize) {
		obj.width = obj.minsize;
	}
	if(e.cx > obj.maxsize) {
		obj.width = obj.maxsize;
	}
	
	if(e.cy < obj.minsize){
		obj.height = obj.minsize;
	}
	if(e.cy > obj.maxsize){
		obj.height = obj.maxsize;
	}	
}