Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 The Interface

In this lesson, we’ll create our first Ionic Creator app and start to get to know the user interface.

Related Links

2.1 The Interface

Hello everyone, I am Reggie Dawson. Welcome back to the Get Started with Ionic Creator course for Tuts+. In this video we will begin to get familiar with the interface of Ionic Creator. The first thing we need to do is go to Creator is free for one public project with limited basic exporting. With the paid option, we have the choice of unlimited projects, as well as more advanced exporting modes. In addition, the paid plans also offer in-tool code editing. In this course we will use the free plan, and as you will see it offers enough features to set up a basic app. The same results can be achieved, provided you are willing to do some coding outside of Creator. Once you sign up, create a New Project. For now we will start with the Blank project, but later on in the course we will talk about these different project types. Now once we create our new project, it will create a card for it on our dashboard. We have the option to change the App Icon and Splash Screen from here. Ionic has provided the dimensions and file types acceptable for these purposes, and adding them is as simple as choosing the file and uploading it. Now bear in mind, this does not export with our project and will only apply as long as we develop our app on Ionic Creator. The other icons in the bottom of our project card gives us some other options that we can use. Export Projects allows us to export the project so we can continue working on it in our local machine, or compile it for use on our mobile device. Share Project will allow you to share your project with the URL, email, text, or the Creator mobile app. The Creator mobile app is only available on paid plans. Duplicate Project will copy our project, but of course on the free developer plan we only have access to one project. Then finally, Delete Project will of course delete the project for us. If we click on the project it will bring us to the dashboard for this particular project. At the top, we have the Build and Preview icons that let you toggle between the two states. We are currently in the Build tab, which is where we will develop our app. The Preview tab allows us to see the app as it will display on our devices. To the right, we have a Theming and SESS link, in addition to the Export and Share links like the one we have on our project card. Then to the left we have a menu that will allow you to add, delete, and duplicate pages in the app. In the developer version, we can add a blank login and sign up page. In the paid plan you also have access to an HTML page. We can also set the default page of the app from this menu by clicking on the pin next to the page. The default page is the first page that will be displayed when we launch the app. Then the center section is where we can use Device to simulate various different devices that our app can run on. This is especially useful for developing with iOS when you do not have access to a Mac. This way you can simulate an iPhone, iPad, Android Phone, and Android Tablet. We can also enable and disable the Status Bar and the Device Skin. Then on the right, we have the properties pane that will display the currently selected item's properties. Since the page is currently selected, the page properties are displayed. The page has a title, routing URL, and state sref at the top. These properties will mainly be used to navigate around our app. Then we have our route parameters, which are only accessible in the paid plan. If you have ever used Ionic or Angular, then you will know that we can use route parameters to pass data between controllers. After that, we have Background, which lets us change the background of the page. We can change the Background Color or upload an image for the background. Then we have controls that will allow us to add left and right header buttons. Once we enable the buttons, we have a lot of different options on how they appear. First we can choose an Icon for the button Ionic Creator includes a lot of different icons that you can use, and you are sure to find an appropriate one. Then Text is the text that is displayed on our button, and style as a button will make it look like a standard Ionic button. Also when we style as a button, we can use the different Theme buttons that Ionic offers. After that, we have Directives which is a paid feature, followed by the Miscellaneous section. These are other general settings of the page that weren't addressed in other menus. The most notable one to me is Classes, which allows us to add CSS classes to the page. Now that you are familiar with the interface of Creator, in the next video we will start to work with the various components that we can use in our app.

Back to the top