1 / 11

JustinMind : Dynamic Panels

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.

trella
Download Presentation

JustinMind : Dynamic Panels

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related