Home > Developer > JavaScript
You also need to know about netive apps that can be used to develop Metro interfaces using JavaScript on Windows 8. In fact, OSX also provides similar functions,OS X v10.4 tiger providesDashboard ApplicationProgramTo add widgets. You can use the F4 hotkey to conveniently enable the dashboard. I have to say,Dashboard is also the birthplace of the well-known canvas Technology.
Small programs running on dashboard, fully usedHTML, Dom, CSS,JavascriptTechnology, so it can be said that these are completely difficult for front-end engineers. Apple also provides development IDE and dashcode.
Introduction to Part1 ide
1. Access the https://developer.apple.com/access the https://developer.apple.com/downloads/index.action after logging on with an Apple ID
You can see that there are many Developer Tools to search for dashcode download. The new version of dashcode can only run on the lion system. You need to download and install it.
Dashcode adheres to the Apple software style and is simple and easy to use.
2. Create a project and select dashboard customization. The following default files are generated by default.
Left panel
The first column is the name of this widget. front is the default panel of This widget in dashbord. Back corresponds to the Panel that is flipped by clicking the I icon in the lower right corner of the front panel. The two panels can be of different sizes.
Column 2:
Widget properties: You can configure the metadata, data, and network access capabilities of weigth.
Default image: corresponding to the background image. You can use an external tool to edit the image or import the image.
Widget icon: the icon corresponds to the icon in dashbord widget management.
Run and share: You can set system requirements.
Column 3: files and SDK files generated for the software. Developers can create their own CSS and JS files. Main.htmlthen refer to index.html in the website
3. buttons in the toolbar
Run: You can debug widgets in time.
Display: You can control the display items.
Checker: You can use this Panel to configure the ID class CSS attribute and event function (onclick) of the element after selecting the element in the attempt. However, we recommend that you use Dom to bind the event.
Resource Library: provides some UI space and JS shortcutsCode.
Work Zone
The upper part is an attempt; the lower part is an editing area, but it will change with the selected file.
Part2
The following describes how to develop a dashboard application.Perpetual Calendar. Script code: the code used by the post a few days ago
[JavaScript] It is a simple and easy-to-use calendar control. Pure JavaScript supports the chain syntax and the core code is only five lines.
The environment is exactly the same as the projects in our web development project, and there is no learning cost. Console APIs are also supported. alert information is displayed in the log.
1. Create a custom widget project. Do not forget to save it in real time or regret it. The software generates a file with the. dcproj extension. Delete the structure code generated by the software and add the structure.
The Code is as follows:
<Body onload = "load ();" apple-part = "com. apple. dashcode. part. stacklayout "> <Div id =" Front "> <Div class =" apple-no-Children "id =" info "apple-part =" com. apple. dashcode. part. infobutton "apple-default-image-visibility =" hidden "> </div> <Div id =" Cal ">2.modify the sample table main.css and try to use the Run Command to check the modification effect. It is worth mentioning that the software will automatically copy the images used to the image folder in the project.
There is nothing to say about style sheets.
3. Add behavior code.
Use the DOM listener to bind events to the elements, and read the behavior, structure, and performance separation.
First, copy the developed Cal class, and then develop the logic code.
A. By default, Main. JS is introduced in the head label, So we register events for domready so that we can use Dom to access elements.
Document. addeventlistener ('domainloaded', function () {}. BIND (document), false );
B. Let's declare the variables. There is nothing to say and everyone can understand them.
VaR d = new date, y = D. getfullyear (), H1 = This. queryselector ('h1 '), P = This. queryselector ('# Cal'), I = 12;
C. Generate 12 calendar instances and add them to corresponding nodes. Nothing to say
H1.innerhtml = Y + 'Year'; For (; I --;) {// console. log (12-i); CAL (p, {y: Y, M: 12-I, hastitle: 'false', hasfoot: 'true '});}
It was time to deploy the project to dashbord in the actual environment.
File deployment or Alt + command + s; the first deployment, the software will export an icals. wdgt file for you. Like installing widgets, the system will remind you to install Widgets. After you confirm the installation, the system will automatically go to the dashboard to see the results.
The ical provided for the system above and the icals developed for itself below.
Next, click Finish to add an icon for icals.
See the icon in the dashboard management interface.
How about it? It's pretty good.
The apple developer website also provides more templates for you to download and import.
Summary:
As you can see, there is no cost for developing dashbord widgets, but you only need to package the files using dashcode. As long as you are willing to develop many meaningful widgets. Dashcode can also be used to develop safari plug-ins and iOS applications. If there is a good model, you can also realize it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
