Xanadu for Xojo | CampSoftware
CampSoftware is made up of a fantastic team of people who loves developing Apps to solve problems.
Phone: 407-282-5585
Our blog posts in your email:



Stacks Image 1027
Xanadu for Xojo + Aloe

Xanadu for Xojo + Aloe makes developing database driven Web Apps easy for software developers. FileMaker developers with coding experience will enjoy fast affordable app development again too!

If you're not a developer, you can still enjoy Xanadu. Just let us know what you need and we'll develop your app for your requirements, provide coaching so you can develop your own app, or just be available when you need a bit of help.

Xanadu takes advantage of Xojo and Aloe by Tim Dietrich to build compiled Web Apps that are wicked fast, use very little memory, and can scale. Xojo Web Apps can run and be hosted on Mac, Windows, Linux, or even Raspberry Pi computers. People access the Web App use their web browser on just about any device.

Xanadu makes Web App development fast and fun again with its simple structure powered by Aloe and open standards along with Xojo's amazing language.

Xandu's Contacts Page
Stacks Image 3909
Want to see a demo?

  • Attend Xojo XDC so you can see us present how Aloe and Xanadu works in person. If you're at XDC, we'd love to talk to you!
  • We're happy to announce that everyone who purchased Xanadu will receive Xanadu for Xojo + Aloe at no extra cost. Email links have been sent! :)

VXUG September 2017 Web Meeting Recording




Purchase

$300, per developer, with with one year of updates. Add to Cart <— $200 Special Winter Deal

  • Use in as many projects as you wish.
  • Full source code.
  • Free limited email support.
  • Full unlimited support at our hourly rate, paid in advance.
  • Free upgrades for one year.

After a year, you can keep using the version you registered as long as you like. After one year, upgrades are $75 which include another year of updates!

Requirements


We Take Requests

Have an idea? Let us know and we'll add it to Xanadu if it is a good fit.



Getting Started with Xanadu

  • Download and Install Xojo.
  • Download MBS Xojo Complete Plugin and then place the MBS Plugins into the Xojo Plugins Folder.
  • Launch Xojo.
  • Download Xanadu using your Registration Email download link.
  • We use MySQL in order to scale. In your MySQL Server, create a database called 'xanadu' and load the 'xanadu_sql_dump.sql' dump file to populate the database. You'll need to set your MySQL settings in App.LoadPreferences. You'll see appDBAmazon and appDBDebug options where appDBAmazon is used for compiled apps and appDBDebug is used for debugging.
  • We use Amazon S3 for images, but you can do this later to see images. You'll need to set your S3 settings in App.LoadPreferences. The folder 's3Bucket' contains the images that should be stored in your 'xanadu' S3 bucket.
  • Open and Run the Project file with Xojo. The App will Compile and Run then App will Launch and a Browser window will open.
  • Login with as 'testadmin' / 'testadmin' to run as an Administrator.
  • Login with as 'testuser' / 'testuser' to run as a User.



What's New

2017-12-10 See the History section below for detailed change notes.

The goal was to clean up the code as much as possible along with more constancy and focused on writing Xojo/Aloe/Xanadu Web Apps faster. 
  • ALL of the properties have been removed from the different Page Classes and replaced with a single property called 'Page'. The idea is to have one place to add common properties and methods.
  • Embracing even more of the W3.CSS framework which as been easy to use.
  • Added a Stripe Class for payment processing.
  • Changed Checkbox fields to Radio Button fields where SQL fields were changed from SmallInt 1 VarChar 3 and set to default values of 'No'. The reason is that searching for Yes or No is much easier than searching for 1 or 0 and possibly null.
  • The New, Duplicate, and Delete buttons now use W3.CSS Modal Dialogs for confirmations. Check out the W3.CSS modal classes that we're using for the buttons: https://www.w3schools.com/w3css/w3css_references.asp
  • Removed Notie, jQuery ui, jQuery mobile, and jQuery datetimeentry libraries from the /static/ folder as they have been replaced by W3.CSS and FlatPickr.



Deployment

Xojo Web Apps can be run on Mac, Windows, Linux, or Raspberry Pi computers as either a standalone or cgi app. Standalone Apps have everything included and only need to be launched to make them accessible. CGI Apps can be run on some web hosting providers, but we prefer standalone apps.

At first, you can build your Xojo Web App as a Standalone App and just run it. Users can go to your IP address or domain name and start using it. When you need to scale your app to handle larger number of users, you can to run additional copies, or instances, of your app along with a reverse proxy server like NGINIX.

Don't worry if this sounds complex. We're available to help if you need a bit of coaching.

What do we use?
  • Amazon Lightsail for the servers.
  • Amazon Aurora for MySQL.
  • Amazon S3 for storing files and images.
  • NGINX on Amazon Lightsail to route Web Requests and Host Static Files.
  • Let's Encrypt for SSL Certificates.



Interface

The goal of Xanadu is to be able to create Web Apps that are super fast and easy to use. To that end, there are several interface elements needed to make that possible.

Responsive Site

Xanadu uses the power and ease of W3.CSS to make pages responsive. When the Web Browser is resized, Xanadu auto resizes from large desktop screens down to phone sized displays. When the Page becomes narrow, the Navigation Bar automatically changes the Page Buttons into Popup Menus and also hides Lists like the Contact List for narrow displays with which can be seen by clicking the List button.

W3.CSS also includes 22 different themes in just about any color. There's also a W3.CSS Reference.

Pages

Each Xanadu Page has a specific link which can be bookmarked or shared with another user. If the user isn't logged in they will be taken to the login page and then redirected to the shared page url. That also means that a user can have multiple web browser tabs open with different pages. Here's an link to the list of Contacts: https://xanadu.campsoftware.com/contacts

Navigation Bar

The Navigation Bar is always visible which includes buttons for important Pages. There are buttons that show the Load Time of the page, a button to Logout that shows the User First Name, and a button to go to a web site. Admin Users will also see buttons to access Stats and Settings.

Controls

PageControl includes controls to be placed in Forms, for Navigation, or just to run some simple Javascript.
  • Standard Fields: FieldText, FieldTextPassword, FieldTextHidden, FieldTextArea,
  • Select Fields: FieldSelect, FieldCheckbox, FieldRadio along with OptionAdd and OptionAddSQL to add Options to Select Fields.
  • HTML 5 Fields: FieldTextEmail, FieldTextNumber, FieldTextPhone, FieldTextURL work on most mobile browsers, desktop Chrome, but not desktop Safari or desktop FireFox. Non supported browsers, will behave as a FieldText.
  • FormButton can be displayed as Normal, Small, or SmallGrey that fit in with the selected theme.
  • Dialog displays a modal dialog with a Message, Cancel button, and and Action button. The buttons call Javascript like window.location.assign( '"/contacts/new' ); to create a new Contact Record.

Action Buttons

Several Buttons like Save, New, Duplicate, and Delete use a combination of FormButton and Dialog to open a Confirmation Dialog when clicked to make sure the user really wanted to perform that action.

Other Cool Stuff

  • FavIcons can be seen in most web browser tabs. Currently you can see a Xanadu icon, but it could easily be extended to show an icon with the number of new work requests for the logged in user.
  • FontAwesome is used for the icons in the Navigation Bar instead of using a graphic images that scale with the text.



Pages

Xanadu is meant to be a Foundation for new Web Apps so we don't have to reinvent the wheel. That said, Xanadu come with several useful Pages.

Login and Logout

Most Web Apps need the ability for users to connect as an authenticated user. The Remember Me checkbox will make logging in less frequent.

Home

The Home Page is perfect for displaying Dashboard like Data. Messages are shown as Tags below the Main Navigation. 'Welcome Home' is shown as an example.

Contacts

The Contacts Page is the most complex Page:
  • Name ( Company, Title, Prefix First, Middle, Last, Suffix ), Notes
  • PhotoURL Image with Amazon S3 Upload Form
  • Status, Type Popup Menus with Other Value Auto Added to Menu
  • Contacted Date with Dropdown Calendar
  • Follow Up Timestamp with Entry and Arrow Key Support
  • List of Contact Info including Web, Email, Address, and Phone. Each as fields for Main, Type w/Other, Label w/Other, Information. Each Type has a URL to visit the website, send an email, map an address or call a phone number.

Stats

The Stats Page shows quite a bit of information about the current state of the Web App including: Date, Time, App Name, Disk Name, Disk Space Free, RAM Free, RAM Used, Requests Handled, Requests Active. Admins can optionally Halt the App. The Stats Page also automatically reloads every 60 seconds.

Settings

The Settings Page is the place to store information for the specific Web App. A link to edit Users exists which provides the ability to edit the User Name, Email, Phone, Login, Change Password, if the user is Active, and if the user is an Admin. Passwords are not stored, but password hashes are stored.
 
How to Add a Module

Here's a video how to add a Products Module.
  • View the list of steps.

    Open or Close
    • Add Products table to MySQL.
      • Columns for Name, Code, Price, and UUIDPrice.
    • Duplicate Contacts Class and rename to Products.
    • Remove most of the Gen methods. Leave DetailGen, DetailGenActions, and DetailGenContact.
    • Find 'Contact' and replace with 'Product' within the Class.
    • Run the Project as needed to find errors to fix.
    • Add Properties to xan.PageCommon for similar to Contacts: RequestPathBaseProducts, TableKeyProducts, TableKeyNameProducts, TableNameProducts
    • Update ListGen to:
      • Show Product fields rather than Contact fields.
    • Update ListSQL to:
      • Search and Sort on Product fields Name and Code.
      • Remove two Bindings.
    • Update DetailGen to:
      • Remove Get Comms Record code.
      • Remove the calls to the Gen Methods we deleted.
      • Update Generate Header.
    • Update DetailGenProduct to show Product fields Name, Code, and Price as money.
    • Add ability to Navigate to Products.
      • AppRequestProcess.
      • AppNavigationMain NavLeft.
        • http://fontawesome.io/icons/ fa-gift



Sessions

You might not think much about sessions, but there are some really cool things you can do with sessions.

Sessions Without Active Connections

Xanadu uses Aloe's session management which doesn't keep a connection open. Active Connections require a constant back and forth and if the internet drops for a bit of time the user is disconnected. Aloe uses a Session ID cookie to identify the session which will work as long as the Session ID hasn't expired. If the internet cuts out for a while and then comes back you can just pick up where you left off. Aloe also avoids Session Fixation by assigning a new Session ID for each request.

Sessions data is stored in memory. Pages are stored in memory during generation and once served, the page is released from memory.

Pick Up Where You Left Off

Xanadu stores the last request so users can pick up where they left off. For instance, if the user loads a url to access a specific contact and they are not authenticated, they can login and are immediately taken to that contact. If a web page is accidentally closed, the user is taken directly to the last page they visited.



Questions and Answers



Q: Can you add a feature for me?
A: That depends on what you need! :) Seriously, just ask and we'll try!



History
  • 2017

    Open or Close
    2017-12-10
    • Updated xan.ScrollTo.Element so the Selected Element no longer jumps to the top, but rather approximately at the center of the Containing Element.
    • Updated data in the Dump File found Xanadu Project Folder.
    • Created a Class called xan.PageControl for creation of Web Controls based off Tim’s Dietrich’s Aloe.FormField. Added FieldText, FieldTextArea, FieldCheckbox, FieldRadio, FieldSelect, OptionAdd, OptionAddSQL, FormButton and derivatives of FieldText which includes input types: FieldText, FieldTextPassword, FieldTextHidden, FieldTextEmail, FieldTextNumber, FieldTextPhone, FieldTextURL. Text, Password, and Hidden work on all browsers, while Email, Number, Phone, and URL work on most mobile browsers, desktop Chrome, but not desktop Safari or desktop FireFox. Input types that are not supported browsers, will behave as a text input field.
    • Removed Notie, jQuery ui, jQuery mobile, and jQuery datetimeentry libraries for the /static/ folder as they have been replaced by W3.CSS and FlatPickr.
    • Added methods to the Xan Module: xan.URLEncodeBase64, xan.URLDecodeBase64, xan.IPRemote_php
    • Replaced the New, Duplicate, and Delete buttons with the Confirm Buttons with Dialogs that popup for confirmations.
    • Added 'w3-round-large' to Contacts Photo Img for rounded corners.
    • Updated 'GetDivBeginStageFloat' to use less style items over using W3.CSS Class items as a 'w3-panel w3-card'.
    • Changed Body Margins to Spacers.
    • Changed List Margins to use 'PXNavHeight'. Removed 'PXListMarginTop’
    • Added Contacts Comms New Button if no records.
    • Changed Contact Comms Edit links to a Pencil Button.
    • Changed Contact Comms Page Nav bar Link to view the Contact to a Button.
    • Changed Checkboxes to Radio Buttons values from 1/0 to Yes/No from SmallInt 1 to VarChar 3. Set the Default SQL Value to either Yes/No as needed.
    • SQL - Changed Contacts field 'IsActive' to 'Active’ from SmallInt 1 to VarChar 3.
    • SQL - Changed ContactsComms field 'IsMain' to 'Main’ from SmallInt 1 to VarChar 3.
    • SQL - Changed Users field 'Active' from SmallInt 1 to VarChar 3.
    • SQL - Changed Users field 'Admin' from SmallInt 1 to VarChar 3.
    • SQL - Added Contacts 'TimeOpen' and 'TimeClosed' as Time
    • Cleaned up a bit more in Contacts, ContactsComms, Settings.
    • On ContactsComms, separated the Data from the Type and Label with a horizontal rule.
    • Set each Detail Div to have a standard top and left margin.
    • Removed padding from GetTableBeginNoBorder so the top buttons align.
    • Cleaned Contacts, ContactsComms, Settings HTMLDetail(s).
    • Cleaned up Page Classes Constructor, PageDisplay, HTMLList(s), and HTMLDetail(s) except for HTMLDetailGen and HTMLDetailActions.
    • Working on Contacts, ContactsComms, Settings users Lists.
    • Renamed the HTMLHeadTitle properties to HTMLTitle. HTMLTitleBase is the beginning of the title. HTMLTitle is set to HTMLTitleBase in the Constructor. HTMLTitleSuffix is what is appended to the HTMLTitle at the last minute.
    • Moved the code that remembers the page they last visited from PageDisplay to the Constructor.
    • Moved more code from each web page Constructor to the Page Class. Created method for InitPHPEngine and InitDatabase1.
    • If the Init methods have errors, InitErrorMessage is set and SetInitErrorResponse sets the ResponseContent and Status to 500.
    • Created Page Method for the AuthenicationRedirect to home.
    • Created Page Method for SetLastPageVisited.
    • Added a Pref for appLogoPath and appLogoMenuPath. Renamed appURLLogo to appLogoURL.
    • Removed references to Database2 as using Database1 was sufficient.
    • Removed code to connect to database in the DetailGen and ListGen methods to a single call in each web page Constructor Method.
    • In each web page Constructor Method now returning a 'sorry' error message if the Page Class returns an error or if the Database cannot connect.
    • Added a Page Class for the common Properties and Methods that each Page requires. Removed all of the common Properties from each page. 
    • Renamed Page Properties for simplicity and name grouping.
    • Added GetStageLabel method for styling stage labels. Label1 will be strong. GetStageLabel( Label1 as string, Label2 as string = "" )
    • Renamed the AppNavigationHTML to AppNavigationMain and added AppNavigationFound method to show the List Record Count, Search Form, and the Detail Title
    • Added padding to the bottom of the List and Detail as content happened to be slightly off screen which made items unclickable.
    • Moved the html that was wrapped around the list and detail in PageDisplay into the HTMLListGen.
    • Renamed GetPX method to PX and prefixed PX to Size methods so they are grouped an easier to understand.
    • Updated PageDisplay methods with the new PX methods.
    • Renamed 'xol' module to 'xan'.
    • Moved 'Classes Hal' to the 'xan' module.
    • Added xan.Stripe class to process payments with Stripe.com.
    • Removed several AppModule.Get methods that were not used.
    2017-10-01
    • Initial Release



Stacks Image 3796
About Xojo

We love the Xojo platform. Not only is the development environment very affordable, but it's also powerful, easy to use, and the Xojo Team is very accessible. Time after time, Xojo has responded to new features and bug fixes in a quick and open fashion. It's a pleasure to work with Xojo!

Xojo is free to evaluate for an unlimited amount of time so you can run and debug. Purchasing Xojo allows you to compile, deploy, and distribute your Apps. Since Xanadu is a Web App, all you need is Xojo Web: https://www.xojo.com/store/



Stacks Image 3809
About Monkeybread

Monkeybread has been creating plugins for Xojo for as long as I can remember: