Welcome to the 4th installment of the Signed-In app walkthrough! Here are the previous posts:
- Signed-In Part 1 – Introduction
- Signed-In Part 2 – Upcoming Events Screen
- Signed-In Part 3 – Guest List Screen
We have implemented all the functionalities of our Signed-In app. But, after all, this is an app for the alumni association. We can’t call it complete until we brand it with some school colors, right?
Enable Authentication
First, let me show you how to enable authentication. We’d only like organizers to have access to the app.
Double click Properties node in Solution Explorer.
Select Access Control tab and pick Use Forms authentication. Check Granted for debug.
Press F5 to run the application. You will now see a Log out button on the home screen.
Since we’re in debug mode, you (as a developer) is always logged in. To see the login page. Type LogIn.aspx (under localhost) in the URL.
We will customize this page later in the walkthrough. Close the browser and return to Visual Studio.
Use the Dark Theme
Let’s talk a little bit about theme. By default, LightSwitch uses the Light Theme that you currently see. There is also a Dark Theme you can choose.
In Solution Explorer, select Signed-In node and open the Toggle View dropdown menu. You will see Logical View and File View.
You are currently in Logical View, which structures your assets in a simple and logical manner and hides other things that you don’t use as often such as image, JavaScript, and CSS files. To access theme files (which are essentially a set of CSS), we need to switch to File View. So let’s select File View.
Expand the HTMLClient node. You will see a default.htm, which is the starting point of your app. There is also a Scripts folder for JavaScript files and a Contents folder for images and CSS files.
Double click on default.htm. Find the line that says:
<linkrel="stylesheet"type="text/css"href="Content/light-theme.css"/>
<linkrel="stylesheet"type="text/css"href="Content/msls-light.css"/>
Replace light with dark:
<linkrel="stylesheet"type="text/css"href="Content/dark-theme.css"/>
<linkrel="stylesheet"type="text/css"href="Content/msls-dark.css"/>
Basically you are referencing a different set of CSS files that came with the LightSwitch project under the Content folder.
Press F5 and run the application. Your app now uses the Dark Theme!
This is quite nice. But let’s see how we can customize it with our school colors. Close the browser and return to Visual Studio.
Customize Theme
LightSwitch leverages jQuery Mobile, which is a popular touch-optimized web framework. jQuery Mobile has a great theme tool called ThemeRoller. You can import an existing theme and customize it, or you can create a brand new theme from scratch. Let’s customize our Dark Theme with some colors.
Double click on dark-theme.css (under Content folder). Select all (CTRL + A) and copy (CTRL + C) the CSS content from the code editor.
From your web browser, go to http://jquerymobile.com/themeroller/.
Click Import button on top.
Paste (CTRL + V) the CSS content into the dialog and click Import.
LightSwitch’s Dark Theme now shows up in ThemeRoller.
You can drag and drop the colors to customize your theme. Mine looks like this.
When you’re done. Click Download button on top. Name it my-theme and click Download Zip.
Save the zip file to your computer and extract the files. In Solution Explorer, right click on Content folder. Select Add, then Existing Item.
Navigate to my-theme.css you extracted from the zip and click Add.
The new theme now appears in the Content folder.
All we need to do now is indicating which theme we’d like to use. Double click default.htm. Replace dark-theme with my-theme.
Press F5 and run the application. We have successfully customized our theme.
Change Logo
Now, we need a fancy logo. In Solution Explorer, you will find user-logo.png and user-splash-screen.png under Content/Images. These are basically the default logo and splash screen image you current see in the app.
Replace them with images of your own (make sure they have the same name). The new images will show up when you run the application.
Customize Login Page
Go to the login page again by typing in Login.aspx in the URL. You will find it is still using the Light Theme.
Why is that? Well, it is actually not using the jQuery Mobile theme at all. In fact, the LogIn.aspx is an independent artifact. It doesn not exist under HTMLClient, but under Server.
When authentication is enabled, everything under the HTMLClient is now protected by default, including theme files. So think of the login page as a separate thing, a redirect page if you will.
If you open LogIn.aspx in Visual Studio, you will find the CSS code relating to colors are all part of the file.
To customize it, we will manually update these color codes. You can copy and paste the color codes from ThemeRoller and paste them here. For example, I used #3e81af as background in ThemeRoller. I will update the background CSS in LogIn.aspx with that color code.
Do the same for other elements on the login page (textbox, checkbox, button, etc). You can also add other HTML, CSS, JavaScript code here if you like. It’s yours to play with.
This is what I did for mine:
What’s Next?
That’s it! We have successfully created a cross-platform mobile app from scratch with only a couple lines of code!
Next, in the final part of the series, I will show you some other tips and tricks to improve our Signed-In 2.0.
-andy (Program Manager, LightSwitch Team)