JustinMind : Dynamic Panels

1. JustinMind: Dynamic Panels By: Caleb Harris

2. 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.

3. 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

4. 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.

5. VideoExample

6. 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”

7. Video Example

8. 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”.

9. 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)

10. 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.

11. Justinmind Example • http://vimeo.com/16212248