.xmlfile, which is used to describe the layout of the view, and a
.jsfile, which is used to describe the business logic for the view. By default, when you open a view to edit it both of these files will be opened for you, the
xmlin the left editor pane and the
jsin the right editor pane. This can be seen in the image above for the "main" view. OXIDE has opened the
xmlin the left editor pane and the
jsin the right editor pane.
infocomponent to our "main" view
xmlto get us started.
<!-- Components go here: -->section, then type
headand you should see something like this ...
enterto insert the highlighted auto-complete suggestion (in this case there was just one option). Now your code should look something like this ...
headingcomponent for you. All that is left to do is populate it with some text. Let's add the text 'Hello World' to the inside of the
headingcomponent. Now your code should look like this ...
infocomponent. We are going to add the component underneath the
headingcomponent, we are going to use auto-complete to let OXIDE insert the xml tags for us, and once it is there we are going to populate it with some text, in this case the text 'This is my first app'.
inf, then use your arrow keys to highlight the
infocomponent in the auto-complete suggestions, not the
info-tablecomponent. Once the suggestion is highlighted hit
enter, and finally add the text 'This is my first app' inside of the
infocomponent. Now your code should look like this ...
continueand then you will be presented with instructions on how to test your app.
buttonin the Test app action (bottom right corner of OXIDE). If all went well the JourneyApps Container for desktop should launch and look something like this ...
varon a new line under the
<!-- Variables go here: -->section in your View XML and hit
enterto auto-complete as usual.
nameproperty, and then text for the
typeproperty. text indicates that we'll be storing text in this variable (we'll show you all the different data types later.)
components. If you see an error message such as "Elements must be in this order: parameters, variables, components" or "This element is not expected" , it means that something has been inserted in the incorrect order in the XML.
text-inputcomponent will work well. We want to add a
text-inputcomponent underneath the existing
infocomponent in the
xml. So, add a new line after the
infocomponent and type
text, highlight the
text-inputauto-complete suggestion and hit
enterto insert the component.
text-inputcomponent has a
bindattribute and a
requiredattribute, but we can specify some additional attributes as well. For now, just add a
labelattribute to the
bindattribute tells the view where to store the input that the end users will enter into the component.
bindneeds to be set to a variable that is declared in the view. The
labelattribute is used to display a text label above the
text-inputcomponent. Let's set the
bindattribute to the name of the variable we declared, your_name, and the
labelattribute to 'Please enter your name'. Now your code should look like this ...
cmd+shift+p), then type
designand select the Open view in designer action. When prompted to select a View Model, choose the 'main' view. The visual editor should now be open.
text-inputcomponent, select the
buttoncomponent from the list, enter 'Press Me' as the Button Label when prompted and then hit 'Continue'.
jsin the right editor pane. Once there, you should see this, the visual editor has added a
buttoncomponent for you in the
xmland also populated some of the xml attributes of the
buttoncomponent. You may have also noticed that the visual editor has created a new
jsfunction for you ...
jscode to return a dialog once the user presses our button. We are going to use a simple
dialogJS component, and this component takes a string as an argument. Update your JS function to the following ...
jsof this 'Hello World' app. If your app is not working like ours, or you broke it and cannot seem to fix it, simply copy and paste both the
jsover to your app and then try again.
auto-deployfeature and is enabled by default. You can also trigger a deployment manually by hitting
cmd+s(Note you can turn off the
auto-deployfeature from the command palette,
cmd+shift+p. This is often useful if you have a poor internet connection or when you are working on large blocks of code at a time. If you do turn it off, just remember to hit
cmd+sto manually deploy your code before trying to test it).