JustinMind: Dynamic Panels By: Caleb Harris

Tabs in Justinmind Tabs are an efficient way to organize information It is also one of the most common ways to organize information on a single screen. Each tab displays different content that will become active once the user clicks it.

Simulate Tabs To create a tab, drag the dynamic panels component to canvas. It will them show us an area reserved for active panels and it’s name. After that a “+” icon will appear and that is where we can create layers. After accessing them  assign their content by selecting the Dynamic Panels component  then the gray label that corresponds to the label you want to use. Adding screen components is as simple as dragging them from the palette and dropping them on top. To give a tab form  align it center  indicate borders desired in properties

Modifying Tabs After the graphics are complete  add interactivity so the content is displayed when the user clicks it. All interactions capable of being defined are found in the “Events View”. After clicking the interactions button a dialog box should appear  specify the actions desired after user clicks on a tab. Click “simulate” to see how the content is displayed based on tab selected.

Video Example

Dynamic Input Fields In just in mind there is a capability of organize forms so that they are not overwhelming to the user. Similar to that of the tabs, you will draw the fields that you consider essential Drag the dynamic panel component onto the work area  create the 2 layers  one which you will add the label, “ display options field”  and the other label “hide options field”

Video Example

Inline Editing In Justinmind you can simulate text that the user will be able to edit simply by clicking on it. Drag the dynamic panel tool to the workbook  type the desired text into the field  select the dynamic panel to add additional layers. Insert a text input field within the panel and also a draw button  select the button you put in the second layer  add an “interaction”. You then may choose to show/hide the first layer  proceed by clicking “ok”. This event is displayed in the “Events Tab”.

Inline Editing (Cont) Click the arrow next to the “do” tab in the open context menu  click “create action” to add behaviors to the existing event. Proceed by choosing “Set Value” go to the first layer of the dynamic panel  select the text element. Select value by clicking on the “calculate” option You are able to build expressions through the dialog box that should pop open, in the screen tab select the second layer  drag the text element top the top (dotted line box)

Inline Editing (Cont..) Click “ok” to return to the event dialog box  click “ok” again, after this all the necessary commands have been selected so when the user clicks the button, the desired text goes to the first layer. Do similar work with the second layer, going to events tab  adding an interaction, to make the second layer appear when you click the text. Finally click “simulate” to verify results. The original text can be replaced after the user confirms it by clicking the button that was drawn.

Justinmind Example http://vimeo.com/16212248