HTML and CSS get used in the Studio in two ways:

  1. You may want to build HTML Components for Xaps, like a text box or tabs.
  2. You'll want to style your Xaps and Components.

You'll be able to build all the webpage functionality possible with HTML. The HTML components you create will work modularly with any other Exaptive component, regardless of the technology used. 


You'll also be able to make your Xaps look as good as you want them to, like any other web page. 


In the both cases, everything you know about HTML and CSS still applies. You just have to know where to build the thing you want to build or style the thing you want to style.


1. Building HTML Components

 

Building an HTML component in the Studio requires a working understanding of Javascript and JSON, but it'll feel very familiar. We'll walk through creating a text box to illustrate.

 

You'll go through the steps to create a new Component. When prompted to select the language you would like to build the component in, you'll select Javascript. 

 

The next thing you'll see is the Component Editor. The Inputs, Outputs, Script, CSS, and SPEC are where the action will be for creating a text box. You'll see how Javascript, JSON, and HTML mix together to create a modular component that can work with other components of different technologies. 



Inputs


Selecting the Inputs tab on the left will allow you to add or remove inputs on your component. This is one of the most important steps in the Studio, without inputs our components can't use data.




For our text box component, adding an options port allows us to add in things like maxlength and placeholder text.



The port description allows other users to see what this particular piece is doing. A kitten cries every time you don't add a description, so do it. This one has an example of what the port is expecting...


{ "placeholder": "First Name", "maxlength": "25", "required":"true" }


Outputs


Now that the inputs are setup we move on to the outputs of our component. This text box can be set to output its contents on multiple actions, valueSet through the dataflow, submit, an event change, when the box loses focus, or when it receives focus.



Script


The script tab is where you will add in the javascript that will power this component.




Inner HTML


The inner HTML tab isnt always needed for component creation, it comes in handy for more complex things like a file uploader that has multiple parts. Since we don't need it for this example we will skip over it for now.


CSS


The CSS tab handles the styling for this component. This default styling will be used by anyone that has this component unless they choose to override them. Chin up, it happens.




Spec


The spec tab shows the contents of the spec file. It's like a summary of your component and contains all of the info from the previous steps.




Our text box component does't have any dependencies due to its simple nature, but this is where you would add an external library like jQuery, bootstrap, etc...


The "image" tag in the screen above is the image used in the explore and studio views.


Save your changes and you now have a text box component ...





2. Styling your Xaps and Components


You can style a Xap from the STYLE tab in the Studio.



You can style someone else's Component that you've pulled into your Xap from the Dataflow view. Hover over the Component and select the information icon that appears below it. In the light box that appears, go to the layout tab.




You style your own Components (and Components you have permission to edit) from the Component Editor, in the CSS tab.




For more detail on styling with HTML and CSS, check out the articles in Building Xaps and Building Components.