Data Binding Sample

In this tutorial we will create a Data Binding Sample using the Coherent Editor.

Tips and tricks

  • In most cases it is better to put two or more elements in one big parent element - it is easier to move and style many elements trough one.
  • Nest your element inside your parent element right after you create or you finish editing it. If you copy and paste it later this will help you by automatically nesting the copied element in the same parent.
  • If you want to find an element in the Hierarchy faster, click on it in the Editor's viewport and the element will be selected.
  • Be conscious about the size of your text elements. If there is a text element for time, the format will be fixed like this -> 88:88 and the text element may be as wide as the text inside. But if the field is intended for dynamically changing content, the text field should be bigger, because the words will drop on a second line if the content is wider than the text element itself.
  • Name your elements IDs on the go.
  • Holding the ALT key while zooming in the Editor's viewport with the scroll of the mouse, will help you zoom close to the area of the pointer.

We will start with simple "operations" and work our way up gradually. Every new "operation" is explained once thoroughly.

1. Creating and editing elements for Game Time

1.1 Create a div element by clicking on "Div" in the "Create elements" panel (left) and making a rectangle shape by dragging in the Editor's viewport. This will be the main container to hold the UI.

1.1.1 Let's change its ID from the "Properties" panel which is under the "Create elements" one. We can name it "mainContainer".

1.1.2 Let's change the background to a transparent one. In the "Properties" panel open the "Background" section and click on the dropdown for the "Background" property. Change the alpha value to 0. You can do this by either changing the alpha value from the input field or from the bottom checkered field.

To create the "Game Time" we start by making a div with two text elements in it:

1.2 Create a new div.

1.2.1 Change the ID to "timeBox" and change the background to be transparent.

1.3 Create a text element by clicking on "Text" from the elements panel. We can create it the same way we did with the div.

1.3.1 Let's change its ID to "timeLabel".

1.3.2 The color of the text can be changed from the "Text properties" section in the "Properties" panel. At the "Text color" field, click on the dropdown and choose the color or write its values in the text field.

1.3.3 The text content can be changed from the same section. Click on the text input next to "Text" and edit it. For this example we can change it to "Game Time:".

1.3.4 Font size - from the same section, click on the dropdown for "Font size" and choose vh. The actual size value can be changed from the text input field either by typing or by clicking the arrow buttons.

In this sample we will be using only vh values for the height, width and font size of the elements.

1.3.5 We finished styling and now we should nest the text element inside our "timeBox" div for future convenience. In the "Hierarchy" panel (right), drag and drop "timeLabel" in "timeBox". If the element is not where we want it to be, we can move it by dragging it.

1.4 We need a similar styled text element for the actual time text field which will change its content dynamically. Click on "timeLabel", press CTRL+C and then CTRL+V. By nesting the element beforehand, the new copied one is nested in the same parent. The copied element will be created right on top of the original one, we can move it by dragging it, using the keyboard arrows (hold SHIFT for changing with bigger increment) or by changing the "top" and "left" value in the "Properties" panel -> "Geometry" section.

1.4.1 We change the ID of the new element to "gameTime" and its font size with a bigger value. We can also change the text content to the format we want - in this case -> 88:88.

It should look similar to this:

2. Merchant Top - Shop Title and Buy / Sell section buttons

2.1 Let's make a label elements for the merchant name. But before that we need to create a big parent container for our elements for the top of the Merchant. Create a new div, place it under the timeBox container, change the ID to merchantTop, change the background and resize the item. You can change the size of the element in the Editor's viewport simply by drag and dropping the square manipulators that appear around the element:


What we need now are 3 elements in the container - merchant (1) icon, (2) name, (3) buy and sell buttons.

2.2 For the merchant icon we will use an image. There are different ways for adding an image trough the Editor. The one is by clicking from the "Create elements" panel (left) on "Responsive image" and choosing the image. Another way is to drag and drop the image to the Editor's viewport from the "Assets Library" (right). After adding the image, nest it inside merchantTop, resize it and place it where you want it to be.

2.3 Create two text elements for the name of the merchant (merchantName and merchantName2), nest and style them.

2.4 For the buttons we are going to create one common container (merchantButtons) just so we can move them easier if we need to.

2.4.1 Add one div with text element inside for the Buy button. Make the text element almost as wide as the buyButton itself and we are going to align the text inside trough the "Properties" panel -> "Text properties" section - on "Align:" click the most right icon which will center the text.

Copy the same elements for the other buttons, change their IDs, rearrange and style them.

3. Merchant Middle - Player Statistics, Selected Item Information, Items List and Inventory Information

Now we are going to create one big container which will be holding all of the elements for the middle part of the shop. Sample ID - merchantMiddle.

3.1 Player Statistics Section

3.1.1 For the current player statistics, create one div container. Let's call it playerStats.

3.1.2 Inside it we are going to nest one element which will also be a container holding a few smaller elements describing the type of statistic - the new element is a div with ID damageStat.

3.1.2.1 Inside damageStat create a text element with text PRIMARY DPS, one text element holding the actual DPS value, one separator (you can choose to be either a div or an image) and one container for the secondary damage information (damageOther).

3.1.2.2 Inside the damageOther container nest one text element with value "Secondary", one image next to it and another text element for the actual secondary damage value.

3.1.3 Copy and paste the damageStat element, rearrange it and name the needed IDs. Do the same for the rest of the statistic elements.

3.2 Selected Item Information Section

3.2.1 Create a new div (itemsContainer) container which will hold the weapons available for sale in the shop and the information about the currently viewed one.

3.2.1.1 The first div created inside itemsContainer will be for the current selection (currentSelectionContainer) which will hold inside it the label of the section (div) and the actual selected weapon statistic (selectionDetails).

3.2.1.1.1 Create a div for the selection label.

3.2.1.1.1.1 Inside this div - add one image, one separator and one text element with text "SELECTION".

3.2.1.1.2 Inside the selectionDetails there will be detailed information about the selected weapon - name, grade, weapon special damage, raw statistics, information comparing the currently viewed item and the equipped one and some descriptive text.

3.2.1.1.2.1 First div element inside selectionDetails will have the name and the quality of the item:

  • Inside selectionTitle we will create two text elements for the name (selectionName and selectionName2), one text element for the quality of the item (itemQuality) and one div (selectionGrade) containing two text elements, one with text "Grade" and the other with the actual item grade value (selGradeValue).

    

  • Inside selectionType we will have one image (selTypeIcon) and three other text elements - selTypeTitle, selectionSpecialValue and selectionSpecialTitle.

    

  • Inside selectionRawStats - there will be 6 descriptive text elements for the raw statistics about the weapon -> raw damage, rate of fire and rounds in clip/magazine.

    

  • Inside statsComparison we are going to create bars - divs for each weapon characteristic. A bar container holds the comparable quality's title (compareDpsTitle) and the actual bar (compareDpsBar). Inside the bar there is one more div for the inside bar with ID compareDpsOverlap. Do the same for as many bars you need.

    

  • Inside selectionDescription div we have two text elements, one for the title (selectionDescTitle) and one for the actual item text description (selectionDescText). Arrange and style them.

    

3.3 Items List

3.3.1 The second element in itemsContainer is weaponsTitle which is the exact same copy of the selection label we did but with a text for the label "WEAPONS"

3.3.2 The third element will be the actual list of available items in the shop - weapSuppliesContainer. This div will hold many list elements but we want to contain them inside its parent container. After we've finished creating/placing the list items, we will set an overflow to weapSuppliesContainer*.

3.3.2.1 In the actual list element (weaponItem1) there will be 4 div elements for the weapon's icon/status (weaponPreview1), for the name/price/DPS (weapHolderDPS1) and for the grade of the weapon (weapGrade1) / rank requirement (weapRank1):

  • Inside weaponPreview1 there will be one image for the icon (previewIcon1) and one div for the item status (weaponStatus1) which will hold up to 4 bars inside.

    

  • Inside weapHolderDPS1 - a text element for the weapon name (weaponName1), one holder (priceHolder1) of the currency symbol and value, an image, text element with text "DPS" and a text element with the DPS value for that weapon.

    

  • In the weapGrade1 - one text element with text "GRADE" and the grade value (weapGradeValue1).
  • Copy and paste the same element for the weapon rank (weapRank1), style and place it in a desired place.

    

  • For the separator we are using a div element which is placed under each list item.

** For the rest of the list items we will use the same elements - weaponItem1 + the separator. Just copy+paste and name the IDs.

3.3.3 Now let's set overflow to weapSuppliesContainer. Select the element from the Hierarchy panel (right). In "Properties" panel (left) in the "Basic" section, click on the dropdown for the overflow and choose "auto". The list container will have a vertical scroll.

   * Make sure the list elements aren't wider or are placed outside the parent because a horizontal scroll may appear.

3.4 Inventory Information

3.4.1 The third element in itemsContainer is the inventoryContainer. It will hold the backpack capacity (backpackCapacity) and the account balance (ballanceAccount).

3.4.1.1 Inside backpackCapacity there will be the title (text) of this merchant section, separators and slots used/total values:

  • Text element inventoryTitle with text "Backpack".
  • Div separator.
  • Slot icon image (inventorySlotsImage).
  • The used/total values (inventorySlotsValue).

   For the secondary slots use the same elements - the icon image and the used/total value elements.

3.4.1.2 ballanceAccount - a title (balanceTitle), the currency symbol and the current balance of the player (balanceValue): - Text element with text "Balance:". - Image for the currency symbol. - Another text element for the balance value.

4. Merchant Bottom - Buttons

4.1 This is the last and third big container (merchantBottom), for the bottom buttons section, which has Buy (buyShortcut), Compare (compareShortcut) and Exit Shop (backShortcut) buttons all wrapped inside a div element used for the background. 4.1.1 Make a div container for the buttons - ID bottomButtons 4.1.1.1 buyShortcut (div) - containing one image and one text element (buyShortcutTitle) inside it:

  • button icon image.
  • the button name (buyShortcutTitle) with text "Buy".

   For the rest of the buttons we need to copy, paste, move, style and rename the IDs of the elements.

5. Main UI Separators

The last thing we need are two separators which we will use later for a cool animation.

5.1 Make a separator (div) and place it between the merchantTop and merchantMiddle. Copy and paste the same one and place it between merchantMiddle and merchantBottom. In the Hierarchy you can do the same with the placement.

We are done with creating our elements. The next thing we want to do is make them more "colorful" with adding some hovers and animations.

6. Adding external CSS styles

Firstly let's create a *.css file in our css folder (..\Editor\uiresources\css). Name it whatever you like - sample the file name is shop.css.
From the Editor in the "Assets Library" (right), scroll down and you will see "Style", click on the "+" symbol, navigate to the css folder and "Open" the css file. It is going to be added at the bottom of the "Style" list, click on it to activate it - this will include it in the HTML. Now you can open your favourite text editor and style whatever you like.

7. Adding Animations

In the sample we are going to animate the Game time, the top, middle and bottom part of the merchant and some elements inside them.

You can start with the documentation for creating and manipulating animations if you like - Animations - documentation for the Editor.

7.1 First animation will be for the Game Time element (timeBox) with a simple opacity animation. Set its opacity value to 0 so the element is not visible by default. The opacity property is located in the "Properties" panel, "Basic" section -> "Opacity".

7.1.1 From the timeline (timeline overview), click on the second timeline marker (200ms).

7.1.2 Then click on the keyframe icon and an animation for the currently selected element is going to be created. Under the animation name you will see the property manipulated by the animation and the actual keyframe in the timeline.

7.1.3 Next click on the 600ms change the opacity value to 1 and click on the keyframe icon. A new keyframe is created for that time with that property value.

Important!
You need to first set the value of the property and then click on the "keyframe" symbol otherwise you'll set the initial value of the property and not the new one.

Now click/slide the marker to 0 at the beginning and push the Play button. You can click the continue button to play the scene until you hit the Stop button.

7.2 We are going to repeat that for the merchantTop element. Set the initial opacity value for the element to 0, move the marker to 500ms, click the keyframe icon (a keyframe is created), move the marker to 900ms, change opacity to 1 and again click on the keyframe icon. Move the marker to 0, push play and see what the animations look like.

7.3 Now let's make a height animation for the merchantMiddle element.

  • Click on it, then from "Geometry" section set the initial height element value to 0.
  • Move the marker to 800ms, click on the keyframe icon, move the marker to 1800ms, change the value to 64vh (sample value) and click on the keyframe icon again. Move the marker to the beginning and see what it looks like.

7.4 We are going to animate the player statistics elements (merchantMiddle > playerStats > *) with opacity.

  • Click on the first element in the container (damageStat) and make the animation with start 900ms and end 1100ms.
  • We are going to set the rest of the elements the same way but with different timings.
    defenceStat - 1100ms to 1300ms
    healthStat - 1300ms to 1500ms
    abilityStat - 1500ms to 1700ms.

7.5 Remember the separator under the merchantMiddle element we created? We are going to animate it as well with the top value.

  • Move the separator under the first one which is placed over merchantMiddle. For precision placement you can manipulate only the top value in the "Geometry" section. Change the initial element value to 18.0vh (sample value).
  • Move the marker to 800ms and click the keyframe icon for the top value. The end animation will be at 1600ms with top value of 80.8 vh.

7.6 For the bottom buttons (merchantBottom > *) we are going to set two animations for each element - opacity and left position.

  • Select the buyShortcut button and change its initial values of opacity to 0 and left to -15 vh. Move the marker to 1700ms, click the keyframe icons next to Opacity and Left, then move the marker to 1900ms, change the opacity to 1 and left to 0 and click the keyframe icon for both values.
  • Do the same for the rest of the elements but with different timings and left values.
    compareShortcut - start animation at 1900ms (opacity - 0, left - 15vh) and end at 2100ms (opacity - 1, left - 19vh)
    backShortcut - start animation at 2100ms (opacity - 0, left - 37vh) and end at 2300ms (opacity - 1, left - 44.5vh).

  Move the marker at the beginning of the timeline and push play to see the whole scene animate.

8. Data Binding [Editor]

For the task we are going to take some backend values and convert them with JavaScript functions to serve our needs - the time, the price color for the weapons in the list and for the background of the Selection Grade.

Adding data binding attributes and setting their values

In the "Properties" panel -> open the "Data Binding" section.

Supported data-bind-* attributes:

  1. Bind Value (bind-value)
  2. Class Toggle (class-toggle)
  3. Style Left (bind-style-left)
  4. Style Top (bind-style-top)
  5. Style Opacity (bind-style-opacity)
  6. Style Height (bind-style-height)
  7. Style Width (bind-style-width)
  8. Style Color (bind-style-color)
  9. Background Color (background-color)

We are going to add some binding attributes for the elements that will be dynamically changed.

For detailed information about the supported data binding attributes and how to use them see the documentation about Data Binding.

8.1 Bind Value

Select timeBox > gameTime element and set bind-value to secsToTime({{game.time}});

8.2 Class Toggle

In the merchantMiddle > itemsContainer > weapSuppliesContainer > weaponItem1

weaponPreview1 > weaponStatus1 for the first div element - go to "Data Binding" section, set its class-toggle: status-limit:{{weapon1.DPS}} < 2500 For the next three divs:

  • second item class-toggle: status-limit:{{weapon1.DPS}} < 5000
  • class-toggle: status-limit:{{weapon1.DPS}} < 7500
  • class-toggle: status-limit:{{weapon1.DPS}} < 10000

Here we add or remove the class .status-limit (shop.css) depending on how much DPS value the weapon has.

The rest of the weapons are also set to change, the only difference being the weapon number -> status-limit:{{weapon#.DPS}} (1-6)

8.3 Style Left

For both merchant names, merchantTop > merchantName/merchantName2, set bind-style-left to {{merchant.nameLeft}} + "vh"

This will set/change the node's style left property of the elements.

8.4 Style Top

For the Backpack icons (inventorySlotsImage and inventoryGrenadesImage) set bind-style-top to {{merchant.iconTop}} + "vh"

This will set/change the node's style top property.

8.5 Style Opacity

Select merchantMiddle > playerStats > damageStat > damagePoints and set bind-style-opacity to {{merchant.statsOpacity}}

Do the same for defenceStat > defencePoints, healthStat > healthPoints and abilityStat > abilityPoints

8.6 Style Height

Inside selectionDetails > statsComparison > compareDPS -> select compareDpsBar and set bind-style-height to {{merchant.powerBarHeight}}

Do the same for the next similar bars.

8.7 Style Width

Inside selectionDetails > statsComparison > compareDPS > compareDpsBar -> select compareDpsOverlap and here we are going to set two data-binding values - for width and height:

  • bind-style-width : ({{weapon1.power}} * 42.6) + "vh" (The number 42.6
  • is the maximum vh (in width) for the value bar).
  • bind-style-height : {{merchant.powerBarHeight}} + "vh"

The next weapon inner bars are also made to change their width the same way but with different values for each one:

  • weapon1.accuracy
  • weapon1.recoil
  • weapon1.range
8.8 Style Color

In the list of weapons the merchant offers (weapSuppliesContainer) for the price of the first weapon, weapPrice1, set bind-style-color to toRGB({{weapon1.priceColor}});

The JavaScript function toRGB(); basically returns a string taking the color properties from the backend. You can check this and the rest of the functions - Scene (Right Panel) -> open Events dropdown -> click "on scene load".

As long as we are on this element, let's set its bind-value to {{weapon1.price}}.

For the next price elements:

  • weapPrice2 -> bind-style-color to toRGB({{weapon2.priceColor}});

Repeat these steps for the rest of the weapon offers but change the corresponding number for each one.

8.9 Background Color

Inside selectionDetails > selectionTitle -> select selectionGrade and set data binding input field background-color: to toRGBA({{weapon1.priceColor}});

There are more elements with data binded values in the sample in the SELECTION preview for the weapon:

  • selGradeValue -> {{weapon1.grade}}

  • selectionSpecialValue -> {{weapon1.critDamage}} + "%"

  • rawDamageValue -> {{weapon1.damageRating}}

  • rawMagazineValue -> {{weapon1.rounds}}

and two more for each weapon element for the grade and rank in the weapon list:

  • weapGradeValue1 - {{weapon1.grade}}

  • weapRankValue1 - {{weapon1.rank}}

For the rest of the elements, just change the number of the weapon -> {{weapon#.*}}


For even more ways on how to use the Coherent Editor, check the documentation.