States: realtime exchange of user interface and functionality

 

 

Applies to:
Working with BrowserBob

You can create applications that change looks and functionality on the fly during runtime, depending on defined criteria. You can define several States of the application with a specific design and functionality for each state. Or you can just create a special interface for Popup windows called by your application using states.

A state change can be triggered by the following "events":

button click - which means a user clicks a button which causes an interface change,
by scanning
the URL of a linkbutton and triggering the state change by the result of the scanning process,
action lists (only available in BB Pro),
you can combine different actions like a navigation and an interface change.
events
(mouse events) - can trigger any BrowserBob action on any target

If you want to change the user interface for example when a user clicks a certain link button, you would scan the URL of the link and trigger a status change when this URL is loaded or you create an action list (BB Professional only) which does the navigation and the interface change in one go without scanning.
 

For the following weblication a state-change via button click has been realized. After the button click, the interface changes in realtime into a web TV interface showing the live stream of a music channel.
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Setting up states

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Choose States from the View menu to open the States panel. It shows you all the different states of your project. Here you manage the states (interfaces with different functionality) of your browser.

Each project has at least one state, the Main State. You create a new state by clicking the '+' symbol. You can delete a state by highlighting it and clicking the '-' symbol.

States - like every object in BrowserBob - are named automatically. States are named in the following way: State1, State2, and so on. You can change the naming to a speaking name, which you should do at least in case of bigger projects to achieve a better overview and documentation.

 

 

State change

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In our example we chose different colored backgrounds for the Main state and State1.
They have the same size in the beginning.

 

 

 

 

 

 

 

Main State:

 

 

State1:

 

 

 

 

Now you can add a button object to the main state

Target
object is Main Dialog, meaning the whole user interface.

A click on this button should change the user interface (state change), so you choose "Change state" as Action.

Action Change state needs a parameter, specifying which state to change to. In our example we choose "State1".

Now you can already test your state-change in testmode.

 

 

 

If the startsize of the application for this state needs to be different from the size of the Main State, you can specify a startsize in the parameter of the Change State action.

The parameter State1,456,340 would change to state 1 and open it in a size of 456x340 pixels. This is especially useful for different background pictures in different states, which might be of different sizes respectively different height/width relations.

 

 

 

Local and global properties of objects

 

 

 

 

 

 

 

 

 

 

 

 

Properties of objects can be local or global depending on the type of object. As a general rule, the name of an object, which serves as identifier, is always a global property. This means, if you change the name in one state, it's automatically changed in all other states as well. Another property, which is global in general is the "role" of an edit or panel object.

All details and a list of local and global object properties: Global and local object properties

 

 

 

 

  • global properties:
    Global properties are chosen once in the Main State of the browser and will stay the same for each state in your project.

    The startpage entered is a property of Main state. No startpage can be defined in this field in a new State. Should you define your application to launch with State1 instead of Main State, this page will be loaded as startpage. However, if the state is changed via clicking a link button and a scan of the linked URL, the startpage of the main state is of no relevance and will not be loaded.

 

 

 

 

global property: Startpage

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • local properties:
    local properties of an object can be different  in each state. For example the visibility of an object (shown or not shown) can be defined separately in each state for the same object. Also the size of visible objects can be different in each state.


    Important note:
    all objects (buttons, Main web etc.) are global and are present in the whole project (in each state).
    If you want to add new objects to a state, it will be present in all other states as soon as you create it.

    If you want to show an object in a single state only, you need to deactivate it in all other states, via the the local property checkbox "Visible" (uncheck it to make object invisible).

 

 

 

local property:
size of visible objects

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Example: Button action as local property:
Under "State change" in this chapter, a button object has been created in the Main State for changing the state to State1.

 

 

 

 

 

 

 

 

 

Local properties in Main State for Button object 'button1':

 

 

 

 

 

 

 

As described above, object 'Button1' is present in all states, and is shown also in State1, but without any action assigned.

The action assigned to a button is a local property and can be changed in each state independently of the other states. Consequently our object 'Button1' can be assigned a different action in state1. The same is true for the graphics of the button - it can look differently in all states and also have different positions...

So you could make 'Button1' change state back to Main State here:

 

 

 

 

 

 

Local properties for 'Button1' in 'State1':

 

 

Change State versus Set State

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You can change the state of the browser via Change state or Set state actions.

The only difference is the behavior of visible panels:

  • Set State: visible panels will be set to their positions like defined in their properties after the state change.
  • Change State: after the state-change visible panels stay in exactly the same position as they were before.

Related topics:
States window

States overview