Introducing ImageViewer

The ImageViewer component processes image content to be displayed on the screen. While image processing on the web is at the level of displaying and sorting images, the ImageViewer component can add and edit the text in that area.

Example

Images can be used alone, but they are mainly used as a means of supplementing the text. You need a way to place and use images to match the paragraphs that use text. It is also important to place the image in the right size.

Creating ImageViewer

The ImageViewer component is used to hold images. You can add text here to describe the image, and you can add borders to give it a picture-frame-like effect.

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

You can specify the URL where the image file is located in the image property value. Enter the image address below among the published image files. Since the image file size is 320x480, set the width, height property values of the ImageViewer component also to 320, 480.

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Bob_Dylan_1978.jpg/320px-Bob_Dylan_1978.jpg

Run it with QuickView (Ctrl + F6). You can check that the specified image is displayed on the screen.

Showing Image in Image Folder

Images that are frequently used in the application can be stored separately in the image folder, and the images you need can be used from there. In Nexacro Studio, you can easily access the image folder by adding the service folder.

Example

When the button is clicked, the specified image is loaded and displayed on the screen. Image files are preloaded.

sample_imageviewer_01.xfdl

Core features used in the example

image

Specifies the path of the image file to be displayed. There are several ways to specify the image. If the file is in the external path, then you can specify the URL directly. If it is included in the same project as the application, then the image specified in TypeDefinition is used. This example uses the image specified in TypeDefinition.

How to implement an example

Place the ImageViewer, Button components as shown in the example screen. Set the width, height t property values of the ImageViewer component to 320, 480. Delete the default property value so that text is not displayed on the screen.

Select the ImageResource item in Resource Explorer and select the [Import ImageResource] item from the context menu. You can add ImageResource by opening the file dialog and selecting the image file.

The added image file can be checked in Resource Explorer.

Specify the image to be displayed when the application is executed. If you select the ImageViewer component and expand the list next to the image property value item in the property window, then you can check the image file registered as ImageResource in the previous step.

Select the Button component and write the onclick event function. Specify the image file specified to each button as the value of the image property.

this.btn320_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.image = "imagerc::320px-Bob_Dylan_1978.jpg";
};

this.btn160_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.image = "imagerc::160px-Bob_Dylan_1978.jpg";
};

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

Resizing Image

Let us take a look at how to automatically resize the image when it needs to be displayed at a specified size when displayed on the screen.

Example

When the button is clicked, the image size is automatically adjusted according to the size of the ImageViewer component.

sample_imageviewer_02.xfdl

Core features used in the example

stretch

Processes the function that increases or decreases the image size. 3 parameters can be specified. If the property value is set to "fit", then the horizontal and vertical sizes are adjusted to the size of the ImageViewer component. If the aspect ratio of the image is changed during this process, then the image may appear distorted. If it is specified as "fixaspectratio", then the aspect ratio is maintained, but spaces may occur.

How to implement an example

Place the ImageViewer, Button components as shown in the example screen. Set the width, height property values of the ImageViewer component to be slightly larger than the image size to be used in the sample.

Select the ImageResource item in Resource Explorer and select the [Import ImageResource] item from the context menu. You can add ImageResource by opening the file dialog and selecting the image file.

The added image file can be checked in Resource Explorer.

Specify the image to be displayed when the application is executed. If you select the ImageViewer component and expand the list next to the image property value item in the property window, then you can check the image file registered as ImageResource in the previous step.

Select the Button component and write the onclick event function. Specify the value of the stretch property specified to each button.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.stretch = 'fixaspectratio';
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.stretch = 'fit';
};

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.imageviewerMain.stretch = 'none';
};

Run it with QuickView (Ctrl + F6) and click the button to change the image size.

Displaying Base64-encoded Image

Let us take a look at how to display the Base 64 code value converted from the image file back into the image.

Example

Enter the Base 64 code value in the Edit component and click the Button component to show the converted image and image size information below.

sample_imageviewer_03.xfdl

Core features used in the example

imagewidth, imageheight

Able to return or set the width and height values of the image to be displayed on the screen.

How to implement an example

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ImageViewer00.image = this.Edit00.value;
};

this.ImageViewer00_onload = function(obj:nexacro.ImageViewer,e:nexacro.LoadEventInfo)
{
	this.Static00.text = this.ImageViewer00.imagewidth + " x " + this.ImageViewer00.imageheight;
	this.resetScroll();
};

Showing Alternative Image for No Image Found

This is the method of showing an alternate image when the image file name is wrong or there is a problem with the server. This can be useful if you do not have access to a specific image file.

Example

When the button is clicked, the image property value of the two ImageViewer components is specified as the URL that cannot be accessed. One displays an alternate image and the other one displays a broken image.

sample_imageviewer_04.xfdl

Core features used in the example

imagewidth, imageheight

Returns the width and height of the image to be displayed on the screen. If the image could not be fetched, then 0 is returned.

How to implement an example

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ImageViewer00.image = "https://dummy/Jack_Black_2007.jpg";
	this.ImageViewer01.image = "https://dummy/Jack_Black_2007.jpg";
};

// https://commons.wikimedia.org/wiki/File:2016_RiP_Tenacious_D_-_Jack_Black_-_by_2eight_-_8SC8891.jpg
this.ImageViewer00_onload = function(obj:nexacro.ImageViewer,e:nexacro.LoadEventInfo)
{
	if(obj.imageheight == 0 && obj.imagewidth == 0)
	{
		this.ImageViewer00.image = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/2016_RiP_Tenacious_D_-_Jack_Black_-_by_2eight_-_8SC8891.jpg/160px-2016_RiP_Tenacious_D_-_Jack_Black_-_by_2eight_-_8SC8891.jpg";
	}
};

Processing Scroll for Image Larger than ImageViewer

The ImageViewer component does not have its own scrollbar, so if the image size is large, then the entire image cannot be viewed. Let us take a look at how to process the scrolling function using the Div component that wraps the ImageViewer component.

Example

When the 320x480 button is clicked, an image larger than ImageViewer displayed on the screen is loaded. At this time, the scrollbar is enabled and the entire image can be searched.

sample_imageviewer_05.xfdl

Core features used in the example

imagewidth, imageheight

Returns the width and height of the image to be displayed on the screen when loading the image. Sets the size of the ImageViewer component according to the image size.

How to implement an example

this.btn320_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Div00.form.imageviewerMain.image = "imagerc::320px-Bob_Dylan_1978.jpg";
};

this.btn160_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Div00.form.imageviewerMain.image = "imagerc::160px-Bob_Dylan_1978.jpg";
};

When the image is loaded normally, set the height and width of the ImageViewer component to fit the image size. What is actually displayed is not the scrollbar of the ImageViewer component, but the scrollbar of the Div component.

this.Div00_imageviewerMain_onload = function(obj:nexacro.ImageViewer,e:nexacro.LoadEventInfo)
{
	var nHeight = obj.imageheight;
	var nWidth = obj.imagewidth;
	
	obj.height = nHeight;
	obj.width = nWidth;
	
	this.Div00.form.resetScroll();
};