If you haven't done so before, have a look at the Hitchhiker's Guide Part 1 before trying to solve these exercises. If you are brave, just go ahead and try your luck.
Hello world with simple values
Let's start by generating output with a simple value declaration. That's a string, number or boolean literal. You'll get some prepared Fusion code that you need to modify to solve the exercises. Just press the "Run" button and inspect the output. Messages will give you a hint if something was wrong. If the button is green, you have correctly solved the exercise!
Adjust the code, so that you get Hello world! as the output by using a string value
The next exercise is to output the number 42 (the answer to life, the universe and everything)
Objects are great
Let's go ahead and build something more sophisticated. An object can express much more and is the main building block in Fusion. Let's see how to use objects for different purposes. We start with the Array object that will render all individual properties and evaluates to the combined output.
Output Hello world! without using the string value 'Hello world!'
Did you notice the Array and string values in Fusion take whitespace literally?
Object declarations can be extended at any time - that's a true advantage of using a declarative style for the view. For this case a property can be declared or overridden by using the path syntax output.hello = 'Hello'.
Extend the existing object declaration to produce the output Hello world!
Fun with expressions
Objects are already much more powerful than simple values. But the real flexibility in Fusion comes from the built-in expression engine that is called Eel. They can be used for every property, so simple values, object values and expressions are very much interchangeable in Fusion.
A valid Eel expression is basically JavaScript syntax without functions and control statements (if, for, while).
Let's combine two strings to generate the output Hello world!
Eel comes with a selection of helpers that can be used for different purposes. The String, Array, Math and Configuration helpers include many useful functions to work with data in expressions.
Let's invoke a helper function to get only some part of a string. The String.substr function should do what we want. You can have a look at the MDN reference to learn more about the arguments it accepts. If you compare the Eel version with the JavaScript one, you'll note that we pass the string value itself as the first argument in the expression. This is needed because all the functions in Eel are static and do not work on instances.
Modify the function arguments to get the exact substring 'Hello world!'
In Eel we can use numeric, string, array or object values like in JavaScript. One useful function is String.split to create an array from a string value by splitting it by a given separator. Remember that items of an array can be accessed with the arrayValue[x] syntax (no matter if it's a function call or any other expression).
Output 'Hello world!' by using split with a correct separator and accessing the correct array index
The Array.join or Array.reverse functions work just like their counterparts in JavaScript, but their first argument is the array value that they should operate on. Array values can be specified with the ['apple', 'pear'] syntax. Let's have a look at how that works.
We mixed up the values here, apply Array.reverse(x) to get them in the right order
Collect the badge
Neos Fusion Hello world!
Rewarded for solving code examples about Fusion basic syntax. The earner knows how to use simple values, extend object declarations and use simple expressions to manipulate string or array values.
...And cut!
We hope you enjoyed our interactive tour through some of the TypoScript 2 features. The next In Action article will feature context values, working with nodes (your content) and shows you the magic of FlowQuery.
Update (March, 2018): Renamed TypoScript 2 to Fusion