Presentation on theme: "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."— Presentation transcript:
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 its 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.
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.