Creating and Editing Lightning Components

Creating and Editing Lightning Components

 In your DE org, open the Developer Console under Your Name or the quick access menu 

You’re ready to write Lightning Components code!

Create Lightning Components in the Developer Console

So, let’s write something. Select File | New | Lightning Component to create a new Lightning component. In the New Lightning Bundle panel, enter helloWorld for the component name, and click Submit.

This creates a new helloWorld component bundle, with two open tabs. Close the helloWorld tab, and keep the helloWorld.cmp tab open. helloWorld.cmp contains the opening and closing tags for a Lightning component, <aura:component>. Between them, add the following markup, and save:

<p>Hello Lightning!</p>

 You can’t run your component directly and see how it behaves. Instead, your component needs to run inside a container app, which we’ll call a container for short. Examples of containers would be the Lightning Experience or Salesforce1 apps, or an app you build with Lightning App Builder—basically, any of the things you saw at the end of the prior unit. You add your component to one of these containers, and then access it within that container.

Select File | New | Lightning Application to create a new Lightning app. In the New Lightning Bundle panel, enter harnessApp for the app name, and click Submit. This creates a new harnessApp bundle, with two open tabs. Close the harnessApp tab, and keep the harnessApp.app tab open. harnessApp.app contains the opening and closing tags for a Lightning app, <aura:application>. Between them, add the following markup, and save:

<c:helloWorld/>

This adds the helloWorld component we created earlier to the harnessApp app. Before we explain this deceptively simple app, click back and forth between the harnessApp.app and helloWorld.cmp tabs in the Developer Console. Besides the markup, what do you notice that’s different?

Got it in one: the Preview button. Apps have one, components don’t. Click it now, and another browser window should open and show you your app.

 The URL for our “preview” is actually the permanent home of our app (once it’s made available to our users). The format of the URL is the following:

https://<yourDomain>.lightning.force.com/<yourNamespace>/<yourAppName>.app.

<yourAppName> represents the name of your app bundle, in this case, harnessApp.  

What Is a Component?

As a practical matter, a component is a bundle that includes a definition resource, written in markup, and may include additional, optional resources like a controller, stylesheet, and so on. A resource is sort of like a file, but stored in Salesforce rather than on a file system.

Our helloWorld.cmp component definition resource is easy to understand.

<aura:component>

<p>Hello Lightning!</p>

</aura:component>

A bundle is sort of like a folder. It groups the related resources for a single component. Resources in a bundle are auto-wired together via a naming scheme for each resource type. Auto-wiring just means that a component definition can reference its controller, helper, etc., and those resources can reference the component definition. They are hooked up to each other (mostly) automatically.

Let’s see how this works. With helloWorld.cmp active, click the STYLE button in the component palette on the right. This opens a new tab for the style resource that was added to the helloWorld bundle. It starts with a single, empty selector, .THIS. To see how this works, add a simple style to the stylesheet, so that it looks like the following.

1	.THIS {
2	}

3
4	p.THIS {

5	font-size: 24px;
6	}

Then reload your preview window for harnessApp.app. Voilà, larger text! But, how does .THIS work? It’s the magic of auto-wiring! At runtime .THIS is replaced with a style scoping string named for your component. It limits style rules to only this component, so that you can create styles that are specific to the component, without worrying about how those styles might affect other components.

So now our helloWorld bundle has two resources, the component definition, helloWorld.cmp, and the stylesheet, helloWorld.css. You can think of it like a folder, or an outline:

• helloWorld — the component bundle
• helloWorld.cmp — the component’s definition
• helloWorld.css — the component’s styles

As you can see in the Developer Console, there are a number of other resource types you can add to a component bundle. Go ahead and click the CONTROLLER and HELPER items to add those resources to the bundle. Now your bundle looks something like this, and you can start to see the naming system.

• helloWorld — the component bundle
• helloWorld.cmp — the component’s definition
• helloWorldController.js — the component’s controller, or main JavaScript file
• helloWorldHelper.js — the component’s helper, or secondary JavaScript file
• helloWorld.css — the component’s styles

In this module, we’ll work with only these four resource types. We’ll talk a lot more about the controller and helper resources when we actually start writing code for them. For now, you can just leave the default implementations. After all, this is just hello world!

What Is an App?

Now that we know what a component is, it’s actually easy to explain what an app is—an app is just a special kind of component! For the purposes of this module, you can think of an app as being different from a component in only two meaningful ways:

• An app uses <aura:application> tags instead of <aura:component> tags.
• Only an app has a Preview button in the Developer Console.

What Are Apps For?

As simple as that sounds, there are a few practical details in how you can use an app vs. a component. The main items are the following.

• When writing markup, you can add a component to an app, but you can’t add an app to another app, or an app to a component.
• An app has a standalone URL that you can access while testing, and which you can publish to your users. We often refer to these standalone apps as “my.app.”
• You can’t add apps to Lightning Experience or Salesforce1—you can only add components. After the last unit this might sound weird; what exactly do you add to the App Launcher, if not an app? What you add to App Launcher is a Salesforce app, which wraps up a Lightning component, something defined in a <aura:component>. A Lightning Components app—that is, something defined in a <aura:application> —can’t be used to create Salesforce apps. A bit weird, but there it is.

You publish functionality built with Lightning Components in containers. Lightning Components apps are one kind of container for our Lightning components. You build all of your “app” functionality inside a top-level component. Then at the end, you stick that one component in a container—maybe a Lightning Components app, maybe Salesforce1, maybe something else. If you use a my.app, the container can set up services for your main component, but otherwise it’s just there to host the component.

Let’s take another look at the app we created. Here again is the harnessApp.app definition resource:

	<aura:application>
2

3	<c:helloWorld/>
4

</aura:application>

No matter how much functionality we decide we’re going to add to our helloWorld “app”, it’s all going to go inside the helloWorld component. It could have a Google Docs-style editor embedded in it for revising the hello message, but our harnessApp.app definition is going to remain pretty much this simple.

From here on, we’ll assume that you’re using an actual Lighting Application bundle as just a container, or harness, for components you create. Feel free to keep using harnessApp.app! But, when we talk about creating apps, we really mean building functionality inside a component bundle, not an application bundle, because that’s how you build “apps” in the real world.

Components Containing Components, Containing…Components!

The harnessApp.app definition is also interesting because instead of static HTML we have our helloWorld component. We say that harnessApp contains the helloWorld component. Let’s dive into this a little bit, and make helloWorld a little more complex.

In the Developer Console, create a new Lightning component named helloHeading. For its markup, paste in the following code.

1	<aura:component>
2	<h1>W E L C O M E</h1>

3	</aura:component>

Now, click back to helloWorld.cmp, and add <c:helloHeading/> to it, above the “Hello Lightning” line. Your helloWorld component definition should now look like this:

1	<aura:component>
2

3	<c:helloHeading/>
4

5	<p>Hello Lightning!</p>
6

7	</aura:component>

Reload the app to see the change. Your component structure, in terms of what contains what, now looks like this:

• harnessApp.app
• helloWorld.cmp
• helloHeading.cmp
• (static HTML)

We say that helloHeading is a child component of helloWorld, or that helloHeading is nested inside helloWorld, or…. There are any number of different ways to say that helloWorld contains helloHeading. What’s more, you can keep nesting components inside other components down to pretty much any level you’d care to. It starts being too hard to keep straight in your head well before you run into a limitation of Lightning Components!

This process of putting components inside each other is fundamental to building Lightning Components apps. You start with, or build, simple, “fine-grained” components, where each component provides a defined set of self-contained functionality. Then you assemble those components into new components with higher-level functionality. And then you use those components, and “level up” again. 

Get Started with Lightning Components

 

Lightning Components Basics

• 1. Before You Start

~ 10 mins

• 2. Get Started with Lightning Components

~ 15 mins

• 3. Create and Edit Lightning Components

~ 25 mins

• 4. Attributes and Expressions

~ 25 mins

• 5. Handle Actions with Controllers

~ 45 mins

• 6. Input Data Using Forms

~ 35 mins

• 7. Connect to Salesforce with Server-Side Controllers

~ 35 mins

• 8. Connect Components with Events

~ 45 mins

• 9. Discover Next Steps

~ 5 mins

What Is the Lightning Components Framework?

Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Force.com apps. It uses JavaScript on the client side and Apex on the server side.

 

An Example Lightning Component

Let’s take a look at a real Lightning component, and see what all that talk is about. First, here’s what the component looks like when rendered on screen:

It might not look like much, but there’s a fair bit going on. Here’s the code for it; this is from a component we’ll dig into in detail later.

<aura:component>

    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

    <div class="slds-card">
        <!-- Color the item blue if the expense is reimbursed -->
        <div class="{!v.expense.Reimbursed__c == true ?
            'slds-theme--success' : 'slds-theme--warning'}">

            <header class="slds-card__header slds-grid grid--flex-spread">
                <a aura:id="expense" href="{!'/' + v.expense.Id}">
                    <h3>{!v.expense.Name}</h3>
                </a>
            </header>

            <section class="slds-card__body">
                <div class="slds-tile slds-hint-parent">
                    <p class="slds-tile__title slds-truncate">Amount:
                        <ui:outputCurrency value="{!v.expense.Amount__c}"/>
                    </p>
                    <p class="slds-truncate">Client:
                        <ui:outputText value="{!v.expense.Client__c}"/>
                    </p>
                    <p class="slds-truncate">Date:
                        <ui:outputDate value="{!v.expense.Date__c}"/>
                    </p>
                    <p class="slds-truncate">Reimbursed?
                        <ui:inputCheckbox value="{!v.expense.Reimbursed__c}"
                            click="{!c.clickReimbursed}"/>
                    </p>
                </div>
            </section>
        </div>
    </div>

</aura:component>

Even before you know anything about Lightning Components, you can still notice a few things about this sample. First of all, it’s XML markup, and mixes both static HTML tags with custom Lightning Components tags, such as the <aura:component> tag that leads off the sample. If you’ve worked with Visualforce, the format of that tag is familiar: namespace:tagName. As you’ll see later, built-in components can come from a variety of different namespaces, such as aura: (as here), or force: or ui:. 


   Speaking of ui:, you might have noticed that there are input and output components, like <ui:inputCheckbox> and <ui:outputText>. Again, this is a pattern familiar to Visualforce developers. If you’re not one of those, hopefully it’s pretty obvious that you use the input components to collect user input, and the output components to display read-only values.

   For now, one last thing to notice is the use of static HTML with a number of CSS class names that start with “slds”. We’re going to use the Salesforce Lightning Design System, or SLDS, to style our components, and while we won’t explain SLDS in detail in this module, we want you to see examples of it in action.

OK, cool, Lightning Components markup is XML. But didn’t we say something about JavaScript earlier? Notice the click="{!c.clickReimbursed}" attribute on the checkbox? That means “when this checkbox is clicked, call the controller’s clickReimbursed function.” Let’s look at the code it’s attached to. 

({
    clickReimbursed: function(component, event, helper) {
        var expense = component.get("v.expense");
        var updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

This is the component’s client-side controller, written in JavaScript. The clickReimbursed function in the component’s controller corresponds to the click="{!c.clickReimbursed}" attribute on the checkbox in the component’s markup.

In Lightning Components, a component is a bundle of code. It can include markup like the earlier sample, in the “.cmp resource,” and it can also include JavaScript code, in a number of associated resources. Related resources are “auto-wired” to each other, and together they make up the component bundle.

What About AngularJS, React, and Those Other JavaScript Frameworks?

Another question that comes up frequently is: “How does Lightning Components compare to MyFavoriteFramework?” where that favorite framework is another modern JavaScript web app framework such as AngularJS, React, or Ember.

These are all fine frameworks! Many people know them, and there are a lot of resources for learning them. You might be surprised to learn that we think these frameworks are a great way to build Force.com apps!

We recommend using them with Visualforce, using what we call a container page, and packaging your chosen framework and app code into static resources. Using an empty container page has Visualforce get out of your way, and lets you use the full capabilities of your chosen framework.

While it’s possible to use third-party JavaScript frameworks with Lightning Components, it’s a bit cumbersome. Lightning Components doesn’t have the notion of an empty page, and has some specific opinions about how, for example, data access is performed, and some rather specific security requirements.

And frankly, the features of Lightning Components and most modern frameworks overlap quite a bit. While the style or specifics might be different, the features provided are conceptually similar enough that you’re effectively running duplicate code. That’s neither efficient nor easy to work with.

Another thing to consider: general-purpose frameworks such as AngularJS are designed to be agnostic about the platform they run on top of, in particular data services. Lightning Components, on the other hand, is designed to connect natively with services provided by Salesforce and the Force.com platform. Which do you think is going to help you build apps faster?

Where You Can Use Lightning Components

You can use Lightning Components to customize your Salesforce org in a number of different ways. But that’s not all! You can use Lightning Components to create stand-alone apps that are hosted on Salesforce. And you can even create apps that are hosted on other platforms, including embedding them into apps from those platforms.

Add Apps to the Lightning Experience App Launcher

Your Lightning Components apps and custom tabs are available from the App Launcher, which you reach by clicking in the header.

Click a custom app  to activate it. Items in the app display in the navigation bar, including any Lightning components tabs you’ve added to the app. Note that you need to add your components to tabs for them to be accessible in the App Launcher. Lightning components tabs that aren’t in apps can be found in All Items.

Add Apps to Lightning Experience and Salesforce1 Navigation

As described in the preceding example, you can add Lightning components tabs to an app and they display as items in the app’s navigation bar.

Create Drag-and-Drop Components for Lightning App Builder and Community Builder

Build custom user interfaces using your own Lightning components, or those you install from AppExchange, for desktop and mobile devices.

Add Lightning Components to Lightning Pages

A Lightning Page is a custom layout that lets you design pages for use in the Salesforce1 mobile app or in Lightning Experience. You can use a Lightning Page to create an app home page and add your favorite Lightning component, such as the Expenses app we’ll be creating in this module, to it.

Add Lightning Components to Lightning Experience Record Pages

Just as the title suggests, you can customize Lightning Experience record pages by adding a Lightning Component.

Launch a Lightning Component as a Quick Action

Create actions using a Lightning component, and then add the action to an object’s page layout to make it instantly accessible from a record page.

Create Stand-Alone Apps

A standalone app comprises components that use your Salesforce data and can be used independently from the standard Salesforce environment.

Run Lightning Components Apps Inside Visualforce Pages

Add Lightning components to your Visualforce pages to combine features you’ve built using both solutions. Implement new functionality using Lightning components and then use it with existing Visualforce pages.

Run Lightning Components Apps on Other Platforms with Lightning Out

Lightning Out is a feature that extends Lightning Apps. It acts as a bridge to surface Lightning Components in any remote web container. This means you can use your Lightning Components inside of an external site (for example, Sharepoint or SAP), in a hybrid app built with the Mobile SDK, or even elsewhere in the App Cloud like on Heroku.

Salesforce1 Lightning Overview   

Salesforce1 Lightning empowers developers, business analysts, and Salesforce administrators to build apps quickly without writing code. Now, with the Spring ‘15 release, these four Lightning tools are even better, and more widely available:

Lightning App Builder (PILOT): a visual user interface designer

Lightning Components (BETA): a reusable user interface building blocks

Lightning Process Builder (GA): a visual business process designer

Lightning Connect (GA, separate license required): real-time integration with external data source systems

What Can I Do With Salesforce1 Lightning?


Salesforce1 Lightning enables Developers and Salesforce Administrators to work together to customize Salesforce and build new apps on the Salesforce1 Platform. With these tools, a Developer can code reusable Lightning Components, and a Salesforce Admin or Business Analyst can assemble those components into screens for any device to meet their business needs. The Salesforce Admin or Business Analyst can also automate complex business processes and integrate with ERP systems – without writing code!

Where Can I Use Salesforce1 Lightning?

Lightning Process Builder and Lightning Connect work with any Force.com app (desktop or mobile). Currently, apps created with Lightning Components and the Lightning App Builder can only be exposed in the Salesforce1 Mobile App or as a standalone app. One sweet feature is that the Salesforce1 Mobile App is a (really big) Lightning App, so when you add a custom Lightning App to the Salesforce1 Mobile navigation, it seamlessly integrates into the user experience.

Salesforce1 Lightning Architecture & Tools

The Lightning Component framework is not new. In fact, we’ve been working on it for years! We built this component framework for building user interfaces (UI) on top of the platform in order to deliver the Salesforce1 Mobile App. Now, we are exposing that framework and those tools to our community so that you can build apps as quickly and easily as we can.

You can get an overview of each of these tools in the recording of today’s Go Faster With Lightning Webinar, and deeper dives in the individual webinars (links below) coming in March, but let’s look at a few highlights here…

Lightning App Builder  

Lightning App Builder is a visual tool that lets you drag and drop components to assemble apps for any device. Now, instead of coding a mobile application, admins and developers can compose a mobile application by dragging and dropping Lightning Components, setting their attributes, clicking save, and then pushing them out to the Salesforce1 Mobile App. Salesforce delivers useful some Standard components, including Filter List (shown in pix above), Recent Items, and Report Chart. They also support Global Publisher actions. More components and functionality to come (#SafeHarbor)! The Standard components are useful because they tie into the metadata that you already have in Salesforce: List Views, Recent List, and Reports. To get your hands on Lightning App Builder, contact support to have it enabled in your org.

You can also code custom components…

Lightning Components  

Lightning Components make it possible for developers to build modern, dynamic mobile apps using Javascript, CSS, and Apex Controllers. Components are designed to be self-contained and reusable, so developers can use them in multiple applications, and those same components can be used to compose an application in the Lightning App Builder.  Go to Setup | Develop | Lightning Components to enable Lightning Components in your org and start delivering an engaging experience for your mobile users, seamlessly inside the Salesforce1 Mobile App.

To get hands on, check out this new Lightning Components Trailhead module!

Lightning Process Builder

The Lightning Process Builder is pretty amazing and something our Admin Community is especially excited about. It’s our next generation workflow tool, built on the Flow engine. Lightning Process Builder makes defining business processes quick, easy, and visual. In addition to being easy to use, it supports new actions (create record, update record, and post to Chatter) that now make automating these steps possible without writing code! Always remember, though…No Test Classes != No Testing! You still should test your work, even when it’s clicks.

To get hands on, check out this new Lightning Process Builder Trailhead module!

Lightning Connect

The simplicity of Lightning Connect is incredible. It all started when we said, “Why is it that Salesforce is limited to just data that’s in Salesforce? Why can’t we run the Salesforce Platform on top of data that’s not even in Salesforce? Why can’t we build a real-time integration to a database that’s outside Salesforce, maybe SAP, maybe Oracle? Turns out, we can! Lightning Connect makes it possible to click through a set of screens to define a real-time integration to any external data source that conforms to the OData spec. Data surfaces in Salesforce just like standard and custom objects  – in tabs, detail pages, related lists, even Apex, Visualforce, and Lightning Components. This technology has also been in the works a long time, in Pilot and then Beta, and now GA (go to Setup | Develop | External Data Sources). Lightning Connect marries the best of our platform with secure, real-time access to external data sources.

View and Search Data That’s Stored Outside Salesforce

 Salesforce1 users can view and search records that are stored in external systems with Lightning
Connect, so they can seamlessly interact with all relevant data. This feature is available in the
Salesforce1 mobile browser app and version 6.0 or later of the Salesforce1 downloadable app for
iOS devices.


For example, some of your data may be in an enterprise resource planning (ERP) system. Salesforce
represents that data in external objects and accesses the data in real time via Web service callouts
to the external data source. External objects are read only both in Salesforce1 and in the full Salesforce
site.

As long as the following conditions are true, external objects are automatically included in the
Recent section of the Salesforce1 navigation menu as part of the Smart Search Items element. Users
may need to tap More to see these items. In addition, when these conditions are true, related lists for external objects appear in Salesforce1 when users view the parents of those external objects.

• As with custom objects, the external objects must be deployed and assigned to tabs that the users can access, and object permissions
must be granted via profiles or permission sets.
• The external objects' associated external data sources must have the High Data Volume checkbox deselected.
• For the Salesforce1 downloadable app for iOS devices, the external data sources must have the Include in Salesforce

Aura extension to Visualforce

 Aura is a UI framework for developing dynamic web apps for mobile and desktop devices. Aura comes with a rich and extensible component set to kick start building apps. You don't have to spend your time optimizing your apps for different devices as the components take care of that for you.The framework intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactions of your apps.   

Some key features of aura include:

·         Tag-based layout & component definition

·         Encapsulated UI development with a strongly typed event model

·         Object-oriented programming behaviors (extends, implements, abstract)

·         Encapsulated bundles with models, controllers, CSS, static resources and markup

·         Integrated functional and performance testing (did you expect any less?)

·         Mobile, mobile and mobile-ready

Salesforce1 is indeed built on Aura It is also using the Salesforce Mobile SDK as well. This great collection of Dreamforce 2013 sessions featuring Salesforce1 also references the Aura session.   Aura really is, the journey SF have taken with it since Salesforce Touch  and a sneak peak at where it is going as native platform feature!. The source code is shared in GitHub, so you can even try it out and contribute!.Aura uses standard HTML5 features and thus infact runs in most modern browsers, you can modify your own browser url to see it, via /one/one.app (note that Salesforce don't support this, but it is a useful way to explore and test). As regards the container Salesforce1 uses thats driven by the Salesforce Mobile SDK, which itself hosts an instance of the mobile devices own HTML5 container. You can read more about via the Salesforce Mobile SDK link. 

You can go through the Aura docs and they have an excellent tutorial that guides you through building an app. You can view the Salesforce1 source when viewing the one/one.app in your browser and see where they use some of the components, such as the abstractList component. It is a very interesting and powerful framework. Aura comes with a rich and extensible component set to kick start building apps. You don’t have to spend your time optimizing your apps for different devices as the components take care of that for you.The framework intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactions of your apps. On top of that, Aura has a bunch of other benefits. Some other interesting things to note about Aura: It is open source Aura lives on GitHub and can be forked/modified at any time. You can even contribute bug fixes or functionality changes! Aura is not native to the Force.com platform Unlike languages like Apex and Visualforce, Aura does not require Salesforce. It was built for Salesforce, but it can be used by any developer. This will open Aura up to a much larger set of developers. In conjunction with it being open source, this framework will grow at a drastic rate Aura is built using object-oriented principles Aura provides the basic constructs of inheritance, polymorphism, and encapsulation from classic object-oriented programming and applies them to presentation layer development. Aura heavily utilizes events to interact with different components It is important to understand to the concept of event-driven programming If you have ever developed with JavaScript or Java Swing, you should be familiar with the idea of event-driven programming. You write handlers that respond to interface events as they occur. The events may or may not have been triggered by user interaction. In my opinion, Aura is the way of the future. It is going to be a fast, heavily tested mobile-first option. With the ability to quickly transition between desktop and mobile, Aura provides an incredibly powerful framework to create applications for all mediums. Take some time to start learning Aura now and get a head start! Aura is built using object-oriented principles. Aura provides the basic constructs of inheritance, polymorphism, and encapsulation from classic object-oriented programming and applies them to presentation layer development.

How to create a Flexi Page?

   Flexible page is used to display object listviews  inside salesforce1. The advantage is flexible page can behave as custom Home page for your app in SF1.  It is added to the Navigation menu.  Once you click on  flexi page menu you can see object list view. You can add publisher actions inside the flexi page to show inside the flexi home page and do whatever stuffs you can do with the help of a visualforce page.

                                               
Below is a sample flexi page from my Dev org

    Do not expect too much from a flexi page it is only for list view and for accommodating publisher actions.  Creating a flexi page is little different but it is easy. Its all about uploading an xml file into your org.

How to create a Flexible page?

Creating a Flexible page is as simple as downloading a zip and upload it to SF :) . Just you want do some modifications.

Here you can download the zip file to upload into your org.

Steps to upload  flexi pages.

1.  Login to your org.

2.  Login to workbench

3.  In workbench go to Migration Main menu and then Deploy sub menu.

4.  Choose the zip file you downloaded from here.

5.  Select single package and click next.

6.  Now click Deploy. Wait for SF asynchronus operation to finish.

 Now the flexi page along with required objects, layouts, publisher actions uploaded to your org.

Now There are few steps before you view your flexi page in SF1

In your org go to

1. Create-->Tabs--> flexi tabs (Once you uploaded flexi page only flexi tab section will appear)

2. Create new flexi tab.

To View the flexi page in SF1 do the following setup.

1. Under settings--> Mobile administration --> Mobile Navaigation.

 Your flexi page will appear under available items section. Move this as it comes under "Smart search items" and then click save.

Now you are ready to see the flexi home page under SF1.

Test the Flexible Page in Salesforce1

Open SF1 from mobile app or    '/one/one.app' from your browser.  Now under APPS section you can see the flexi tab you created.  The page will show you a list view with Delivery objects fields. This list view is depend on your Delivery object standard list view  named "Today's deliveries". If you add a column, delete column change sort order it will reflect in SF1 flexi home page.

     You can access the publisher action by clicking on the  '+' icon  bottom left. For this example there is a publisher action called New delivery to create a delivery record.

                                 

  

For more details please comment here or visit

http://www.salesforce.com/us/developer/docs/salesforce1/salesforce1_guide.pdf