Navigation:  What can ForeUI Do? >

Design Interaction

Previous pageReturn to chapter overviewNext page

You can define the behavior (or say, interaction) for each element or each page in your mockup.  When you run interactive HTML5 simulation, you will be able to interact with your design within web browser.

There may have multiple behavior definitions exist in your prototype.  Each behavior definition contains a declaration of behavior owner and one or more event handlers; each handler consist of Event, (Optional) Flow Controls and Actions.  As shown in the figure below:

behavior

The structure of event handler is quite similar with the logic flow chart. The "Event to Handle" is the start point of the flow chart; The "Flow Control" can change the flow of process, which could be branching or loop (the figure shows a branching); The "Action" will actually do some tasks, such as switching page, show / hide element, or change the element attribute etc. You can find detailed introduction of element behavior definition in the following chapters.  Below is how a behavior definition looks like in ForeUI:

behavior_example

By creating behavior definition, it is possible to implement certain logic in your mockup / prototype. When running the HTML5 simulation in web browser, you can really interact with the elements within the prototype.  Here is an example:

simulation_sample

You can find more HTML5 prototype examples here http://www.foreui.com/demos/, or here: http://www.foreui.com/store/#category=3&page=0