Introducing Static

The Static component is one of the means of displaying text information on the screen. Unlike components that can edit text, it only provides the function to display on the screen. The text property value can be changed with the script or the value can be changed while it is bound to the Dataset object, but it does not provide the function that allows the user to arbitrarily modify the value.

Example

Most of the items that display text use the Static component.

Creating Static

Select the Static item from the toolbar, drag and drop it onto the form to create it.

Run it with QuickView (Ctrl + F6).

Displaying Text Dynamically

If you place the Static component on the screen and enter the desired text in the text property value, then no further task is required. However, in some cases, you may need to display dynamically created text. For example, if you need to display today's date on the screen, then you cannot specify the value of the text property in advance. In this case, you can use the expr property value.

Example

The function that gets today's date is specified in the expr property value, and the return value of the function is displayed on the screen as the Static component is created. If you select "Browser" or "OS" among the Radio component items, then the function specified in the expr property value is changed and the currently running browser information is displayed.

sample_static_01.xfdl

Core features used in the example

navigatorname

Returns information about the environment in which the application is running. When the Nexacro browser is executed, it is displayed as "nexacro". Otherwise, the browser name is returned.

osversion

Returns information about the operating system the application is running on.

expr

Executes the code set as the property value and displays the result value. You can use formulas or specific variable values rather than functions.

_fn_ = function(comp) { try { return comp.parent.fn_date(); } catch(e) { return undefined; } };

How to implement an example

Place the Radio, Static components as shown in the example screen. Set the innerdataset property value of the Radio component as follows, and the index property value to 0 so that the first item, "today", is displayed as selected when executed. Set the expr property value of the Static component to "comp.parent.fn_dateTostr()".

Simply write the function that returns today's date value, browser, and operating system information.

this.fn_dateTostr = function()
{
	var objDate = new Date();
	var sRtn =  objDate.getFullYear()+"/"
		+ (objDate.getMonth()+1).toString().padLeft(2, "0")+"/"
		+ objDate.getDate().toString().padLeft(2, "0");
	return sRtn;
};

this.fn_checkBrowser = function()
{
	return system.navigatorname + " " + system.navigatorversion;
}

this.fn_checkOS = function()
{
	return system.osversion;
}

Select the Radio component and create the onitemchanged event function. When selecting the item in the Radio component, change the expr property value of the Static component.

this.radioExpr_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	var todayExpr = "comp.parent.fn_dateTostr()";
	var browserExpr = "comp.parent.fn_checkBrowser()";
	var osExpr = "comp.parent.fn_checkOS()";
	if(obj.value == "Today")
		this.staticExpr.set_expr(todayExpr);		
	else if(obj.value == "Browser")
		this.staticExpr.set_expr(browserExpr);
	else if(obj.value == "OS")
		this.staticExpr.set_expr(osExpr);	
};

Run it with QuickView (Ctrl + F6) and check while changing the selection.

Automatic Line Break (wordwrap) Function

The text property value of the Static component may show pre-specified values, but when showing data from the database or showing a specific result value, the width of the text to be displayed in the Static component may not be predicted in advance. The Static component basically shows the text to be expressed on a single line, and if automatic line break processing is required, then specify the wordwrap property.

Example

Upon first execution, the wordwrap property is not applied. The selected wordwrap property value is applied when selecting the Radio component item on the right side of the Static component.

sample_static_02.xfdl

Core features used in the example

wordwrap

This is the property that specifies whether to show the input value outside the component area with the line break. You can select one of the 'none', 'char', 'english' properties. Select 'english' to process line breaks by word, and 'char' to process line breaks according to the length, regardless of the word unit.

How to implement an example

Place the Static, Radio components as shown in the example screen. Specify the innerdataset property value of the Radio component as follows. For the text property value of the Static component, enter the desired text. In the example, the Lorem ipsum text was used.

Select the Radio component and create the onitemchanged event function. When selecting the item in the Radio component, specify it as the wordWrap property value of the Static component.

this.radioWordwrap_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.staticWordWrap.set_wordWrap(this.radioWordwrap.value);
};

Run it with QuickView (Ctrl + F6) and check while changing the property value. Unlike the TextArea component, if the text is larger than the given component size, then the scrollbar is not applied, so you need to set an appropriate size when configuring the screen.

Text Decoration

The main function of the Static component is to display text as-is. However, you might need to highlight certain letters as needed. In that case, you can specify the value of the usedecorate property.

Example

When you click the "input text" button after entering text in the text item and selecting the decoration option, the text is displayed according to the decoration option specified at the top. In the lower TextArea component, the tag specified to the text property value is displayed.

sample_static_03.xfdl

Core features used in the example

usedecorate

Specifies whether to apply a specific tag-based effect to the text displayed in the Static component. This property determines whether or not to apply it, and the tag actually used must be specified as the text property value or the expr property value.

fs (font-size)
fc (color)
ff (font-family)
b (bold)
i (italic)
u (underline)
s (strike)

How to implement an example

Place the Static, Edit, Spin, Combo, Radio, TextArea components as shown in the example. Set the innerdataset property value of the Combo component that processes font color and font family items as follows. Set the innerdataset property value of the Radio component that processes bold, italic, underline, and strike items to two values, "true" and "false," and the direction property value as "vertical".

The tag is created according to the value of the decoration option, and it is combined with the value entered by the user to create the tag to be applied to the value property value. Write the function that stores the value processed in the tag processing function created in the next step and initializes the variable to be applied to the value property value.

this.defaultValue = "My name is ";
this.addFrontValue = "";
this.addBackValue = "";
	
this.fn_initValue = function()
{
	this.addFrontValue = "";
	this.addBackValue = "";
}

The defaultValue variable has the value of "My name is ". The defaultValue variable continues to hold the same value. The variables addFrontValue and addBackValue are variables that have tag values created according to the option selected by the user. Therefore, prepare to initialize the value and store the new tag value every time the user clicks the button.

The figure below shows how each variable value is applied.

It is necessary to convert the value selected in the decoration option to the tag, but only the tag and the value to be included in the tag are different, and the rest of the rules are the same. Write the function that receives the tag value and the value to create the entire tag.

this.addValue = function(tag:String, value:String) {
	if(value) {
		this.addFrontValue += "<"+tag+" v='"+value+"'>";
		this.addBackValue = "</"+tag+">"+this.addBackValue ;
	}
};

Write the onclick event function to be processed when the Button component is clicked. When each decoration option is changed, the event can be processed, but in this example, it is written as processing only the button click event. When the button is clicked, call the fn_initValue function to initialize the values of the addFrontValue and addBackValue variables.

After processing the decoration option value in the addValue function, put it in the variable and create the tag to be displayed on the screen at the end. Display the text property value of the Static component in the TextArea component so that you can check the created tag.

this.btnText_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.fn_initValue();
	this.addValue("fs", this.spinFontSize.value);
	this.addValue("fc", this.comboFontColor.value);
	this.addValue("ff", this.comboFontFamily.value);
	this.addValue("b", this.radioBold.value);
	this.addValue("i", this.radioItalic.value);
	this.addValue("u", this.radioUnderline.value);
	this.addValue("s", this.radioStrike.value);
	this.staticDecorate.set_text(this.defaultValue + this.addFrontValue + this.editText.value + this.addBackValue);
	this.textareaDecorate.set_value(this.staticDecorate.text);
};

Run it with QuickView (Ctrl + F6) and check while changing the selection.

Creating Horizontal Bar

When laying out the screen, the horizontal bar is used to emphasize the title area or to separate the title from the body. There are several ways to create the horizontal bar, but in this example, we will create the horizontal bar by specifying the background color of the Static component. You can also create the vertical bar in the same way.

Example

The title at the top of the screen and the horizontal bar in the area below the title are displayed. The title and horizontal bar can maintain their shape even if the screen size changes by setting the position property value to "%".

sample_static_04.xfdl

Core features used in the example

background

Specifies the background property of the component. In this example, the background color is specified, but instead of specifying the color value directly, you can specify the image as the background or specify the gradient effect.

How to implement an example

Place the Static component to configure the tile as shown in the example screen. Set the font property value to look like the title as shown below. Set the left property value to "10%" so that it can be fixed to the left of the screen.

font: normal bold 20pt Arial

The font property value can be specified in detail by expanding the font item in the Nexacro Studio property window. In the example, only font-weight and font-size are modified, and the other items use default values.

Place one more Static component under the Static component specified as the title. The left and right property values are set to "10%". This way, the left side remains aligned with the title, and the right side can be spaced 10% apart even if the screen size changes. Set the height property value appropriately.

Specify the background property value of the Static component specified as the horizontal bar. If you select the background property value in the property window, then the icon to expand the content is displayed. If you click the icon, then you can check the items that can be specified in the background property value. In this example, specify only the background color value. Select the background-color item and select the desired color from the list.

Run it with QuickView (Ctrl + F6) and change the size of the browser to see if the size of the horizontal bar changes properly.

Placing according to Character Length

The text that was initially set when placing the component may change for operational reasons. Also, if multiple languages are supported, then the text length may change when changing Korean and English. When the text changes, the layout of the component is changed each time, and when multilingual support is required, the length of the longest language setting is found and matched.

Nexacro supports the Fit To Contents property, which adjusts the size of the component to fit the value property value. Components can be resized and placed according to values applied when text changes or multilingual is used.

Example

In the example, you can select two languages, Korean and English. The selected language is applied to the Static component and displayed. Before selecting the "Fit To Contents" item, even if the length of the text is increased, the Static component will remain the size specified in Nexacro Studio, and the rest will be cut off when the text is longer.

If you select the "Fit To Contents" item, then the size of the Static component changes according to the applied text length. When the "Fit To Contents" item is selected, the first "1. Name" item is invisible because the Static area is hidden under the Edit component when the language is English. This is because the size of the Static component has increased, but the location of the Edit component remains the same. In the "2. Work" item, when English is selected, the location of the Edit component is also set to move as the Static component increases.

sample_static_05.xfdl

Core features used in the example

fittocontents

Automatically sets the size of the component according to the content of the component. The default is "none". It is displayed according to the size property specified in Nexacro Studio. There are 3 properties that can be set, which are "width", "height", and "both". If it should be displayed in a single line, set it to "width", and if it is showing posts registered on the bulletin board, then set it to "height" to automatically adjust the height.

left

Properties that set size or location could be sized in pixels or proportions. In Nexacro, the option to specify PositionBase has been added. As in the example, if the size or location of the surrounding components changes variably, instead of specifying the locations or sizes of all components one by one, you can apply the continuously changed size or location value by selecting the reference component during the initial designing.

How to implement an example

Place the Static component and the Edit component. Enter the value property value of the Static component in Korean first. To check the size change of the component at a glance, set the background color of the Static component.

Place the Radio component so that you can select the language. Specify the Codecolumn item as "KOR", "ENG", and the datacolumn item as "Korean", "English".

Specify the onitemchanged event function as shown below. When setting multiple languages in the actual operating system, a separate Dataset is configured. In this example, since there are few items, directly specify the text property value according to the selected item.

When the onitemchanged event occurs, related information is contained in the ItemChangeEventInfo object. The value of the selected codecolumn item can be checked as the postvalue property value, and the value of the datacolumn item can be checked as the posttext property value. In the example, the postvalue property value is compared.

this.radioLang_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	if(e.postvalue == "KOR")	{
		this.staticName.set_text("1. 이름");
		this.staticWorkplace.set_text("2. 직장");
	} else if(e.postvalue == "ENG")	{
		this.staticName.set_text("1. First name");
		this.staticWorkplace.set_text("2. place of work");
	}
	this.resetScroll();
};

Place the checkbox component so that you can set the value of the fittocontents property of the Static component. Set the fittocontents property value depending on whether it is checked in the onchanged event function.

this.checkboxFit_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	if(e.postvalue == true)	{
		this.staticName.set_fittocontents('width');
		this.staticWorkplace.set_fittocontents('width');
	} else if(e.postvalue == false)	{
		this.staticName.set_fittocontents('none');
		this.staticWorkplace.set_fittocontents('none');
	}
	this.resetScroll();
};

PositionBase can be applied directly in the property window or controlled with the mouse in the Nexacro Studio design window. When applying directly from the property window, select the property item to be applied and specify the distance between the component to be the base and the base component.

When specifying in the design window, select the component, drag the cross-arrow shape displayed in the middle, drag it over the reference component, and release the mouse button to display the small window indicating which property items to set. It automatically sets the nearest property item according to the direction in which it is connected.

Run it with QuickView (Ctrl + F6) and change the language and Fit To Contents settings to see how the size and placement of the component change.

Displaying Strings in Multiple Lines

In the Static component, you can enter the string on multiple lines. You can change lines by pressing the Ctrl+ENTER key in the property window. However, if you are combining strings within the script, then you cannot use this method. In this example, we will take a look at how to display the string in multiple lines within the script.

Example

The 2 strings entered in the Edit component are displayed in 2 lines in the Static component.

sample_static_06.xfdl

Core features used in the example

fromCharCode

Returns the line break character when calling String.fromCharCode(10).

How to implement an example

Place 2 Edit components and add the Button component. Place the Static component to show the result in an appropriate size.

Add the event of the Button component as shown below. It processes the function of adding the input value and displaying it on the Static component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Static00.set_text(this.Edit00.value
		+String.fromCharCode(10)
		+this.Edit01.value);
};

Run it with QuickView (Ctrl + F6) and check if the 2 strings entered in the Edit component are displayed in multiple lines.

Creating Bar Chart

The Static component is used to represent strings, but it is also used to represent simple rectangles. We have already covered this in the Creating Horizontal Bar example and using this, you can create a simple Bar chart as well.

Example

When you click the button, the Bar chart is displayed with an animation effect applied.

sample_static_07.xfdl

Core features used in the example

components

If you know the component name or index in the Form object, then you can access the component dynamically. For example, when accessing the component called Button00, you can access it with this.components["Button00"].

How to implement an example

Place the components as shown below.

The Static component starting with stValue is placed relative to the component starting with stBar. This way, when moving the Bar chart according to the data, only components starting with stBar will move, and components starting with stValue will follow it.

In the example, the data used in the Bar chart is imported from Dataset. Create Dataset and enter the data as shown below.

Execute the setTimer method when the button is clicked. Create the ontimer event function of the form object as well. Execute the fn_Chart01 function whenever the timer event occurs. In this function, adjust the width of the Static component appropriately. After the fn_Chart01 function is executed, execute the resetScroll method, which is used to adjust the location of the component starting with stValue.

this.nTimerIdx = 0;
this.nTimerMax = 20;

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.setTimer(1, 50);
};

this.BarChart_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid==1)
	{
		this.nTimerIdx++;
		this.fn_Chart01();
		this.divChart1.form.resetScroll();
		if(this.nTimerIdx==this.nTimerMax)
		{
			this.nTimerIdx = 0;
			this.killTimer(1);
		}
	}
};

Execute the for iteration statement for as many as rows on the Dataset object. Keep the left, top, height values of the Static component as-is and execute the move method by changing only the width value. In the example below, changing the width property value without using the move method produces the same result.

this.fn_Chart01 = function ()
{
	var i;
	var nLeft;
	var nTop;
	var nWidth;
	var nHeight;
	var objBar;
	var objValue;
	var nValue;
	
	for(i=0;i<this.ds_Chart01.rowcount;i++)
	{
		objBar = this.divChart1.form.components["stBar0"+(i+1)];	
		objValue = this.divChart1.form.components["stValue0"+(i+1)];

		nValue = Math.round(this.ds_Chart01.getColumn(i, "Value")*5.4);
		objValue.set_text(this.ds_Chart01.getColumn(i, "Value"));

		nLeft = objBar.left;
		nTop = objBar.top;
		nWidth = this.fn_move(this.nTimerIdx, 0, nValue, this.nTimerMax);
		nHeight = objBar.height;
		
		objBar.move(nLeft, nTop, nWidth, nHeight);
	}
};

The fn_move function calculates how much to change the size of the Bar chart when the timer event occurs. Calculate the value from the total number of timer operations, the value, and the current timer cycle.

this.fn_move = function(t, b, c, d)
{
	t /= d/2;
	if (t < 1) return Math.round(c/2*t*t + b);
	t--;
	return Math.round(-c/2 * (t*(t-2) - 1) + b);
};

Run it with QuickView (Ctrl + F6) and click the button to see the Bar chart move.

Creating Accordion UI

The format that hides details and shows details when selecting the title is called accordion UI. It is mainly used for screen configuration such as FAQ. In the example, we will use the PositionBase function and the fittocontents property to create the accordion UI format.

Example

Clicking the button displays the default menu title, and clicking the menu title displays the detailed description.

sample_static_08.xfdl

Core features used in the example

fittocontents

Resizes the content according to the size of the component content. In the example, the height of the Static component is adjusted according to the data of the Dataset object.

How to implement an example

Create and place the Static components as many as rowcount of the Dataset object. The first Static component is placed at the specified top location, and the second and subsequent Static components are located relative to the Static component created immediately before.

Create the Static component of the detail item shown when clicking the menu title as well. According to each row, specify the id property value of the Static component and set the height property value to 0.

this.preObj = "";

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nTop = 100;
	
	for(var i = 0; i < this.Dataset00.rowcount; i++)
	{
		var objStatic = new Static();  
		objStatic.init("Static"+i, 30, 70, 300, 30);				
		this.addChild("Static"+i, objStatic); 	
		objStatic.set_border("1px solid darkgray");
		objStatic.set_padding("0px 0px 0px 5px");
		objStatic.show(); 
		
		objStatic.addEventHandler("onclick", this.StaticAll_onclick, this);
		objStatic.set_text(this.Dataset00.getColumn(i, "Column0"));
		
		if(i != 0)
		{
			var imgID = "Static"+(i-1)+"_1";
			objStatic.set_top(imgID+":-1");
		}
		
		var objStatic1 = new Static();  
		objStatic1.init("Static"+i + "_1", 30, nTop+60, 300, 0, null, null);				
		this.addChild("Static"+i + "_1", objStatic1); 	
		objStatic1.set_border("1px solid darkred, 1px solid darkgray, 1px solid darkgray");
		objStatic1.set_background("yellow");
		objStatic1.set_wordWrap("char");
		objStatic1.show(); 		
		
		objStatic1.set_text(this.Dataset00.getColumn(i, "Column1"));
		objStatic1.set_top(objStatic.id+":0px");	
		nTop += 40;

	}
};

All Static components that configure the menu title are connected to the StaticAll_onclick event function. Write the event function code as shown below. When clicking the menu title, check the id property value of the Static component and adjust the size of the Static component of the corresponding detail item. If there is a previously selected item, then initialize the corresponding Static component.

this.StaticAll_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	if(this.preObj != "")
	{
		var objID = this.preObj + "_1";
		this.components[objID].set_fittocontents("none");		
		this.components[objID].set_height(0);	
	}
		
	if(obj.id == this.preObj)
	{
		this.preObj = "";
		this.resetScroll();
		return;
	}
	else 
	{
		var objID1 = obj.id + "_1";
		this.components[objID1].set_fittocontents("height");
		this.components[objID1].set_padding("10px 5px");	
		this.resetScroll();
	}
	this.preObj = obj.id;
};

Replacing Specific Separators with Line Break Characters

Saved data is separated by comma (,), but it can be applied if it is necessary to change the line when displaying it on the screen.

Example

Selecting comma (,) separated text adds the line break character to the Static component and displays it as multiple lines.

sample_static_09.xfdl

Core features used in the example

expr

Able to dynamically set the text displayed on the Static component. In the example, the external function is used to display the set value.

How to implement an example

comp.parent.setWordWrap(comp.text)

Find the comma (,) in the value of the text property and replace it with the line break character. If a blank character is included after the line break, then remove the blank character.

this.setWordWrap = function(sValue)
{
	return nexacro.replaceAll(sValue, ",", "\n").replace(/^\s+/gm,'');
}