120 likes | 736 Views
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.
E N D
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 themassign their content by selecting the Dynamic Panels componentthen 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.
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”
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