Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Exercise 2-4: Defining Views

Page of 168
During this exercise you will define the tab panel and intro screen.

Overview

During this exercise, you will use Sencha Architect to define tabpanel-based navigation for your app. You will also create the initial 'welcome' view that displays HTML5 content.

  • Implement a tab panel interface
  • Define a view containing static html
  • Review the process defining icon buttons

Steps

Review the Documentation

  1. In your web browser, open the following URLs and review the configs, properties, methods, and examples for the following view classes:
Define the Tab Panel View
  1. Launch Sencha Architect
  2. Select File > Open Project
  3. Select /path/to/arch101/mobile/lab/exercise4/exercise4.xds. Note that this is the solution from the prior walkthrough.
  4. From the Toolbox, drag Tab Panel and drop it onto the Design Canvas
  5. Configure the following properties:
    • initialView: checked
    • userAlias: main
    • userClassName: Main
    • animation: slide
  6. Click the [+] adjacent to the Tab Bar Config property
  7. In the Project Inspector, click on Tab Bar and configure the following properties:
    • pack: center
    • docked: bottom

Define the Welcome View

  1. In the Project Inspector, right-click on Tab 1 and select Promote to Class
  2. In the Project Inspector, click on Tab 1 and configure the following property:
    • title: About
  3. In the Project Inspector, click on MyContainer and configure the following properties:
    • userAlias: intro
    • userClassName: Introduction
    • layout: default
    • scrollable: true
    • styleHtmlContent: checked
    • requires: Ext.TitleBar, Ext.Container, Ext.Button

      Note: You will be using the Ext.TitleBar, Ext.Container, and Ext.Button classes in this view, therefore necessitating that you require them.
  1. From the Toolbox, drag a TitleBar and drop it onto the Design Canvas
  2. From the Design Canvas, double-click in the center of the titlebar and enter the following text:

    About Friends with Beer

  3. From the Toolbox, drag a Container and drop it onto the Introduction view in the Project Inspector.
  4. Configure the following Ext.Container properties:
    • itemId: content
    • scrollable: true
    • styleHtmlContent: checked
  5. Using a text editor, open the following file:

    /path/to/arch101/mobile/snippets/mobileintro.html

  6. Copy the contents of the file to your clipboard
  7. Paste your clipboard into the html config property of the content view.
  8. From the Toolbox, drag a Button and drop it onto the Introduction view in the Project Inspector.
  9. Configure the following Ext.Button properties:
    • itemId: noShow
    • margin: 5 10 5 10
    • text: Do Not Show Again
  10. Click Save
  11. Click Publish
  12. Click Preview
Develop a Custom Stylesheet
  1. Using a text editor, open the following file:
    /path/to/arch101/mobile/walk//exercise4/resources/sass/app.scss
  2. Insert the following code at the bottom of the file to make various icon art available to your app and define a custom style:
@include pictos-iconmask('user_add');
@include pictos-iconmask('user_list');
@include pictos-iconmask('team1');
@include pictos-iconmask('phone_ring1');
@include pictos-iconmask('search');
@include pictos-iconmask('tv');
@include pictos-iconmask('mail');
@include pictos-iconmask('phone1');
@include pictos-iconmask('info');

#beerintro img {
  float: right;
  border-radius: 5px;
  margin-left: 5px;
}
  1. Save the file
  2. Open a Command Prompt to
    /path/to/arch101/mobile/walk//exercise4/resources/sass
  3. Type the following command:

    compass watch .

  4. You should receive confirmation that the CSS stylesheet was rebuilt.
Attach the Custom Stylesheet to your Project
  1. Return to Sencha Architect
  2. In the Project Inspector, click on Resources > Library
  3. In the config panel, uncheck the Include CSS property
  4. From the Toolbox, drag a CSS Resource component onto the Resources node of the Project Inspector
  5. Configure the following property:
    • url: resources/css/app.css
  6. In the Project Inspector, click on Tab2 and configure the following properties:
    • title: Friends
    • itemId: friends
    • iconCls: user_list
  1. Click Preview. Note that the second tab is now using a custom icon.

 

-- End of Exercise --

Page of 168
comments powered by Disqus