Ocular Layout Library - A Rails Inspired Layout Library

[eluser]kilishan[/eluser]
Just a quick note to let everyone know I updated the wiki with an example of using the _remap() function with Ocular to easily manage urls like: http://www.your-site.com/controller/id/function.

You can find it here:
http://codeigniter.com/wiki/Ocular_Layout_Library/

[eluser]rai13[/eluser]
@kilishan

thanks for your library

if I try to download at wiki, i got:
File:ocular011.zip
No file by this name exists.


at the moment i use version 0.10 & there is one hardcoded path in the ocular_helper/stylesheet_link_tag

Code:

$link_tag = '<link rel="stylesheet" type="text/css" href="/assets/stylesheets/' . $tag . '">' . "\n";

i changed it to

Code:

$link_tag = '<link rel="stylesheet" type="text/css" href="' . base_url() . 'asset/stylesheets/' . $tag . '">' . "\n";

[eluser]kilishan[/eluser]
Glad you're finding it helpful!

[quote author="rai13" date="1196710789"]@kilishan

thanks for your library

if I try to download at wiki, i got:
File:ocular011.zip
No file by this name exists.[/quote]

Oops. Forgot an underscore in the path. It's been updated so you should be able to download it now.

at the moment i use version 0.10 & there is one hardcoded path in the ocular_helper/stylesheet_link_tag

Code:

$link_tag = '<link rel="stylesheet" type="text/css" href="/assets/stylesheets/' . $tag . '">' . "\n";

i changed it to

Code:

$CI = &get;_instance();
$link_tag = '<link rel="stylesheet" type="text/css" href="' . base_url() . $CI->config->item('OCU_stylesheet_path') . $tag . '">' . "\n";

Actually, the hardcoding was there on purpose. It calls the asset controller, which combines all of the stylesheets into 1 file. I did this for caching reasons on the client end, and page display performance. When the browser calls the stylesheet, it will only make 1 call to the server, which should do a little to help the page display faster. Currently, there is no compression on the files, but that is planned for a future release.

If that doesn't do what you're looking for, then by all means change it.

[eluser]rai13[/eluser]
it was my code-mistake
only base_url() is needed, because i run CI in a subfolder

i renamed all to asset because the constructor wasn't called (class: Assets, "constructor": asset)

[eluser]Chad Crowell[/eluser]
I am really loving this tool.

I am having some problems.

First, rendering the stylesheets- I have used this code, as you instructed:

Code:

<? stylesheet_link_tag(“reset”, “styles”) ?>

It looks like the first part of it is being processed, but the stylesheets aren't being rendered. When I view source on the page, I see this:

Code:

<link rel="stylesheet" type="text/css" href="/public/stylesheets/reset/styles" >

The assets controller isn't parsing that for some reason. Could it be because of the post above? Assets controller with Asset constructor?


Secondly, the wiki article talks about passing data to views using set_view_data($name, $data). I can't get this to work. Can you show a controller and view with the code implemented fully for loading in variables and then showing them? I can't seem to get it right.

Would also like to see the ability to specify media types for css files.

Thanks.

[eluser]kilishan[/eluser]
[quote author="Chuck Cheeze" date="1197212962"]I am really loving this tool.[/quote]

Awesome! Glad to hear it's helping someone out!

I am having some problems.

First, rendering the stylesheets- I have used this code, as you instructed:

Code:

<? stylesheet_link_tag(“reset”, “styles”) ?>

It looks like the first part of it is being processed, but the stylesheets aren't being rendered. When I view source on the page, I see this:

Code:

<link rel="stylesheet" type="text/css" href="/public/stylesheets/reset/styles" >

The assets controller isn't parsing that for some reason. Could it be because of the post above? Assets controller with Asset constructor?

Did you change anything within the code? That line should be pointing to "/assets/stylesheets/reset/styles". The "assets" listed there actually calls the assets controller, instead of pulling the stylesheets from the assets directory.

In the ocular config file, there should be a line that reads:

Code:

$config['OCU_stylesheet_path'] = "/public/stylesheets/";

This controls where it looks for the stylesheets, so you can change that around, if you need to for your app.

If you haven't changed anything, then there's an error in my code. The correct line is in the ocular_helper.php file at the bottom of the stylesheet_link_tag function. You can't miss it. It looks like it's correct in both the 0.10 and 0.11 versions I have on my computer.

Secondly, the wiki article talks about passing data to views using set_view_data($name, $data). I can't get this to work. Can you show a controller and view with the code implemented fully for loading in variables and then showing them? I can't seem to get it right.

It should work like any other data variable in CI. Once you've passed it into the view_data, it passes it on when it renders the layout. Here's a quick example based off of the project I'm using it on:

people.php (the controller)

Code:

function _remap($method) {
        // if uri(2) is a method, execute it.
        if (method_exists($this, $method)) { $this->$method();  }
        // if uri(3) is a method, swap parameters and run it
        $u2 = $this->uri->segment(2);
        $u3 = $this->uri->segment(3);
        if (isset($u3) && method_exists($this, $u3)) {
            echo "Method = " . $u3 . "  ";
            $method = $u3;
            if (is_numeric($u2)) {
                $this->owner = $u2;
            } else {
                $this->owner = $this->Person->getIDByNickname($u2);
            }
            // Send our person data to the view
            $this->ocular->set_view_data('person', $this->Person->getUserByID($this->owner));
            $this->ocular->set_view_data('owner', $this->owner);
            $this->ocular->set_view_data('ownerNick', $this->Person->getNicknameByID($this->owner));
            $this->ocular->set_view_data('viewer', $this->viewer);
            $this->$method($this->owner);
        } else {
            // We have a username and no method
            $method = 'index';
            if (is_numeric($u2)) {
                $this->owner = $u2;
            } else {
                $this->owner = $this->Person->getIDByNickname($u2);
            }
            $this->ocular->set_view_data('person', $this->Person->getUserByID($this->owner));
            $this->$method($this->owner);
        }

        echo "Viewer = ".$this->viewer."; Owner = ".$this->owner;
    }

This does quite a bit, but I wanted to post it in it's entirety in case this specific example might help anyone. It basically swaps the 2nd and 3rd segments in the uri so my paths for the people object look like: www.critormiss.com/people/username/about. It also sets up some data for use within all of the views, the $owner and $viewer variables. This way I can check to see if the person viewing the page is the owner of the profile.

In one of the partials, I can then do stuff like this:

Code:

<div id="content_main">
    
    &lt;?php if( Widget::num_widgets($owner) == 0 ) : ?&gt;
        <div id="blank_slate" class="info">
            &lt;?php if( $owner == $viewer ) : ?&gt;
                  ...
        </div>
   &lt;?php endif; ?&gt;
</div>

Like I said, it's just like the other variables you might use with the standard CI views. Whatever name you give it in set_view_data is the variable name that it's accessible in in the view or partial.

I've found it handy to put a simple

Code:

<?php print_r($data) ?>

In the bottom of my main template so that I always know what's getting passed in and what isn't. Then, when the app is ready for launch, I can delete the line at that one place and clean the entire app up.

Would also like to see the ability to specify media types for css files.

That's on my wish list as well I'm pretty swamped with freelance work right now, but will be getting back to that very soon.

Any other questions or suggestions? Just ask! I'll do what I can.

Lonnie

[eluser]kilishan[/eluser]
Since the request came up, I took a little time to alter the stylesheet_link_tag function to allow for media types. Here's the result. Copy this version of the function and paste it in place of the old version in the ocular_helper.php file, and you'll be good to go.

Code:

/**
* Stylesheet Link Tag
*
* Returns a stylesheet link tag for the sources passed as arguments.
* If no extension is supplied, ".css" is automatically appended.
*
* If no argument is present, it will provide a link to 'application.css'
*
* Media types can be specified by prepending a colon to the media type.
* ie: stylesheet_link_tag("global.css", ":print");
*
* @access    public
* @return    string
*/
function stylesheet_link_tag( ) {
  // Our stylesheet tag
  $tag = '';
  $media ='all';
  
  // Do we have any arguments?
  if ( func_num_args() == 0 ) {
    // No arguments. Return link to 'application.css'.
    $args = ocular::_default_stylesheets();
  }
  
  if (empty($args)) {
    // Get our arguments from the parameters
    $args = func_get_args();
  }

  // Loop through each, adding to stylesheet string
  foreach ($args as $arg) {
      // Is it a media tag?
      if ( stripos($arg, ":") === false ) {
          // Add our tag to the list.
        if (!empty($tag)) { $tag .= "/"; }
        $tag .= $arg;
      } else {
          // It's a media tag.
          $arg = trim($arg, ":");
          $media = $arg;
      }
  }
  $link_tag = '<link rel="stylesheet" type="text/css" href="/assets/stylesheets/' .
     $tag . '" media="' . $media . '" />' . "\n";
  
  return $link_tag;
}

To use this, at the end of your string of stylesheets, include the media type you wanted, in quotes, and prepended with a colon, like so:

Code:

stylesheet_link_tag("global.css", ":print");

The one downside to this implementation is that media cannot be specified for the default styles that are configured in the ocular config file. However, just make sure that, if you're using defaults, you use the ones with specified media tags after your default styles and it should work fine.

Hope that helps!

[eluser]Chad Crowell[/eluser]
Re: Stylesheets- yes I had screwed with the code trying to get it to work- but I had put everything pack to original during the process of writing the post and forgot to update the post before submitting. So, here is the code being rendered, and the styles are still not showing up:

Code:

<link rel="stylesheet" type="text/css" href="/assets/stylesheets/reset/styles">

I also noticed this in the ocular.php config file:

Code:

$config['OCU_stylesheet_path'] = "public/stylesheets/";
$config['OCU_javascript_path'] = "/public/javascripts/";
$config['OCU_images_path'] = "/public/images/";

Should the first line have a slash at the beginning? I tried it both ways and it doesn't seem to help.

Re: Passing variables- thanks for the further examples, I'll give them a try

And thanks for the media type update, that will be very helpful too...one request for the future, the ability to supply multiple stylesheets and specify which will have which media types. Might be something like ("reset,layout,styles,iecreen","print:print") - or similar.

[eluser]kilishan[/eluser]
Yes, the stylesheet path should have a slash at the beginning.

This may be a silly question, but where are your images and stylesheets stored? Are they in a "public" directory at the same level as your "system" directory? Oh, and is your app run from the root directory of the website, or from a sub-directory? A previous post made me realize I've done nothing to make this work if it's in a sub-directory, since the couple of projects that I've used it on are personal projects and sit in the root. Anyway, here's how my files are stored. Let me know where yours are located and we'll see if we can't get it working.

Code:

root directory
+ public
   - stylesheets
   - javscripts
   - images
+ system

It just occured to me that if you store your public files in a directory called "assets" at the root, the script is probably getting confused. Renaming your "assets" directory to something else should solve that particular problem.

Like I said, let me know how you've got it stored and we'll figure out what's going on....

[eluser]Chad Crowell[/eluser]
Thanks for the quick reply-

I actually used to use /assets/... for these 3 folders but changed to /public/... so I could use your system without modifications, to conform for future updates. My hierarchy is this:

root
+ application
+ public
- images
- javascripts
- stylesheets
+ system_abc