12 HyperNext: Object  Properties, cards and controls such as buttons, texts etc.
Channel: TigaByteSoftware
Date: 2024-03-19

Welcome to HyperNext Studio.

This video introduces Object Properties.

Objects in HyperNext are cards and controls such as buttons, fields, etc.

Cards are just like windows
with controls allowing the user to interact with the program and see information.

------------

Let's start by running HyperNext Creator.
Run Creator by double clicking the HyperNext Creator app.

To save time scripting we will just use the Features project
It is interactive and allows us to look at the code behind the buttons etc
It should be located in the HyperNext Projects folder
 
Open the Features project using menu File with option Open.
Please note that this Features project is still work-in-progress
and not every feature is filled in

The number of objects in a project can be shown via the menu bar
select menu Objects with option Project Info
this shows the total number of cards, buttons etc
and whether they are active or not

Now we will look at objects in general

-----------------------
There are usually three ways to change the properties of objects
1: Using the Properties section of the Toolbar at Design time
2: Manually at Design time, as when resizing or dragging an object using the mouse
3: Via a script at runtime

Lets start by changing a card's properties via the Toolbar
just click the card's background,
and it will show in the Toolbar Properties section

Most of these projects were made when a common screen size was 800x600 on an Apple Mac
hence, back then, a card size of 640x480 was good for experimenting with 
by todays standards this is tiny, but can easily be changed

Let's change the home card size to 900x700
In the Toolbar, Properties, click the Place tab
then change the width and height as shown

Now Preview the card
and then run your project

Return to Design mode

Lets see how to programatically resize the Home card

Click the Home card and then click the Script button
Get SCRIPT 1 code from the link in the description below this video

https://www.tigabyte.com/YT_Scripts/12_Script1.txt


In the card's Open event paste the code

These card commands are explained in the Guide Help Card section


Run your project and the card should automatically resize itself

Return to Design mode

Lets put the Home card back to its original size of 640x480
and the delete the card's Open event script

-----------------------------
Now we will briefly look at buttons and then fields
starting with buttons first
but other controls are broadly similar

Run your project
and go to the Buttons 1 card
this card shows how to get a button's properties
how to change its properties
and also how to do this programatically

Return to Design mode

Use the Toolbar card section to load the Button 1 card

To see the code behind this just click a control object
and then click the Script button

Now to look at buttons and how to assign a sound or image to them

Run your project

Go to the Buttons 2 card
this card shows how a button can play a sound 
and how to replace its text with an image 

Return to Design mode

Use the Toolbar card section to load the Buttons 2 card

Click the The Whale Song button and look in the Toolbar, Properties section
There are two images available for this button, Colors and Whales1

The Ratio checkbox allows the image to either fill the button completely,
or else be constrained by the image's pixel size ratio

Buttons can also have predefined sound attached to them
Here the sound whalesong.wav is attached to this button
 
These images and sounds can be placed in the resource libraries for use at Design time
Simply drop an image or sound onto the relevant listbox and it will be added to the project.
 
Note that a button can also cause a GOTO to another card 

Let's go to the Home card and look at a button using this feature

Click button 1 and look in the Toolbar, Properties section
The Goto dropdown menu offers a list of targets cards

An alternative is to place a GotoCard command in the buttons handler script

--------------------------

This concludes the brief introduction to Object Properties

The next video will show how to create a Simple Calculator.

Thank you for watching.




=====================================
HyperNext Studio downloads link:

https://www.tigabyte.com/hnfiles/downloads.html

--------------------------
Help PDFS

https://www.tigabyte.com/docs/QuickStart.pdf

https://www.tigabyte.com/docs/Language%20Reference%20401.pdf

--------------------------