Themepanel. So, access your command palette (
cmd+shift+p) and type Theme and look for a Panel called
Theme, like so:
Themepanel on the left of your screen, like this.
darkthemes. By default these will be very similar to begin. For each theme there are several standard named colors, e.g.
label, and each of these named colors are used by default in several different places in your app. For example, the
primarynamed color is used as the default color for your buttons. Let's go ahead and chance this color now, for both the
darktheme. (Note, some of the standard named colors have 2 different color values associated with them, as is the case with
primary. For those named colors the first color value represents the background-color and the second color value represents the text-color.)
lighttheme with the following values:
#722f37(a nice wine red)
#2f5a72(a complimentary blue)
#37722f(a desaturated lime green)
darktheme with the following values:
#2f5a72(a complimentary blue)
#72482f(a complimentary brownish orange, which resembles severely burnt and unsalvageable salmon)
#2f7269(a very dark desaturated cyan)
<sidebar>component we will be adding later), but often times a standard icon library will get you 80-90% of what you need. For that reason JourneyApps has two built-in icon libraries, Font-Awesome and Ionicons (note the specific versions).
main.view.xmlfile and add a
<display-image>component as the very first view component, after the variables of course. We wil use one of the welcome images we uploaded for this part. Like so
main.view.xml. In every
<button>component you need to first add an
icon=""attribute and then we will specify the icons we want to use. For View, Delete and Add I am going to use the Font Awesome
plusrespectively. Like so.
<button-group>component. So, still in the
main.view.xml, add another
<display-image>component, binding this one to the
images/deep-c-corp-main-logo.png. Then, above the our three
<button>components, add a
<button-group>component and move the existing three buttons into the
<button-group>. Now, to use the column space nicely, we are going to have the main logo on the left, and everything else on the right of the screen. Like so.
solidcolor or an
outline. Next we will incorporate some of this in our app, so let's head to our View Item view and update the buttons with some more styling.
view_item.view.xml, move the two buttons into a
<button-group>and give each an
iconattribute and an
icon-positionattribute, then update those attributes to the following (notice the order of my buttons inside the button-group):
outlineinstead of a solid color, and I want to use a different color for my Mark as Closed button, the
secondarycolor (to do this I need to specify a
colorattribute on the button). So update the buttons to the following:
view_itemview, above the
sidebarand insert the auto-complete suggestion for . This will give you:
<item>components have a
state=""where the first item defaults to active and the second to disabled. Sidebar items can have one of three possible states:
<sidebar>with some data. We want a sidebar with three items. The first will represent our Main view or starting point, the second will represent the View Item step and the third our Item Completed step. So, in your
primarynamed colo. Like so:
on-pressaction for the
itemin question. Like this.
sidebaravailable on mobile phones by adding a
sidebarcomponent. Like this.
sidebarto the Completed Item and update the state values for the various sidebar items view to finish this part of the tutorial. So head over to the Completed Item view and update the
completed_item.view.xmlto the following:
<html/>component can display HTML content from two types of sources:
https://URL in the
.htmlfile on your computer. The easiest will be to use a text editor and save the file with the following filename
blue-line.html(note the file extension). Use the below code for the contents and once saved, upload the
blue-line.htmlfile to your Assets workspace.
<html>component (add it as the very first view component outside of the columns but after the variables) and specify the
src="html/blue-line.html". You will also need to specify the height manually in this example as the default minimum height would be too much for our example HTML. (Note the
blue-line.htmlfile. Like this.