CYJS is a fast and compact framework, and its presentation is compact too, so please read that page completely to quickly understand how it works 🙂

First of all, CYJS framework goal is not to provide you tons of features, but just to help you to develop quickly your apps with such features :

  • main sidemenu automatically managed
  • user menu also
  • responsive, with sidemenu automatically hidden
  • multilingual
  • integrated plugins usage improved with high level HTML attributes and Javascript functions
  • automatic network check linked with offline mode and optional pages preloading
  • dynamic css let you use a dedicated Javascript array and use its vars in CSS files, no need for LESS or SASS or so for common uses

CYJS is based on jQuery and jQuery UI, plus other famous JS plugins as DataTables, DropZone, Air Datepicker … Others useful plugins will be added in future releases of course, and you will easily add your own tools.

To use CYJS, no MVC, no special development methods needed, you can even integrate your passed JavaScript or PHP developments with very few change, you’ll have time later to improve them to use the framework advantages. If you want to use basic framework features as the sidemenu, check below How it works.

If you plan to display only static data coming from your HTML pages, you’ll only need HTML knowledge, but if you plan to get or set dynamic data from a server, well good Javascript knowledge will be necessary. Only this, because CYJS is really easy to deal with if you know Javascript and jQuery.

PHP is only necessary if you need it on your server for your webservices, or upload/download files as the example scripts provided with the CYJS distribution.

The framework comes ready to use, some pages are installed as examples you can use to build your own pages. Download/upload features are fully functional so for security reason please take care to adapt them to your needs – especially authentication – , or delete them if not needed.

When installing CYJS Framework. you’ll see that files structure :

  • css/ : your own custom CSS files
  • css/custom.css : overrides CYJS defaults (in CYJS/css/styles.css)
  • CYJS/ : the whole framework. You should not have to change anything there, especially if you plan to upgrade to future versions
  • html/ : all your HTML files
  • images/ : put your own pictures there
  • js/ : all your Javascript files
  • js/config.js : custom settings to override defaults
  • js/lang/ : JS language files
  • php/ : your PHP files if needed
  • index.html : where everything starts ..

How CYJS is different from others framework ? It just tries to make you lazy .. 😉 .. Well, not really, but it optimizes development time because as a developper, you have to take care about customers needs. CYJS takes care about everything else : dynamic page loading, automatic page transition, widgets display, main and user menus management,  responsive display, country language … , but always letting you free enough to adapt the displayed results according to your needs.

That’s the reason why high level Javascript functions to display basic informations have been often discarded. As in the following new menu entry example, we could have decided to create a Javascript function as CYCreateSideMenu(entries_objects),  but the problem is most of us always needs to customize, some would like icons beside menu text, some would like no icon at all, some would like submenus … CYJS tries to always let you customize the easier way, and the easier way is customizing HTML. As managing cells inside rows – you’ll see later – , or input tag parameters, there are really few things to know to get a nice and clean display. Only few high level Javascript functions are integrated, like dynamic datatables management or input fields, making datatable management with static data and automatic filters and search easier, only HTML knowledge is required.

Very few global configuration is needed, you can edit js/config.js file essentially to set your default language.

debug = 1;
// Min size for permanent sidemanu
// Must be equal to max-width in media screen section in style.css
// can be overriden in custom.css
cyMinWindowWidth = 1200;
// Default language
cyLang = 'en';
// Default password
cyPassword = 'cyjs';
// Path to app relative to vhost, empty if CYJS on vhost home
cyPath = '/cyjsdemo';
// Default page
cyDefaultPage = 'cyjsui';
// Cache enabled
// cyCache = true;
// Default delay for alert autofade
// cyAlertDelay = 0;
// Login function
CYLoginFct = function()
{
    CYLoadPage('login', 'IDmain');
    // Default: no login, direct page access
    //CYLogin('MyUsername');
    //CYLoadPage(cyDefaultPage);
    // Pages preloading
    CYLoadPage('cyjstables', 'dummy');
    CYLoadPage('cyjscalendar', 'dummy');
    CYLoadPage('cyjscrm', 'dummy');
    CYLoadPage('myfirstpage', 'dummy');
};
// Main web service
cyWebSvc = "/php/websvc.php"
// CSS patterns
//cyCSS.Font = "Varela Round";
//cyCSS.AltBackgroundColor = "#f5f5f5";
//cyCSS.BackgroundColor = "#007fff";
//cyCSS.BorderColor = "#ccc";
//cyCSS.ButtonBackgroundColor = "#eee";
//cyCSS.InputShadow = "#38c";
//cyCSS.TextColor = "#333333";
debug && console.log('config.js loaded');

Note for hackers : both the demo and the installation package are read only, except for file upload feature which the upload directory is controlled with the PHP script : files can only uploaded there, dot names are blocked. There is no other way to upload or change anything. If you really want to test the live edit mode, you’ll have to manually change the php/uploadfile.php and uncomment write features. So please be careful, you should not change this unless you have improved the login authentication that should interact with your server to validate logins. The provided login is just set there as an example, password shoud never be set clear as so and never in a local accessible file.

How it works ?

An example will be more efficient than blabla, but just keep in mind : a page needs at least an HTML part to describe your page and a Javascript part to manage it.

Now imagine you want to create a page called myfirstpage.

Step 1 - Menu entry

Create the new menu entry by duplicating a li section inside html/sidemenu.html, then just rename the new page attribute to myfirstpage, enter a label for your entry inside the l tag,  then save sidemenu.html. The tag is optional, useful for automatic translation.

<li page="myfirstpage">
    <div>
        <i class="fa fa-file">
        </i>
        <l>
            My first page
        </l>
    </div>
</li> 

Step 2 - HTML part

Create a new HTML body page and save it to html/myfirstpage.htmlyou must have here only the body content, nothing else – . It can be empty of course, but just enter something as for example :

<div class="ClassRow">
    <div class="ClassCell ClassBorder">
        <div class="ClassPanel">
            <span>
                <l>
                    My first page panel
                </l>
            </span>
        </div>
        <div class="ClassCell" style="padding: 10px;">
            Inside panel
        </div>
    </div>
    <div class="ClassCell ClassBorder" title="Help">
        <div class="ClassPanel">
            Sidemenu
        </div>
        <div class="ClassRow">
            The sidemenu has been automatically hidden, click on the burger menu icon on top left to open it over your app.<br>
            You can double-click on it to reset the sidemenu to its default, same that if you resize the window.<br>
            The close menu button below will be automatically iconified after click, completely useless but funny to watch 😉
         </div>
         <div class="ClassRow">
             <button class="ui-button ui-widget" id="openmenubutton" title="Help">
                 Click to open menu
             </button>
             <button class="ui-button ui-widget" id="closemenubutton">
                 Click to close menu
             </button>
             <button class="ui-button ui-widget" id="openmenubuttonsmooth" title="Help1">
                 Click to open menu with cool effect
             </button>
        </div>
    </div>
</div>

Step 3 - Javascript part

Create a new JS file and save it to js/myfirstpage.js , it must contain at least a function called CyInit_myfirstpage() – can be empty -.

/*
* myfirstpage.js
*/

function CyInit_myfirstpage()
{
    debug && console.log('myfirstpage.js : CyInit_myfirstpage');

    CYTooltip();
    
    // Update title page
    CYMainTitle('My first page', 'file');
    
    // Update login info
    var logged = 'Hey !';
    $("#IDheaderusername").html('<span>' + logged + '</span>');
    
    // Create panels for all ClassPanel div inside #IDmain
    CYPanel("#IDmain");
    
    // Hide sidemenu
    CYOpenSideMenu(false);
    
    $("#openmenubutton").click(function ()
        {
            CYOpenSideMenu(true, false);
        }
    );
    $("#openmenubuttonsmooth").click(function ()
        {
            CYOpenSideMenu(true, false, true);
        }
    );
    $("#closemenubutton").click(function ()
        {
            CYOpenSideMenu(false, false);
            CYIconify($(this), "Button");
        }
    );
}

Step 4 - CSS part (not necessary)

Optionnally if needed create a corresponding CSS file in css/myfirstpage.css


That’s all, refresh everything, you’ll see your new menu entry, click on it to display your new page ! You can now adapt it to your needs.

You can use any existing HTML / JS / CSS data by simply respect the files organization. CYJS lets you program the way you want, never imposing complicated rules to the experimented programmer you are.

Seen from internal

CYJS will first look for html/myfisrtpage.html, js/myfirstpage.js and optionally css/myfirstpage.css. Then it will automatically parse the HTML part to make the translation job – described later – , and finally will execute the CyInit_myfirstpage() Javascript function. That function once loaded will indicate that the page is loaded and next accesses to that page won’t load anything again. CYJS only loads the needed Javascript files on demand, CYLoadPage() function does all the job : HTML file loading, automatic page transition, tags cloning, translations, JS/CSS files loading, then draggable features.

Also note that the URL won’t change in your browser, page transitions are automatically managed from internal JS. So if you reload the main link, you will obviously loose everything since your browser does not know anything about your app. Doing this is resetting the app.

Installation note

The framework needs a HTTP server, it can be a Linux or WAMP, but it cannot work locally. However it does not need a dedicated virtual host, it can be installed under http://example.com/all-apps/my-newapp ; for this, only set correctly the cyPath var in js/config.js