- A descriptive name, which usually includes the name of the organization (if applicable) and project or main purpose for the Xap, e.g. "US Census City Clustering"
- A link to a relevant image, often the logo for the organization or an abstract representation of what the Xap accomplishes
- One or more searchable tags, usually the organization, purpose, key algorithms or visualizations used, etc, e.g. #census, #clustering, #reference, #uscities
- A description of the Xap's intended audience, the problem it solves, and any important notes to share with users or other Xap builders. (See the article on markdown for how to style your description).
Click on the name of the Xap, or "Untitled Xap", in the top-left corner of the Xap Builder to provide this information. Be sure to click Save when finished.
Organizing Components in your Xap
- Layout components in the dataflow to follow the user interface: Keeping your components generally aligned with where they appear on the screen makes understanding and finding components much easier. For instance, lay out multiple controls like buttons or visualizations like trees, graphs, etc. in the order they appear in the user interface. If the save button appears to the left of the cancel button in the live Xap, also put the Save button component to the left of the Cancel button component.
- Layout components to follow the data flow: Many applications have a common pattern of fetching data, performing some analysis, and visualizing results. Laying out the components in left-to-right fashion of data access, analysis, and visualization helps you and others quickly locate elements of interest.
- Use whitespace to your advantage: You can zoom in and out within the dataflow, so use white space to logically separate groups of components.
Working with HTML and CSS
- Do as much through components as possible. Limit custom HTML to styling and the occasional plain text field. Do not embed custom forms, Javacsript, etc. You lose the power and extensibilty of Exaptive's component framework when doing so.
- The most common CSS changes involve styling the overall Xap and overriding default styling of UI components to match the branding of a particular organization.
- Use a layout manager like Bootstrap to help manage laying out your page and ensuring it is mobile-ready with minimal coding. Exaptive has several components for layout managers.
- Avoid inline styling wherever possible, instead using classes or element selectors to style specific components.
- Use comments in more complex Xaps to explain particular layout/organization and UI design decisions made.
Managing Saved State in Components
- Save the state of any static or default configuration settings: any settings or values that drive your application's behavior. Examples include configuration options for algorithms, UI parameters for charts and other visualizations, and selectors for data elements. In most cases, component inputs are saved by default (the exception being certain elements like an input with the name "data"), so you should be fine with the default behavior.
- Do NOT save the state of data inputs, particularly those expecting to receive very large data files. Use an asset or secondary storage like a database or Amazon's AWS S3 to store the data until it needs accessed by the Xap.
- Use button values and other "triggering events" to feed data into other components based on a user's action.
- Use a component like "Simple Init" to feed data into components on page load.
Managing Larger, More Complex Xaps
- Plan ahead: Exaptive's rapid development platform makes it easy to build prototype on the fly, but when constructing more robust applications, a bit of upfront planning pays significant dividends. Before diving in, sketch out the key elements required of the Xap, how they will be laid out, and most importantly which off-the-shelf components will be used versus customized ones for this project.
- Encapsulate functionality and data: Often, you can construct a functioning Xap to meet a specific user need through a combination of off-the-shelf components. But if you need 20-30 components to replicate the unique functionality, say, of reading and writing objects or laying out a complex form, you may be better off creating a few custom components that handle all functionality. Your Xap will be much more understandable and legible. Exaptive continues to add capabilities to combine more granular components into an aggregate component, which gives the best of both worlds.
- Each web page as its own Xap: Much like you'd manage a complex website, creating separate Xaps for different pages of functionality can keep each Xap's data flow manageable. You can use shared CSS, HTML and components to replicate common behavior like menus, authentication, etc. and simply link to the other Xap as you would any other webpage.
- Document your work: Capture your design and key implementation decisions along with any specific connection information or confusing aspects of the Xap, so that your future you and others can benefit from this context. Use a Wiki, shared document, or other content capture system early and often, to avoid needing to go back and document everything at the end.