Philosophy behind the project:

Screenshot of ShiftEdit - Web Based IDE

These are some of the main features:

Code editor
The editor component is based on Mozilla’s Bespin. It has support for:

• Syntax highlighing for HTML/ CSS/ JS and PHP
• Block tabbing
• Undo/ Redo
• Line Numbers
• Jump to line
• + It’s very fast

(S)FTP support
There is a built-in FTP explorer which support FTP and SFTP.
You can create/ rename/ delete files and folders. You can also set file permissions.

Find/replace
Find and replace works across current or all open files. You can do text searches or regular expression searches.

Revision History
File revisions are stored whenever you save a file. You can then look back through past revisions and view a diff comparison.
You can then restore to an earlier version. Very useful if you or a colleague breaks something!

Website:
http://shiftedit.net/

Mailing list:
http://groups.google.co.uk/group/shiftedit?hl=en

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

ShiftEdit – Web Based IDE

Revision 1.11 serves a reworking of the form support on the basis of taglibs. Now generic definition of validators and filters on the basis of the observer pattern is supported and forms can be customised to own needs more easily.

The OR mapper GenericORMapper already added in the release 1.9 was extended with tools to automatically setup and update a database. Now the developer can completely concentrate on the development of the logic of the application since the storage of the objects is completely managed by the mapper.

Part of the performance optimisations of the releases were optimisations in the core of the frameworks and the reworking of the integrated BenchmarkTimer. It now supplies the developer with a better graphic representation of the measurements to find hot-spots within an application. Thus, an application can the optimally prepared for operation.

With appearance of the release 1.11 the support for PHP 4 was announced discontinuation and the compatibility with PHP 5.3 was improved. In the coming version 1.12 lies the focus on the extension of the new form support and the reworking of the configuration component.

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Adventure PHP Framework (APF) 1.11 released

1. in admin/build/blocks – click on the “add new block” tab

2. enter the following code:

<?php global $user; ?>
<?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> <?php print ($user->name); ?> <br>
<?php print l("Your Account",'user/'.$user->uid); ?> |
<?php print l("Log-Out","logout"); ?>
<?php else : ?>
<div id="usertabs">
<span class="utabs1">Log In</span><span class="utabs2"><a href="/user/register">Sign Up!</a></span>
</div>
<div id="umain">
<form action="/user?<?php print drupal_get_destination() ?>" method="post" id="user-login-form">
Username:
<input type="text" maxlength="60" name="name" id="edit-name" size="20" value="" tabindex="1" class="form-text required" />
<br>
Password:
<input type="password" name="pass" id="edit-pass" size="20" tabindex="2" class="form-text required" />
<br>
<span class="utabs3"><a href="/user/password" title="Forgot your password?">Forgot your password?</a></span>
<span><input type="submit" name="op" id="edit-submit" value="Log In" tabindex="3" class="form-submit" />
</span>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
</form>
</div>
<?php endif; ?>

This code originally came from: http://nossdutytask.com/node/240

There are also some nice examples at: http://nossdutytask.com/node/228

I modified the code to add some css IDs, classes, span tags, and also the text/links for the top tabs.

3. Select PHP code for the input and save the block.

4. From the main blocks page, click on “configure” for the block you just created. I selected to show this block only for “anonymous user” because I did not need the simplified display after the user has been logged in. The code generates a block that can also be customized to show the site status for authenticated users, but usually the navigation menu does this sufficiently. Enable the block and position it where you like in the display.

5. The rest is basically CSS – setting the image as the background for the login area and the tabs, positioning the text elements and fields. This example is based on a 250px wide column with a two column layout. It includes bold text on the display and overrides the default styling of the Drupal user login form elements.

There is a vertical-alignment fix to standardize the display in IE, and a 1px addition to the lower input field so that the form will align evenly on both ends. Add the following CSS to your theme in style.css, blocks.css, or wherever fits best.

#block-block-4 {
color: #fff;
}
#block-block-4 a {
color: #fff;
}
#umain {
font-weight: bold;
height: 127px;
width: 250px;
background: transparent url("../img/login_bg.jpg") no-repeat top left;
padding-top: 20px;
vertical-align: middle;
}
#usertabs {
height: 23px;
width: 250px;
background: transparent url("../img/tabs1.jpg") no-repeat top left;
}
#usertabs a {
color: #333;
}
.utabs1 {
font-weight: bold;
float: left;
padding-top: 4px;
padding-left: 25px;
}
.utabs2 {
font-weight: bold;
float: right;
color: #333;
padding-top: 4px;
padding-right: 60px;
}
.utabs3 {
font-weight: bold;
float: left;
padding-left: 25px;
padding-top: 4px;
}
#umain #edit-name {
margin-bottom: 5px;
width: 147px;
}
#umain #edit-pass {
margin-bottom: 10px;
width: 148px;
}

Note: the “block-block-4” value will be contingent on the name of the block that was created to input the custom PHP code of the login form.

IMAGES:

Upload to your theme’s “image” folder (in this case named ‘img’):

Tabs Background image: tabs1.jpg:

tabs1.jpg

Login Background image: login_bg.jpg

login_bg.jpg

7. To add a custom button, also upload and add this CSS:

#umain #edit-submit {
float: right;
margin-right: 20px;
background-color: transparent;
color: #333;
border: none;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
font-weight: bold;
background-image: url("../img/button1.jpg");
background-repeat: no-repeat;
height: 24px;
width: 58px;
cursor: pointer;
}

BUTTON IMAGE:

button1.jpg

button1.jpg

FINAL RESULT:

screenshot-login.jpg

Hopefully, this will save some people a lot of time and is also a good base for doing further customization with the background images and CSS.

FURTHER REFERENCES:

http://drupal.org/node/134319
http://drupal.org/node/19855
http://drupal.org/node/92657
http://drupal.org/node/84724

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Styling the Drupal User Login Block – PHP Code & CSS